Por Gabrielle Pinhata

Você sabe o que uma interface precisa conter para proporcionar uma boa experiência aos usuários? Para responder essa pergunta precisamos pensar nos pilares do UI e UX design, uma boa interface além de esteticamente agradável deve possibilitar que o usuário a use com facilidade, ou seja, realize todas as tarefas que desejar de forma simples e direta, para isso existem as 10 heurísticas de Nielsen, que ajudam a criar uma interface com boa navegação, interação e uma ótima experiência de uso.

“Even the best designers produce successful products only if their designs solve the right problems. A wonderful interface to the wrong features will fail.” – Jakob Nielsen

Desenvolvida em 1990 por Jakob Nielsen, cientista da computação, as 10 heurísticas são princípios de avalição da usabilidade de interfaces, podem ser aplicadas em qualquer momento do produto, mas são mais utilizadas em duas fases, durante o desenvolvimento, na qual a avaliação pode ser aplicada de base para criação de um layout funcional, e após a execução de uma nova funcionalidade, em que elas são usadas por especialistas em usabilidade que testam o produto e identificam problemas na interface.

Conheça agora cada uma das 10 heurísticas de Nielsen:

1 – Visibilidade do Status do sistema

O sistema deve sempre manter os usuários informados sobre o que está acontecendo, em tempo real, por meio de feedbacks instantâneos dentro de um prazo razoável, que servirão para orientar o usuário sobre o que está acontecendo na tela em que ele se encontra.

Primeira das 10 heurísticas de Nielsen: Visibilidade do status do sistema - Playlist de filmes do site Youtube
Playlist de filmes do site YouTube

Quando assistimos a uma playlist no YouTube, somos informados de tudo que ocorre na tela, como a barra do player que mostra o quanto do vídeo já foi carregado, em qual parte o vídeo está, o tempo de duração dele, o quanto já foi assistido, do lado direito fica claro qual vídeo está sendo reproduzido, quais já foram assistidos e quais os próximos.

2 – Correspondência entre o sistema e o mundo real

O sistema deve ter a mesma linguagem que seu usuário utiliza no dia a dia, portanto utilizar palavras, frases, imagens e conceitos que sejam familiares ao usuário. Também é recomendável a utilização de ícones que representem uma ação para realizar essa correspondência.

Segunda das 10 heurísticas de Nielsen: Correspondência entre o sistema e o mundo real - Caixa de entrada do Gmail
Caixa de entrada do Gmail

Por exemplo, o símbolo de uma lixeira representa a ação de excluir algo, o de lupa a de buscar, representando assim ações que tenham uma conexão com o mundo real.

3 – Controle e liberdade para o usuário

No sistema é importante que o usuário tenha liberdade para realizar ações que ele deseja, porém muitas vezes essas ações são realizadas por engano, nessas situações deve haver uma “saída de emergência” de fácil localização, permitindo que o usuário saia daquela janela indesejada ou retorne ao ponto anterior.

Terceira das 10 heurísticas de Nielsen: Controle e liberdade para o usuário - Opção desfazer do Gmail
Opção “desfazer” do Gmail

O Gmail, por exemplo, permite que o usuário desfaça a ação de excluir um e-mail, portanto a caixa com a opção “desfazer” permite que o usuário se recupere, dando a ele controle sobre a situação, caso ela tenha sido realizada por engano.

4 – Consistência e padronização

Não devemos deixar o usuário em dúvida se palavras, situações ou ações diferentes tem o mesmo significado, para isso a interface deve manter uma consistência, permitindo que o usuário identifique os padrões de estética, interação e informação existentes nesta.

Quarta das 10 heurísticas de Nielsen: Consistência e padronização - Menu dos programas Microsoft
Menu dos programas Microsoft

Os programas da Microsoft, por exemplo, seguem padrões, sendo que os itens do menu ficam sempre na parte superior, os ícones que realizam a mesma ação são repetidos em todas as interfaces, como os da seção Clipboard, em que a tipografia é a mesma e mantém o mesmo tamanho e cor.

5 – Prevenção de erros

Essa heurística foca em criar uma plataforma que busca prevenir que problemas ocorram, eliminando condições mais propensas ao erro, isso pode ser feito sinalizando ações como quando o usuário não finalizou uma tarefa e pede para sair da página ou oferecendo a ele uma opção de confirmação antes de completar uma ação.

Quinta das 10 heurísticas de Nielsen: Prevenção de erros - caixa de confirmação e tela de rascunho no Outlook
Caixa de confirmação e tela de rascunho no Outlook

Um exemplo disso é o Outlook, que mostra uma caixa de confirmação quando o usuário fecha um e-mail que estava escrevendo sem enviá-lo e o salva em uma tela de rascunhos caso ele deseja enviar este e-mail futuramente.

