• Design
  • Heurísticas de Nielsen
  • Heurística 10

10. Ajuda e documentação#

Resumo

  • Se possível tenha mais de uma forma de ajuda para o usuário, com a possibilidade de realizar buscas;
  • Desenvolva formas de ajuda proativa e contextualizada no momento e local que o usuário precisa, sem a necessidade de acessar uma página de ajuda;
  • Prefira fornecer passos concretos a explicações detalhadas.

Ao acessar a página de preços do app de prototipação Marvel, ouve-se um som de sino e a tela abaixo é apresentada:

O chatbot aparece no canto inferior direito se oferecendo para tirar dúvidas sobre os planos gratuitos e pagos. Esse é um exemplo de ajuda em contexto. O usuário acessou a página de preços, logo é bastante provável que ele tenha dúvidas sobre planos e preços. Assim, não será necessário mudar de página ou ler todo o texto para obter algumas respostas rápidas.

Tutoriais interativos#

Outra aplicação comum da heurística 10 são os tutoriais interativos e páginas de onboarding. Vamos considerar o exemplo do Pinterest. Ao final do cadastro de uma nova conta, o usuário deve escolher alguns tópicos de interesse para a personalização dos resultados:

Fonte: https://www.appcues.com/blog/the-5-best-walkthrough-examples

Ao abrir a página principal, um checklist é mostrado no topo com um passo a passo da ação mais comum: salvar Pins. Note que apesar do checklist no topo, o usuário é livre para pesquisar e ver quantos resultados quiser antes de escolher o primeiro Pin. Ele não interfere na interação.

Fonte: https://www.appcues.com/blog/the-5-best-walkthrough-examples

Ao clicar em um Pin, a interface sugere que o usuário o salve clicando no botão:

Fonte: https://www.appcues.com/blog/the-5-best-walkthrough-examples

Ao salvar é necessário criar um quadro. A interface dá algumas sugestões de nomes para ajudar o usuário:

Fonte: https://www.appcues.com/blog/the-5-best-walkthrough-examples

O checklist vai sendo preenchido conforme o usuário realiza as ações. Nas próximas interações o tutorial já terá sido concluído, portanto o checklist não aparecerá mais.

Fonte: https://www.appcues.com/blog/the-5-best-walkthrough-examples

Interface Hall of Shame/Fame: Preparação para a aula#

Exercise 1

Considere a página inicial do Canva, uma plataforma de criação de design e templates gráficos:

Avalie a interface utilizando a heurística 10. Dica: acesse a página para interagir com ela ao invés de se basear apenas na imagem estática.

Answer

Discutiremos as respostas no início da aula.

Exercise 2

Ainda considerando o exemplo anterior, avalie a interface utilizando as outras 9 heurísticas. Identifique pelo menos 1 das heurísticas anteriores que está sendo bem utilizada nesta interface ou que poderia melhorar.

Answer

Discutiremos as respostas no início da aula.