Um guia abrangente para o design de notificação

Mensagens periféricas em produtos digitais, conhecidas coletivamente como notificações, nunca devem prejudicar a experiência do usuário. Em vez disso, eles devem contribuir para uma experiência que ajude as pessoas a atingirem um objetivo. Abordar o design de notificação no início do processo de design do produto produzirá melhores resultados.

Imagine um grupo de arquitetos projetando uma casa de três andares, trabalhando nas plantas por meses. É impressionante! É lindo! Mas, assim que se aproximam de terminar o diagrama, um deles exclama: “ Espere! Como as pessoas vão do primeiro ao terceiro andar? ” Eles se esqueceram da escada!

Da mesma forma, os designers de produto tendem a pensar em melhorias de UX pequenas, mas críticas, por último. Como acontece com estados vazios, os designers tendem a deixar o design das notificações – alertas, mensagens de erro, confirmações, anúncios e reconhecimentos – para o final. O problema pode surgir repentinamente quando um desenvolvedor pergunta: “ Como lidamos com erros? ” Por ser uma reflexão tardia, essa abordagem de aderência frequentemente produz “frankendesigns” desleixados, o que prejudica o UX.

Para evitar esse cenário, é melhor usar uma abordagem integrada ao design de notificação para aprimorar as experiências do usuário . Mesmo que os designers não tenham todas as informações na ponta dos dedos, projetar uma estrutura de notificações abrangente durante o ciclo de vida do projeto do produto ajudará a preparar o produto para casos de uso imprevistos.

Ao embarcar no design de notificação, o princípio essencial do design a ser lembrado é que eles devem ajudar (não impedir) as pessoas a realizarem tarefas . É imperativo testar protótipos de produtos antecipadamente e mapear os casos de uso em que as mensagens periféricas seriam valiosas para auxiliar nas interações . No entanto, a melhor maneira de se comunicar com os usuários varia e depende de vários fatores principais:

• O tipo de informação que está sendo comunicada
• A urgência da informação - se ela precisa ser vista imediatamente
• Se a ação do usuário é necessária como resultado das informações

Além de qual será o estilo e o comportamento das notificações, seu tom precisa ser estabelecido pela cópia do UX. Todas as cópias das notificações devem ser claras, concisas e úteis. Um sistema de notificação bem projetado também é projetado com acessibilidade em mente e tem a flexibilidade de acomodar diferentes idiomas.

A terminologia usada para notificações tende a ser semelhante, mas varia um pouco de equipe para equipe e de projeto para projeto. Cabe ao designer determinar a terminologia da estrutura de notificação — o que é chamado de quê —, bem como sincronizar todos com base na lógica de seu uso: o quê, onde e como .

Melhor usabilidade por meio de um melhor design de notificação

As notificações têm uma função essencial na usabilidade do produto. “ Visibilidade do status do sistema ” é o número um na lista das “10 Heurísticas de Usabilidade para Design de Interface do Usuário” do Nielsen Norman Group. A regra afirma que “ o sistema deve sempre manter os usuários informados sobre o que está acontecendo, por meio de feedback adequado em um prazo razoável. ”

Um sistema de notificação é tão parte do UX de um produto digital que, sem ele, o produto pareceria ter ficado de fora. Se não houver “visibilidade do status do sistema” e feedback, é como dirigir um carro sem painel.

O painel de um carro está cheio de medidores, ícones e luzes projetados para fornecer visibilidade do sistema operacional do carro e garantir uma operabilidade segura e confiável. Quando dirigimos, um conjunto de leituras e notificações sobre temperatura do motor, saúde da bateria, pressão do óleo, luzes, freios, airbags e assim por diante nos mantém informados. Quando queremos fazer uma curva, há uma luz piscando para o sinal de direção, juntamente com um som de clique, ambos nos fornecendo feedback. Também temos um medidor de tanque de combustível que indica quando o tanque de combustível está baixo.

Funciona da mesma forma com um produto digital. A visibilidade do status e do feedback do sistema é fundamental quando se trata de usabilidade, e a usabilidade é a base das ótimas experiências do usuário.

Estabelecendo uma estrutura de notificação útil

Para projetar bem uma estrutura de notificação, pode ser útil pensar nas notificações em termos de “intensidade do sinal”. Quais mensagens periféricas precisam de mais ou menos atenção? Por exemplo, interações que podem ser potencialmente destrutivas precisam de notificações “mais altas” e interações não destrutivas precisam de notificações “mais silenciosas”.

Enviar às pessoas a quantidade certa de notificações é um ato de equilíbrio , e exagerar é perigoso; o produto pode receber muitos comentários negativos ou, na pior das hipóteses, alienar as pessoas a ponto de abandoná-lo. Os designers, portanto, precisam considerar cuidadosamente o UX e enviar mensagens apenas com um propósito bem definido. Também é uma boa ideia dar aos usuários a flexibilidade de desativar todas ou pelo menos algumas das notificações.

