Percepções visuais no duro dia a dia de um usuário que sofre sem perceber

Oi!

Inicialmente, o nome desse artigo seria: Percepções Visuais no Digital. Mas depois de um tempo eu pensei que o que eu sofria diariamente poderia ser algo mais complicado do que um simples título que não quer dizer nada.

Numa introdução básica, a percepção visual é uma das maneiras mais produtivas e rápidas através das quais as pessoas são capazes de obter informações e processá-las pelo cérebro. Ela (a percepção visual) possui uma influência em muitos aspectos da vida. O designer, ao negligenciar isso na criação de produtos para os usuários, pode ser extremamente imprudente.

Antes de falar do digital, precisamos falar sobre objetos reais e como eles interferem em nossas vidas. Mesmo de maneira sutil, nos tornamos esquizofrênicos e nem notamos :)

1. Portas

Garanto que todo mundo já se incomodou, mesmo que seja por uma fração de segundos com portas desse tipo:

Ou placas que te dizem tudo, altamente ilustrativas e até coloridas:

Essas placas podem parecer simples e de fácil interpretação, mas elas não deveriam existir! Como diria Donald Norman, "todas são o fruto da preguiça mental de algum designer" que não resolveu o problema simples da vida de pessoas que tem um mísero objetivo: ultrapassar a porta para chegar do outro lado, sem que nada te impeça, nem mesmo um pensamento de dúvida do que se tem à fazer.

Quando vemos essas placas, temos o efeito que tudo grita para o usuário e nada é ouvido.

A regra básica para construção de portas é um segredinho guardado no bolso do designer preguiçoso: diminuir ruídos e deixar do jeito que uma criança de 3 anos entenderia: se não tem onde pegar, só resta empurrar. Se tem onde pegar, obviamente é pra puxar.

Algumas pessoas devem estar pensando:
-Mas as portas automáticas não resolvem esse problema?
Sim, resolvem, aliás, são ótimas quando funcionam perfeitamente, porém nem todas são perfeitas e nem todas as pessoas sabem usa-las.

<<< veja o vídeo por favor, não precisa assistir todo :) >>>

2. Elevadores

Os elevadores são locais onde o uso de fragmentos visuais podem gerar muitas indignações em poucos segundos, o que gera um mini estresse mental no usuário:

Existem elevadores que explicam o óbvio:

Tem os que parecem um campo minado, parece que se você errar o andar ele explode:

O Elevador Tele-Sena que usa uma ordem só pra ferrar com sua sanidade:

Quer passar dificuldade? Use esse elevador com dislexia severa:

E por último, tu chuta um botão e vê onde vai dar.

Por que o elevador, que deveria ser muito simples se torna um mini problema diário? Porque nem todo mundo conhece a lógica do elevador.

3. Lógica do Elevador

Pergunta: Você está no 5º andar, e gostaria de chegar no 10º andar. O elevador está no 9º andar. Você aperta pra descer ou pra subir?

Resposta correta:
Você aperta para subir, porque é você que gostaria de subir, não o elevador. Esse é o seu objetivo. Ele determina uma ação pra máquina executar, que por lógica faz a ação correta :)

A lógica é simples:
Eu sendo usuário quero subir, portanto eu aperto o botão que possui uma seta para cima.

Ela é muito simples mesmo, porém nem todo usuário é obrigado a saber que a seta pra cima significa isso e a seta pra baixo significa aquilo.

4. O maravilhoso (nem tanto) mundo digital

É neste momento que entro no design digital, porque temos esse mesmo problema em muitas interfaces que não deixam claro o que representa um ícone qualquer.

Não é suficiente fazer os usuários verem os elementos visuais. É vital fazê-los reconhecer e entender rapidamente sua mensagem.
O olho humano identifica imagens muito mais rápido que o texto. As pessoas precisam de cerca de 1/10 de segundo para obter uma percepção visual de um elemento gráfico. Em contrapartida, reconhecimento significa não apenas velocidade, mas também ação correta ou informação que este ícone deve trazer ao usuário.

