Como deixar minha interface mais intuitiva?

Thaísa Borsoi
conexadesign
Published in
5 min readApr 12, 2021

Dicas para melhorar a usabilidade das suas interfaces baseadas nas 10 heurísticas de Nielsen.

Ilustração por Freepik — Stories.

Uma das maiores preocupações do UX/UI designer é fazer com que o usuário consiga interagir com sua interface sem ficar perdido ou precisar ler um manual de instruções.

Mas como desenhar uma interface intuitiva, garantindo que o usuário atinja o seu objetivo e tenha uma boa experiência?

Vamos falar um pouco sobre as 10 Heurísticas de Nielsen.

Mas o que são heurísticas?

De forma bem simplificada, heurísticas são testes que um grande número de pessoas fazem, e você chega a conclusão de que um determinado tipo de solução, pode ajudar em grande parte dos casos.

Ahhh….mas eu tenho sempre que seguir isso, é uma espécie de 10 mandamentos escritos nas pedras da lei?

Nãoo, porém você deve:

Amar a experiência do usuário sobre todas as coisas e essas 10 heurísticas foram escritas pelo pai da usabilidade, Jakob Nielsen.

Em 1990, Jakob Nielsen e Rolf Molich propuseram 10 heurísticas associadas às observações e conhecimentos adquiridos durante anos de experiência.

Então podemos dizer que essas heurísticas são ótimas práticas e regras gerais de bom senso, baseadas em estudos.

E como faço para aplicar essas heurísticas?

Ok, chega de introdução e vamos direto ao assunto:

As 10 heurísticas de Nielsen são:

  1. 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. Reconhecer ao invés de lembrar;
  7. Flexibilidade e Eficiência;
  8. Estética e Design minimalista;
  9. Ajude os usuários a reconhecer, diagnosticar e recuperar erros;
  10. Ajuda e Documentação.

Vamos dar exemplos de cada uma delas:

1. Visibilidade do status do sistema

Manter os usuários informados sobre o que está acontecendo por meio de feedback, no momento em que a interação ocorre.

Exemplos:

Barra de Progresso: se for algo demorado é importante mostrar a porcentagem para conclusão.
Indicador de progresso: Sinalize para seu usuário por onde ele já passou, onde ele está, e quantos passos faltam para finalizar a ação.

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

O sistema deve falar a linguagem dos usuários, com conceitos familiares em ordem lógica e natural.

Um bom exemplo é o reconhecimento de objetos através dos ícones.
Qualquer semelhança não é mera coincidência…

3. Liberdade e controle do usuário

O designer de interfaces deve fornecer um modo para desfazer e refazer escolhas equivocadas de forma rápida e clara.

Opção de desfazer do Google Drive> Documentos Google.

Uma boa dica de como o usuário pode exercer o controle em uma interface, é sua capacidade de aumentar e diminuir com facilidade a quantidade ou o número de seus produtos em um pedido:

Observe como é fácil adicionar ou remover a quantidade de frutas, no site Natural da Terra.

4. Consistência e Padronização

Essa heurística diz respeito a manter um mesmo padrão durante toda a interface para evitar dúvidas sobre o significado das palavras, ícones ou símbolos utilizados.

E aqui vai uma dica de ouro: O design lint , é um plugin no Figma que pode te ajudar a padronizar os estilos e encontrar inconsistências visuais. Ele detecta elementos de fora do guia de estilos e sugere correções.

Exemplos de consistência e padronização:

Observe como o Ifood usa o mesmo estilo e padrão de cores em suas ilustrações e reforça o branding da marca.

Também podemos usar o padrão de ícones e ainda assim destacá-los quando necessário:

Aplicativo do Ifood.

5. Prevenção de erros

Como já diz o famoso ditado popular: “É melhor prevenir do que remediar.” Os melhores designs previnem problemas de ocorrer, em primeiro lugar.

Imagine que o usuário clicou sem querer em um botão excluir de um arquivo importante ou que imaginava uma ação diferente para essa ação.

Mensagens de confirmação de exclusão, são essenciais para uma boa experiência.

Ajudar na identificação também é muito importante para prevenção de erros. Para muitos ícones, por exemplo, não podemos garantir que haja um significado universal, pois o significado depende muito do modelo mental do usuário.

Escrever o que significa aquele ícone pode ajudar na identificação com mais eficiência.

6. Reconhecer ao invés de lembrar

Devemos minimizar o esforço de memória do usuário, afinal não podemos garantir que ele sempre se lembre de objetivos, ações e opções.

O App Netflix lembra qual episódio o usuário parou e qual já assistiu.

7. Flexibilidade e Eficiência

Forneça ações que acelerem as atividades de maneira adequada, tanto para usuários experientes quanto para inexperientes.

É importante facilitar ações frequentes, como atalhos de teclados e preenchimento automático. Isso aprimora a eficiência e flexibilidade de uma interface.

No Figma, os usuários podem tanto usar atalhos, quanto acessar através do menu “file”.

8. Estética e Design minimalista

Outro ditado popular famoso: “Menos é mais”. É importante colocar apenas as informações que são relevantes ao usuário, e deixar a visualização mais “clean”.

A Apple é sempre um bom exemplo de design minimalista.

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

Mais importante que ajudar a prevenir o erro, é ajudar o usuário a identificar e encontrar soluções para o erro.

As mensagens de erros tem que ser claras e próximas do conteúdo ou ação que causou o erro.

Eu adoro essa mensagem de erro do Shutterstock, olha como eles conseguem demonstrar de forma criativa que há algo errado e dar a solução para o problema de forma bem-humorada:

10. Ajuda e documentação

O sistema deve disponibilizar ajuda e e documentação com foco total nos usuários, apesar de esperar que seu uso seja extremamente intuitivo.

O loom explica até com as setinhas onde você pode acessar as extensões, após instalá-las.
O App do Duolingo tem um bom suporte com FAQ questions e tem a possiblidade de reportar o erro na hora, ajudando na documentação de erros comuns.

Conclusão

É isso ai pessoal, espero que tenham gostado das dicas e exemplos de aplicações das heurísticas.

Sempre que acharem que estão esquecendo de algo importante, voltem aqui e revejam esses 10 pontos.

Referências

--

--