Balões

Um balão é uma pequena janela pop-up que informa os usuários sobre um problema não crítico ou condição especial em um controle.

Um balão típico.

Os balões têm um ícone, um título e corpo de texto, todos opcionais. Ao contrário das dicas de ferramentas e infodicas, os balões também têm uma cauda que identifica sua fonte. Normalmente, a fonte é um controle, se assim for, é referido como o proprietário controle.

Embora os balões informem os usuários sobre problemas não críticos, eles não evitam problemas, embora o controle do proprietário possa. Quaisquer problemas não tratados devem ser tratados pela interface do usuário (UI) do proprietário quando os usuários tentarem se comprometer com a ação.

Os balões geralmente são usados com caixas de texto ou controles que usam caixas de texto para alterar valores, como caixas de combinação, modos de exibição de lista e modos de exibição de árvore. Outros tipos de controles são suficientemente bem restritos e não precisam dos balões de feedback adicionais disponíveis. Além disso, se houver um problema com outros tipos de controles, geralmente envolve inconsistência entre vários controles, uma situação para a qual os balões não são adequados. Somente os controles de entrada de texto não são restritos e são uma fonte comum de erros de ponto único .

Uma notificação é um tipo específico de balão exibido por uma área de notificação ícone.

Nota: Diretrizes relacionadas a notificações de , dicas de ferramentas e infodicase mensagens de erro são apresentadas em artigos separados.

Este é o controlo correto?

Para decidir, considere estas questões:

• As informações descrevem um problema ou condição especial? Se não, use outro controle. Não use balões para exibir informações suplementares para um controle; Considere usar de texto estático ,dicas de informações, divulgação progressivaou prompts.
• O problema ou condição especial pode ser detetado imediatamente na entrada ou quando o controle proprietário perde o foco de entrada? Caso contrário, use uma mensagem de erro exibida em uma caixa de diálogo de tarefa ou caixa de mensagem.
• Para os problemas, o problema é crítico? Em caso afirmativo, use uma mensagem de erro exibida em uma caixa de diálogo ou mensagem de tarefa. Essas mensagens de erro exigem interação (o que é adequado para erros críticos), enquanto os balões não.
• Para condições especiais, a condição é válida e suscetível de não ser intencional? Se assim for, balões são apropriados. Para condições não válidas, é melhor preveni-las em primeiro lugar. Para prováveis condições pretendidas, não há necessidade de fazer nada.
• O problema ou condição especial pode ser expresso de forma concisa? Se não, use outro controle. Os balões não podem ter explicações detalhadas ou fornecer informações suplementares.
• As informações descrevem o controle que está sendo pairado no momento? Em caso afirmativo, use uma dica, a menos que os usuários precisem interagir com a mensagem.
• A informação está relacionada com a atividade atual do utilizador? Caso contrário, considere usar uma de notificação ou caixa de diálogo em vez disso. É provável que os usuários ignorem balões fora da atividade atual e, por padrão, os balões expiram após 10 segundos.
• A informação provém de uma única fonte específica? Se um problema ou condição tiver várias fontes ou nenhuma fonte específica, use um de mensagem in-loco ou uma caixa de diálogo.

Incorreto:

Neste exemplo, o problema pode ser com o nome de usuário ou a senha, mas relatar o problema com um balão visualmente sugere que apenas a senha é o problema. Consequentemente, o feedback de inserir um nome de usuário incorreto é enganoso.

Os balões são uma alternativa às dicas de informações, caixas de diálogo e mensagens no local. Em contraste com dicas de ferramentas e infodicas:

• Os balões podem ser exibidos independentemente da localização atual do ponteiro, para que tenham uma cauda que indique sua origem.
• Os balões têm um título, corpo de texto e um ícone.
• Balões podem ser interativos, enquanto é impossível clicar em uma dica.

Em contraste com as caixas de diálogo modais:

• Os balões não roubam o foco de entrada ou exigem interação.
• Os balões identificam uma única fonte específica. As caixas de diálogo modais podem ter várias fontes ou nenhuma fonte específica.