6 – Reconhecimento em vez de recordação

Devemos minimizar a quantidade de informações que o usuário precisa memorizar, para isso, objetos, ações e opções importantes devem ficar visíveis, isso faz com que o cérebro perceba as ações que são similares, reconhecendo assim padrões.

Sexta das 10 heurísticas de Nielsen: Reconhecimento em vez de recordação - Página de produto no site Best Buy
Página de produto no site Best Buy

Os sites de e-commerce, por exemplo, costumam seguir padrões em seu layout, tendo a barra de busca no topo, o carrinho no canto superior direito, na página do produto fica uma foto deste a esquerda e sua descrição na direita, permitindo assim que o usuário reconheça o layout de experiências anteriores que ele teve nos demais sites do gênero, focando mais sua atenção nos produtos, do que em aprender a utilizar o site.

7 – Eficiência e flexibilidade de uso

A interface deve atender tanto as necessidades dos usuários leigos quanto a dos experientes, os leigos precisam ter as informações bem detalhadas para conseguirem realizar uma tarefa, mas a medida que vão conhecendo a interface precisam conseguir interagir de forma mais rápida, portanto a interface deve permitir que os usuários adaptem ações frequentes de acordo com o nível em que estão.

Sétima: Eficiência e flexibilidade de uso - Exemplos de atalhos de teclado que o Windows oferece
Exemplos de atalhos de teclado que o Windows oferece

Os atalhos de teclado do Windows, por exemplo, permitem essa interação mais rápida, pois reduzem a quantidade de cliques que o usuário precisaria para realizar uma ação, além de diminuir o tempo gasto para achar onde aquela ação está na plataforma, permitindo realizá-la apertando poucas teclas.

8 – Estética e design minimalista

Quanto maior a quantidade de informações, mais tempo o usuário vai levar para analisá-las e poder tomar uma decisão, aumentando assim as chances dele abandonar a aplicação/site por achar confuso demais.

Portanto o design da interface deve ser minimalista e o conteúdo o mais direto possível, informações que forem secundárias podem ser deixadas em segundo plano, como menus e abas.

Oitava: Estética e design minimalista - Site da Apple
Site da Apple

O site da Apple é um bom exemplo de estética e design minimalista, ele é bem simples e objetivo, mostrando o nome do produto, uma linha o descrevendo e a foto dele grande e destacada com cores contrastantes, além disso o site valoriza o espaço em branco, os elementos são bem organizados e a tipografia usada é simples e limpa.

9 – Ajude os usuários a reconhecer, diagnosticar e recuperar erros

Caso dê algo de errado, é importante mostrar ao usuário qual foi o erro e como se recuperar dele, para isso, as mensagens de erro devem ser claras e objetivas, em linguagem simples e próximas da ação que causou o erro.

Nona: Ajude os usuários a reconhecer, diagnosticar e recuperar erros - Formulário do Outlook
Formulário do Outlook

Por exemplo, o formulário de criação de conta do Outlook mostra quando um dado está preenchido incorretamente, no momento de criar a senha a plataforma orienta onde está o erro, próximo do campo em que ele ocorreu e os passos para corrigi-lo.

10 – Ajuda e documentação

Nunca sabemos quando um usuário vai precisar de um auxílio, embora as áreas de documentação e ajuda sejam as menos acessadas, elas devem estar lá, principalmente em interfaces que possuem muitas possibilidades, pois podem ajudar o usuário a resolver um problema sozinho.  

Décima: Ajuda e documentação - FAQ do site da Saraiva
FAQ do site da Saraiva

O site da Saraiva, por exemplo, possui um FAQ que permite aos usuários verem as dúvidas mais frequentes e suas respectivas soluções, podendo assim resolver por conta um problema que esteja aqui.  

O que aprendemos com as 10 Heurísticas de Nielsen

Desse modo, as 10 heurísticas de Nielsen, são de grande importância na elaboração de interfaces digitais, sua aplicação proporcionará uma ótima experiência aos usuários, com informações que sejam úteis, de fácil compreensão, uma interação simples e com um design minimalista, e como consequência, irá gerar um engajamento desses usuários.

Quer saber como a Programmer’s realiza UX e UI em produtos digitais? Converse agora com um dos nossos consultores e conheça nossa solução Agile Experience.

Gabrielle Pinhata é UX e UI Designer, trabalha resolvendo problemas através da criação de interfaces digitais que proporcionam as melhores experiências aos usuários e está constantemente aprendendo novos conceitos para se manter atualizada nas tendências do mercado.

Quer acelerar a transformação digital da sua empresa?_

Nós te ajudamos a prever tendências e alcançar objetivos futuros.

Telefone +55 (11) 3504-1100 Email contato@programmers.com.br                    Entre em contato