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

06/12/2016 10HeursticasdeNielsen.Umafrmulapraevitarerrosbsicosdeusabilidade.|blog.caelum.com.
br
Busca...
10 Heursticas de Nielsen. Uma

frmula pra evitar erros bsicos de
usabilidade.
Postado dia 02/02/2016 por Marco Bruno em Design & UX, Front-end 25
Recentemente alteramos o Design da seo interna (onde os alunos fazem os cursos)

do Alura, sem criar novas funcionalidades. Mas infelizmente acabamos nos
esquecendo de colocar o boto de editar um post no frum do Alura.
http://blog.caelum.com.br/10heuristicasdenielsenumaformulapraevitarerrosbasicosdeusabilidade/ 1/16
06/12/2016 10HeursticasdeNielsen.Umafrmulapraevitarerrosbsicosdeusabilidade.|blog.caelum.com.br
Esquecer do boto de editar no foi um erro s nosso.

Eu no me esqueo quando eu estava utilizando o app do Facebook e adicionava um
comentrio com algum erro. Eu tinha que correr pra verso desktop pra conseguir
editar o comentrio (tristeza no corao).
Se a gente for pensar, um erro bem simples de resolver e tambm de esquecer de

implementar. Pensando nesses problemas o grande pai da usabilidade, Mr. Jakob
Nielsen criou o que chamamos de: 10 heursticas 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. Correspondncia entre o sistema e o mundo real
3. Liberdade de controle fcil pro usurio
4. Consistncia e padres
5. Prevenes de erros
6. Reconhecimento em vez de memorizao
7. Flexibilidade e ecincia de uso
8. Esttica e design minimalista
9. Ajude os usurios a reconhecerem, diagnosticarem e recuperarem-se de
erros
10. Ajuda e documentao
1. Visibilidade de qual estado estamos no sistema
responsabilidade do sistema informar o que est acontecendo em real time pro

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

bem claro: qual vdeo estamos assistindo; qual prximo; quais assistimos ou no.
2. Correspondncia entre o sistema e o mundo real
Em relao ao mundo real podemos considerar: sons, visual e o tom de escrita que
usurio utiliza para se comunicar. Implementamos bastante esta heurstica quando
utilizamos uma seta, cones e utilizamos a cor vermelha para elementos negativos.
Um software que usa essa heurstica o Photoshop em sua barra de ferramentas.
3. Liberdade de controle fcil pro usurio
Essa foi a heurstica que me motivou a fazer esse post. Nesta heurstica, a
preocupao de passar pro usurio a liberdade de ele fazer o que quiser dentro do
sistema com exceo das regras que vo contra o negcio ou interferem em outra
funcionalidade.
Por exemplo quando criamos um tweet bacana poder delet-lo se estivermos am.
Mas no d pra editar um tweet. Imagina se voc d um retweet e depois o usurio
que fez o tweet muda o texto pra uma coisa que voc no acha legal. Sacanagem n!
4. Consistncia e padres
importante manter a consistncia e padro visual (texto, cor, desenho do elemento,

som e etc).
Por exemplo, no frum GUJ (Grupo de usurio Java), quando vamos responder um
post o boto para enviar a resposta sempre da mesma cor, tamanho e texto. O
elemento para cancelar a resposta sempre tem seus padres:
5. Prevenes de erros
No uma boa ideia deixar seu usurio errar sem explicar previamente o motivo do
erro. Melhor do que isso, tente criar um interface que permite o usurio no errar.
A busca do Google faz isso de uma forma muito inteligente. No momento que
comeamos escrever nossa busca ele j te entrega algumas sugestes, mesmo se a
gente escrever a busca com uma ortograa errada ele realiza a busca e pergunta se
estamos procurando outra informao com a ortograa correta.
Realizando uma busca no Google:
Resultado da busca com erro de ortogrca:
6. Reconhecimento em vez de memorizao
O usurio no tem obrigao de decorar qual foi o caminho que ele fez pra chegar at
a pgina.
Por exemplo, quando voc entra em um produto do site da Locaweb disponibilizado

o caminho que voc fez pra chegar at ele. Ns chamamos isso de breadcrumb.
7. Flexibilidade e ecincia de uso
importante deixar uma experincia boa com seu sistema desde o usurio mais leigo
at o mais avanado.
Por exemplo, dentro do Trello (kanban de tarefas online com base em colunas free)
quando voc est com o foco em um carto voc pode utilizar o mouse para navegar
em outros cartes, as teclas direcionais (setas pra cima e pra baixo) ou as letras j
(para baixo) e k (para cima). Teclas que so por sua vez utilizadas no VIM, editor de
texto famoso entre os desenvolvedores.
8. Esttica e design minimalista
Por favor no encha linguia. Toda informao extra que voc deixar pro seu usurio
pode na verdade adicionar mais uma dvida, ou seja, deixe o seu layout e o contedo
o mais simples e direto possvel.
Um app que gosta muito dessa heurstica o da Nubank. Pra gerar o boleto de
pagamento da sua fatura s so necessrias duas telas e elas so bem simples e
realmente objetivas.
9. Ajude os usurios a reconhecerem,

