10 Heurísticas de Nielsen para avaliar a interface

As heurísticas de Nielsen são regras gerais desenvolvidas por Jakob Nielsen do nngroup em colaboração com Rolf Molich em 1990, para realizar “avaliação heurística”. Depois de anos, Nielsen evolui o conceito para regras gerais de avaliação do design de interação.

É comum assimilar o “design” à parte estética de produtos, marcas ou layouts, mas isso não mostra a totalidade do design. Pense em design como projetar algo com um objetivo, não apenas o lado estético mas também o lado funcional.

E quando falamos sobre “interfaces digitais” especificamente, falamos da construção de meios de comunicação entre uma pessoa e uma máquina. Mas como avaliar a eficácia dessa interface? A melhor maneira de avaliar a usabilidade é testa-lo com usuário reais, ou seja, realizandotestes de usabilidade. (quantitativos e qualitativos.)

Infelizmente, realizar testes de usabilidade é um pouco caro em termos de tempo e custo, dificultando a adoção pelas equipes, especialmente para equipes pequenas e startups em estágio inicial. Mas não se preocupe, existe uma maneira alternativa fantástica para isso: usar uma técnica chamada avaliação heurística, uma maneira de encontrar a maior parte dos problemas sem precisar realizar longos testes.

Há 25 anos, Jakob Nielsen do nngroup em colaboração com Rolf Molich em 1990, desenvolver algumas regras para realizar “avaliação heurística”. Depois de anos, Nielsen evolui o conceito para regras gerais de avaliação do design de interação, e hoje se tornaram regras práticas para a interação humano-computador.

Nesse artigo vamos discutir as 10 heurísticas de Nielsen e como você pode usá-los como uma lista de verificação ao projetar um novo produto ou feature.

1. Visibilidade do Status do Sistema

O sistema sempre deve manter os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um prazo razoável.

Jakob Nielsen

É da natureza humana gostar de controle – Do ponto de vista evolutivo, a necessidade de segurança e necessidades fisiológicas (como comida, sono e sexo) nos ajudou a sobreviver! Somente dessa forma elas se sentem seguras. Esse senso de controle pode ser evocado fornecendo informações sobre o status e o feedback do sistema após cada interação.

A primeira das heurísticas de Nielsen afirma que o sistema deve sempre manter o usuário informado sobre seu status. A exibição do status do sistema pode assumir a forma de uma barra de progresso, carregar o “spinner” ou alterar a cor do botão. 

Essas microinterações fornecem aos usuários um feedback instantâneo, para que eles sempre saibam o que está acontecendo. Em vez de se perguntar se precisam realizar uma ação, eles têm certeza de que o sistema está computando sua ação anterior.

Por exemplo, imagine que você está atrasado e não tem certeza se o seu Uber foi chamado com sucesso.Você não sabia quando ele chegara até você, nem mesmo quem é seu motorista. Como você se sentiria nessa situação

Outros exemplos:

• Quando você faz login no Gmail, ele mostra o que está acontecendo em segundo plano e o progresso;
• Quando você faz o upload de algo, o progresso da ação deve ser claramente visível;
• Quando você verifica os detalhes do voo no google, ele mostra claramente o status – a cor indica que é pontual e a localização do ícone indica o andamento da jornada

Lembre-se: na essência, essa heurística incentiva a comunicação aberta e contínua, fundamental para todos os relacionamentos – seja com pessoas ou dispositivos. E essa comunicação cria a confiaça entre o sistema e seu usuario.

2. Compatibilidade entre o sistema e o mundo real

O sistema deve falar o idioma do usuário, com palavras, frases e conceitos familiares ao usuário, em vez de termos orientados ao sistema. Siga as convenções do mundo real, fazendo as informações aparecerem em uma ordem natural e lógica.

Jakob Nielsen

Por natureza, os seres humanos encontram conforto na familiaridade. É por esse motivo que a segunda heurística de usabilidade, a correspondência entre o sistema e o mundo real, é tão importante

As pessoas utilizam todo novo sistema com um modelo mental em mente. Em outras palavras, as pessoas presumem como o sistema poderia funcionar com base em sua experiência com outros sistemas semelhantes . Usando a linguagem que eles conhecem, você pode ajudar os usuários a superar o constrangimento inicial.