A abordagem inicial para o projeto de notificação precisa de classificação em três níveis: alta, média e baixa atenção , ou seja, “níveis de gravidade”. Depois disso, os tipos de notificação precisam ser definidos por atributos específicos nesses três níveis, sejam alertas, avisos, confirmações, erros, mensagens de sucesso ou indicadores de status.

Uma vez identificados os atributos de notificação, é hora de criar uma taxonomia das diversas notificações que irão compor o framework. A lista a seguir não é exaustiva — os tipos de notificações serão diferentes com base no produto, nos casos de uso e em outras variáveis. ( Observação : conforme mencionado, equipes diferentes usam uma variedade de terminologias. Por exemplo, estamos chamando de "confirmação" uma notificação que requer a aprovação do usuário para prosseguir com uma interação destrutiva. Algumas equipes podem usar "confirmação" como um termo para uma mensagem de sucesso.)

Alta atenção

• Alertas (requer atenção imediata)
• Erros (ação imediata necessária)
• Exceções (anomalias do sistema, algo não funcionou)
• Confirmações (ações potencialmente destrutivas que precisam de confirmação do usuário para prosseguir)

Atenção média

• Avisos (nenhuma ação imediata necessária)
• Agradecimentos (feedback sobre as ações do usuário)
• Mensagens de sucesso

Baixa atenção

• Mensagens informativas (também conhecidas como notificações passivas, algo está pronto para ser visto)
• Emblemas (normalmente em ícones, significando algo novo desde a última interação)
• Indicadores de status (feedback do sistema)

Projetando uma ótima UX de notificação

Para projetar um produto com excelente UX, os designers precisam fazer uma lista de todos os casos de uso em que as notificações podem ser úteis. É recomendável que esse processo seja feito em colaboração com um desenvolvedor, pois na maioria dos casos ele pode ser imparcial e capaz de ajudar a solucionar problemas de casos extremos que o designer pode não ter considerado.

Os designers também devem anotar todas as interações durante o teste do usuário, onde as notificações podem agregar valor para aprimorar o UX.

Uma vez armado com a lista, o próximo passo é categorizar as notificações com base no nível de atenção e atributos desejados. Novamente, como as notificações não devem ser intrusivas , isso precisa ser feito com cuidado. Algumas das perguntas a serem feitas durante esse processo são:

• O que acionaria a notificação?
• Que tipo de feedback está sendo comunicado?
• Onde a notificação apareceria e como?
• Qual notificação exigiria uma interação imediata?
• A notificação é persistente ou não persistente?

Em seguida, a codificação de cores e os ícones precisam ser determinados e colocados em um sistema de design (ou guia de estilo). Ao passar por esse processo, os designers precisam considerar todas as instâncias em que uma notificação apareceria e garantir que elas sejam renderizadas corretamente em todos os planos de fundo.

O posicionamento das notificações também é fundamental. Correndo o risco de afirmar o óbvio, para evitar obscurecer a interface, as notificações devem aparecer na parte superior ou inferior, ou perto dos cantos da interface do usuário. Além disso, se o design for responsivo, os designers precisam testar a aparência das notificações com várias janelas de visualização. É particularmente importante onde as mensagens de erro podem ser mostradas com formulários móveis responsivos.

Projetar uma estrutura de notificação não é fácil. Muitos pequenos detalhes que ocorrem em diferentes cenários precisam ser considerados. Além da acessibilidade e legibilidade, a localização futura precisa ser lembrada. Um sistema de notificação que parece perfeito em inglês pode desmoronar completamente quando usado em uma plataforma alemã ou japonesa.

Outras perguntas a serem feitas quando se trata de definir o comportamento das notificações :

• Se um alerta ou aviso deve ser persistente, como os designers garantem que as pessoas ainda tenham acesso a eles depois de saírem da tela inicial?
• Um ícone de alerta com um crachá precisaria ser incorporado onde um arquivo de notificações pudesse ser visto?
• Se uma notificação não for persistente, quanto tempo antes que ela desapareça e deve haver uma opção para dispensá-la antes que ela desapareça?

Para aplicativos móveis, não apenas as notificações no aplicativo, mas as notificações push (no nível do sistema, fora do aplicativo) também precisam ser projetadas meticulosamente. Eles são principalmente interrupções, por isso é crucial olhar para a cópia da notificação e como e quando pedir permissão para enviá-los. Usados ​​demais, eles podem desencorajar as pessoas a usar o aplicativo. Muitas notificações não essenciais podem frustrar os usuários que podem silenciar as notificações ou parar de usar o aplicativo completamente.

Os designers também devem considerar notificações acionáveis ​​que permitem que as pessoas sejam produtivas sem abrir um aplicativo. Permitir que os usuários realizem pequenas tarefas sem entrar em um aplicativo pode ser uma ferramenta poderosa para aprimorar o UX.

