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

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

Resumo

  • Use termos adequados aos usuários do seu sistema: não deve ser necessário buscar a definição dos termos no dicionário;
  • Utilize pesquisa com usuários para entender quais termos são familiares e quais são seus modelos mentais sobre os principais conceitos;
  • Além dos termos, as imagens e ícones devem ser claros para os usuários e não para você.

Guia de ruas#

Antes dos smartphones e GPSs, era comum as pessoas utilizarem guias de ruas para saberem como chegar de um ponto a outro:

Fonte: https://vejasp.abril.com.br/coluna/memoria/a-vida-sem-waze/

Nessa época era comum motoristas virarem para o lado errado porque se confundiram com a posição do guia.

Aplicativo de navegação#

Com a evolução da tecnologia móvel, foram desenvolvidos aplicativos de navegação (Google Maps, Waze, etc.) que rotacionam o mapa automaticamente durante o trajeto. Assim, o usuário está sempre se movendo para cima no mapa.

Essa funcionalidade ajuda a diminuir a confusão, mas ainda é necessário algum esforço para relacionar o mapa ao que está sendo observado no mundo real.

Nos últimos anos, a realidade aumentada foi aplicada para simplificar o relacionamento entre o mapa e o mundo real. Ao invés de mostrar as direções em um mapa, a direção é sobreposta em uma imagem real, ao vivo, capturada pela câmera do celular:

Fonte: https://www.techspot.com/news/81359-google-maps-ar-walking-navigation-feature-now-available.html

Correspondência com o mundo real#

O objetivo nas 3 alternativas acima é o mesmo: dada a minha posição atual, qual direção eu devo seguir? Isso inclui saber quando e para que lado devo virar. Com o guia de ruas o usuário precisa alinhar a própria direção com a direção do mapa para depois saber para qual lado virar. O aplicativo de navegação já mantém o alinhamento correto. Finalmente, a navegação com realidade aumentada possui uma maior correspondência com o mundo real: o usuário enxerga na tela exatamente o que está vendo na sua frente com uma seta sobreposta indicando a direção que deve seguir.

Discussão

Existem, claro, diversos problemas nessa interface. Por exemplo, o campo de visão da câmera é muito menor do que o campo de visão humano, então é necessário mover o celular, tornando a interação desconfortável. Considerando a implementação e tecnologias atuais, talvez a visualização de mapa ainda seja mais útil, mas do ponto de vista da correspondência do sistema com o mundo real há uma melhora.

Esse exemplo mostra também que nem sempre o uso indiscriminado das heurísticas de Nielsen leva a uma interface com usabilidade melhor.

Outro exemplo de correspondência do sistema com o mundo real são os botões de volume em celulares:

Fonte: https://forums.macrumors.com/threads/screen-edge-uneven-near-volume-buttons-6-7-8-se-2nd-gen.2237512/

Em praticamente todo os celulares o botão superior é utilizado para aumentar e o inferior para diminuir o volume. Esse é um exemplo de mapeamento natural de conceitos (isso está relacionado ao modelo mental do usuário, que vamos conversar no futuro): o que está em cima aumenta e o que está embaixo diminui.

Linguagem familiar#

Outra forma de correspondência com o mundo real é a linguagem. Prefira usar termos que o usuário tenha mais familiaridade. Termos técnicos (ex: jargão jurídico, códigos de erro, etc.) causam insegurança e os usuários podem se sentir ignorados ("eu não entendo, então este lugar/site/app não é para mim").

Exercise 1

Considere este trecho do contrato do cartão de crédito do Nubank:

Em alguns casos não é possível eliminarmos todos os termos técnicos e simplificar a linguagem. Um exemplo é na produção de contratos, que devem ser precisos na linguagem técnica. Qual foi a alternativa adotada pelo Nubank?

Answer

A abordagem do Nubank foi adicionar uma página inicial com linguagem simplificada e títulos claros: "seus principais direitos", "suas principais obrigações" ao invés de "direitos do contratante" e "deveres do contratante". As páginas seguintes do contrato utilizam a terminologia técnica necessária, mas ao chegar nesse ponto a mensagem principal já foi passada.

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

Exercise 2

Considere as duas interfaces abaixo. Ambas apresentam formulários de cadastro de dados de cartão de crédito.

A primeira interface é de um protótipo de aplicativo Android:

Fonte: https://www.thiengo.com.br/desenvolvendo-as-telas-de-cartao-de-credito-com-mascara-de-campo-android-m-commerce

A segunda interface é de um protótipo de uma página de internet:

Fonte: https://sudonull.com/post/69572-Interactive-credit-card-for-entering-payment

Compare as duas interfaces com relação à correspondência do sistema com o mundo real.

Answer

Discutiremos as respostas no início da aula.