Categorias do Site

Notificações Toast: Melhores Práticas para UX

Aprenda a usar notificações toast para melhorar a UX sem interromper o fluxo do usuário.

Smartphone com ícone de notificação sobre uma superfície de ladrilhos amarelos desgastados.

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

Notificação no celular

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:

InstânciaRazãoExemploAlternativas
1. Mensagens de status de alta prioridadeSe transmitidas com uma notificação toast, mensagens de status de alta prioridade podem ser facilmente perdidas se forem auto-desaparecer antes que o usuário as leiaUm usuário tenta fazer upload de uma foto, mas falha. Uma notificação toast dizendo: “Falha no upload da foto, por favor, tente novamente” seria facilmente perdidaMensagens de status de alta prioridade são melhores exibidas em contexto (por exemplo, mensagens de erro de formulário são melhores exibidas no componente do formulário), onde elas não desaparecem. Banners podem ser usados se não houver contexto particular
2. Exibir informações longas ou complexasNotificações toast são para mensagens breves que podem ser lidas e entendidas no tempo limitado que são mostradas na tela, não para exibir informações longas ou complexasSe um aplicativo de software passou por uma grande atualização com uma longa lista de alterações, tentar comunicar todas elas através de uma notificação toast seria muito obstrutivoLinkar para as alterações via notificação toast pode ser mais apropriado, mas depende do cenário exato

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

  • Notificações Toast: Melhores Práticas para UX

    Aprenda a usar notificações toast para melhorar a UX sem interromper o fluxo do usuário.

    Aprenda a usar notificações toast para melhorar a UX sem interromper o fluxo do usuário.

    Ler notícia completa
    Smartphone com ícone de notificação sobre uma superfície de ladrilhos amarelos desgastados.
  • 8 Snippets CSS & JS para Elementos Fixos

    Descubra 8 snippets de CSS e JavaScript para criar elementos fixos e melhorar a usabilidade do seu site.

    Descubra 8 snippets de CSS e JavaScript para criar elementos fixos e melhorar a usabilidade do seu site.

    Ler notícia completa
    Interface de usuário com título
  • Design Linear: Tendência SaaS que melhora o UI

    Descubra como o design linear está impactando o SaaS e melhorando a experiência de usuário.

    Descubra como o design linear está impactando o SaaS e melhorando a experiência de usuário.

    Ler notícia completa
    Adesivo ilustrado de uma caixa de lápis colorida sobre um fundo texturizado de pedras cinza-escuro.
  • Por que Restrições de Design São Úteis

    As equipes de design de produto enfrentam várias limitações, conhecidas como restrições de design, durante o processo de design de produto. Embora muitas restrições de design sejam inevitáveis, elas podem melhorar a qualidade do produto ao moldá-lo dentro de um escopo prático, acelerando o design/desenvolvimento e eliminando modificações tardias. Vamos entender as restrições de design […]

    Descubra como restrições de design podem melhorar a qualidade e eficiência de produtos digitais.

    Ler notícia completa
    Gráfico estilizado com ícones sobrepostos representando dispositivos e comunicação digital, com um lápis à direita, em um fundo gradiente laranja e amarelo.
  • Lições da Big Tech para Saúde com Sriharsh Boddapati

    Sriharsh Boddapati é Diretor Sênior de Produto e Engenharia na CareSource, uma empresa inovadora de saúde. Iniciou sua carreira em engenharia de software na Societe Generale antes de obter seu mestrado em Carnegie Mellon. Trabalhou na Meta em iniciativas de integridade focadas em violações de anúncios e conteúdo. Em nossa conversa, Sriharsh fala sobre como […]

    Sriharsh Boddapati aplica princípios de big tech na saúde, focando em design humanizado e inovação.

    Ler notícia completa
    Design gráfico com foto de um homem sorridente, texto
  • Princípio de Substituição de Liskov: Guia Completo

    Os princípios SOLID são considerados regras de ouro para criar um código robusto e flexível. Criados pelo renomado Robert C. Martin, eles são fundamentais para um design orientado a objetos limpo e sustentável: Princípio da Responsabilidade Única (SRP) Princípio Aberto/Fechado (OCP) Princípio de Substituição de Liskov (LSP) Princípio da Segregação de Interfaces (ISP) Princípio da […]

    Descubra o Princípio de Substituição de Liskov e como ele garante a robustez e flexibilidade do código em design orientado a objetos.

    Ler notícia completa
    Cubo tridimensional com texturas de fumaça em tons de roxo, azul e rosa, contendo as letras
  • Carrosséis CSS modernos: sem JavaScript

    Historicamente, criar sliders ou carrosséis significava lidar com JavaScript, problemas de acessibilidade e tentativas de minimizar mudanças de layout. Bibliotecas externas ajudavam, mas prejudicavam o desempenho, customização e tempo de carregamento. Mesmo com plugins corretos, ainda era preciso gerenciar estados de foco, suporte a leitores de tela e comportamento de encaixe manualmente. Este artigo explora […]

    Descubra como criar carrosséis CSS funcionais sem JavaScript, melhorando a acessibilidade e desempenho.

    Ler notícia completa
    Texto
  • Futuro Promissor para a Pesquisa UX

    Qual é o caminho da pesquisa UX? Imagine se, em meio ao pessimismo, o futuro da pesquisa UX estivesse brilhante. Não é apenas um exercício de pensamento positivo: para alcançar um futuro esperançoso, é preciso primeiro visualizá-lo. Apesar da incerteza atual, há motivos para acreditar que o presente não é tão ruim assim: Os níveis […]

    Explore o futuro da pesquisa UX e como ela pode evoluir para se adaptar às mudanças do mercado.

    Ler notícia completa
    Uma vista aérea de um parque com vários caminhos interligados e árvores esparsas sobre a grama, ao entardecer.
  • Os Fãs do Figma: Design com Paixão e Auto-Layouts

    Todos já encontramos aqueles designers que defendem o Figma como se fosse a ferramenta sagrada do design. Eles dizem, “Ah, não sei, o Figma só facilita tudo”, como se o resto de nós ainda estivesse na Idade da Pedra. O designer “Eu só uso Figma” é mais que um designer; ele é um cruzado, um […]

    Descubra o mundo dos designers que vivem e respiram Figma, defendendo suas funções e tentando converter outros ao seu estilo.

    Ler notícia completa
    Homem sorridente com óculos, apontando para cima, sentado à mesa com laptop e xícara, em fundo neutro com ícones gráficos.