O que leva alguém a comprar uma camiseta ao invés de outra idêntica vendida por uma marca diferente? Talvez o cliente não perceba, mas a ciência está por trás dessa escolha. Entender como o cérebro humano funciona faz a diferença na hora de criar layouts de site para engajamento e conversão.
Quando um cliente em potencial acessa sua loja virtual, a marca tem em mãos a oportunidade ideal para influenciar o comportamento do interessado. Desde a primeira impressão até o fechamento da compra, o layout do site pode ser o verdadeiro decisor da venda.
Neste artigo você irá entender como usar a psicologia do design no layout do seu site, nas cores da marca e nos textos dos seus botões de compra. Explore a seguir os princípios básicos dessa ciência com táticas usadas por marcas aclamadas pelo público.
O papel da psicologia no design
Segundo estudo realizado pela Universidade de Harvard, cerca de 95% das decisões de compras são inconscientes. E qual o impacto disso no seu branding? Isso significa que entender princípios básicos de psicologia — como gatilhos emocionais para vendas — levam a melhores decisões para o design do seu site e sua marca como um todo.
Criar layouts de site que gerem vendas significa fazer as perguntas certas sobre seu público-alvo. Além dos dados demográficos que fazem parte da sua buyer persona, quais são os desejos mais profundos do seu público? Como você pode suprir essas demandas? Ou fazer desejarem ser parte de uma comunidade? Quais imagens ou palavras passam uma sensação de segurança, ou conforto?
Claro que cada público tem suas particularidades, ainda mais quando olhamos individualmente. Para isso, é preciso ter um olhar apurado para captar preferências e comportamentos gerais.
Entender os princípios da psicologia facilita o mapeamento de boas práticas a serem aplicadas, e incluem Teoria da Gestalt, esforço cognitivo, modelos mentais e psicologia das cores. Mais adiante, você saberá detalhes sobre cada um deles.
Nos últimos anos, muitos designers se especializaram em UX design (design de experiência do usuário em tradução livre). Isso porque o design de fato interfere diretamente na atração e conversão, e os profissionais da área sabem como criar layouts de site para engajamento com experiências relevantes. Esse modelo também é conhecido como design thinking, totalmente focado no cliente.
Por que é importante entender a psicologia no design?
Um layout bonito é insignificante se ele não transmitir as sensações certas ou ser compreendido por quem consome aquele conteúdo.
Aplicar táticas de psicologia é o que diferencia um “design bonito” de um layout que atrai engajamento, agrega seguidores e gera vendas. Essa abordagem pode salvar tempo na hora de construir uma marca consistente, além de aprofundar o conhecimento do negócio sobre seu público-alvo.
E-commerces construídos com base nas preferências e comportamentos dos usuários tornam a experiência mais intuitiva e reduz obstáculos. Dessa forma, o caminho do seu cliente até a compra fica mais rápido, amigável e com menores chances de frustrações.
8 táticas para criar layouts de site para engajamento
- Humanize seu negócio
- Use a psicologia das cores
- Reduza o número de opções
- Otimize para facilitar o uso
- Aplique os princípios da Gestalt
- Guie os olhos do usuário
- Utilize o viés de confirmação
- Reduza a carga cognitiva
1. Humanize seu negócio
Pode parecer óbvio, mas projetar sua empresa para humanos é uma tática eficaz na psicologia do design — e algumas marcas ignoram esse conceito básico.
Na hora de construir sua marca, é importante ter uma linha clara da proposta de valor, mas é crucial focar na experiência do usuário em cada decisão do layout.
Lembre-se: não é porque algo é do seu gosto que irá agradar aos seus potenciais clientes, e vice-versa.
Marcas reavaliam constantemente o design do seu site, e até procuram fazer um rebranding — como foi o caso da Boca Rosa, marca da blogueira Bianca Andrade. Para que as mudanças sejam bem-sucedidas, é necessário estar atento às demandas dos consumidores, feedbacks e tendências do momento.
Ainda assim, alguns sites ficam do mesmo jeito para sempre. A Wikipedia, por exemplo, foi lançada em 2001 e sempre teve uma estrutura consistente. Por que não mudar? Simplesmente porque funciona, cumpre seu papel e a interface cumpre o que promete.
Desperte um sentimento positivo
Outra fora de humanizar o design é usar fotos de pessoas felizes e sorridentes em suas peças e site. O sorriso é uma parte importante. Estudos comprovam que ver pessoas sorrindo é contagiante e tem efeitos positivos na saúde, liberando endorfina, reduzindo o estresse e melhorando o humor.
No exemplo abaixo, a pantynova usa a imagem de uma pessoa sorrindo para transmitir bem-estar e estabelecer uma conexão com seus consumidores.
Usar as expressões faciais no seu layout é uma boa prática. Gere identificação para que seu público chegue à conclusão de que “essa marca é feita para pessoas como eu”.
Existem outras táticas também, como usar fotos que pareçam estar olhando diretamente para o visitante do seu site (para layouts de site que gerem engajamento) e compartilhar fotos das pessoas que estão por trás do negócio ou já consumiram seus produtos (para construir credibilidade da marca).
A Bold Snacks compartilha postagens que mencionaram a marca para que os visitantes se identifiquem com o estilo de vida e ocasião de consumo dos produtos.
A página sobre a história da Ekomat fala da perspectiva do seu fundador, Mario Santos, sobre a comunidade de clientes, trazendo uma foto dele.
💡Dicas:
-
Crie uma página de “Quem somos” para seu e-commerce que inclua fotos do fundador e colaboradores.
-
Se ainda não teve a oportunidade de tirar fotos dos seus produtos em ambientes reais ou editoriais, use bancos de imagem para incluir fotos de pessoas sorridentes no seu layout.
2. Use a psicologia das cores
A psicologia das cores é um tema delicado, sofrendo interferências de interpretações variadas e uma mistura de resultados de busca do Google. Muitas vezes certas cores são associadas a emoções ou reações, como o azul à calma, ou o amarelo à energia. Mas nem todos têm as mesmas conexões com cada cor.
Como escreve o cientista comportamental Brian Cugelman, “No mundo ocidental, as pessoas descrevem o vermelho por suas conexões emocionais com perigo e paixão. Mas na China, o vermelho é associado emocionalmente à felicidade e fortuna.”
A cultura e a diversidade acrescentam nuances à psicologia das cores que não podem ser resumidas por um único significado.
Considere também a idade e a experiência. Um público mais velho pode ter afinidade por cores que lembrem da infância, como a paleta outonal suave dos anos 1970. E um público mais jovem pode ser influenciado por tendências (pense no “rosa millennial” ou “verde brat”).
A psicóloga de design Sally Augustin aconselha os designers a considerar também os atributos da cor: matiz, saturação e brilho. “Cores que não são muito saturadas, mas são relativamente brilhantes, trazem relaxamento”, diz ela.
O exemplo acima com cores saturadas, energéticas e quentes refletem a ousadia da Fly By Jing. Já aqui embaixo, a Salt & Stone usa saturação baixa para transmitir relaxamento e a visão de um spa de alto padrão.
Esses exemplos mostram como diferentes abordagens de cor podem mudar o clima de um site. No entanto, não se deixe levar por ideias amplas de psicologia das cores na hora de construir seu branding.
Pesquise seu mercado-alvo, utilize grupos focais e procure entender as diferenças culturais ou demográficas específicas que podem afetar a percepção da cor pelo consumidor.
3. Reduza o número de opções
Sabe quando você acessa um streaming e não sabe o que escolher para assistir? Ou quando vai ao mercado e fica em dúvida na hora de escolher um docinho, imóvel na frente da prateleira, sem saber o que fazer? A ciência explica o que está por trás dessa sensação.
O paradoxo da escolha, conceito popularizado por Barry Schwartz, indica que quando há muitas opções, a escolha final não necessariamente será satisfatória. Na verdade, é provável ficar mais estressado e frustrado com a decisão.
A obrigação de escolher também faz com que as pessoas gastem mais tempo analisando as opções, segundo a lei de Hick. Conhecer esses princípios e aplicá-los na usabilidade e layout de site para engajamento significa reduzir as opções para os potenciais clientes ficarem mais propensos a agir rápido.
Quando um visitante acessa seu site e se depara com uma infinidade de opções de produtos, varições de um mesmo item e diversas taxas de envio, é possível que ele se sinta sobrecarregado e saia sem fazer uma escolha.
Na hora de criar um layout de site para sua marca, considere o que é absolutamente necessário e elimine as distrações. Seus clientes realmente precisam de 48 opções de cores para uma única camiseta? Escolha as 10 mais populares de acordo com seus dados e pesquisa de mercado. Há muitas CTAs (chamadas para ação) na página inicial? Concentre a atenção de seus clientes no botão que você deseja que eles cliquem.
A Zaff Design é uma loja focada em luminária, e logo na home traz baners focados em suas poucas categorias ou lançamentos para direcionar os visitantes direto ao que podem estar procurando, conforme as estatísticas ou campanhas de marketing no ar.
4. Otimize para facilitar o uso
De todas as compras online, 50% delas são feitas pelo celular. Para acompanhar essa tendência do chamado mobile commerce, seu site deve ser otimizado para oferecer uma ótima experiência para potenciais compradores que acessarem seu site via smartphone.
É crucial encontrar um equilíbrio entre facilidade de uso e funcionalidade. Você pode querer oferecer aos clientes muitas opções, mas se isso afetar a usabilidade do seu site em dispositivos móveis, a experiência pode ser desanimadora.
Analisar dados, como informações obtidas por meio de mapas de calor do seu funil de conversão, pode ajudar a entender como as pessoas se comportam ao acessar seu site no celular, onde encontram dificuldades e quando desistem. Uma experiência boa pode influenciar os sentimentos gerais de um potencial cliente em relação à sua marca.
5. Aplique os princípios da Gestalt
Nossa mente naturalmente procura padrões para organizar e processar as informações com mais agilidade, e a psicologia aplicada ao design encontrou conceitos gerais de como interpretamos as imagens, como por: proximidade, similaridade, continuidade, fechamento, unificação, percepção, simetria.
Veja a seguir três deles que merecem sua atenção especial.
Simetria
Pesquisas sugerem que os humanos são atraídos pela simetria em rostos e objetos. O especialista Alan Lightman explorou essa ideia em seu livro “O Universo Acidental”, onde escreve: “A busca pela simetria e o prazer emocional que sentimos ao encontrá-la devem nos ajudar a dar sentido ao mundo ao nosso redor, assim como encontramos satisfação na repetição das estações e na confiabilidade das amizades. A simetria também é economia. Simetria é simplicidade. Simetria é elegância.”
Os humanos associam simetria à harmonia, e usar esse princípio no layout do seu site pode deixar os usuários mais confortáveis para navegar.
Por outro lado, a assimetria também pode ser eficaz, dependendo do sentimento ou da ação que você deseja despertar. Se usada com cuidado, pode ser uma ferramenta para destacar algo na página.
Figura-fundo
O princípio da figura-fundo trata da relação entre objeto e fundo. Ele incentiva os designers a fazerem uma distinção clara entre o que é considerado o plano de fundo e objeto que deve chamar a atenção do público.
Neste exemplo da página inicial da Zissou, a marca usa uma imagem colorida com um botão para chamar a atenção do usuário e sobrepõe isso a um fundo em preto e branco que compõe o ambiente de um quarto.
Proximidade
O princípio da proximidade é outra maneira útil de entender como as pessoas consomem informações. Como os cérebros procuram encontrar ordem no mundo — de preferência da forma mais fácil para economizar energia —, as pessoas tendem a organizar informações em grupos.
Alivie o trabalho da interpretação imitando esse comportamento humano e agrupando visualmente informações relacionadas. Barras de navegação, menus suspensos e rodapés são ótimos exemplos de como organizar ideias e objetos semelhantes para criar uma experiência contínua e sem grandes mistérios.
6. Guie os olhos do usuário
A primeira visita de uma no seu site pode ser uma experiência positiva se der um empurrão na navegação. Aplique a psicologia nos seus layouts de site para facilitar o engajamento.
Elementos gráficos (como setas ou linhas curvas) e animação ao rolar a página usam o princípio da continuidade da Gestalt para auxiliar o usuário a encontrar um caminho. Você também pode dar ênfase através de cores, tamanhos de texto e elementos para atrair a atenção do usuário até um ponto focal.
Veja como seu olhar caminha pelos elementos roxos da página de produto da Sallve. O maior destaque é o botão para comprar, os atributos são listados em bolinhas roxas, e é possível observar o profissionalismo das várias imagens de produto disponíveis.
7. Utilize o viés de confirmação
O viés de confirmação é um comportamento humano que leva as pessoas a buscarem informações que confirmam suas próprias crenças, ignorando tudo o que pode ser contraditório.
Evitar a armadilha do viés de confirmação na sua pesquisa de mercado (ou seja, ignorar dados que não correspondem àquilo que você acredita) é importante, mas há maneiras de usar a psicologia por trás do conceito como uma ferramenta de design.
Abraçar uma opinião para sua marca significa afastar alguns e atrair outros. É um erro tentar ser tudo para todos — ou melhor, isso é impossível. Em vez disso, defina seu público-alvo com detalhes precisos e mapeie claramente seus valores para satisfazer seus desejos.
8. Reduza a carga cognitiva
Carga cognitiva é basicamente a quantidade de espaço disponível para a memória no cérebro humano. O excesso de informação ou um design complexo demais pode sobrecarregar a mente.
A lei de Miller, criada por George Miller na década de 1950, afirma que a memória funcional de uma pessoa pode processar e manter cerca de sete informações ao mesmo tempo.
Para reduzir a confusão no layout do seu site, é possível eliminar links ou informações redundantes, diminuir textos ou transformá-los em infográficos e dividir um grande bloco em pedaços menores.
Esse exemplo da loja Duas coloca no menu principais duas opções: produtos e blog. No banner principal, há um único botão. E, caso queira ver os produtos, a janela se divide entre mais duas categorias, sendo elas roupas e acessórios. Ou seja, o conceito de “duas” se mantém mesmo na usabilidade do site.
Os modelos mentais dos layouts de site para engajamento incorporam o design intuitivo, colocando em prática o que as pessoas acreditam ser a forma certa de navegar em uma loja virtual.
Essas ideias são construídas conforme as experiências anteriores do usuário e na expectativa de certos elementos estarem sempre nos mesmos lugares, ou que eles funcionam da mesma maneira.
Por exemplo, colocar um menu no canto superior esquerdo ou direito de um site, indicado por um conjunto de linhas, pode reduzir a carga cognitiva — o usuário não precisa procurar o menu porque ele está onde se espera que esteja.
Use a psicologia do design para otimizar o layout do seu site para engajamento
Aplicando as táticas acima no seu site e fazendo pesquisas aprofundadas sobre seu público e concorrentes, é possível tomar decisões mais acertadas sobre o design da sua marca e do seu e-commerce.
O primeiro passo é ter uma visão clara, um público-alvo bem definido e um conjunto concreto de metas mensuráveis. Estes são os fundamentos de um ótimo design — e ajudarão você a permanecer focado para atingir seus objetivos.
Dados e feedbacks ajudarão você a crescer. Preste atenção em como os usuários estão respondendo e navegando pelo seu layout, e use esses aprendizados para fazer ajustes e otimizar a experiência dos clientes. Compreender as motivações facilita a construção de um layout de site para engajamento e conversão.
Ler mais
- Lojas Shopify- 50 e-commerces brasileiros de cair o queixo
- Como montar uma loja virtual? Um guia para quem acabou de chegar na Shopify
- Por Que a Realidade Virtual É Muito Mais Importante Do Que Você Imagina
- Tudo o que você precisa saber sobre a Diretiva PSD2
- Como o Comércio de Bate-Papo Mudará a Forma Como Compramos
- As 10 promessas de ano novo que todo varejista precisa cumprir
- Checkout transparente na Shopify- tudo o que você precisa saber
- Testes A/B- um guia para iniciantes
- Como Criar uma Experiência de Unboxing Inesquecível para sua Marca
- Oportunidades do mercado de e-commerce na América Latina
Perguntas frequentes sobre layouts de site para engajamento
O que é a psicologia do design?
A psicologia do design é uma abordagem ao design de experiência do usuário (UX) que se concentra nas necessidades, objetivos e comportamentos do usuário. Usando estudos e conceitos da psicologia, como a lei de Hick e a lei de Miller, é possível entender o público e criar experiências que os atraiam, com foco em simplificar a navegação para aumentar engajamento e conversão.
O que tem a ver psicologia e layout de site?
A psicologia e o design estão relacionados porque o design está ligado às percepções da mente humana. No caso do design de site, o foco é criar layouts que motivem o potencial cliente a alcançar um objetivo específico, como encontrar um produto e comprar.
Designers que estudam comportamentos humanos e compreendem os princípios da psicologia podem construir sites e experiências de usuário que influenciam emoções e ações. A psicologia tem um papel fundamental na estratégia de design.
Como criar um layout de site para aumentar engajamento?
Para criar um layout de site que aumente o engajamento, é importante combinar pesquisa de usuário e princípios de psicologia para evocar as emoções ou reações desejadas. Reduza ruídos eliminando itens redundantes, organizando informações em blocos menores e utilizando modelos mentais intuitivos. Use os elementos visuais da marca para guiar a navegação e manter o foco do usuário, facilitando uma experiência positiva e eficiente.