diagnosticarem e recuperarem-se de erros
As mensagens de erros tem que ser claras e prximas do contedo ou ao que

causou o erro.
No formulrio de cadastro do Spotify caso voc no preencha os dados necessrios

ele deixa bem claro quais campos esto faltando, com um mensagem clara e objetiva.
10. Ajuda e documentao
uma boa no precisar dessa heurstica. Implementar documentao e sistema de

ajuda sempre chato e muitos usurios tm o costume de ignorar ambos mas, se for
realmente necessrio, deixe a documentao prxima do usurio e do elemento ou
ao que tenha necessidade de uma explicao mais detalhada.
Por exemplo, no formulrio de pagamento do Walmart tem um campo pra preencher

o cdigo de segurana do carto. Como no algo muito bvio, tem uma imagem
prxima ao campo mostrando onde ca o cdigo de segurana do carto. Essa uma
boa forma de fazer uma documentao feliz.
Com o erro que cometemos no novo layout do Alura vimos que uma boa passar
pelas 10 heursticas de Nielsen antes de subir um novo layout. Em que momento voc
acha bacana utilizar as heursticas no seu projeto?
Estude online na Alura
Programao, Mobile, Front-end, Design & UX, Infraestrutura e Business
Tags: esperincia do usurio, heursticas, nielsen, usabilidade, ux
Marco Bruno
MAIS SOBRE O AUTOR
OUTROS POSTS DO AUTOR
25 COMENTRIOS

Evandro
02/02/2016 at 10:56 #
Estas heursticas deveriam ser utilizadas desde o incio do projeto, se possvel. Errar
mais cedo custa menos.
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 incio de um projeto.
Marquinhus Gonalves
03/02/2016 at 15:21 #
Muito bom o post, gostei que todos os casos tem exemplos mostrando como usado.
Juclio Horcio Vieira

03/02/2016 at 15:28 #
Excelente material para todos os Devs..
alex
03/02/2016 at 15:40 #
Muito bom. Vou colocar em prtica essas Heursticas.
Vinicius Silva
03/02/2016 at 17:15 #
Muito bom. Estava mesmo na necessidade de algo assim. Pensar mais a melhor
maneira de no ter dor de cabea no futuro. Obrigado!
Paulo R. Silveira
03/02/2016 at 19:15 #
Muito bom! Maneiras simples e efetivas de prevenir dores de cabea.
Amauri
03/02/2016 at 21:27 #
Grande post, um sistema bom aquele que simple para seu usurio = rpido e pratico.
Jlio Wittwer
04/02/2016 at 06:46 #
Parabns pelo post. E pelo design e usabilidade de sua pgina
Diogo Rodrigues
04/02/2016 at 09:28 #
Parabns pelo artigo Marco.
sempre bom relembrar esses princpios to bsicos, mas que s vezes passam
despercebidos no desenvolvimento do dia-a-dia. O mais interessante foi voc mesclar
essas dicas to clssicas com exemplos modernos, conhecidos por grande parte dos
leitores (eu deduzo).
Abs!
Darlan
06/02/2016 at 13:24 #
Como j dito aqui, excelente post Marco!
Programadores tm 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 anlise, design e implementao, e
ento passamos a usar o prprio produto.
Um errinho bobo no texto: erro de ortogrca > erro de ortograa.
Gustavo
24/02/2016 at 11:44 #
Muito boa as dicas professor!
thierry rene
25/02/2016 at 10:44 #
Muito bom! O livro no me faa pensar do steve krug, tambm muito bom!
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 informao melhor sem tentar simplicar as
telas por operao colocam tudo que tem nas classes numa s tela.
blog de design
25/04/2016 at 23:57 #
Otimo artigo, parabns e obrigado por compartilhar
Matheus
21/05/2016 at 15:02 #
Artigo excepcional! Finalmente consegui compreender cada uma e aplicar de maneira

correta; muito obrigado!
JAQUISSON NUNES
02/07/2016 at 11:02 #
Muito bom, Marco!

J sou f de Nielsen (risos). So coisas que fazem muita diferena para o usurio e que
as vezes no nos damos conta.
Muito bom o post.
Obrigado e abrao!
Larissa
14/08/2016 at 18:23 #
bom estudar pela internet, os benefcios so muitos.
Alexandre Alves Teixeira

