Toasts

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 Toasts.

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 desaparecer, a mensagem é curta, clara e suficiente?
O toast não contém informação essencial que a pessoa precise consultar depois?
O tipo de mensagem é compreensível sem depender apenas de cor?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Quando houver ação ou fechar, há feedback visual no controle?
A mensagem não cobre controles importantes da tarefa atual?
É possível pausar, fechar ou acessar a ação quando o toast permanece temporário?

Projetando para uso com gestos

Controles do toast têm área de toque adequada?
O tempo de exibição é suficiente para leitura?
O toast não aparece em posição que atrapalhe teclado virtual ou conteúdo importante?

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

Controles internos entram na ordem de foco somente se forem realmente necessários?
O foco não é movido automaticamente para o toast sem necessidade?
É possível acionar ação ou fechamento por teclado quando existirem?

Projetando para uso com leitor de telas

A mensagem é anunciada sem interromper excessivamente a leitura?
Ação ou fechamento são anunciados como controles claros?
O conteúdo temporário não impede a pessoa de continuar o fluxo principal?

Métodos de Interação

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

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

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

Toasts informativos podem aparecer sem exigir interação.
Clicar em uma ação do toast executa a ação relacionada.
Clicar em fechar remove a mensagem quando aplicável.

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

O foco não deve ser sequestrado para toast puramente informativo.
Se houver ação, ela deve ser alcançável por teclado enquanto o toast estiver disponível.
ENTER ou SPACE aciona botões internos.

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

Mensagens de status podem usar região viva educada.
Mensagens críticas devem avaliar se toast é realmente o padrão correto.
A mensagem não deve sumir antes de ser percebida ou antes de a ação ser usada.

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 toasts

Navegação por teclado

QUANDO um toast aparece após uma ação
VEJO a mensagem temporária sem perder o foco atual
ENTÃO, quando o toast possui ação ou botão fechar e uso Tab
VEJO que consigo alcançar e acionar o controle enquanto ele estiver disponível

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO a mensagem quando ela representa uma atualização relevante.
- OUÇO controles internos com nomes claros quando existirem.
- Não perco o contexto de foco da tarefa principal sem necessidade.
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 quando ela representa uma atualização relevante.
- Consigo chegar à ação do toast quando ela existir.
- Não perco o contexto da tarefa principal sem necessidade.
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 Toasts.

Não use toast para erros críticos, confirmação destrutiva ou conteúdo que exige decisão obrigatória.
Cuidado com tempo de desaparecimento automático.
Ações dentro de toast precisam continuar disponíveis tempo suficiente para uso com teclado e leitor de telas.

Referências

Referências adicionais sobre componentes do tipo Toasts.

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.