Notificações toast são um UX ruim
(maxschmitt.me)- A principal fraqueza das notificações toast é que o ponto de atenção atual do usuário e o local do feedback ficam separados, dificultando associar imediatamente o resultado à ação recém-executada
- No fluxo de salvamento do YouTube, o olhar se desloca do botão Save à direita para o modal no centro e depois para o toast no canto inferior esquerdo, interrompendo a interação, e não há indicador de carregamento durante a espera
- Após alterar uma caixa de seleção, é preciso esperar o toast anterior desaparecer para ver a mensagem de confirmação mais recente, e o botão Undo do toast também é desnecessário quando bastaria clicar novamente na caixa de seleção
- Uma forma melhor é colocar o feedback no próprio local da ação, exibindo a playlist abaixo do botão e mostrando um indicador de carregamento durante a alteração da caixa de seleção para indicar o progresso
- Pior do que um toast é não haver feedback algum, então, se não houver tempo para projetar ou implementar um feedback melhor, um toast ainda é melhor do que nada
O problema básico dos toasts
- Notificações toast geralmente aparecem longe do local para onde a atenção do usuário está voltada
- Quando o feedback aparece em um lugar diferente do botão que acabou de ser pressionado ou da área que está sendo editada, fica difícil para o usuário entender a ligação entre ação e resultado
Problemas no fluxo de salvamento do YouTube
- No exemplo do YouTube, o usuário clica no botão Save no lado direito da tela e, em seguida, passa a olhar para o modal no centro da tela e depois para o toast no canto inferior esquerdo
- Esse fluxo desloca o olhar para vários lugares e também torna o feedback mais difícil de entender imediatamente
- O toast atrasa sem indicador de carregamento
- Ao marcar ou desmarcar uma caixa de seleção no modal, é preciso esperar vários segundos até o toast anterior desaparecer para ver o toast de confirmação mais recente
- O botão Undo do toast é desnecessário, porque o usuário pode simplesmente clicar novamente na caixa de seleção
Como resolver sem toasts
- Mesmo um redesenho simples pode oferecer o mesmo feedback sem usar toast
- Exibir a playlist logo abaixo do botão, em vez de em um modal
- Mostrar um indicador de carregamento enquanto a caixa de seleção está sendo marcada ou desmarcada
- Quando o indicador de carregamento desaparecer, isso comunica naturalmente que a ação foi concluída
- Como o feedback permanece no local que o usuário está manipulando, não há necessidade de um toast separado
Casos do Gmail e de feedback de cópia
- No Gmail, ao arquivar um e-mail, aparece um toast de confirmação
- Mas o simples fato de o e-mail desaparecer da lista já informa que o arquivamento foi bem-sucedido
- Ainda assim, o toast pode ser útil para a função de desfazer e no uso de atalhos de teclado
- Também há casos em que um toast é exibido depois de copiar algo para a área de transferência
- No exemplo, o próprio botão já inclui o estado de confirmação, então o toast é completamente desnecessário
Ainda assim, feedback é necessário
- Pior do que um toast é não haver feedback nenhum
- Se não houver tempo para projetar ou implementar um mecanismo de feedback melhor, um toast ainda é melhor do que nada
Como o Cakedesk evitou toasts
- Cakedesk é um app de faturas offline-first, sem assinatura, que permite enviar e-mails dentro do próprio app
- Em vez de dar feedback com um toast após pressionar o botão Send do e-mail, o fluxo foi projetado para que a mudança de estado continue dentro da mesma interação
- Faturas ainda não enviadas exibem um botão Send na lista
- Durante o envio do e-mail, o modal permanece aberto e o botão de envio mostra o estado de envio em andamento
- Quando o envio é bem-sucedido, o e-mail sai da tela com uma animação, indicando que o envio foi concluído
- O botão Send na lista muda para uma caixa de seleção Paid, permitindo confirmar que o e-mail foi enviado e levando à próxima ação útil
- O usuário também pode pressionar o botão de contexto para verificar se o e-mail foi enviado
2 comentários
Então o problema é que os toasts ruins é que são ruins, né??
Opiniões no Hacker News
https://en.wikipedia.org/w/index.php?title=Toast_(computing)
Não me convenceu. A maior parte do argumento parece ser que UX redundante é UX ruim
Quando você arquiva um e-mail e ele some da lista, isso já sugere sucesso; ou quando há uma marca de verificação no botão, o toast seria desnecessário — acho difícil concordar fortemente com esses exemplos. Comunicar a mesma coisa de formas diferentes ao mesmo tempo não é bug, é funcionalidade, e isso existe na linguagem humana em geral também. Porque permite que a mensagem chegue mesmo em condições não ideais
O toast informa o estado de todas as ações de uma forma padrão única e, quando possível, ainda oferece desfazer, então ajuda o usuário a aprender rapidamente o padrão. Sinais adicionais perto da ação também têm valor, mas muitas vezes o significado fica mais claro quando estão junto com o toast. Se você eliminar os toasts e os substituir por vários indicadores específicos, o usuário terá que aprender, só pelo contexto, várias formas diferentes de dizer “agora terminou”. Isso pode ser especialmente ruim para idosos, pessoas com deficiência visual e crianças
Desde que não seja realmente intrusivo, toast não é UX ruim, e sim UX redundante, e o designer de UX não deveria ficar obcecado em eliminar redundância
No exemplo do YouTube, a caixa de seleção é 100% uma atualização otimista, e a notificação toast significa que a requisição enviada ao backend de forma assíncrona teve sucesso. Arquivar e-mail é a mesma coisa: a mensagem é removida da lista de forma otimista, e o toast indica que ela foi realmente arquivada
Eu preferiria receber um toast só quando falhasse ao confirmar a mudança. Normalmente, quando um toast pisca na tela, ele tira minha atenção do que estou tentando fazer, e se estiver visualmente distante do local onde a ação aconteceu, fica ainda mais dispersivo
A mensagem deve ficar onde a atenção do usuário já está. A UI já guiou meu olhar até ali, então mostre ali
A lição é: não envie ao usuário informações que não sejam estritamente necessárias
Leitura adicional:
https://en.wikipedia.org/wiki/Banner_blindness
https://en.wikipedia.org/wiki/Alarm_fatigue
https://en.wikipedia.org/wiki/Inattentional_blindness
https://en.wikipedia.org/wiki/Habituation
No pior caso, o toast faz sentido como último recurso quando é preciso comunicar algo ao usuário sem contexto. Por exemplo, se o usuário desmarcou uma playlist, fechou a lista de playlists enquanto salvava, e o salvamento falhou, então o contexto da ação desapareceu, e nesse caso faz sentido um toast exibindo a informação em algum lugar arbitrário da tela
Ainda assim, se você quer que o usuário entenda corretamente o erro, há uma boa chance de que o toast não seja a melhor opção. Em apps baseados em anúncios, como o YouTube, em que o usuário é o produto, talvez eles não se importem muito — ou até prefiram — que o usuário deixe passar esse tipo de erro; mas, num app de trabalho, você provavelmente não vai querer apostar que o usuário perca o toast ou o confunda com outro erro. Em geral, é mais útil reabrir o elemento correspondente e mostrar o erro dentro do contexto. Você pode abrir a lista de playlists e usar uma animação para chamar atenção para o fato de que a alteração não foi salva. Pode ser um idealismo difícil de implementar de forma sistemática, mas, idealmente, o usuário deveria sempre ver o erro dentro do contexto
O pior aspecto é que os toasts desaparecem rápido demais e chamam atenção desnecessariamente até para ações em que o sucesso já é esperado. Juntar as duas coisas é especialmente irritante. A sua atenção é tomada sem necessidade, mas o aviso some tão rápido que você nem consegue saber se havia algo realmente importante ali. Há também a variação em que ele fica tempo demais na tela e cobre justamente uma parte da UI que você queria ver e usar naquele momento
O jeito tradicional do desktop é melhor. Mensagens de erro aparecem em modal para não passarem despercebidas, e mensagens de sucesso aparecem como texto comum, sem atrapalhar, em uma barra de status sempre visível e sem limite de tempo. Sem um modal de erro, o usuário pode presumir que a ação deu certo e, se quiser confirmar, pode verificar a barra de status sem pressão de tempo. Também dá para incluir informações adicionais
Alguns apps ainda mostram um pop-up com o histórico das mensagens da barra de status. Nesse modelo, a barra de status funciona como a última linha de saída de um terminal de linha de comando, e saídas anteriores também podem ser recuperadas
Muitas vezes eu entro nas notificações para tentar ver o que perdi. Parecia importante, mas eu não tive tempo suficiente para ler tudo. Ao tocar em um item que parece uma mensagem cortada, espero ser levado ao contexto completo, mas na prática a notificação some, o app apenas abre e não faz deep link para o problema em questão. Aí você precisa sair procurando, dentro da UI padrão do app, um problema que pode ou não estar visível ali
Já passei por isso incontáveis vezes, e toda vez fico com raiva de quem projetou um sistema assim
Hoje passei por esse problema com meu filho. Eu estava usando um app novo com ele enquanto praticava velocidade de leitura, mas os toasts continuavam aparecendo, ele tinha dificuldade para acompanhar e se distraía. No fim, eu tive que ler em voz alta para ele. Se as mensagens ficassem mais tempo na tela, ele provavelmente conseguiria sem ajuda extra
O YouTube tem um exemplo melhor
Vá para https://www.youtube.com/feed/history e clique em “Comments” à direita; se você apagar um comentário, aparece um toast dizendo que ele será apagado e, 1 ou 2 segundos depois, aparece outro dizendo que foi apagado
Se você apagar vários comentários rapidamente em sequência, primeiro aparecem vários toasts dizendo que serão apagados e, após um atraso de 1 a 2 segundos, cada toast de confirmação aparece em ordem. A exclusão real também acontece em sequência, então é preciso esperar todos os toasts de confirmação. Mesmo que você clique em 10 comentários em 2 ou 3 segundos, a confirmação leva mais de 10 segundos
O mesmo vale para comentários ao vivo:
https://myactivity.google.com/page?page=youtube_live_chat&co...
Em geral, não concordo com a parte de que “o botão Undo no toast é desnecessário porque o usuário pode simplesmente clicar na caixa de seleção de novo”. Quando a pessoa clicou em algum lugar por engano, não sabe exatamente onde, e não conhece o app bem o bastante para desfazer facilmente só olhando a mensagem, desfazer é muito útil
Num exemplo extremo, imagine que, enquanto você estava de costas, uma bola rolou da prateleira e bateu no teclado. Alguma coisa mudou? O que mudou? Como corrigir isso?
Só existe um caso em que toast faz sentido: quando é uma notificação sem relação com a ação atual do usuário. Algo parecido com as notificações de sistema que o finado Growl fazia
O feedback para uma ação do usuário deve acontecer dentro do contexto dessa ação. Se for uma ação assíncrona, isso precisa estar claro, e o feedback deve mostrar imediatamente que a tarefa entrou na fila de processamento. Nesse caso, o feedback deve oferecer opções para cancelar e acessar a fila e, melhor ainda, ver o progresso
Se você removeu uma tarefa do quadro, não dá para mostrar sobre essa tarefa como desfazer. Você pode permitir desfazer com atalho de teclado, mas como o usuário saberia disso visualmente?
A lista de tarefas deve conter apenas tarefas, então você não vai colocar uma nota no lugar de uma tarefa. Também não vai criar uma espécie de tarefa derivada só para exibir uma mensagem. Isso estaria injetando uma intenção não funcional no componente de tarefa. Também não gosto da ideia de simplesmente não avisar o usuário. Está evidente que a tarefa foi removida, mas não está evidente como reverter uma ação desconfortável que aconteceu com um clique só. Também não vou pedir confirmação chata toda vez antes de excluir uma tarefa. Isso é parte central da função da lista de tarefas, então deve ser executado imediatamente e poder ser desfeito imediatamente
Deve haver muitos pequenos casos especiais assim. O toast foi inventado por um motivo. Só porque as pessoas passaram a abusar dele de forma “fofa” não quer dizer que ele não seja concretamente útil em certos cenários
Essas ações não têm contexto visual na tela e muitas vezes exigem uma ação adicional. Mesmo quando não exigem, confirmar que a ação do usuário foi detectada é claramente útil
Para quem ficou confuso: este texto é sobre um tipo de widget de UI [2], não sobre pão torrado [1]
[1] https://en.wikipedia.org/wiki/Toast_(food)
[2] https://en.wikipedia.org/w/index.php?title=Toast_(computing)
É a palavra mais importante da página, e claramente há pessoas, inclusive entre leitores técnicos, que não entendem esse jargão
Por outro lado, talvez o engajamento tenha até aumentado graças aos leitores interessados em panificação e receitas de café da manhã
Sobre a ideia de que “o botão Undo no toast é desnecessário porque o usuário pode simplesmente clicar de novo na checkbox”, eu agradeço muito por esse recurso. Já aconteceu inúmeras vezes de eu achar que tinha arquivado um e-mail, mas o toast me avisar que eu tinha apertado o botão de denunciar spam. Se não fosse isso, eu nem teria percebido
Outro problema fundamental dos toasts que o texto original ignorou é que ações na web são assíncronas. Não dá para saber se a ação foi bem-sucedida, falhou ou sequer chegou a ser registrada no servidor. O toast fornece uma atualização assíncrona sobre o estado no servidor
Claro, concordo que alguns toasts são irritantes e às vezes cobrem conteúdo importante da UI sem que sequer seja possível fechá-los
Então, se você apertou alguma coisa sem querer e, de repente, um e-mail sumiu da caixa de entrada, você precisa de um toast com botão de desfazer. Se você está parado e de repente vê um toast porque acabou encostando no botão, vai ficar feliz que ele estava lá. Se possível, ele deve incluir uma descrição da ação realizada e um botão de desfazer
No Gimp, se você apertar Tab, toda a UI desaparece, e sem conhecer o atalho não há como voltar. É um recurso desejável para artistas que querem focar na imagem. Mas, na hora em que apertei isso sem querer e tive que procurar por “gimp how to fix interface disappeared”, eu senti uma falta enorme de um toast com botão de desfazer. Nem consigo imaginar como alguém sem familiaridade com computadores reagiria
Toasts podem ser uma UX ruim. Normalmente isso acontece quando são o único feedback, mas, quando usados junto com outros elementos, podem ser excelentes
Um toast de confirmação que aparece junto com um redirecionamento de página é um bom sinal adicional de que o envio deu certo
Um toast de alerta ou erro junto com indicações padrão de validação de formulário é um excelente sinal secundário de que o usuário precisa mudar alguma coisa
Se for implementado para tratar erros genéricos de forma abrangente, pode preservar o estado da página do usuário sem mandá-lo para uma página de erro
É uma boa opção quando usado não como a única ferramenta, mas como uma ferramenta da caixa de ferramentas
Há algo pior do que toast: painéis deslizantes ocultos. Basicamente são toasts escondidos, necessários para certas ações, mas nada intuitivos, e impossíveis de localizar ou descobrir. A pior experiência que tive foi usando o Waze no celular de outra pessoa. Eu precisava fazer alguma coisa, mas não lembro o quê, e fiquei olhando para a tela, tentando adivinhar o que deveria fazer. No fim, a pessoa pegou o celular e revelou um painel oculto deslizando pela direita
Eu entendo a ideia de economizar espaço, mas isso realmente não faz sentido. Como um especialista em UX espera que o usuário adivinhe isso? As UIs de hoje em dia são feitas partindo do princípio de que a pessoa vai cutucar tudo como uma criança até descobrir?
O app móvel do Discord costumava usar isso tanto na barra lateral esquerda quanto na direita, mas em algum momento alguém teve a brilhante ideia de que o gesto de “deslizar para responder” era mais importante do que a navegação do app, e agora, para ver a barra lateral direita, você precisa tocar num botão pequeno e ambíguo
Quanto aos “painéis ocultos”, eu sempre achei que fossem bug, mas talvez alguém tenha considerado uma boa ideia
Uso com frequência o app Apple Connect para gerenciar apps na App Store. Quando uso um iPad Mini no modo retrato e seleciono um dos meus apps, o botão de voltar muitas vezes desaparece. Aí não dá para escolher outra conta nem selecionar outro app dentro da conta atual
Isso só muda quando viro fisicamente o iPad para o modo paisagem. Aí o navegador aparece à esquerda, e dá para selecionar outro app ou trocar de conta
Sinceramente, estou bem decepcionado com toda a UX do backend da Apple App Store. Também não gosto tanto assim do frontend, mas é no backend que fico o tempo todo. Considerando o quanto eles se preocupam com o restante da experiência do usuário da plataforma, isso é bem chocante