14/10/2016 at 19:14 #
No sou programador mas achei muito interessante as explicaes e timos os

exemplos!! Parabns!!
Professor Pasquale
20/10/2016 at 09:39 #
Muito bom o post!
Pequena correo, Walmart tem um L s.
Lucas Kikuti
25/10/2016 at 09:40 #
Marco
Muito legal esse artigo!
Do seu amigo, jogador de airsoft e aluno
Lucas Kikuti
Benildo
03/11/2016 at 12:19 #
J conhecia as Heursticas de Jakob Nielsen. Mas sem dvida valeu a apena voltar a ler
um grande desao para o pessoal para programadores/organizaes que no inicio dos
seus projetos no denem um padro adequado. A manuteno orientada a
padronizao, encarece projectos
JOO PEREIRA PINTO

15/11/2016 at 10:11 #
Regra de ouro da qualidade: Fazer certo da primeira vez. No fundo isso que diz as
heursticas. Para os que alegam que no tm tempo para observar as heursticas digo
que se voc no 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 heursticas tambm esto a revelar que voc precisa estudar para
ser um bom programador. E ai entra a CAELUM, que eu no conheo, mas j ouvir falar
muito bem. Tm muitos bons livros no mercado, mas nesse momento sugiro: NO SO
OS GRANDES MAS OS RPIDOS QUE GANHAM A empresa e a velocidade Jason
Jennings e Laurece Haughton. Editora Campus 2001.
DEIXE UMA RESPOSTA

Comentrio
Nome (Obrigatrio) E-mail (Obrigatrio) Site
Enviar comentrio
BLOG.CAELUM.COM.BR 2016.

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

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

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

Încărcat de

Drepturi de autor:

Formate disponibile

06/12/2016 10HeursticasdeNielsen.Umafrmulapraevitarerrosbsicosdeusabilidade.|blog.caelum.com.

10 Heursticas de Nielsen. Uma

Recentemente alteramos o Design da seo interna (onde os alunos fazem os cursos)

Esquecer do boto de editar no foi um erro s nosso.

Se a gente for pensar, um erro bem simples de resolver e tambm de esquecer de

1. Visibilidade de qual estado estamos no sistema

1. Visibilidade de qual estado estamos no sistema

responsabilidade do sistema informar o que est acontecendo em real time pro

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

2. Correspondncia entre o sistema e o mundo real

Um software que usa essa heurstica o Photoshop em sua barra de ferramentas.

3. Liberdade de controle fcil pro usurio

importante manter a consistncia e padro visual (texto, cor, desenho do elemento,

Realizando uma busca no Google:

Resultado da busca com erro de ortogrca:

6. Reconhecimento em vez de memorizao

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

7. Flexibilidade e ecincia de uso

8. Esttica e design minimalista

9. Ajude os usurios a reconhecerem,

As mensagens de erros tem que ser claras e prximas do contedo ou ao que

No formulrio de cadastro do Spotify caso voc no preencha os dados necessrios

10. Ajuda e documentao

uma boa no precisar dessa heurstica. Implementar documentao e sistema de

ao que tenha necessidade de uma explicao mais detalhada.

Por exemplo, no formulrio de pagamento do Walmart tem um campo pra preencher

Estude online na Alura

Programao, Mobile, Front-end, Design & UX, Infraestrutura e Business

Tags: esperincia do usurio, heursticas, nielsen, usabilidade, ux

OUTROS POSTS DO AUTOR

Juclio Horcio Vieira

Excelente material para todos os Devs..

Muito bom. Vou colocar em prtica essas Heursticas.

Muito bom! Maneiras simples e efetivas de prevenir dores de cabea.

Parabns pelo post. E pelo design e usabilidade de sua pgina

Parabns pelo artigo Marco.

Como j dito aqui, excelente post Marco!

Programadores tm o costume de errar em muitas das coisas citadas acima.

Um errinho bobo no texto: erro de ortogrca > erro de ortograa.

Muito boa as dicas professor!

Excelente, tem muitos Analistas que se acham no direito de projetar at a tela e

Otimo artigo, parabns e obrigado por compartilhar

Artigo excepcional! Finalmente consegui compreender cada uma e aplicar de maneira

Muito bom, Marco!

Muito bom o post.

bom estudar pela internet, os benefcios so muitos.

Alexandre Alves Teixeira

No sou programador mas achei muito interessante as explicaes e timos os

Muito bom o post!

Pequena correo, Walmart tem um L s.

JOO PEREIRA PINTO

DEIXE UMA RESPOSTA

Nome (Obrigatrio) E-mail (Obrigatrio) Site

S-ar putea să vă placă și