10 Heurísticas de Nielsen. Uma Fórmula Pra Evitar Erros Básicos de Usabilidade

16/07/2020 10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade.
- Blog da Caelum: desenvolvimento, web, mobile, …
Busca...
10 Heurísticas de Nielsen. Uma

fórmula pra evitar erros básicos
de usabilidade.
Postado dia 02/02/2016 por Marco Bruno em Design & UX, Front-end  53
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.
https://blog.caelum.com.br/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade/ 1/12
16/07/2020 10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade. - Blog da Caelum: desenvolvimento, web, mobile, …
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. 🙂
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 e ciê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 ca bem

claro: qual vídeo estamos assistindo; qual é próximo; quais assistimos ou não.
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.
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 a m. 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é!
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:
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 ortogra a errada ele realiza a busca e pergunta se estamos procurando
outra informação com a ortogra a correta.
Realizando uma busca no Google:
Resultado da busca com erro de ortográ ca:
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.
7. Flexibilidade e e ciê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.
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.
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.
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 ca o código de segurança do cartão. Essa é uma boa forma de
fazer uma documentação feliz.
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? 
Compartilhe isso:
Relacionado
Enriquecendo seus Usabilidade: Entenda os Difundindo a cultura de

sistemas com micro- benefícios de treinar sua UX dentro da minha
interactions equipe em UX empresa
19/01/2016 30/01/2018 08/08/2016
In “Design & UX” In “Design & UX” In “Design & UX”
Estude online na Alura
Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business
Tags: esperiência do usuário, heurísticas, nielsen, usabilidade, ux
Marco Bruno
MAIS SOBRE O AUTOR 
OUTROS POSTS DO AUTOR 
53 COMENTÁRIOS

Há um erro crítico no seu site.
Aprenda mais sobre depuração no WordPress.

10 Heurísticas de Nielsen. Uma Fórmula Pra Evitar Erros Básicos de Usabilidade

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

10 Heurísticas de Nielsen. Uma Fórmula Pra Evitar Erros Básicos de Usabilidade

Enviado por

Direitos autorais:

Formatos disponíveis

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

- Blog da Caelum: desenvolvimento, web, mobile, …

10 Heurísticas de Nielsen. Uma

Recentemente alteramos o Design da seção interna (onde os alunos fazem os cursos) da

Esquecer do botão de editar não foi um erro só nosso.

Se a gente for pensar, é um erro bem simples de resolver e também de esquecer de

1. Visibilidade de qual estado estamos no sistema

1. Visibilidade de qual estado estamos no sistema

Quando estamos assistindo/ouvindo uma playlist do Youtube, do lado direito ca bem

2. Correspondência entre o sistema e o mundo

Um software que usa essa heurística é o Photoshop em sua barra de ferramentas.

3. Liberdade de controle fácil pro usuário

Realizando uma busca no Google:

Resultado da busca com erro de ortográ ca:

6. Reconhecimento em vez de memorização

Por exemplo, quando você entra em um produto do site da Locaweb é disponibilizado o

7. Flexibilidade e e ciência de uso

8. Estética e design minimalista

9. Ajude os usuários a reconhecerem,

10. Ajuda e documentação

Por exemplo, no formulário de pagamento do Walmart tem um campo pra preencher o

Enriquecendo seus Usabilidade: Entenda os Difundindo a cultura de

Estude online na Alura

Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business

Tags: esperiência do usuário, heurísticas, nielsen, usabilidade, ux

MAIS SOBRE O AUTOR 

OUTROS POSTS DO AUTOR 

Há um erro crítico no seu site.

Aprenda mais sobre depuração no WordPress.

Você também pode gostar