• Design
  • Heurísticas de Nielsen
  • Heurística 04

4. Consistência e padronização#

Resumo

  • O usuário não deve precisar identificar que palavras, situações ou ações diferentes significam a mesma coisa;
  • Consistência interna: siga o mesmo padrão para nomenclatura e de design (ex: botões, figuras) em toda a aplicação (ou família de aplicações);
  • Consistência externa: usuários passam mais tempo em outras aplicações do que na sua, por isso, siga padrões estabelecidos para facilitar o aprendizado.

Exercise 1

Qual das ações abaixo você associa a este ícone:

Answer

Tecnicamente não existe uma resposta "certa", pois a pergunta é sobre a sua interpretação pessoal. Dito isso, é muito provável que você tenha escolhido a ação "pesquisar/buscar".

Exercise 3

Quando você acessa uma página da internet, em que posição você espera encontrar o logotipo da empresa?

Answer

Aqui também não existe resposta certa, mas muito provavelmente você espera encontrar o logotipo da empresa no canto superior esquerdo da página.

Os exercícios acima são exemplos de consistência externa. A grande maioria das páginas de internet e aplicativos usam esses ícones para representar a mesma ação e organizam o layout seguindo alguns os mesmos padrões. Isso facilita o aprendizado da interface. O usuário não precisa refletir muito a respeito sobre o significado do ícone. Quando uma página sai do padrão, há uma grande chance do usuário não encontrar o que está procurando e simplesmente sair da página.

A quarta heurística de Nielsen diz que devemos seguir padrões e manter a interface consistente tanto internamente (na mesma aplicação/família de aplicações) quanto externamente (outras aplicações/páginas da internet). A consistência externa está relacionada à Lei de Jakob, que afirma que o usuário passa a maior parte do tempo em outras aplicações/sites que não são a sua. De fato, usuários permanecem, em média, menos do que 1 minuto na mesma página da internet.

Consistência interna#

Exercise 4

Considere os cabeçalhos do Google Docs, Google Sheets e Google Slides:

Aponte 3 semelhanças entre as interfaces.

Answer

Apesar de serem produtos diferentes, as 3 aplicações acima fazem parte da mesma família de produtos. Podemos observar diversas semelhanças (existem outras):

  • O logotipo dos 3 produtos é uma página com a ponta dobrada. O que muda é a cor e o ícone dentro da página.
  • O botão de compartilhar segue a cor de fundo do logo e está sempre no canto superior direito.
  • Todos os ícones em comum estão na mesma ordem: desfazer/refazer, imprimir, zoom, fonte, tamanho da fonte, decorações de fonte, etc.

No exercício anterior mostramos um exemplo de consistência interna entre os produtos do Google. Entretanto, também é possível exagerar e acabar padronizando mais do que o necessário. No final de 2020 o Google mudou o logotipo de seus produtos para unificar a linguagem visual:

Fonte: https://techcrunch.com/2020/10/06/googles-new-logos-are-bad/

A mudança logo gerou memes:

Fonte: https://www.reddit.com/r/google/comments/jie6b7/for_opening_home_instead_of_drive_gang/

Veremos que, de acordo com a heurística 6, devemos facilitar o reconhecimento de informações na nossa interface. Esse último exemplo mostra que devemos considerar as heurísticas como um todo e não otimizar apenas uma delas, pois podemos acabar piorando a usabilidade.

Interface Hall of Shame/Fame: Preparação para a aula#

Exercise 5

No site do Insper encontramos as duas páginas abaixo.

Página inicial:

Página da graduação:

Com relação à consistência interna e externa, indique pontos positivos e negativos presentes nas páginas acima.

Answer

Discutiremos as respostas no início da aula.