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 um corpo de texto, todos opcionais. Diferentemente das dicas de ferramentas e informações, os balões também têm uma cauda que identifica sua origem. Normalmente, a origem é um controle e, se assim for, ele é chamado de controle de proprietário.

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 fazer isso. Quaisquer problemas não tratados devem ser solucionados pela interface do usuário (IU) 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 em lista e modos de exibição em árvore. Outros tipos de controles são suficientemente bem restritos e não precisam dos balões de feedback adicionais que os balões oferecem. 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 são irrestritos e uma fonte comum de erros de ponto único.

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

Observação: as diretrizes relacionadas a notificações, dicas de ferramentas e de informações e mensagens de erro são apresentadas em artigos separados.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• As informações descrevem um problema ou condição especial? Caso contrário, use outro controle. Não use balões para exibir informações complementares para um controle. Considere usar texto estático,dicas de informação, divulgação progressiva ou prompts.
• O problema ou condição especial pode ser detectado imediatamente na entrada ou quando o controle do proprietário perde o foco da entrada? Caso contrário, use uma mensagem de erro exibida em uma caixa de diálogo de tarefa ou caixa de mensagem.
• Para problemas, o problema é crítico? Caso seja, use uma mensagem de erro exibida em uma caixa de diálogo de tarefa ou caixa de mensagem. 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, mas provavelmente não intencional? Nesse caso, os balões são apropriados. Para condições não válidas, é melhor evitá-las em primeiro lugar. Para as prováveis condições pretendidas, não há necessidade de fazer nada.
• O problema ou condição especial pode ser expresso de forma concisa? Caso contrário, use outro controle. Os balões não podem ter explicações detalhadas ou fornecer informações complementares.
• As informações descrevem o controle sobre o qual o mouse passou? Nesse caso, use uma dica, a menos que os usuários precisem interagir com a mensagem.
• As informações estão relacionadas à atividade atual do usuário? Caso contrário, considere usar uma notificação ou caixa de diálogo. É provável que os usuários ignorem os balões fora da atividade atual e, por padrão, os balões expiram após 10 segundos.
• A informação vem de uma fonte única e específica? Se um problema ou condição tiver várias fontes ou nenhuma fonte específica, use uma mensagem in-loco ou uma caixa de diálogo.

Incorreto:

Neste exemplo, o problema pode estar no nome de usuário ou na senha, mas relatar o problema com um balão sugere visualmente 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 para dicas de informações, caixas de diálogo e mensagens in-loco. Em contraste com dicas de ferramentas e informações:

• Os balões podem ser exibidos independentemente da localização atual do ponteiro, portanto, eles têm uma cauda que indica sua origem.
• Os balões têm um título, corpo de texto e um ícone.
• Os 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 nem exigem interação.
• Os balões identificam uma fonte única e 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 perceptíveis.
• Balões não exigem espaço de tela disponível ou o layout dinâmico necessário para exibir mensagens in-loco.
• Os balões são removidos automaticamente após um tempo-limite.

Padrões de uso

Os balões têm estes padrões de uso:

Uso	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.	o uso de balões para mensagens de erro não rouba o foco de entrada, mas ainda é muito perceptível se o controle do proprietário tiver foco de entrada. para corrigir o problema, o usuário pode ter que alterar ou reinserir a entrada. Contudo, se o controle do proprietário ignorar a entrada incorreta, o usuário pode não precisar 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 do 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 foi 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 ativar o Caps Lock por engano). É importante dar esse feedback sem roubar o foco da entrada ou forçar a interação, pois essas condições podem ser intencionais. esses balões são especialmente importantes para caixas de senha e rotação, nas quais os usuários estão trabalhando com o mínimo de feedback. esses balões têm um ícone de aviso. Um balão usado para informar uma condição especial.

Diretrizes

Quando exibir

• Exiba o balão assim que o problema ou condição especial for detectado, mesmo que repetidamente, sem qualquer atraso perceptível.
  • Para problemas que envolvem caracteres individuais ou o tamanho máximo de entrada, exiba o balão imediatamente na entrada.
  • Para problemas que envolvem o valor de entrada (incluindo a exigência de um valor que não esteja em branco), exiba o balão quando o controle do 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 uma distração e irritante.
• Exiba apenas um balão por vez. Exibir vários balões pode ser cansativo. Se um único evento resultar em vários problemas, apresente todos os problemas de uma vez ou informe apenas o problema mais importante.

Incorreto:

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

Tempo de exibição

• Remova um balão quando:
  • O problema tiver sido resolvido ou a condição especial tiver sido removida.
  • O usuário inserir dados válidos (para problemas de entrada).
  • O balão atingir o tempo-limite. Por padrão, os balões removem a si mesmos após dez segundos, embora os usuários possam alterar isso modificando o parâmetro SPI_MESSAGEDURATION do sistema.
• 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 exibam o contexto, incluindo o controle do 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 está sendo exibido de forma estranha acima do controle do proprietário.

Caixas de texto de senha e PIN

• Use um balão para indicar que o Caps Lock está ativado e o texto no exemplo a seguir:

Neste exemplo, um balão indica que o Caps Lock está ativado em uma caixa de texto de 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 em caixas de texto de senha e PIN do que em 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 essas restrições porque elas reduzem a segurança da senha ou do PIN. Para evitar a divulgação de informações, o balão deve mencionar apenas fatos documentados sobre senhas ou PINs válidos.

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ários e nomes de contas. As caixas de texto emitem um bipe 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 gerar 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	Nenhum ícone. Não usar um ícone de erro aqui é consistente com as diretrizes de tom do Windows.
  Condição especial	O ícone de aviso padrão de 16 x 16 pixels.

Acessibilidade

Quando usados corretamente, os balões aumentam 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 os usuários com baixa visão e minimiza a interrupção da leitura por leitores de tela.
• Exiba novamente o balão sempre que o problema ou a condição ocorrer novamente.

Text

Texto do título

• Use um texto de título que resuma 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 a finalidade do balão rapidamente e com o mínimo de esforço.
• Use fragmentos de texto ou frases completas sem pontuação final.
• Use a capitalização de estilo da frase. Para obter 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 a 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 estilo e tom, não há necessidade de usar a palavra "Por favor" nesta declaração. Coloque duas quebras de linha entre a primeira e a segunda frase.

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 a 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 que o usuário possa fazer, como quando caracteres incorretos são ignorados.
• Use frases completas com pontuação final.
• Use a capitalização 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

Ao se referir a balões:

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