Alertas

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes do tipo Alertas.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de interagir ou ler a tela é possível perceber que há uma mensagem importante?
O tipo de alerta é compreensível sem depender apenas de cor ou ícone?
O texto informa claramente o que aconteceu e o que a pessoa pode fazer?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Links ou botões dentro do alerta possuem feedback visual ao passar o mouse?
O alerta não cobre conteúdo essencial sem necessidade?
Alertas descartáveis possuem controle visível para fechar?

Projetando para uso com gestos

Controles dentro do alerta possuem área de toque confortável?
A mensagem continua visível tempo suficiente para ser lida?
Quando o alerta pode ser fechado, o toque fora dele não causa fechamento inesperado?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Componentes interativos dentro do alerta entram na ordem natural de foco?
O foco visível é preservado em links ou botões do alerta?
Ao fechar um alerta por teclado, o foco vai para um ponto previsível?

Projetando para uso com leitor de telas

Alertas críticos são anunciados de forma adequada?
Alertas informativos não interrompem a leitura sem necessidade?
Links, botões e mensagens de erro dentro do alerta possuem nomes claros?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Alertas.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Ler o alerta não exige interação.
Clicar em links ou botões internos executa a ação relacionada.
Clicar no controle de fechamento remove ou oculta o alerta quando aplicável.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

TAB deve alcançar apenas controles interativos dentro do alerta.
ENTER aciona links e botões internos.
Alertas puramente informativos não devem receber foco apenas para serem lidos.

Interação com teclado (ou gestos) + leitor de telas

Mensagens dinâmicas importantes podem usar role="alert".
Mensagens de status menos urgentes podem usar role="status".
Erros de formulário devem estar associados aos respectivos campos quando aplicável.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém alertas

Navegação por teclado

QUANDO um alerta aparece na tela
VEJO a mensagem e seu tipo visualmente indicados
ENTÃO, quando uso Tab
VEJO foco apenas nos controles interativos dentro do alerta, se existirem
ENTÃO, quando aciono um controle do alerta
VEJO que a ação correspondente é executada

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO a mensagem do alerta quando ela for crítica ou dinâmica.
- OUÇO links e botões internos com nomes claros.
- OUÇO a relação entre erro e campo quando o alerta estiver ligado a validação.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para navegar pelo componente, acontece o seguinte:
- OUÇO a mensagem do alerta quando ela for crítica ou dinâmica.
- Consigo navegar pelos controles internos quando existirem.
- OUÇO a relação entre erro e campo quando o alerta estiver ligado a validação.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Alertas.

Não use alerta para qualquer mensagem decorativa; reserve para informação relevante ao fluxo.
Evite alertas que desaparecem rápido demais ou sem controle da pessoa.
Não dependa apenas de cor para comunicar sucesso, erro, aviso ou informação.

Referências

Referências adicionais sobre componentes do tipo Alertas.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.