heurísticas de jacob nielsen

33
HEURÍSTICA para Jakob Nielsen e Rolf Molich Edmilson Neto Thainá Ribeiro

Upload: edmilson-neto

Post on 13-Apr-2017

147 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Heurísticas de Jacob Nielsen

HEURÍSTICA para Jakob Nielsen e Rolf Molich

Edmilson Neto Thainá Ribeiro

Page 2: Heurísticas de Jacob Nielsen

1 - VISIBILIDADE DO STATUS DO SISTEMA

O sistema deve manter os usuários informados sobre o que eles estão fazendo, com feedback imediato.

Ex.: Enviar vídeo - YouTube

O site disponibiliza para o usuário informações sobre o carregamento do vídeo, como porcentagem, previsão de conclusão e o que o usuário deve fazer.

Page 3: Heurísticas de Jacob Nielsen

1 - VISIBILIDADE DO STATUS DO SISTEMA

Ex.: Confirmação de envio de mensagem - Viva Real

O site exibe uma mensagem de confirmação de envio da mensagem.

Page 4: Heurísticas de Jacob Nielsen

2 - COMPATIBILIDADE ENTRE O SISTEMA E O MUNDO REAL

Toda comunicação do produto deve falar a linguagem do usuário e não ser orientada ao sistema, ou seja, o sistema não deve usar linguagem técnica ou termos que são de conhecimento específico (exceto quando o sistema trata-se de um sistema direcionado à área técnica). Todas as nomenclaturas devem ser contextualizadas e coerente com o modelo mental do usuário. Isso também é aplicado a ícones e imagens ilustrativas.

Page 5: Heurísticas de Jacob Nielsen

Ex.: Detalhamento do apartamento - Viva Real

O site exibe informações sobre o imóvel, utilizando linguagem natural ao usuário que está utilizando-o, não só os textos mas também os ícones.

2 - COMPATIBILIDADE ENTRE O SISTEMA E O MUNDO REAL

Page 6: Heurísticas de Jacob Nielsen

Ex.: Caixa de entrada - Gmail

O site oferece opções de navegação com palavras dentro do contexto de quem está utilizando uma aplicação de email.

2 - COMPATIBILIDADE ENTRE O SISTEMA E O MUNDO REAL

Page 7: Heurísticas de Jacob Nielsen

O sistema nunca deve impor algo ao usuário, também nunca deve tomar a decisão por ele. O ideal é sugerir e não induzir. Dar liberdade ao usuário das decisões e ações que podem ser tomadas. Facilitar as “saídas de emergência”, permitir desfazer ou refazer alguma ação no sistema e retornar ao ponto anterior quando estiver perdido ou em situações inesperadas.

3 - LIBERDADE E CONTROLE DO USUÁRIO

Page 8: Heurísticas de Jacob Nielsen

Ex.: Breadcrumb - OLX

O site disponibiliza para o usuário informações sobre o percurso que ele percorreu até chegar na página atual, permitindo a navegação para paginas anteriores caso desejado.

3 - LIBERDADE E CONTROLE DO USUÁRIO

Page 9: Heurísticas de Jacob Nielsen

Ex.: Caixa de entrada - Inbox

O sistema disponibiliza uma serie de ações sobre um determinado email para o usuário.

3 - LIBERDADE E CONTROLE DO USUÁRIO

Page 10: Heurísticas de Jacob Nielsen

Ex.: Desfazer ação - Inbox

O sistema permite que o usuário desfaça rapidamente a ação escolhida.

3 - LIBERDADE E CONTROLE DO USUÁRIO

Page 11: Heurísticas de Jacob Nielsen

O sistema deve manter a consistência visual e de linguagem. Manter padrões de interação em diferentes contextos. Falar a mesma língua o tempo todo, e nunca identificar uma mesma ação com ícones ou labels diferentes. Tratar coisas similares da mesma maneira, facilitando a identificação do usuário e ensinando-o a usar o sistema.

4 - CONSISTÊNCIA E PADRÕES

Page 12: Heurísticas de Jacob Nielsen

Ex.: Viva Real

Os botões para contatar o anunciante, independente do contexto, mantém o mesmo padrão de cor, o que facilita a realização da ação.

4 - CONSISTÊNCIA E PADRÕES

Page 13: Heurísticas de Jacob Nielsen

Ações drásticas como deletar arquivos, devem ser bem sinalizadas. Além disso, ter sempre uma confirmação ou possibilidade de desfazer o que foi feito. Nas palavras do próprio Nielsen “Ainda melhor que uma boa mensagem de erro é um design cuidadoso que possa prevenir esses erros”.

5 - PREVENÇÃO CONTRA ERROS

Page 14: Heurísticas de Jacob Nielsen

Ex.: Deletar conversa - Telegram

A n t e s d e d e l e t a r u m a conversa o sistema pede confirmação ao usuário.

5 - PREVENÇÃO CONTRA ERROS

Page 15: Heurísticas de Jacob Nielsen

Ex.: Desfazer ação - Inbox

O sistema permite que o usuário desfaça rapidamente a ação escolhida.

5 - PREVENÇÃO CONTRA ERROS

Page 16: Heurísticas de Jacob Nielsen

O usuário não é obrigado a reaprender o serviço toda vez que o acessa. O sistema deve evitar acionar a memória do usuário o tempo inteiro. Ter ajudas contextuais no sistema e fluxos de ações de acordo com o contexto que o usuário se encontra, ajuda neste ponto.

6 - RECONHECIMENTO EM LUGAR DE LEMBRANÇA

Page 17: Heurísticas de Jacob Nielsen