Então designer, a decisão de aplicar ícone, texto ou ambos no layout deve ser baseada em uma análise cuidadosa do público-alvo e na compreensão das metas e conversões que devem ser obtidas através da interação.

Confira um ~checklist rápido das suas obrigações como designer entendedor de percepções visuais no ambiente digital~ que ajudam a tornar a decisão mais fácil de qual estimulo visual você deve aplicar na sua interface:

1. Público-alvo (capacidades físicas, idade, formação cultural, desenvolvimento geral e nível de educação)
2. Habilidades de leitura do usuário típico
3. Ambiente típico de uso do produto
4. Nível de disseminação global ou local do produto
5. Nível de reconhecimento dos gráficos escolhidos
6. Nível de distração / concentração fornecida pelos gráficos

Todos os pontos mencionados tratam das habilidades cognitivas humanas que influenciam a qualidade e a eficiência da percepção de dados visuais.

5. Mistery Meat Navigation

O termo “Mistery Meat" (carne misteriosa) é originário da carne servida em refeitórios de escolas públicas americanas que foram processadas de tal maneira que o tipo de animal era impossível descobrir.

Já o Mistery Meat Navigation é um termo usado em 1998 por Vincent Flanders do famoso site Web Pages That Suck. Refere-se a botões ou links que não explicam a você o que eles fazem. Em vez disso, você precisa clicar neles para descobrir.

Não precisamos ir aos primórdios da internet para ver interfaces desses tipo. No Google Maps por exemplo temos exemplos de ícones que tornam o significado abrangente até mesmo para heavy users.

No exemplo abaixo, pode parecer óbvio os significados, mas na hora do uso você precisa apertar o botão para descobrir que ação vai acontecer. Isso é ruim e não pode se tornar referência.

Navegação em cabeçalhos do Android, você precisa aprender o que cada símbolo minimalista significa. É lindo, mas o amor a primeira vista não acontece. Precisa conhecer os pais, jantar, levar no cineminha pra depois descobrir que o botão que é uma bolinha ou um quadradinho significam alguma coisa.

Isso não é mal só de Android, IOS também tem problemas, mas eles descobriram que nestes casos o melhor é ter legenda para facilitar a vida do usuário. Veja alguns exemplos:

O próximo exemplo mostra como a percepção visual impacta em ícones simples.

Cenário 1
Objetivo: Usuário gostaria de esconder o valor do seu saldo no app do banco para não mostrar para pessoas que estão ao seu redor.
Ação: Usuário clica no ícone que supostamente faz a ação de esconder o saldo.

Nota-se que nesse cenário podemos utilizar outros ícones com o mesmo significado de desativar, porém vemos um problema ao transformar este ícone de ação num botão com legenda:

Por isso, o uso do ícone de olho aberto para desativar o saldo na minha percepção visual está incorreto.

No Cenário 1 eu vou contra a lógica do elevador, lembram?
Eu sendo usuário quero fazer algo, nesse caso esconder o saldo, portanto eu aperto o botão de esconder o saldo (o ícone de olho fechado).

Exemplos como Play e Pause usam a mesma lógica

Nossa isso é uma maravilha! Vou usar essa lógica sempre! Nem sempre amigo designer, nem sempre :(

Saca só o exemplo de um ícone de áudio:

Sabemos que design não é uma matemática exata, e quando se fala de percepção visual fica mais longe ainda esse ideal. Nosso papel é ser um facilitador, reduzindo os ruídos entre as interfaces e as pessoas. Seja um designer visual que ilumine a vida das pessoas 😇, não seja o diferentão disruptivo na escolha dos estímulos visuais que necessitam da ação do usuário.

bju :)

Referências:

O Design do Dia a Dia

Pesquisas:
The art of seeing: visual perception in design and evaluation of non-photorealistic rendering BY ANTHONY SANTELLA — New Brunswick, New Jersey May, 2005

Art, Perception an information Processing: An Evolutionary Perspective BY Derek Hodgson (Rock Art Research 2000, 17(1):3–34)

Sites
piktochart.com / uxplanet.org / gigazine.net / eyesparks.com / tubikstudio.com