Em contraste com as mensagens in-loco:

• Os balões são mais percetíveis.
• Os balões não exigem espaço disponível na tela ou o layout dinâmico necessário para exibir mensagens no local.
• Os balões removem-se automaticamente após um tempo limite.

Padrões de utilização

Os balões têm estes padrões de utilização:

Utilização	Exemplo
Problema de entrada Um problema de entrada de usuário não crítico proveniente de um único controle de proprietário, geralmente uma caixa de texto.	Usar balões para mensagens de erro não rouba o foco de entrada, mas ainda é muito percetível se o controle proprietário tiver foco de entrada. Para corrigir o problema, o usuário pode ter que alterar ou reinserir a entrada; Mas se o controle proprietário ignora a entrada incorreta, o usuário pode não ter que fazer nenhuma alteração. Como o problema não é crítico, nenhum ícone de erro é necessário. Um balão usado para relatar um problema de entrada de usuário não crítico.
Condição especial O controle proprietário está em um estado que afeta a entrada. Esse estado provavelmente não é intencional e o usuário pode não perceber que a entrada é afetada.	Use balões para evitar frustração, alertando os usuários sobre condições especiais assim que elas acontecerem (por exemplo, exceder o tamanho máximo de entrada ou definir tampas bloqueadas por engano). É importante dar esse feedback sem roubar o foco da entrada ou forçar a interação, porque essas condições podem ser intencionais. Esses balões são especialmente importantes para caixas de senha e PIN, onde os usuários estão trabalhando com feedback mínimo. Estes balões têm um ícone de aviso . Um balão usado para relatar uma condição especial.

Orientações

Quando exibir

• Exiba o balão assim que o problema ou condição especial for detetado, mesmo que repetidamente, sem qualquer atraso percetível.
  • Para problemas envolvendo caracteres individuais ou o tamanho máximo de entrada, exiba o balão imediatamente na entrada.
  • Para problemas envolvendo o valor de entrada (incluindo a exigência de um valor não em branco), exiba o balão quando o controle proprietário perder o foco de entrada. Caso contrário, exibir balões enquanto os usuários estão inserindo entradas potencialmente válidas pode ser perturbador e irritante.
• Exiba apenas um balão de cada vez. A exibição de vários balões pode ser avassaladora. Se um único evento resultar em vários problemas, apresente todos os problemas de uma só vez ou relate apenas o problema mais importante.

Incorreto:

Neste exemplo, dois problemas são apresentados incorretamente ao mesmo tempo.

Quanto tempo para exibir

• Remova um balão quando:
  • O problema é resolvido ou a condição especial é removida.
  • O usuário insere dados válidos (para problemas de entrada).
  • O balão expira. Por padrão, os balões se removem após 10 segundos, embora os usuários possam alterar isso modificando o parâmetro SPI_MESSAGEDURATION system.
• Remova o tempo limite se os usuários não puderem continuar até que o problema seja resolvido. Desenvolvedores: No Win32, você pode definir o tempo de exibição com a mensagem TTM_SETDELAYTIME.

Como exibir

• Exiba balões abaixo do controle do proprietário. Isso permite que os usuários visualizem o contexto, incluindo o controle proprietário e seu rótulo. O Microsoft Windows ajusta automaticamente as posições dos balões para que fiquem completamente na tela. O comportamento padrão é exibir um balão acima do controle do proprietário, como feito com as notificações.

Correto:

Incorreto:

No exemplo incorreto, o balão é exibido estranhamente acima do controle do proprietário.

caixas de texto Palavra-passe e PIN

• Use um balão para indicar que Caps Lock está em, usando o texto no exemplo a seguir:

Neste exemplo, um balão indica que Caps Lock está ativado em uma caixa de texto PIN.

• Use um balão para indicar quando os usuários tentam exceder o tamanho máximo de entrada. Atingir o tamanho máximo de entrada é muito menos óbvio nas caixas de texto de senha e PIN do que nas caixas de texto comuns.