Um exemplo extrema que comprova essa heuristica é o skeuomorfismo, que transfere todos os detalhes de objetos do mundo real para o software. No início da adoção do smartphone, esse estilo ajudou as pessoas a aprender a usar seus novos companheiros através da estética e dos processos com os quais estavam familiarizados antes.

Mas mesmo no estilo minimalista de hoje encontramos dezenas de pistas persistiram desde aquela época: aplicativos como a bússola ou a calculadora, componentes de “pastas”, “icones de cadeado”.

Além disso, a linguagem e os conceitos do mundo real ajudam os usuários a entender facilmente o sistema. É por isso que o aplicativo para armazenamento de cartões é chamado de “carteira”, usamos a “lixeira” para remover arquivos antigos ou o “carrinho de compras” ao fazer compras on-line.

Outros exemplos:

• O ícone da lixeira é semelhante a uma lixeira real, e o próprio ícone mostra o tempo em que há arquivos ou não;
• Os detalhes do cartão de crédito solicitados são correspondidos com um cartão de crédito real;
• Botões com o texto descrevendo exatamente o que o usuário vai ganhar ao clicar;

Dicas: (1) utilize linguagem familiar, alem de um tom de voz que se aproxime da sua persona. Você pode fazer isso através de uma linguagem coloquial e bem explicativa. (2) aproveite a familiaridade com objetos do mundo real, seja em iconografia, ou em nomes que remetam a alguma experiencia do cotidiano.

3. Controle e liberdade para o usuário

Os usuários geralmente escolhem as funções do sistema por engano e precisam de uma “saída de emergência” claramente definida para deixar o estado indesejado sem ter que passar por um diálogo prolongado.

Jakob Nielsen

As pessoas frequentemente interagem com o sistema com pressa ou sem muita atenção. Isso resulta em erros de cliques ou outros acidentes que podem ser frustrantes. Por exemplo, imagine uma situação que envolva algo como a exclusão acidental de um arquivo importante ou a publicação de um erro gramatical nas mídias sociais da sua empresa. Tenha certeza que você gostaria de uma forma de desfazer a ação.

Uma “saída de emergência” apropriada pode ser algo tão simples quanto uma seta para trás (por exemplo, em um navegador), uma lixeira, que nos protege de exclusão acidental, ou o botão “desfazer”, que permite ao usuário reverter a última ação. Todos esses exemplos demonstram sistemas que permitem que o usuário o conserte seus erros sem muita frustação.

Outros exemplos:

• Se você anexou um arquivo grande no Gmail por engano, poderá cancelá-lo antes do upload completo;
• Quando você aciona uma ação acidentalmente e deseja sair sem passar por nenhum detalhe, a pequena cruz está lá para ajuda-lo;
• Se você cometer um erro simples, sempre poderá desfazê-lo e recuperar uma versão anterior;

Dica: Ao projetar um sistema, forneça aos usuários saídas claramente definidas para deixar o estado indesejado sem ter que passar por um diálogo prolongado. Isso lhes dá confiança para usar seu sistema.

4. Consistência e Padronização

Os usuários não devem ter que se perguntar se palavras, situações ou ações diferentes significam a mesma coisa.

Jakob Nielsen

Você já reparou que a funcionalidade copiar e colar funciona exatamente da mesma maneira, independentemente do aplicativo que você está usando? E que apertar o botão do iPhone ou arrastar para cima vai leva-lo a tela inicial?

Esses são apenas dois padrões de usabilidade que a Apple usa para tornar seu sistema consistente e previsível para os usuários. Um sistema compreensível nunca deve confundir os usuários usando palavras, recursos visuais ou ações diferentes para os mesmos conceitos.

Ao projetar seu novo aplicativo, nunca esqueça que as pessoas passam 90% do tempo interagindo com outros aplicativos. Portanto, o uso de práticas recomendadas e padrões comuns resultará em uma experiência geral muito melhor. A consistência é um dos colaboradores mais fortes da usabilidade.

Outros exemplos:

• Você sempre encontrará login, detalhes do perfil e informações do carrinho de compras no canto superior direito;
• Os aplicativos do Google drive mantem todos os botões de ação no mesmo local;

Dica: Um bom ponto de partida para um sistema de design consistente do seu aplicativo móvel são as diretrizes de interface humana da Apple e as diretrizes de design de materiais do Google. Eles apresentam uma base sólida que descreve componentes importantes do projeto com muitos exemplos. 

5. Prevenção de erros

