10 Heurísticas de Usabilidade de Jacob Nielsen

Definição e exemplos das 10 heurísticas de usabilidade de Nilsen aplicadas a interfaces de websites.

1. Feedback | Visibilidade do Status do Sistema
2. Correspondência Entre o Sistema e o Mundo Real
3. Liberdade e Controle do Usuário
4. Consistência e Padrões
5. Prevenção de Erros
6. Reconhecimento ao Invés de Memorização
7. Flexibilidade e Eficiência de Uso
8. Estética e Design Minimalista
9. Auxiliar o Usuário a Reconhecer, Diagnosticar e se Recuperar de Erros
10. Ajuda e Documentação

1) Feedback | Visibilidade do Status do Sistema

• Informar ao usuário a situação do sistema.
  • Informação sobre a Navegação.
    • Em que página o usuário está.
    • De onde ele veio.
• Dar um retorno rápido para cada ação do usuário.
• Esse aspecto influencia na confiança do usuário em relação ao sistema.

Exemplos:

• Destacar o menu atual.
• Utilizar Breadcrumb.
• Destacar mouse hover dos elementos clicáveis.
• Utilizar o cursor pointer em elementos clicáveis.
• Colocar loading em processos demorados.
• Mostrar progresso em ações de download/upload.
• Indicadores visuais para edições não salvas.
• Titulo da página (aba) informativo sobre a navegação atual.

2) Correspondência Entre o Sistema e o Mundo Real

• O sistema deve falar a linguagem do usuário.
  • Gráficos.
  • Textos.
• Elementos de interfaces compreensíveis pelo usuário.

Exemplos:

• Utilizar ícones/imagens que são reconhecidos pelo usuário.
• Utilizar ícones/imagens que fazem referência a elementos do mundo real.
• Idioma padrão do usuário.
• Utilizar termos do contexto do usuário.

3) Liberdade e Controle do Usuário

• Deixar os usuários tomar decisões em relação as suas ações permitidas.
• Evitar impor decisões ao usuário ou tomar decisões por ele.
• Poder ir e vir quando ele puder.
• Poder desfazer ou refazer quando possível.
• Poder cancelar alguma ação.
• Poder personalizar sua interface *.
• Confirmar ações críticas quando dados possam ser perdidos.
• Menus de navegação principal sempre visível ou no evento de rolar para cima.

Exemplos:

• Setinha de voltar.
• Utilizar Breadcrumb para permitir o retorno para uma categoria anterior.
• Confirmar ações irreversíveis.
• Cancelar uma ação.
• Fechar menus/popups e outros elementos flutuantes.
• Logo permitir o retorno para página inicial.
• Opções de fechar/desfazer/limpar.
• Utilizar teclas como "esc" para desfazer/fechar/voltar.

4) Consistência e Padrões

• Utilizar um mesmo padrão para não confundir o usuário.
• Utilizar posicionamentos, formas e cores padrões.
• Padronizar links e botões.

Exemplos

• Logo se encontra no canto superior direito.
• Cores, formatos e outros destaques de links e botões consistentes.
• Logo com link para Home.
• Posicionamento de elementos convencionais.
• Preservar funções de ícones e termos conhecidos.

5) Prevenção de Erros

• Prevenir qualquer ação acidental do usuário.
• Desabilitar opções fora do contexto.
• Ajuda de contexto.

Exemplos

• O sistema deve desabilitar menus que não podem ser acessados em algum momento.
• Formulários deve informar no contexto regras de preenchimento.
• Informar campos obrigatórios.
• Compos dos formulários só devem aceitar caracteres pertinentes.
• Confirmar operações críticas.
• Área de clique de ícones e links em um tamanho suficiente.
• Corretores ortográficos.
• Sugestões de busca ou preenchimento de campos.

6) Reconhecimento ao Invés de Memorização

• As informações sejam exibidas de forma fácil.
• Reconhecer padrões e símbolos ao invés de memorizar.
• Reduzir a carga cognitiva do usuário, isso inclui também sua capacidade de memorização.
• Deixar sempre visível pequenos lembretes das informações que podem ser úteis.

Exemplos

• Reduzir Menus e Criar Categorias para menus com muitas opções.
• Dicas visuais para lembrar principais ações.

7) Flexibilidade e Eficiência de Uso

• Quanto mais o usuário utiliza o sistema o mesmo deve se adaptar a suas preferências.
• Prover ferramentas para leigos e usuários avançados.
• A interface deve atender usuários experientes e inexperientes.
• Dar diversas opções para o usuário realizar a mesma ação de acordo com sua experiência / contexto.

Exemplos

• Teclas de atalho.
• Sugestões de preenchimento.
• Histórico de preenchimento.
• Adaptação da interface para preferências do usuário.
  • Modo Noturno
  • Responsividade
• Modal (fechar pelo X, clicar fora ou apertar esc).

8) Estética e Design Minimalista

• Exibir o conteúdo mais relevante inicialmente e deixar que usuário se aprofunde quando ele tiver mais interesse.
• O interface deve apenas priorizar informações mais relevantes.
• Evitar elementos visuais desnecessários que possam confundir o usuário.

Exemplos

• Diminuir a exibição de cards na tela.
• Reduzir e criar subcategorias de menus extensos.
• Evitar o uso de diversas famílias fontes.
• Evitar uso de diversas cores e formas, quando não estabelecido um padrão.
• Deixar boas margin e padding entre os elementos.

9) Auxiliar o Usuário a Reconhecer, Diagnosticar e se Recuperar de Erros

• Mostrar ao usuário qual foi o erro que ele cometeu de uma forma clara.
• Ajudar o usuário a encontrar solução para o erro.
• As mensagens de erro devem ser expressas em uma linguagem simples e sem códigos.

Exemplos

• Não mostrar códigos de erro ao usuários.
• Criar um sistema de log interno para debug ou captura de erros para desenvolvimento.
• Nas mensagens de erro procurar informar ao usuário o que ele deve fazer para não ter mais o erro.

10) Ajuda e Documentação

• Para sistemas complexos ou com muitas páginas e recursos, criar uma área do site para ajuda.
• Dar a possibilidade do usuário encontrar a solução para sua dúvida por si mesmo.

Exemplos

• FAQ (frequently asked question) - Perguntas Frequentes.
• Documentação.

Leia mais...

Página Oficial - NNGroup - Jacob Nielsen

Contatos

Autor: Renan Cavichi

LinkedIn