Percepção visual e Design
O design é, intrinsecamente, visual. A maneira como estudamos as formas, as cores e de que maneira isso impacta nossa percepção é vital para que um bom design seja construído.
Quando falamos de design, não é apenas sobre beleza, envolve também forma e função, tendo em vista que para cada funcionalidade se revela a necessidade de uma forma e um aspecto diferente para cada coisa. O design é amplo, podemos falar do design de uma peça gráfica, de uma interface ou mesmo de um móvel — mas todos eles exigem um pensamento acerca da maneira de como ele é percebido. Acredite, isto impacta de grande forma no efeito causado pela peça.
Você já deve ter visto brincadeiras como esta:
Mesmo mantendo o texto igual nas duas imagens, cada uma delas passa uma mensagem diferente. Tudo por conta da nossa percepção devido a cores e formas.
A mesma mensagem pode perder sua eficácia se utilizar da estratégia errada para provocar emoções. Ou mesmo enviar a mensagem totalmente oposta do que você desejaria enviar.
É por isso que hoje quero falar um pouco sobre percepção visual.
A percepção visual no cérebro
Nossa percepção visual começa, obviamente, no nosso campo de visão — o que nossos olhos conseguem enxergar é compreendido pelo nosso cérebro.
De modo bastante resumido, podemos dizer que percebemos os objetos ao nosso redor a partir de estímulos eletromagnéticos, que é como funciona a visão. Isto é, a luz entra pela pupila, indo à retina, no fundo do olho, onde há fotorreceptores prontos para captar as informações e as transmitirem para células nervosas.
- Os fotoreceptores que possuímos na retina são os bastonetes e os cones.
- bastonetes: são responsáveis pela visão noturna / responsáveis pelo contraste entre claro e escuro
- cones: são responsáveis pela visão a cores
“Se um tipo de cone não funciona bem ou simplesmente não funciona, isso limita a capacidade de percepção das cores, causando deficiência ou cegueira para cores (daltonismo).” ¹
Com isso, aí vai nossa primeira dica:
Acessibilidade
Tendo em vista que podemos ter algumas disfunções visuais, temos que ter em vista adaptações necessárias para alcançar o maior número de pessoas. É claro que acessibilidade é ampla, então neste artigo quero focar quanto à acessibilidade visual acerca de contraste — ela ajuda quem é daltônico a conseguir ler conteúdos sem problema.
Quando se trata de contraste, é essencial que o texto seja o rei. No geral, nas telas, os textos são o que nos norteiam. E, quando se trata de botões, os ícones também estão incluídos. Isso porque, se o contraste não é alto o suficiente, a leitura se torna comprometida.
Há parâmetros de acessibilidades definido pelo WCAG, que é basicamente um guia de acessibilidade. Nele, são encontrados diversos aspectos, entre eles a questão do contraste.
Você pode encontrar facilmente algumas diretrizes, já em português, no Guia WCAG, produzido pelo Marcelo Sales. Em resumo, para textos, você deve adotar um contraste mínimo, entre texto e seu plano de fundo, de 4.5:1 para fontes regulares — sendo que para um texto a partir de “18pt” ou “14pt bold”, o contraste pode ser de 3:1.
Tá, mas e como aplicar isso?
Você pode usar plugins do Figma enquanto produz sua interface ou peça de design para testar o contraste. Se você trabalha com o Canva, ele também possui ferramentas para isso.
Quanto ao Figma, eu costumo utilizar o plugin Stark, que traz as informações deste modo:
É só selecionar o texto já sobre o plano de fundo nas cores escolhidas e verificar se ele recebe este check “verdinho”. O parâmetro AA se refere ao contraste mínimo.
Tendo em vista o essencial de contraste para começar, vamos ao próximo tópico.
Processamento do campo visual
Nosso cérebro detecta diferentes estímulos a partir de um processamento paralelo. Ele consegue perceber as distintas características ao mesmo tempo, formando uma imagem completa e a compreensão do significado de um objeto.
Nós detectamos:
- Cores: a partir dos cones, detectamos cores, sendo que em proporção possuímos 60% vermelhos, 30% verdes e 10% azuis
- Forma: limites de um objeto, resolução espacial
- Movimento: o deslocamento de um objeto
Tendo isso em mente, podemos construir nossas interfaces a partir destes componentes. Cada tipo de cor, forma e movimento nos retorna um significado diferente para nossa percepção.
Cores
Muito se fala sobre psicologia das cores e mesmo se diz que as cores podem desempenhar papéis diferentes em comunidades diferentes. A cultura pode construir uma concepção específica ao redor de uma cor, por isso é importante ter ideia do contexto em que a cor será utilizada.
Um julgamento inicial de um produto pode ser feito em apenas 90s de interação com o mesmo. E este julgamento pode ser, entre 62% a 90% devido a cor.²
Deixo com vocês esta imagem, que achei interessante — trazendo uma relação do cérebro com as cores.
Forma
A forma dos objetos exercem algum poder sobre as nossa emoções. Isso vem, parcialmente, do nosso instinto natural.
“as pessoas geralmente gostam de objetos com contorno curvo em comparação com objetos que têm características pontiagudas”
(Visual elements of subjective preference modulate amygdala activation (Moshe Bar , Maital Neta — https://pubmed.ncbi.nlm.nih.gov/17462678/)
Isso pode se dar, por exemplo, porque em objetos físicos, temos a tendência de interpretar, por experiências prévias, que objetos pontiagudos podem nos machucar, como a quina de uma mesa ou a ponta de uma faca.
O mesmo estudo acima indicado, aponta que há um aumento no nível da ativação da amígdala, envolvida no processamento de medo, sendo maior que se em comparação a objetos arredondados. No gráfico abaixo, podemos ver que a barra vermelha (que representa objetos pontiagudos) desperta menor interesse quanto à preferência de um objeto de modo geral, enquanto no gráfico seguinte a posição se inverte, sendo o maior número representado, indicando ativação da amígdala.
Indo mais a fundo, pensando nas formas em suas aplicações, especialmente quando falamos de interface e mundo digital, temos que:
Tendo isso em mente, você pode pensar nas aplicações para sua interface. Seja para botões, cards e outros elementos. Para cada tipo de produto, uma forma diferente pode ter um resultado melhor. Busque conhecer o público alvo do produto e seus objetivos.
Movimento
Da mesma forma que os tópicos anteriores, o movimento também altera nossa percepção. De modo geral, movimento tende a captar mais nossa atenção. Se você tem uma imagem estática e um vídeo, ele tenderá a se destacar.
Além disso, movimento pode, em interfaces, nos trazer feedback acerca do que está acontecendo. Um exemplo? Quando você passa o mouse sobre um botão e ativa o estado de hover, mudando algo em sua aparência, como a cor. E se você coloca uma animação abrupta ou uma sutil, isso pode trazer diferentes sensações.
Conclusão
Muito pode ser dito acerca de percepção visual, mas quando pensamos para além do que vemos, pensando nas implicações emocionais dos elementos em tela, um mundo de possibilidades se abre, te permitindo criar interfaces mais efetivas, inclusivas e interessantes.
Pronto para criar interfaces incríveis?