Melhor do que boas mensagens de erro, é um design que evita a ocorrência de um problema. Elimine condições propensas a erros ou verifique-as e apresente aos usuários uma opção de confirmação antes que eles se comprometam com a ação.

Jakob Nielsen

Um bom design deve ser como um amigo confiável, que não apenas ajuda você a se recuperar quando comete um erro, mas também o avisa antes mesmo de cometer um erro. Po exemplo, o Gmail avisa que o anexo não está anexado se você mencionou algo sobre um anexo.

Embora uma interface deva suportar “desfazer ação” (consulte a heurística nº 3), o ideal seria projetar uma interface que impeça os usuários de cometer erros em primeiro lugar. Uma maneira de impedir que os usuários cometam erros é fornecer uma mensagem de confirmação antes que o sistema registre a ação. 

Baseado no livro de Don Norman, The Design of Everyday Things , existem dois tipos de erros criados pela interação com uma interface do usuário:

1. Os deslizes acontecem quando o usuário tende a executar uma ação, mas devido à pouca atenção, realiza outra. A estratégia para impedir que os usuários experimentem um deslize é minimizar a chance de ocorrência, orientando-os apenas pelas áreas seguras. Use restrições que não permitam que um usuário defina um valor errado (por exemplo, quando você espera um número, não permita escrever as letras), sugira as opções mais comuns para facilitar a escolha para os usuários (por exemplo, durante a pesquisa) ou use diálogos de confirmação antes de ações destrutivas.
2. Os erros geralmente são causados ​​pelo modelo mental incorreto de um usuário de como o sistema funciona. Nesse caso, o usuário entende mal a comunicação e realiza conscientemente uma ação que leva a um resultado diferente do que ele pretendia. Esses tipos de erros geralmente não são fáceis de resolver e devem ser revelados durante a fase de teste do usuário. Use comunicação clara e um sistema de design consistente para evitar erros.

Diretrizes gerais para prevenir erros:

• Incluir restrições uteis: Embora nem sempre seja uma boa ideia limitar as escolhas dos usuários, nos casos em que existem regras claras que definem opções aceitáveis, pode ser uma boa estratégia restringir os tipos de entrada que os usuários podem fazer.
  
  Por exemplo, reservar um voo normalmente envolve selecionar as datas da viagem e existem algumas regras que determinam quais datas são aceitáveis. Uma das principais regras é que um voo de retorno não pode acontecer antes da partida.
• Sugestões de ofertas: Da mesma forma que as restrições orientam os usuários para o uso correto de uma interface, as sugestões podem antecipar muitos deslizes antes que o usuário tenha a oportunidade de fazê-los. 
  
  Por exemplo, em sites que oferecem milhares de produtos, a pesquisa é uma maneira eficaz de ajudar os usuários a encontrar sua proverbial agulha no palheiro ou oferecer produtos nessas situações em que os usuários não se lembram do nome do produto ou do conteúdo que estavam procurando.
• Ofereça bons padrões: Especialmente quando os usuários precisam executar ações repetitivas, ou em situações em que precisam usar precisão, comece oferecendo padrões razoáveis que provavelmente atendem às suas metas do mundo real e, em seguida, permita que refinem suas escolhas. 
  
  Por exemplo, em um aplicativo de lembrete, algumas opções predefinidas típicas, como amanhã, próxima semana, em uma hora e assim por diante, podem impedir erros de digitação em datas ou horas; um lembrete para tirar o jantar do forno que chega um dia atrasado definitivamente não é útil.
• Utilize formatação flexível: Algumas tarefas realmente exigem que os usuários digitem informações muito detalhadas ou precisas, mas forçar as pessoas a fornecer essas informações em um formato muito específico pode estar em desacordo com as boas práticas de usabilidade:
  
  Por exemplo, se você estiver solicitando que os usuários insiram informações numéricas em um formulário, seja flexível e formate essas informações de uma maneira que seja facilmente verificável a fim de evitar erros. Como por exemplo a mascara em um formato de telefone

Outros exemplos:

• Quando você tenta enviar um anexo pelo Gmail e esquece de anexá-lo, o Gmail detecta que você não anexou o arquivo e o avisa antes de enviar o email.
• Quando você esta definido uma senha, são fornecidas dicas para evitar erros e o nível da senha é calculado e exibido à medida que você digita.

6. Reconhecimento em vez de memorização