Para notificações push móveis, a prática recomendada de UX é atrasar notificações de qualquer tipo (pedindo acesso à localização de uma pessoa, enviando notificações push e assim por diante) até que as pessoas tenham a chance de explorar um pouco o aplicativo.

Práticas recomendadas de notificação para ótima UX

Observar as práticas recomendadas a seguir garantirá que as pessoas percebam que as notificações fornecem valor, não como interrupções, aprimorando assim a experiência do usuário. Antes de projetar um sistema de notificações e colocá-las em um sistema de design, considere estas práticas recomendadas fundamentais:

• Classifique as notificações pelos três níveis de atenção discutidos anteriormente. Em seguida, defina a taxonomia das várias formas de notificações nesses três níveis.
• Ao criar um guia de estilo para o sistema de notificação, especifique os comprimentos máximos de caracteres para a notificação em todos os idiomas em que ela será lançada.
• Preste atenção especial à adaptabilidade e flexibilidade para acomodar diferentes tipos de conteúdo e comprimentos de texto.
• Crie um esquema de cores consistente para os três níveis de atenção, bem como uma iconografia consistente.
• Crie notificações concisas e fáceis de ler que fornecem informações úteis.
• Considere cuidadosamente o que enviar e quando enviar. No celular, adie o envio de notificações em aplicativos recém-baixados para evitar alienar as pessoas. Examine o contexto e os casos de uso de perto.
• Errar ao mostrar menos notificações, sejam elas alertas ou avisos, ou outras atualizações de status de alta a média atenção. Em vez disso, coloque-os em uma lista que as pessoas podem acessar quando quiserem vê-los (indicado por um ícone na interface do usuário).
• Considere um sistema com a opção de marcar notificações como “não mostrar novamente”.
• Reconhecimentos não persistentes, como “lanches” devem desaparecer da tela após um mínimo de quatro segundos e um máximo de oito segundos, com a opção de descartá-lo mais cedo e “desfazer” quando apropriado.
• Para notificações de alto nível de atenção em dispositivos móveis, considere o feedback sonoro e tátil quando possível.
• Garanta o contraste adequado nas notificações para facilitar a leitura e entre o plano de fundo no qual as notificações aparecem. Esteja ciente de que, com designs fluidos e responsivos, o plano de fundo pode mudar sob a notificação.

Práticas recomendadas para mensagens de erro

• As mensagens de erro devem ser simples e diretas, de preferência acionáveis, escritas em uma linguagem fácil de ler e rápida de compreender.
• Evite códigos obscuros e abreviações como “o sucesso da resposta recebida é falso. ”
• Forneça descrições concisas e claras do problema em vez de “ ocorreu um erro. ”
• Evite culpar as pessoas ou dizer-lhes que fizeram algo errado – por exemplo, dizendo que foi um “ comando ilegal”. ”
• Forneça mensagens de erro construtivas no contexto para que as pessoas possam corrigir o problema.
• Evite indicar um erro apenas tornando o campo vermelho. Não o torna acessível a pessoas com deficiência. É sempre melhor incluir outras pistas visuais que o daltônico possa ver.
• Use validação em linha para campos de entrada em formulários.
• As mensagens de erro não devem desaparecer até que as pessoas tenham corrigido o problema.

Resumo

As notificações contribuem para uma experiência que ajuda as pessoas a atingirem um objetivo e devem ser tratadas como qualquer outro componente de produto digital. No entanto, as notificações podem cortar nos dois sentidos. Se bem tratados, eles podem aumentar o UX e ajudar no engajamento, mas quando executados mal, correm o risco de se tornar um aborrecimento. Encontrar o equilíbrio certo é fundamental.

As notificações não devem ser tratadas como uma reflexão tardia. Para fazê-los corretamente, os designers devem abordar os casos de uso antecipadamente, definir as várias formas durante o ciclo de vida do projeto do produto e testá-los extensivamente.

Uma rápida recapitulação sobre a maneira certa de criar notificações:

• Comece o design da notificação cedo, não como uma reflexão tardia.
• Classifique as notificações pelos três níveis de atenção: alto, médio e baixo.
• Codifique por cores, atribua ícones e determine posicionamentos.
• Categorize-os por tipo: persistente ou não persistente, pop-up, banner, diálogo, etc.
• Incorpore-os em um sistema de design.

Entender quando e como usar as notificações é essencial para fornecer ótima usabilidade e criar consistência nas mensagens do produto. Ao avaliar cuidadosamente as mensagens periféricas que precisam ser exibidas no momento certo, os designers podem aumentar a eficiência de um produto e aprimorar seu UX.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •

Leia mais no Blog Toptal Design:

• Como trabalhar remotamente quando é mais importante
• Como fazer a transição do trabalho remoto com facilidade
• Práticas recomendadas e erros de design de aplicativos para dispositivos móveis
• O melhor guia para design de sites de comércio eletrônico
• A falha do chat – quando um chatbot falha