Neste exemplo, um balão indica que o usuário está tentando exceder o tamanho máximo de entrada.

• Use um balão para indicar quando os usuários inserem caracteres incorretos. No entanto, é melhor não ter tais restrições porque reduzem a segurança da senha ou PIN. Para evitar a divulgação de informações, o balão deve mencionar apenas fatos documentados sobre senhas ou PINs válidos.

de entrada incorreta

Neste exemplo, um balão indica que o PIN requer números.

Outras caixas de texto

• Considere o uso de um balão para indicar quando os usuários tentam exceder o tamanho máximo de entrada para caixas de texto curtas e críticas destinadas a usuários iniciantes. Os exemplos incluem nomes de usuário e nomes de conta. As caixas de texto emitem um sinal sonoro quando os usuários tentam exceder a entrada máxima, mas os usuários iniciantes podem não entender o significado do bipe.

Neste exemplo, um balão indica que o usuário tentou exceder o tamanho máximo de entrada.

Interação

• Quando os usuários clicam em um balão, basta descartá-lo sem exibir nenhuma outra interface do usuário ou ter qualquer outro efeito colateral. Ao contrário das notificações, os balões não devem ter botões de fechamento.

Ícones

• Escolha o ícone com base no padrão de uso:

  Padrão	Ícone
  Problema de entrada	Sem ícone. Não usar um ícone de erro de aqui é consistente com o tom do Windows diretrizes.
  Condição especial	O ícone de aviso padrão de de 16x16 pixels.

Acessibilidade

Quando usados corretamente, os balões melhoram a acessibilidade. Para que os balões sejam acessíveis:

• Exiba apenas balões relacionados à atividade atual do usuário.
• Mantenha o texto do balão conciso. Isso torna o texto do balão mais fácil de ler para usuários com baixa visão e minimiza a interrupção quando lido por leitores de tela.
• Exiba novamente o balão sempre que o problema ou condição se repetir.

de texto

Texto do título

• Use o texto do título que resume brevemente o problema de entrada ou a condição especial em linguagem clara, simples, concisa e específica. Os usuários devem ser capazes de entender o propósito do balão rapidamente e com o mínimo de esforço.
• Use fragmentos de texto ou frases completas sem pontuação final.
• Use maiúsculas no estilo de frase. Para mais informações, consulte o glossário .
• Use no máximo 48 caracteres (em inglês) para acomodar a localização. O título tem um comprimento máximo de 63 caracteres e deve ser capaz de expandir em pelo menos 30% para acomodar a localização.

Corpo do texto

• Use a primeira frase do corpo do texto para declarar o problema ou condição de uma forma que seja claramente relevante para o usuário. Não repita as informações no título. Omita isso se não houver mais nada a acrescentar.
• Use a segunda frase para indicar o que o usuário pode fazer para resolver o problema ou reverter o estado. De acordo com as diretrizes de de Estilo e Tom da, não há necessidade de usar a palavra Por favor nesta declaração. Coloque duas quebras de linha entre a primeira e a segunda frases.

Este exemplo mostra o layout de texto de balão padrão.

• Explique como resolver o problema ou reverter o estado, mesmo que essa explicação seja óbvia, mas omita redundância entre a declaração do problema e sua resolução. Exceções:
  • Omita a resolução se ela não puder ser expressa de forma concisa ou sem redundância significativa.
  • Omita a resolução se não houver nada para o usuário fazer, como quando caracteres incorretos são ignorados.
• Use frases completas com pontuação final.
• Use maiúsculas no estilo de frase.
• Use no máximo 200 caracteres (em inglês) para acomodar a localização. O corpo do texto tem um comprimento máximo de 255 caracteres e deve ser capaz de expandir em pelo menos 30% para acomodar a localização.

Documentação

Quando se refere a balões:

• Use o texto exato do título, incluindo maiúsculas.
• Consulte o componente como um balão, não como uma notificação ou um alerta.
• Sempre que possível, formate o texto do título usando texto em negrito. Caso contrário, coloque o título entre aspas apenas se necessário para evitar confusões.