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

20/11/2021 13:37 10 Heurísticas de Nielsen.
Uma fórmula pra evitar erros básicos de usabilidade | Alura Cursos Online
ENTRAR MATRICULE-SE
TODOS OS NOSSAS PARA DEV

CURSOS FORMAÇÕES EMPRESAS EM <T>
ARTIGOS
>
UX & DESIGN
10 Heurísticas de Nielsen. Uma fórmula pra

evitar erros básicos de usabilidade
COMPARTILHE
Marco Bruno
30/06/2019
Esse artigo faz parte da

Formação Java e Orientação a Objetos
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
https://www.alura.com.br/artigos/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade?gclid=CjwKCAiA1uKMBhAGEi… 1/16
20/11/2021 13:37 10 Heurísticas de Nielsen. Uma fórmula pra evitar erros básicos de usabilidade | Alura Cursos Online
colocar o botão de editar um post no fórum do Alura.
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.
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 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é!
4. Consistência e padrões
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:
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:
Resultado da busca com erro de ortográfica:
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 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.
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.
https://www.alura.com.br/artigos/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade?gclid=CjwKCAiA1uKMBhAGE… 10/16
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 fica 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?
Marco Bruno
Tem seu coração divido por UX e Frontend. Criou o novo curso de UX da Caelum e escreve
posts no blog da Caelum e Pinceladas da Web. No seu tempo livro gosta de jogar Basquete e
Airsoft.
https://www.alura.com.br/artigos/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade?gclid=CjwKCAiA1uKMBhAGE… 12/16

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

Enviado por

Dados do documento

Descrição original:

Título 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

20/11/2021 13:37 10 Heurísticas de Nielsen.

TODOS OS NOSSAS PARA DEV

10 Heurísticas de Nielsen. Uma fórmula pra

Esse artigo faz parte da

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

colocar o botão de editar um post no fórum do Alura.

Esquecemos do botão editar no fórum da Alura.

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

Visibilidade de qual estado estamos no sistema

1. Visibilidade de qual estado

2. Correspondência entre o sistema

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

3. Liberdade de controle fácil pro

Realizando uma busca no Google:

Resultado da busca com erro de ortográfica:

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

7. Flexibilidade e eficiência de uso

8. Estética e design minimalista

10. Ajuda e documentação

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

Você também pode gostar