Se decidir quando usar notificações toast parece tão complicado quanto fazer a torrada perfeita, você não está sozinho!

Escolher o tipo certo de notificação para implementar no seu design pode ser desafiador, pois é um elemento crucial para garantir uma experiência de usuário suave. Este artigo irá guiá-lo pelos meandros das notificações toast. Você aprenderá os cenários apropriados para usá-las, melhores práticas, armadilhas comuns e exemplos práticos de produtos familiares.

O que é uma notificação toast?

Em termos simples, notificações toast são mensagens de status que se auto-desaparecem, usadas para transmitir informações sem interromper o fluxo de trabalho do usuário. Elas são chamadas de “toast” porque “pulam” na tela como uma torrada! Ao contrário dos pop-ups/diálogos, as notificações toast são projetadas para serem discretas e não exigem que o usuário as feche. Elas desaparecem automaticamente em segundos.

Outros tipos de pop-up incluem modais, banners e snackbars:

• Modais — Tornam o documento principal inerte até serem descartados
• Banners — Mensagens persistentes que fazem parte do documento principal e geralmente ficam no topo da tela
• Snackbars — Semelhante aos toasts, mas interativos e descartáveis
• Notificações Toast — Apenas uma mensagem de status simples que se desfaz após alguns segundos

Casos de uso apropriados para notificações toast

Considere os seguintes cenários para ajudar a saber quando usar notificações toast:

Cenário 1: Para confirmar uma ação realizada

Notificações toast são ideais para confirmar ações concluídas, pois são breves e fornecem feedback instantâneo. Usuários recebem garantia imediata de que sua ação pretendida, como enviar um e-mail ou atualizar o perfil, foi bem-sucedida.

Cenário 2: Para apresentar ações secundárias opcionais

As notificações toast são ótimas para apresentar aos usuários ações secundárias junto com a mensagem. A brevidade das notificações toast garante que essas opções sejam facilmente notadas e entendidas, mas se o usuário não tiver a chance de interagir antes que a notificação desapareça, não há problema.

Cenário 3: Para apresentar alertas menores

Embora as notificações toast devam ser discretas, elas ainda podem chamar a atenção do usuário sem interromper sua tarefa atual. Isso as torna adequadas para transmitir alertas menores, como alertas de clima/trânsito e mensagens/notificações recebidas que os usuários possam querer saber, mas que não estão relacionadas ao que estão fazendo no momento.

Armadilhas comuns: Quando não usar notificações toast

Em certos cenários, optar por usar uma notificação toast pode ser como usar uma colher quando você precisa de uma faca: ineficaz na melhor das hipóteses ou absolutamente obstrutivo na pior. A tabela abaixo mostra duas instâncias em que seria impraticável usar notificações toast:

Como o uso inadequado das notificações toast afeta a experiência do usuário?

Você ainda está se perguntando por que é importante usar notificações toast adequadamente em seus designs?

Bem, isso é importante porque as notificações toast são projetadas para serem discretas, tornando menos provável que os usuários as notem adequadamente. Além disso, elas carecem de um senso de urgência e podem ser descartadas acidentalmente, fazendo com que os usuários percam informações críticas.

Já vi casos em que designers usaram inadequadamente notificações toast para transmitir tentativas de login falhadas. Deixe-me ilustrar por que isso está longe de ser ideal.

Imagine isto: você está tentando entrar no aplicativo móvel do seu banco para fazer um pagamento em uma loja. Após digitar sua senha, você olha brevemente para perguntar algo ao caixa. Neste momento, a tela exibe uma notificação toast dizendo: “usuário ou senha incorretos”, então ela desaparece após alguns segundos.

Quando você volta sua atenção para o telefone, fica confuso sobre por que ainda não entrou no aplicativo do banco. Talvez você ache que esqueceu de pressionar enter, então pressiona novamente, verificando rapidamente seus bolsos para garantir que não perdeu suas chaves do carro. No entanto, quando você olha de volta para o telefone, ainda não está conectado.

O que está acontecendo?

Este cenário reflete a realidade de como nossos clientes normalmente interagem com nossos produtos — lendo por cima, escaneando ou não prestando atenção total a cada detalhe da tela. É por isso que é crucial empatizar com seus usuários para ajudar a tomar decisões informadas ao implementar notificações.

Melhores práticas para projetar notificações toast

Para aproveitar os benefícios das notificações toast, tente seguir estas três melhores práticas:

Coloque as notificações toast fora do caminho

Elas não devem ser intrusivas. Em vez disso, devem ser colocadas no canto da tela. Os usuários esperam que elas estejam no canto inferior direito, mas se essa opção obstruir algo importante na tela, o canto superior direito também é aceitável. As notificações toast sempre vão obstruir algo, então não se preocupe muito com isso.

Ajuste o tempo de auto-desaparecimento