Minimize a carga de memória do usuário, tornando objetos, ações e opções visíveis. O usuário não deve ter que se lembrar de informações de uma parte do diálogo para outra. As instruções de uso do sistema devem ser visíveis ou facilmente recuperáveis ​​sempre que apropriado.

Jakob Nielsen

Você também considera responder a uma pergunta de múltipla escolha mais fácil comparado a uma pergunta aberta? Da mesma forma, todos nós temos essas experiências em que podemos não lembrar o nome de uma pessoa, você acabou de ver na rua, mas reconhece que era colega de classe no ensino médio.

É sempre melhor sugerir ao usuário um conjunto de opções do que deixá-lo lembrar e digitar a coisa toda. O objetivo é minimizar a aplicação da memória do usuário. Existem dois tipos de recuperação de memória:

1. O reconhecimento: acontece quando você reconhece facilmente uma pessoa ou um objeto com o qual está familiarizado. É uma forma muito superficial de recuperação da memória e não requer nenhum trabalho. 
2. O memorização: ocorre quando você precisa encontrar informações raramente usadas em sua memória (nomes, anos, detalhes etc.). Para recuperar informações, as pessoas precisam ativar mais blocos de memória. Portanto, o processo de “recuperar a memória” é uma recuperação mais profunda e requer mais trabalho. (É por isso que as perguntas de múltipla escolha nos testes são muito mais fáceis de responder do que as de resposta aberta.)

Uma boa interface do usuário não exige que o usuário se lembre com freqüência. Em vez disso, oferece todas as opções e informações necessárias para fazer uma escolha. É muito mais fácil digitalizar rapidamente ícones ou um menu de texto e selecionar um recurso desejado do que tentar recuperá-lo da sua memória.

Outros exemplos:

• Quando um usuário retorna a um site de comércio eletrônico como Amazon, a página inicial inclui uma lista de itens visualizados recentemente, sugestões do seu histórico de navegação e recomendações no seu histórico de compras.
• Quando você pesquisa no Google, ele fornece sugestões de lista à medida que você digita com base nas pesquisas anteriores e na maioria das pesquisas relacionadas.

Dica: Dê aos usuários dicas para lembrar as informações e forneça um ícone ao lado do nome do recurso ou use uma cor específica para as funções relacionadas. A arquitetura da informação bem projetada também ajuda na busca por informações.

7. Eficiência e flexibilidade de uso

Atalhos – invisíveis para o usuário iniciante – geralmente aceleram a interação do usuário experiente, de modo que o sistema possa atender a usuários inexperientes e experientes. 

Jakob Nielsen

Uma interface deve ser flexível o suficiente para atender usuários novatos e avançados. Alguns usuários podem visitar um site ou produto pela primeira vez, o que pode significar uma curva de aprendizado mais alta. Por outro lado, alguns usuários já podem ter experiência com uma interface e podem procurar atalhos para concluir ações frequentes.

Por exemplo, veja alguns dos aplicativos do Google Drive; ao escrever um documento, você vê apenas algumas ações relacionados à edição de texto. Mas quando você decide adicionar um gráfico extra, é exibida uma paleta de recursos totalmente nova, com curadoria específica para ajudá-lo a concluir esta tarefa.

Outros exemplos:

• Enquanto um usuário iniciante usa a pesquisa de imagens do Google, o usuário especialista sempre pode refinar a pesquisa por tamanho, cor, tipo e assim por diante.

Dica: Organize a tela e facilite a navegação do aplicativo. O aplicativo sempre deve exibir apenas elementos e comandos da interface do usuário relevantes. 

8. Estética e design minimalista

Os diálogos não devem conter informações irrelevantes ou raramente necessárias. Cada unidade extra de informação em um diálogo concorre com as unidades relevantes de informação e diminui sua visibilidade relativa.

Jakob Nielsen

Para o designer ou desenvolvedor, todas as informações que estão sendo apresentadas na página são relevantes. O gerente de produto precisa se perguntar (de preferencia para alguma usuário): “todas as informações exibidas na interface são necessárias e úteis?”

O minimalismo citado anteriormente, veio como uma tendência duradoura, com o objetivo de reduzir a descrição de um assunto apenas aos seus elementos necessários.  O minimalismo ajuda os usuários a acessar rapidamente informações importantes e chegar rapidamente ao resultado.

