Vermelho ou verde? Qual a cor de botão num site ajuda a vender mais? Segundo Rian Dutra, pioneiro em psicologia aplicada ao UX Design no Brasil e autor do best-seller “Enviesados”, a resposta não tem relação com a cor específica, mas com a atenção humana e o contexto visual. O especialista, que possui mais de 13 anos de experiência trabalhando para clientes como Steve Wozniak (co-fundador da Apple), Bosch e Booking, revela que nossa capacidade de atenção é limitada e facilmente influenciada.
Com formação em neurociência e psicologia aplicada, além de mestrado em ciência da computação, Rian é considerado um dos designers mais influentes do Brasil através do perfil @designfromhuman, que possui mais de 500 mil seguidores. Sua expertise combina design de experiência do usuário com profundo entendimento do comportamento humano, o que o torna uma autoridade no assunto de como capturar e manter a atenção do usuário através do design.
É verdade que nossa atenção é menor que a de um peixe dourado?
A afirmação de que um humano consegue manter a atenção contínua em média apenas 8 segundos, sendo menor que a atenção do peixinho dourado (9 segundos), baseia-se em uma pesquisa da Microsoft realizada em 2015. O estudo foi feito no Canadá e envolveu 2 mil pessoas que responderam a perguntas e participaram de jogos online para avaliar sua capacidade de concentração.
No ano 2000, a capacidade de atenção humana era, em média, de 12 segundos. Em 2013, esta capacidade caiu para oito segundos, um segundo atrás da capacidade de atenção média estimada por cientistas de um peixinho dourado. A pesquisa concluiu que a capacidade de concentração dos humanos está sendo reduzida devido ao impacto do crescimento constante dos dispositivos móveis e das mídias digitais.
O que realmente importa na cor dos botões de um site?
Segundo Rian Dutra, o que importa não é a cor específica do botão, mas sim o quão saliente ele é em relação ao contexto visual. Um vermelho sobre o fundo branco é saliente. Um fundo verde sobre um botão vermelho não deve atrair tantos seus olhos assim. O contexto é fundamental: com quais outras tonalidades e elementos essa chamada para ação se relaciona?
A psicologia das cores no UX Design mostra que os designers devem dominar a arte de controlar para onde seus usuários olham. Geralmente nos trabalhos de design, a atenção do usuário pode ser controlada aumentando e diminuindo a relevância dos elementos visuais na tela. Não existe uma cor mágica ou regra básica que defina o melhor desempenho para todas as ocasiões, mas há princípios de contraste que funcionam universalmente.
Como funciona o viés da saliência na psicologia?
Na psicologia existe um viés cognitivo chamado de viés da saliência: nossa tendência de focar em coisas mais visíveis ou emocionalmente marcantes. Esse viés perceptivo explica por que elementos que se destacam do seu entorno capturam atenção e definem o que será lembrado ou ignorado.
A mente humana se orienta por comparações. Elementos que se destacam do seu entorno capturam atenção e definem o que será lembrado ou ignorado. Essa lógica se aplica a produtos, interfaces, campanhas e até ao modo como comemos. Os humanos não avaliam estímulos de forma absoluta, mas sempre em relação a algo anterior ou simultâneo, o que torna o contraste fundamental no design.
Por que o experimento do gorila invisível é relevante para designers?
O experimento do gorila invisível, conduzido pelos psicólogos Christopher Chabris e Daniel Simons em 1999, demonstra como nossa atenção é seletiva. O teste consistia em mostrar um vídeo onde duas equipes trocavam passes com bolas de basquete, e os participantes deveriam contar os passes da equipe branca.
Durante o vídeo, uma pessoa fantasiada de gorila parava no meio dos jogadores, batia no peito e se retirava por cerca de nove segundos. Surpreendentemente, cerca de 50% das pessoas que participaram do experimento declararam não ter percebido a presença do gorila. Isso acontece porque nossa atenção é seletiva, e esse é o papel do design da interface: captar a atenção do usuário para onde queremos que ele olhe.
Como aplicar a psicologia da atenção no design de interfaces?
O design de interface deve usar elementos como contraste, tamanhos diferentes, textos que toquem o emocional e imagens que transmitam valor para capturar a atenção. Seja usando uma cor de maior contraste, tamanhos diferentes, textos que toquem o emocional, imagens que transmitam o valor. Isso pode ser feito através de diversas estratégias visuais.
Estratégias eficazes para capturar atenção:
- Contraste de cor adequado ao contexto
- Variação de tamanhos entre elementos
- Uso estratégico de espaço em branco
- Posicionamento baseado na hierarquia visual
- Elementos que se movem ou animações sutis
- Tipografia que cria contraste visual
Qual o papel do contraste no sucesso de botões e CTAs?
@designfromhuman Qual cor vende mais? Vermelho ou verde, qual cor de botão num site ajuda a vender mais? — #enviesados #design #uxdesign #marketingdigital #marketing #landingpage #paginadevenda #viesescognitivos #psicologiaaplicada #uxdesign #uidesign #figma ♬ som original – Rian Dutra
O contraste no UX Design é uma ferramenta profunda e multifacetada para guiar a atenção, gerar hierarquia e amplificar experiências. Contrastes visuais, sonoros, textuais ou sensoriais não funcionam apenas por estética, mas influenciam julgamentos, decisões e memórias.
Por exemplo, os botões que chamam para a ação (CTA) funcionam melhor quando se destacam do fundo, não se mesclam a ele. O contraste se manifesta fortemente por meio do chamado efeito de ancoragem, um viés cognitivo que ocorre quando o primeiro estímulo recebido serve de referência para tudo que vem depois. A primeira informação se torna um ponto de comparação fixo.
Como a analogia da roupa de lantejoulas explica a saliência visual?
Rian Dutra usa uma analogia muito clara: uma pessoa vestida de macacão que reluz ao sol, coberta por lantejoulas e paetês, andando no meio da Avenida Paulista, vai chamar atenção. Mas se essa mesma pessoa estiver passando no meio de um desfile de carnaval, um rapaz de terno convencional talvez se destaque mais.
Isso demonstra que a saliência é relativa ao contexto. No mundo digital, o mesmo princípio se aplica: um botão vermelho se destaca em um site com fundo branco, mas pode passar despercebido em uma interface já colorida. O que importa é criar o contraste adequado com o ambiente visual existente, não simplesmente escolher uma cor “poderosa”.
O que designers devem perguntar ao escolher cores para botões?
A pergunta fundamental que todo designer deve fazer é: o que atrai a atenção daquele de quem você quer a atenção? Isso significa compreender profundamente o contexto visual, o público-alvo e o objetivo da interface. A escolha da cor deve ser baseada em dados, testes e compreensão do comportamento do usuário.
Fatores a considerar na escolha de cores:
- Contraste com o fundo e elementos próximos
- Consistência com a identidade visual da marca
- Acessibilidade para pessoas com deficiência visual
- Contexto cultural do público-alvo
- Hierarquia visual da página
- Teste A/B para validar eficácia
Nossa atenção pode ser limitada, mas o design inteligente pode direcioná-la de forma eficaz. O segredo não está em uma cor mágica, mas em entender como a mente humana processa informações visuais e usar esse conhecimento para criar experiências que realmente convertem.
