10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade.

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.

Esquecemos do botão editar no forum do 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. Bora entender cada uma delas pra ver se a gente consegue errar um pouco menos. 🙂

  1. Visibilidade de qual estado estamos no sistema
  2. Correspondência entre o sistema e o mundo real
  3. Liberdade de controle fácil pro usuário
  4. Consistência e padrões
  5. Prevenções de erros
  6. Reconhecimento em vez de memorização
  7. Flexibilidade e eficiência de uso
  8. Estética e design minimalista
  9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros
  10. 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

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.

images.duckduckgo.com

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.

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ário 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.

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.

Resultado da busca com erro de ortográfica:

Exemplo de prevenções de erros.

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.

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.

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.

Exemplo de estética e design minimalista.

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 ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros.

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.

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?

32 Comentários

  1. Evandro 02/02/2016 at 10:56 #

    Estas heurísticas deveriam ser utilizadas desde o início do projeto, se possível. Errar mais cedo custa menos.

  2. Jonathan Fernando 02/02/2016 at 16:44 #

    Excelente post! Assim como disse o Evandro, é um ótimo material para ser ter como base de usabilidade desde o início de um projeto.

  3. Marquinhus Gonçalves 03/02/2016 at 15:21 #

    Muito bom o post, gostei que todos os casos tem exemplos mostrando como é usado.

  4. Jucélio Horácio Vieira 03/02/2016 at 15:28 #

    Excelente material para todos os Devs…..

  5. alex 03/02/2016 at 15:40 #

    Muito bom. Vou colocar em prática essas Heurísticas.

  6. Vinicius Silva 03/02/2016 at 17:15 #

    Muito bom. Estava mesmo na necessidade de algo assim. Pensar mais é a melhor maneira de não ter dor de cabeça no futuro. Obrigado!

  7. Paulo R. Silveira 03/02/2016 at 19:15 #

    Muito bom! Maneiras simples e efetivas de prevenir dores de cabeça.

  8. Amauri 03/02/2016 at 21:27 #

    Grande post, um sistema bom é aquele que é simple para seu usuário = rápido e pratico.

  9. Júlio Wittwer 04/02/2016 at 06:46 #

    Parabéns pelo post. E pelo design e usabilidade de sua página 😀

  10. Diogo Rodrigues 04/02/2016 at 09:28 #

    Parabéns pelo artigo Marco.

    É sempre bom relembrar esses princípios tão básicos, mas que às vezes passam despercebidos no desenvolvimento do dia-a-dia. O mais interessante foi você mesclar essas dicas tão clássicas com exemplos modernos, conhecidos por grande parte dos leitores (eu deduzo). 😉

    Abs!

  11. Darlan 06/02/2016 at 13:24 #

    Como já dito aqui, excelente post Marco!

    Programadores têm o costume de errar em muitas das coisas citadas acima.
    Acho que só percebemos o quanto é importante pensar na usabilidade quando vamos desenvolver um produto por completo, desde a análise, design e implementação, e então passamos a usar o próprio produto.

    Um errinho bobo no texto: erro de ortográfica > erro de ortografia.

  12. Gustavo 24/02/2016 at 11:44 #

    Muito boa as dicas professor!

  13. thierry rene 25/02/2016 at 10:44 #

    Muito bom! O livro “não me faça pensar” do steve krug, também é muito bom!

  14. Marlon 17/03/2016 at 13:57 #

    Excelente, tem muitos “Analistas” que se acham no direito de projetar até a tela e seguem o pensamento de quanto mais informação melhor sem tentar simplificar as telas por operação colocam tudo que tem nas classes numa só tela.

  15. blog de design 25/04/2016 at 23:57 #

    Otimo artigo, parabéns e obrigado por compartilhar 😀

  16. Matheus 21/05/2016 at 15:02 #

    Artigo excepcional! Finalmente consegui compreender cada uma e aplicar de maneira correta; muito obrigado!

  17. JAQUISSON NUNES 02/07/2016 at 11:02 #

    Muito bom, Marco!
    Já sou fã de Nielsen (risos). São coisas que fazem muita diferença para o usuário e que as vezes não nos damos conta.

    Muito bom o post.

    Obrigado e abraço!

  18. Larissa 14/08/2016 at 18:23 #

    É bom estudar pela internet, os benefícios são muitos.

  19. Alexandre Alves Teixeira 14/10/2016 at 19:14 #

    Não sou programador mas achei muito interessante as explicações e ótimos os exemplos!! Parabéns!!

  20. Professor Pasquale 20/10/2016 at 09:39 #

    Muito bom o post!

    Pequena correção, Walmart tem um “L” só.

  21. Lucas Kikuti 25/10/2016 at 09:40 #

    Marco
    Muito legal esse artigo!
    Do seu amigo, jogador de airsoft e aluno
    Lucas Kikuti

  22. Benildo 03/11/2016 at 12:19 #

    Já conhecia as Heurísticas de Jakob Nielsen. Mas sem dúvida valeu a apena voltar a ler…
    É um grande desafio para o pessoal para programadores/organizações que no inicio dos seus projetos não definem um padrão adequado. A manutenção orientada a padronização, encarece projectos

  23. JOÃO PEREIRA PINTO 15/11/2016 at 10:11 #

    Regra de ouro da qualidade: Fazer certo da primeira vez. No fundo é isso que diz as heurísticas. Para os que alegam que não têm tempo para observar as heurísticas … digo que se você não arrumar tempo para fazer certo da primeira vez, terá de arrumar muito mais tempo e dinheiro para consertar o erro depois. Isso sem falar que já pode ter perdido o cliente. As heurísticas também estão a revelar que você precisa estudar para ser um bom programador. E ai entra a CAELUM, que eu não conheço, mas já ouvir falar muito bem. Têm muitos bons livros no mercado, mas nesse momento sugiro: NÃO SÃO OS GRANDES MAS OS RÁPIDOS QUE GANHAM – A empresa e a velocidade – Jason Jennings e Laurece Haughton. Editora Campus – 2001.

  24. Baixar NFe 12/02/2017 at 19:47 #

    Aproveitar-se do “Blank State” (quando as telas não possuem dados preenchidos, preencher com “previews dummy”) para situar o usuário na tela, prepará-lo para o que está por vir e convidá-lo a interagir também é interessante!

  25. Daniel Furtado 22/02/2017 at 14:01 #

    Muito bom mesmo o artigo!
    Fiz um vídeo mostrando essas Heurísticas, só que ao contrário (como fazer errado).

  26. Marco Bruno 22/02/2017 at 18:06 #

    Já tinha visto esse vídeo seu cara, bem bacana. Parabéns pela iniciativa 🙂

  27. Eric Ballão 16/03/2017 at 10:32 #

    Ótimo post, me auxiliou muito!!

  28. Marco Bruno 16/03/2017 at 14:58 #

    Que bom que você gostou Eric e te ajudou 🙂

  29. Rafaella cavalcante 20/04/2017 at 11:23 #

    Parabéns excelente post!!!

  30. Marco Bruno 20/04/2017 at 14:29 #

    Obrigado, Rafaella. Fico feliz que tenha gostado 🙂

Deixe uma resposta