Efeito de Isolamento: Por que seu CTA se perde quando tudo na página tenta se destacar

Você abriu sua página de destino e tentou encontrar seu CTA principal em dois segundos. Você não conseguiu.

Está ali, mas está usando o mesmo gradiente que seu hero badge, a mesma cor que seus ícones de recursos, e a mesma escala que seu link de "Leia mais". O olho não tem para onde ir. Então visitantes rolam, se cansam e saem.

O conserto não é um botão mais brilhante. É o Efeito de Isolamento, também conhecido como Efeito Von Restorff, que é a razão pela qual você se lembra da uma pessoa em uma jaqueta amarela em um mar de ternos cinzas. Faça uma coisa diferente propositalmente, e o cérebro tranca nela.

O que o efeito de isolamento realmente é

Em 1933, uma psiquiatra chamada Hedwig von Restorff documentou algo simples: quando a maioria de itens em um conjunto parecem iguais, o que é diferente é o que nos lembramos. Uma lista de palavras pretas com uma palavra vermelha, a vermelha fica.

"Contraste atrai atenção. Distinção visual melhora memorização." , Roberto Lisandro

Cérebros são máquinas de padrão. Quando o padrão quebra, atenção dispara. É por isso que CTAs geralmente são uma cor diferente, por que tiers de "Recomendado" são um tamanho diferente, e por que badges de notificação são pontos vermelhos.

Por que isto importa em uma página de destino

Os visitantes não estão lendo sua página de cima para baixo. Estão digitalizando. O Efeito de Isolamento é o que diz ao olho onde pousar.

Hierarquia

Faça a ação primária visualmente diferente de tudo mais. O olho do seu visitante a encontra sem pensar.

Conversão maior

Em uma página de preços, marcar um tier com uma tag "Mais Popular" e um fundo diferente é suficiente para girar muitas decisões. O cérebro segue o caminho destacado.

Recall

Se sua proposta de valor está no mesmo estilo que tudo mais, visitantes não vão se lembrar dela. Puxe-a para fora, faça maior, isolada por espaço em branco, em um peso diferente, e ela vira a coisa que descrevem para um amigo.

Como usar isto em sua página

O truque é estabelecer uma "norma" primeiro, então quebrá-la propositalmente. Se tudo é alto, nada é.

1. Faça seu CTA primário visualmente diferente

A aplicação mais comum. Se sua página é maiormente azuis e cinzas, seu botão primário é laranja brilhante ou uma cor de acento de marca.

• Cor: Escolha uma cor complementar ou de acento apenas para o CTA principal.
• Tamanho: Ligeiramente maior que botões secundários.
• Forma: Preenchimento sólido enquanto tudo mais é delineado.
• Espaço em branco: Cerque com espaço vazio. Isolamento por silêncio.

2. Destaque informação chave em copy do corpo

Os visitantes digitalizam. Ajude-os.

• Use negrita ou itálico nas 2-3 frases que carregam a mensagem.
• Faça links inline uma cor claramente diferente para que leiam como ilhas interativas.

3. Quebre o ritmo em listas e tabelas

Listas longas são exaustivas. Destaque uma linha.

• Em uma tabela de preços, dê ao plano recomendado um fundo diferente e um badge pequeno.
• Em um grid de e-commerce, use uma tag "Venda" ou "Novo" em poucos cards, não em todos.
• 

4. Use estilo de ícone para marcar o especial

Se seu nav tem cinco ícones delineados, faça o ícone de carrinho um preenchimento sólido. O olho o sinaliza instantaneamente. Mesmo truque para badges "novo" ou estados de unread.

5. Não destaque tudo

O efeito inteiro morre no momento em que você tem três botões "primários" e quatro badges "Mais Popular" na mesma tela. Se tudo é destacado, nada é.

Maneiras comuns de quebrar isto

O efeito Las Vegas

• O erro: Cada seção é alto, cores brilhantes, animações, fontes grandes, gradientes. A página grita.
• O conserto: 60-30-10. 60% cor dominante (geralmente neutra), 30% secundária, 10% acento. Escolha uma coisa por página que pega o acento.

Isolamento apenas de cor

• O erro: O elemento "diferente" é apenas diferente por cor, que falha para visitantes daltônicos.
• O conserto: Emparelhe cor com forma, tamanho ou peso. Sempre.

Destacando a coisa errada

• O erro: O botão "Cancelar" é mais vibrante que o botão "Submit". Ou o recurso secundário pega o tratamento de splash.
• O conserto: Mapeie o objetivo primário do visitante primeiro. O hero visual combina o objetivo.

Como produtos reais usam isto

Amazon

As páginas do Amazon são um mar de produtos em preto e branco padrão. Então alguns itens vestem uma tag vermelha de "Deal do Dia" ou "Limited Time Deal". Em um layout uniforme, esses badges vermelhos são a única coisa em que o olho pousa primeiro.

Instagram

Uma linha de avatares com anéis cinzas é uniforme. No momento em que um veste um anel gradiente multicolor, seu olho salta para ele. É por isso que você toca stories que não planejava assistir.

Princípios relacionados

O Efeito de Isolamento brinca com estes:

Viés de Atenção

Por que visitantes notam algumas coisas e perdem completamente outras.

Lei de Fitts

Como tamanho de botão e distância mudam a rapidez com que visitantes clicam.

Lei de Hick

Quanto mais opções você mostra, mais lento visitantes decidem.

Recursos e leitura adicional

O Efeito Von Restorff: Por que a exceção fica

Mergulho profundo no efeito e como aplicar no design.

Perguntas frequentes