Não há uma regra fixa para o tempo. Depende da situação, então recomendo seguir o que parece certo. Considere a quantidade de conteúdo (que não deve ser muito), se há ações para os usuários considerarem e quantas toasts podem ser exibidas ao mesmo tempo. A atenção dos usuários dura de três a oito segundos para notificações do tipo marketing, então isso é algo a se ter em mente.

Mantenha as notificações toast com aparência neutra

Lembre-se, as notificações toast não são críticas, então você não deve se sentir compelido a usar cores de reforço positivo ou negativo. As toasts devem ser bastante neutras em termos de tipografia e elementos interativos. Mantenha-as simples. Ícones claros e descritivos são aceitáveis, se houver espaço.

Como tornar as notificações toast acessíveis

A acessibilidade, de acordo com os padrões das Diretrizes de Acessibilidade para Conteúdo Web (WCAG), é um direito humano e lei em muitos países. Para esse fim, certifique-se de:

Sugira HTML semântico

Código não é sua responsabilidade como designer UX. Dito isso, a web está evoluindo rapidamente e novos recursos que os desenvolvedores podem ainda não conhecer estão fazendo um ótimo trabalho em fornecer acessibilidade desde o início, então por que não mencioná-los durante o processo de entrega do design?

Um desses recursos é o Popover, que permite aos desenvolvedores criar diálogos não modais, o que é exatamente o que é necessário para criar notificações toast. Popovers são acessíveis, o que significa que recebem foco automaticamente, têm os atributos ARIA corretos (aria-expanded, aria-details e o papel de grupo) já, podem ser dispensados usando a tecla esc (se necessário) e o foco é automaticamente retornado após a dispensa.

Basicamente, eles são compatíveis com leitores de tela desde o início.

Sugira evitar transições para aqueles que preferem movimento reduzido

Quando as notificações toast aparecem, você vai querer transicioná-las sutilmente para garantir que os usuários as notem. Um simples deslizamento a partir de fora da tela deve funcionar bem — qualquer coisa além disso provavelmente irá incomodar os usuários.

No entanto, você deve sugerir que os desenvolvedores usem a media query prefers-reduced-motion para desabilitar a transição para aqueles que podem ficar enjoados com efeitos de movimento.

Auto-desaparecimentos não são acessíveis — aqui está como lidar com eles

Você tem várias opções. Você só precisa fornecer uma delas:

• Permitir que os usuários desativem o limite de tempo antes de encontrá-lo (por exemplo, nas configurações)
• Permitir que os usuários ajustem o limite de tempo antes de encontrá-lo (a extensão deve ser pelo menos dez vezes a configuração padrão)
• Dar aos usuários pelo menos 20 segundos para estender o limite de tempo em pelo menos dez vezes a configuração padrão com uma ação simples, como pressionar uma tecla

Você está isento dessas regras se nenhuma alternativa ao limite de tempo for possível (por exemplo, se for parte de um evento em tempo real, como um leilão), ou se o limite de tempo for superior a 20 horas.

FAQs sobre notificações toast

Abaixo você encontrará as respostas para algumas das perguntas mais frequentes sobre notificações toast:

Por que algumas notificações são chamadas de toasts?

Quando uma notificação aparece, mas depois desaparece (geralmente após alguns segundos), isso é chamado de notificação toast. Como você pode ter adivinhado, isso é porque quando a torrada está pronta, ela aparece por um segundo e depois desaparece dentro da torradeira. Um nome bem divertido, na verdade.

Qual é a diferença entre um toast e um banner?

Os toasts são posicionados fixamente (geralmente no canto inferior direito da tela), enquanto os banners geralmente aparecem desanexados na parte superior do documento principal. Os toasts são para alertas e mensagens em tempo real, enquanto os banners são para os contínuos.

Qual é a diferença entre um toast e um snackbar?

Ao contrário dos snackbars, os toasts são auto-dispensáveis. Por essa razão, os snackbars são mais propensos a ter elementos interativos, como links e botões, embora seja aceitável incluí-los em toasts, desde que não façam algo importante. Caso contrário, eles são exatamente iguais.

Considerações finais

E aí está, um guia abrangente sobre notificações toast: quando usá-las, como usá-las e quando é melhor considerar alternativas.

Como você aprendeu, as notificações toast são cruciais para fornecer feedback, confirmação, alertas e atualizações aos usuários. Quando usadas de forma eficaz, podem melhorar a experiência do usuário, fornecendo informações oportunas e relevantes sem interromper seu fluxo de trabalho.

Lembre-se, notificações toast eficazes:

• São colocadas fora do caminho (geralmente no canto inferior direito)
• Exibem por um tempo apropriado antes de serem auto-dispensadas
• Devem ter aparência neutra, comunicando uma mensagem simples e não crítica
• Podem ter elementos interativos, mas estes também devem ser não críticos
• Devem ser acessíveis, embora isso caia sob a jurisdição dos desenvolvedores

Seguindo essas melhores práticas e dicas, você estará bem encaminhado para criar ótimas notificações toast.

Fonte da imagem do cabeçalho: IconScout