Diretrizes de caixas de diálogo

Artigo
05/18/2015

Uma amostra da aparência do controle de caixa de diálogo padrão

Descrição

Um diálogo de mensagem é um elemento sobreposto da interface do usuário que fornece uma superfície estável e contextual que é sempre modal e dispensada explicitamente. Os diálogos de mensagem aparecem na tela em uma localização consistente.

Exemplo

Uma captura de tela que ilustra o controle de caixa de diálogo padrão

Erros

Mensagens de erro que se aplicam ao contexto geral do aplicativo usam caixas de diálogo. Elas são diferentes das mensagens de erro, que podem ser transmitidas embutidas. Um exemplo apropriado é uma caixa de diálogo que mostra um erro de conectividade; isso afeta de maneira fundamental o valor que o usuário pode obter do aplicativo:

Exemplo de caixa de diálogo

Perguntas

Eis um exemplo de uma caixa de diálogo do agente de consentimento de dispositivo do Windows, solicitando o consentimento para uso de serviços de localização:

Exemplo de caixa de diálogo

O que fazer e o que não fazer

Use caixas de diálogo para transmitir informações urgentes que o usuário deve ver e confirmar antes de continuar. Um exemplo é: "Seu período de avaliação de recursos avançados expirou".
Use caixas de diálogo para apresentar perguntas de bloqueio que requerem a entrada do usuário. Uma pergunta de bloqueio é uma pergunta em que o aplicativo não pode fazer uma opção em nome do usuário e não pode continuar a preencher sua proposição de valor para o usuário. Uma pergunta de bloqueio deve apresentar opções claras para o usuário. Não é uma pergunta que possa ser ignorada ou adiada.
Use caixas de diálogo para solicitar ações explícitas do usuário ou para apresentar uma mensagem cujo reconhecimento pelo usuário é importante. Seguem alguns exemplos de uso de caixas de diálogo:
- O usuário está prestes a alterar um ativo valioso de forma permanente
- O usuário está prestes a excluir um ativo valioso
- A segurança do sistema do usuário pode ser comprometida
Use caixas de diálogo personalizadas quando o aplicativo ou o sistema deve investir um tempo significativo nas ações resultantes, de forma que o descarte acidental seria negativo em termos de confiança do usuário.
Todas as caixas de diálogo devem identificar claramente o objetivo do usuário na primeira linha do texto da caixa de diálogo (com ou sem um título).
Não use diálogos de mensagem quando o aplicativo precisar confirmar a intenção do usuário para uma ação que o usuário tomou. Em vez disso, um submenu é a superfície apropriada. Veja Diretrizes de submenus.
Não use diálogos de mensagem para erros que são contextuais a um local específico da página, como erros de validação (em campos de senha, por exemplo), use a própria tela do aplicativo para mostrar erros embutidos. Veja Selecionando as superfícies corretas da interface do usuário: erros.

Diretriz de uso adicional

Todas as caixas de diálogo devem identificar claramente o objetivo do usuário na primeira linha do texto da caixa de diálogo. As diretrizes a seguir explicam como usar os campos "titulo" e "conteúdo" da caixa de diálogo para transmitir informações efetivamente.

Título (instrução principal, opcional)
- Use um título curto para explicar o que as pessoas precisam fazer na caixa de diálogo. Títulos longos não terão quebra de linha e serão truncados.
- Se você está usando a caixa de diálogo para passar uma mensagem simples, de erro ou fazer uma pergunta, pode omitir o título. Utilize o texto do conteúdo para passar as informações principais.
- O título deve estar diretamente relacionado às opções de botão.
Conteúdo (texto descritivo)
- Apresente a mensagem, o erro ou a pergunta de bloqueio da maneira mais simples possível, sem informações em excesso.
- Quando é usado um título, use a área de conteúdo para fornecer mais detalhes ou definir a terminologia. Não repita o título com palavras um pouco diferentes.
Botões
- Use botões com texto que identifiquem respostas específicas para a instrução ou o conteúdo principal. Um exemplo é "Você permite que NomeDoAplicativo acesse o sua localização?", seguido pelos botões "Permitir" e "Bloquear". Respostas específicas podem ser entendidas mais rapidamente, resultando na tomada de decisão eficiente.
- Evite usar padrões genéricos como "OK/Cancelar".
- Especifique o botão padrão, que deve corresponder à ação que você quer que o usuário execute. No exemplo acima, "Permitir" é a escolha padrão.
  - Se não for especificado, o padrão serão o botão mais à esquerda.
  - Coloque a opção mais segura e conservadora na posição mais à direita. No exemplo acima, "Bloquear" é a escolha mais à direita, já que é a mais conservadora.
Cores
- As telas de fundo das caixas de diálogo são sempre brancas. As cores principais do aplicativo ao qual a caixa de diálogo pertence são usadas nos controles.