Balões

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Um balão é uma pequena janela pop-up que informa aos usuários sobre um problema não crítico ou uma 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. Ao contrário das dicas de ferramentas e dicas de informações, os balões também têm uma cauda que identifica sua origem. Normalmente, a origem é um controle se for o caso, ele é conhecido como o 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 de proprietário possa. Quaisquer problemas sem tratamento devem ser tratados pela interface do usuário do proprietário quando os usuários tentam se comprometer com a ação.

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, exibições 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 comentários adicionais. 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 .

Nota: Diretrizes relacionadas a notificações, dicas de ferramentas e dicas 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 uma condição especial? Se não, use outro controle. Não use balões para exibir informações complementares para um controle; considere usar texto estático, dicas de informações, divulgação progressiva ou prompts.
• O problema ou a condição especial podem ser detectados imediatamente na entrada ou quando o controle de proprietário perde o foco de entrada? Caso contrário, use uma mensagem de erro exibida em uma caixa de diálogo ou mensagem de tarefa.
• Para problemas, o problema é crítico? Nesse caso, use uma mensagem de erro exibida em uma caixa de diálogo ou mensagem de tarefa. Essas mensagens de erro exigem interação (que é adequada 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, balões são apropriados. Para condições não válidas, é melhor impedi-las em primeiro lugar. Para condições pretendidas prováveis, não há necessidade de fazer nada.
• O problema ou a condição especial podem ser expressos de forma concisa? Se não, use outro controle. Balões não podem ter explicações detalhadas nem fornecer informações complementares.
• As informações descrevem o controle que está sendo focalizado no momento? 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 balões fora da atividade atual e, por padrão, os balões atingissem o tempo limite após 10 segundos.
• As informações vêm de uma única fonte 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 ser com o nome de usuário ou a senha, mas relatar o problema com um balão sugere visualmente que apenas a senha é o problema. Consequentemente, os comentários da inserção de um nome de usuário incorreto são enganosos.

Balões são uma alternativa a dicas de informações, caixas de diálogo e mensagens in-loco. Ao contrário das dicas de ferramentas e dicas de informações:

• Os balões podem ser exibidos independentemente do local do ponteiro atual, portanto, eles têm uma cauda que indica sua origem.
• Os balões têm um título, um corpo de texto e um ícone.
• Os balões podem ser interativos, enquanto é impossível clicar em uma dica.

Ao contrário das caixas de diálogo modais:

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

Ao contrário das mensagens in-loco:

• 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.	usar balões para mensagens de erro não rouba o foco de entrada, mas ainda é muito perceptível se o controle de proprietário tiver o foco de entrada. para corrigir o problema, o usuário pode ter que alterar ou reinserir a entrada; mas se o controle de proprietário ignorar a entrada incorreta, talvez o usuário não precise fazer nenhuma alteração. porque 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 de 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 ocorrerem (por exemplo, excedendo o tamanho máximo de entrada ou configurando caps lock por engano). é importante fornecer esses comentários sem roubar o foco de 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 fixação, em que os usuários estão trabalhando com comentários mínimos. esses balões têm um ícone de aviso. Um balão usado para relatar uma condição especial.

Diretrizes

Quando exibir

• Exiba o balão assim que o problema ou a condição especial for detectado, mesmo que repetidamente, sem nenhum atraso perceptí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.
• Exibe apenas um balão por vez. A exibição de vários balões pode ser esmagadora. 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 exibir

• Remova um balão quando:
  • O problema foi resolvido ou a condição especial foi removida.
  • O usuário insere dados válidos (para problemas de entrada).
  • O balão atinge o tempo limite. Por padrão, os balões são removidos após 10 segundos, embora os usuários possam alterá-lo modificando o parâmetro SPI_MESSAGEDURATION 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

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

Correto:

Incorreto:

No exemplo incorreto, o balão é exibido desajeitadamente acima de seu controle de proprietário.

Caixas de texto senha e PIN

• Use um balão para indicar que Caps Lock está ativado, 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 em caixas de texto de senha e PIN do que 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 inseriram 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 menção apenas fatos documentados sobre senhas válidas ou PINs.

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

Outras caixas de texto

• Considere usar um balão para indicar quando os usuários tentam exceder o tamanho máximo de entrada para caixas de texto críticas e curtas destinadas a usuários iniciantes. Os exemplos incluem nomes de usuário e nomes de conta. As caixas de texto empam 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 ignorar o balão 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	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 aprimoram a acessibilidade. Para que os balões sejam acessíveis:

• Exibe apenas balões relacionados à atividade atual do usuário.
• Mantenha o texto do balão conciso. Isso facilita a leitura do texto do balão para usuários com visão insuficiente e minimiza a interrupção quando lido por leitores de tela.
• Reproduz o balão sempre que o problema ou a condição se repetir.

Texto

Texto do título

• Use o texto do título que resume brevemente o problema de entrada ou a condição especial em um idioma claro, simples, conciso e específico. 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 com estilo de 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 de texto

• Use a primeira frase do texto do corpo para declarar o problema ou a condição de uma forma claramente relevante para o usuário. Não repita as informações no título. Omita isso se não houver mais nada a adicionar.
• Use a segunda frase para declarar o que o usuário pode fazer para resolve o problema ou reverter o estado. De acordo com as diretrizes de Estilo e Tom , não é necessário usar a palavra Por favor nesta instruçã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 resolve o problema ou reverter o estado, mesmo que essa explicação seja óbvia, mas omita a redundância entre a instruçã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 a capitalização com estilo de frase.
• Use no máximo 200 caracteres (em inglês) para acomodar a localização. O texto do corpo 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 sua capitalização.
• 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.