Ex.: Home - Gizmodo

Ao clicar em cada notícia o usuário é redirecionado para uma página com o conteúdo da mesma.

6 - RECONHECIMENTO EM LUGAR DE LEMBRANÇA

Page 18: Heurísticas de Jacob Nielsen

Ex.: Breadcrumb - OLX

O site disponibiliza para o usuário informações sobre o percurso que ele percorreu até chegar na página atual.

6 - RECONHECIMENTO EM LUGAR DE LEMBRANÇA

Page 19: Heurísticas de Jacob Nielsen

Ex.: Pesquisar e postar - Facebook

O sistema oferece dicas de como utilizar cada um dos itens, além de agrupar os botões de ações próximos aos seus campos.

6 - RECONHECIMENTO EM LUGAR DE LEMBRANÇA

Page 20: Heurísticas de Jacob Nielsen

O sistema pode ser ágil para usuários avançados e ser fácil de utilizar pelos usuários leigos. Isso é o que se espera de um sistema flexível e eficiente. O uso de atalhos de teclados, preenchimento automático a partir de dados anteriores e máscaras de campos são exemplos de itens que aprimoram a eficiência do sistema com flexibilidade.

7 - FLEXIBILIDADE E EFICIÊNCIA DE USO

Page 21: Heurísticas de Jacob Nielsen

Ex.: Home - Google

Após digitar o que deseja, o usuário pode clicar em "Pesquisa Google" ou pressionar “Enter", as duas opções realizarão uma pesquisa.

7 - FLEXIBILIDADE E EFICIÊNCIA DE USO

Page 22: Heurísticas de Jacob Nielsen

Ex.: Selecionar estado - Educa mais Brasil

Para selecionar o estado o site permite que o usuário digite o nome do estado e/ou selecione-o na lista.

7 - FLEXIBILIDADE E EFICIÊNCIA DE USO

Page 23: Heurísticas de Jacob Nielsen

Ex.: Navegação - Trello

A ferramenta permite navegação entre os quadros através do mouse, através das setas de navegação ou através das teclas k e j.

7 - FLEXIBILIDADE E EFICIÊNCIA DE USO

Page 24: Heurísticas de Jacob Nielsen

O título da oitava heurística já diz tudo. Estética e design não são um “plus”, fazem parte do conjunto que gera a experiência e é de máxima importância estar alinhada com todo o restante do produto/serviço/sistema. Não usar desnecessariamente excessos de cores e elementos visuais que confundam o usuário. Dialogar de forma simples e direta, com um layout mais limpo, com diálogos naturais, de fácil entendimento e que apareçam em momentos necessários.

8 - PROJETO MINIMALISTA E ESTÉTICO

Page 25: Heurísticas de Jacob Nielsen

Ex.: Home - Tecmundo

O site disponibiliza uma interface limpa utilizando o design flat, além de exibir diálogos limpos e simples.

8 - PROJETO MINIMALISTA E ESTÉTICO

Page 26: Heurísticas de Jacob Nielsen

Ex.: Entrada - Inbox

O site disponibiliza uma interface limpa utilizando o material design, além de exibir diálogos limpos e simples quando necessário.

8 - PROJETO MINIMALISTA E ESTÉTICO

Page 27: Heurísticas de Jacob Nielsen

Prevenir um erro é algo de máxima importância, mas tão importante quanto, é ajudar o usuário a identificar e resolver os problemas que acabam sendo inevitáveis. Mensagens de erro claras, com textos simples e diretos, não intimidando o usuário e sim o conduzindo à possíveis soluções

9 - AUXILIAR OS USUÁRIOS A RECONHECER , DIAGNOSTICAR E RECUPERAR-SE DE ERROS

Page 28: Heurísticas de Jacob Nielsen

Ex.: Login - Facebook

O site informa o erro ao usuário no momento do preenchimento, dando opções para corrigi-lo.

9 - AUXILIAR OS USUÁRIOS A RECONHECER , DIAGNOSTICAR E RECUPERAR-SE DE ERROS

Page 29: Heurísticas de Jacob Nielsen

Ex.: Página de erro - Dafit

O site informa que a página n ã o f o i e n c o n t ra d a m a s oferece algumas opções logo após a mensagem de erro.

9 - AUXILIAR OS USUÁRIOS A RECONHECER , DIAGNOSTICAR E RECUPERAR-SE DE ERROS

Page 30: Heurísticas de Jacob Nielsen

Ex.: Criar conta - Gmail

O site informa os erros ao usuário no momento do preenchimento, não apenas no momento da submissão do formulário.

9 - AUXILIAR OS USUÁRIOS A RECONHECER , DIAGNOSTICAR E RECUPERAR-SE DE ERROS

Page 31: Heurísticas de Jacob Nielsen

Uma interface intuitiva e clara evita a solicitação de ajuda em algumas situações. Mesmo assim o sistema deve manter ao alcance do usuário, itens de auxílio para determinadas ações. Além disso, devemos manter ajudas fixas que podem ser acessadas à qualquer momento em caso de dúvidas.

10 - A JUDA E DOCUMENTAÇÃO

Page 32: Heurísticas de Jacob Nielsen

Ex.: Ajuda - Outlook.com

O site deixa a opção de ajuda disponível em todas as telas, facilitando a consulta.

10 - A JUDA E DOCUMENTAÇÃO

Page 33: Heurísticas de Jacob Nielsen

Ex.: Pesquisar e postar - Facebook

O sistema oferece dicas de como utilizar cada um dos itens.

10 - A JUDA E DOCUMENTAÇÃO