10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade
![10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade](https://www.alura.com.br/artigos/assets/10-heuristicas/codigo-botao-esquecido.jpg)
Recentemente alteramos o Design da seção interna (onde os alunos fazem os cursos) da Alura, sem criar novas funcionalidades. Mas infelizmente acabamos nos esquecendo de colocar o botão de editar um post no fórum do Alura.
![exemplo de código botão esquecido](assets/10-heuristicas/codigo-botao-esquecido.jpg)
Esquecemos do botão editar no fórum da Alura.
Esquecer do botão de editar não foi um erro só nosso. Eu não me esqueço quando eu estava utilizando o app do Facebook e adicionava um comentário com algum erro. Eu tinha que correr pra versão desktop pra conseguir editar o comentário (tristeza no coração).
Se a gente for pensar, é um erro bem simples de resolver e também de esquecer de implementar. Pensando nesses problemas o grande pai da usabilidade, Mr. Jakob Nielsen criou o que chamamos de 10 heurísticas de Nielsen, algo que vemos bastante no curso de UX presencial da Caelum. Bora entender cada uma delas pra ver se a gente consegue errar um pouco menos. 🙂
- Visibilidade de qual estado estamos no sistema
- Correspondência entre o sistema e o mundo real
- Liberdade de controle fácil pro usuário
- Consistência e padrões
- Prevenções de erros
- Reconhecimento em vez de memorização
- Flexibilidade e eficiência de uso
- Estética e design minimalista
- Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
- Ajuda e documentação
1. Visibilidade de qual estado estamos no sistema
É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.
Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não.
![Exemplo de visisbilidade do sistema](assets/10-heuristicas/youtube-exemplo-visibilidade.png)
![Banner da Escola de UX e Design: Matricula-se na escola de UX e Design. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!](assets/alura-matricula-maior-escola-tecnologia-brasil-mais-500-mil-estudantes/matricula-escola-ux-design-alura-saiba-mais-versao-mobile.png)
2. Correspondência entre o sistema e o mundo real
Em relação ao mundo real podemos considerar: sons, visual e o tom de escrita que usuário utiliza para se comunicar. Implementamos bastante esta heurística quando utilizamos uma seta, ícones e utilizamos a cor vermelha para elementos negativos.
Um software que usa essa heurística é o Photoshop em sua barra de ferramentas.
![exemplo de uso da heurística no Phototshop](assets/10-heuristicas/photoshop-barra-ferramentas.png)
3. Liberdade de controle fácil pro usuário
Essa foi a heurística que me motivou a fazer esse post. Nesta heurística, a preocupação é de passar pro usuário a liberdade de ele fazer o que quiser dentro do sistema com exceção das regras que vão contra o negócio ou interferem em outra funcionalidade.
Por exemplo quando criamos um tweet é bacana poder deletá-lo se estivermos afim. Mas não dá pra editar um tweet. Imagina se você dá um retweet e depois o usuário que fez o tweet muda o texto pra uma coisa que você não acha legal. Sacanagem né!
![Exemplo da liberdade de controle do usuário](assets/10-heuristicas/tweet-retweet.png)
4. Consistência e padrões
É importante manter a consistência e padrão visual (texto, cor, desenho do elemento, som e etc).
Por exemplo, no fórum GUJ(Grupo de usuários Java), quando vamos responder um post, o botão para enviar a resposta sempre é da mesma cor, tamanho e texto. O elemento para cancelar a resposta sempre tem seus padrões:
![Exemplo de consistência e padrões](assets/10-heuristicas/guj-forum-respondendo-post.png)
5. Prevenções de erros
Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar.
A busca do Google faz isso de uma forma muito inteligente. No momento que começamos escrever nossa busca ele já te entrega algumas sugestões, mesmo se a gente escrever a busca com uma ortografia errada ele realiza a busca e pergunta se estamos procurando outra informação com a ortografia correta.
Realizando uma busca no Google:
![Exemplo de prevenções de erros](assets/10-heuristicas/google-busca.png)
Resultado da busca com erro de ortográfica:
![Exemplo de prevenções de erros](assets/10-heuristicas/google-busca-erro.png)
6. Reconhecimento em vez de memorização
O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página.
Por exemplo, quando você entra em um produto do site da Locaweb é disponibilizado o caminho que você fez pra chegar até ele. Nós chamamos isso de breadcrumb.
![Exemplo de reconhecimento em vez de memorização](assets/10-heuristicas/email-marketing-layout-breadcrumb.png)
7. Flexibilidade e eficiência de uso
É importante deixar uma experiência boa com seu sistema desde o usuário mais leigo até o mais avançado.
Por exemplo, dentro do Trello (kanban de tarefas online com base em colunas free) quando você está com o foco em um cartão você pode utilizar o mouse para navegar em outros cartões, as teclas direcionais (setas pra cima e pra baixo) ou as letras j (para baixo) e k (para cima). Teclas que são por sua vez utilizadas no VIM, editor de texto famoso entre os desenvolvedores.
![Exemplo de flexibilidade e eficiência de uso](assets/10-heuristicas/exemplo-trello.gif)
8. Estética e design minimalista
Por favor não encha linguiça. Toda informação extra que você deixar pro seu usuário pode na verdade adicionar mais uma dúvida, ou seja, deixe o seu layout e o conteúdo o mais simples e direto possível.
Um app que gosta muito dessa heurística é o da Nubank. Pra gerar o boleto de pagamento da sua fatura só são necessárias duas telas e elas são bem simples e realmente objetivas.
![Exemplo de estética e design minimalista - Nubank](assets/10-heuristicas/exemplo-nubank-aplicativo.png)
![Exemplo de estética e design minimalista - Nubank](assets/10-heuristicas/exemplo-nubank-boleto.png)
9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.
No formulário de cadastro do Spotify, caso você não preencha os dados necessários ele deixa bem claro quais campos estão faltando, com um mensagem clara e objetiva.
![Exemplo de mensagem clara sobre erro e como recuperá-lo](assets/10-heuristicas/spotify-mostrando-erros.png)
10. Ajuda e documentação
É uma boa não precisar dessa heurística. Implementar documentação e sistema de ajuda sempre é chato e muitos usuários têm o costume de ignorar ambos mas, se for realmente necessário, deixe a documentação próxima do usuário e do elemento ou ação que tenha necessidade de uma explicação mais detalhada.
Por exemplo, no formulário de pagamento do Walmart tem um campo pra preencher o código de segurança do cartão. Como não é algo muito óbvio, tem uma imagem próxima ao campo mostrando onde fica o código de segurança do cartão. Essa é uma boa forma de fazer uma documentação feliz.
![Exemplo de documentação próxima do usuário](assets/10-heuristicas/pagamento-formulario-walmart.png)
Com o erro que cometemos no novo layout do Alura vimos que é uma boa passar pelas 10 heurísticas de Nielsen antes de subir um novo layout. Em que momento você acha bacana utilizar as heurísticas no seu projeto?