A perfeição é alcançada, não quando não há mais nada a acrescentar, mas quando não há mais nada a remover.

Antoine de Saint-Exupéry

Para destacar o conteúdo restante, você pode usar bastante espaço em branco/vazio. Ajuda a aumentar a legibilidade do conteúdo, destaca o apelo às ações e cria uma aparência equilibrada e agradáve. Um design minimalista usa apenas as cores necessárias para suportar a hierarquia visual. Pense no propósito e significado de cada cor e use-o de forma consistente.

Outros exemplos:

• A pesquisa no Google e o login da conta são um excelente exemplo de design minimalista e possuem apenas as informações necessárias para executar a tarefa principal.

Lembre-se: As pessoas também tendem a responder melhor a um design que é esteticamente agradável (lei da usabilidade estética) e com sistemas menos confusos. Mais informações e elementos abertamente sofisticados tornam o sistema mais difícil de usar.

9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros

As mensagens de erro devem ser expressas em linguagem simples, indicar com precisão o problema e sugerir uma solução.

Jakob Nielsen

O usuário vai cometer erro utilizando sua aplicação. Isso é um fato! Por isso, é importante fazer uma verificação se esses erros estiverem sendo explicados ao usuário em linguagem compreensível por eles.

Quando o usuário comete um erro, ele já se sente frustado, especialmente quando eles são mal projetados e comunicados. Para minimizar a frustração, devemos nos esforçar ao projetar a experiência de erro da mesma maneira que colocamos no restante do sistema.

Toda mensagem de erro deve ser o mais explícita e precisa possível. Ninguém quer ler mensagens vagas como “algo deu errado”, por isso, descreva o que aconteceu em uma linguagem humana legível, ou pior, imagina receber uma mensagem como essa: “erro 132: linha 24” (aposto que nem o desenvolvedor dessa mensagem de erro vai encontra-la com facilidade).

Outros exemplos:

Quando há um erro, você não deve entrar em pânico, precisa ajudá-lo a se recuperar sugerindo uma solução. Esta mensagem de erro garante que você está seguro e sugere alguns links alternativos.

Dica: (1) dê ao usuário alguns conselhos construtivos sobre o que fazer a seguir. (2) Propor a solução ou direcionar o usuário a um funcionário de suporte ao cliente que possa lidar com a situação. (3) A última regra das boas mensagens de erro é a polidez – nunca culpe o usuário ou insira que ele é estúpido.

10. Ajuda e documentação

Mesmo que seja melhor se o sistema puder ser usado sem documentação, pode ser necessário fornecer ajuda e documentação. Essas informações devem ser fáceis de pesquisar, focadas na tarefa do usuário, listar etapas concretas a serem executadas e não serem muito grandes.

Jakob Nielsen

A última das heurísticas de Nielsen afirma que toda interface deve estar equipada com ajuda e documentação. Eles geralmente vêm na forma de um suporte técnico ou seção de perguntas frequentes (FAQ). O fornecimento desses recursos permite que os usuários encontrem respostas para suas perguntas, o que resulta em menos chamadas para a equipe de suporte ao cliente.

Um suporte técnico deve ser organizado pelos objetivos do usuário com artigos que definam claramente as etapas para alcançá-los. Aplique a heurística no. 2 em relação à voz do usuário e adicione imagens para apoiar o texto.

Outros exemplos:

• Quando você passa o mouse em cima de regiões na interface e um tooltip aparece com a descrição do item.

Dica: Você pode fornecer qualquer informação extra que seja útil aos usuários, juntamente com o label. Mas você deve fazer isso apenas se for necessário.

As heurísticas de Nielsen são regras gerais gerais e serão aplicáveis ​​a qualquer aplicativo Web e móvel, com algumas exceções. Sempre use seu julgamento para implementar esses princípios ou quaisquer outras práticas de experiência do usuário mantendo-se no lugar do usuário final.

Uma avaliação heurística de maneira alguma substitui o teste de usuários reais. No entanto, esse método de inspeção de usabilidade impede que você crie um produto inutilizável desde o início. Essas heurísticas podem ser aplicadas em um protótipo de papel, wireframe ou produto acabado como regra geral para uma boa usabilidade.

Embora aqui tenhamos falado apenas das heurísticas de Nielsen, existem muitas outras maneira maneiras de avaliar uma interface, e com alguma prática e observação, você também pode criar heurísticas para o seu próprio produto.