Ebook Salll · Nº 23 · Fundamentos
Distância, semelhança, borda, conexão e ordem já sugerem o que pertence junto. Numa página de produto, essas relações podem facilitar a decisão ou atribuir uma informação verdadeira ao item errado.
Imagine uma mesa depois de uma reunião. Duas xícaras estão próximas de um notebook. Um crachá ficou entre esse conjunto e uma pasta fechada. Três canetas estão alinhadas dentro de uma bandeja. Ninguém escreveu uma legenda. Ainda assim, é provável que você veja unidades: o posto de trabalho de alguém, um objeto sem dono claro e um conjunto de materiais.
A percepção não espera a leitura completa para começar a organizar o campo visual. Distância, aparência, contorno e ligação influenciam quais itens parecem formar uma unidade. Essa organização inicial não decide sozinha o que alguém vai comprar, mas define relações que a copy terá de confirmar, corrigir ou combater.
A expressão é uma metáfora editorial, não um termo científico. Ela ajuda a lembrar que diferentes sinais visuais criam hipóteses de pertencimento. Nenhum funciona como lei isolada.
Itens próximos tendem a parecer relacionados. Distância também comunica separação.
Cor, forma e tamanho semelhantes podem sugerir a mesma função ou categoria.
Uma borda ou área compartilhada pode transformar elementos diferentes numa unidade.
Uma linha ou ligação explícita esclarece relação quando a distância deixa dúvida.
Posição e sequência alteram o que recebe atenção e o que entra na comparação.
Palmer mostrou que uma região comum pode organizar elementos que a proximidade ou a semelhança organizariam de outra forma. Han, Humphreys e Chen testaram a competição entre conexão, proximidade e similaridade. A conexão foi eficiente em alguns arranjos, mas não superou uma proximidade já forte. A lição prática é simples: sinais visuais competem.
Uma meta-análise de Li, Qian e Liang reuniu 43 estudos e 961 participantes sobre agrupamento e memória visual. O efeito médio foi grande, mas a heterogeneidade também foi significativa: tipo de agrupamento, tarefa, tempo de exposição e característica testada mudaram o resultado. Combinar princípios não criou benefício aditivo automático.
O Proximity Compatibility Principle, revisado por Wickens e Carswell, chega a uma fronteira útil para interfaces. Fontes de informação usadas na mesma operação mental tendem a se beneficiar de proximidade perceptual. Displays muito integrados, porém, podem dificultar a inspeção de uma dimensão isolada.
Preço, desconto e condição precisam ser avaliados como uma proposta. Imagem e legenda precisam ser entendidas como uma só explicação.
Taxa, exceção, restrição ou variante não pode desaparecer dentro de um bloco visualmente dominante.
Huang e colegas observaram episódios de compra online orientados a uma meta. O primeiro estudo usou eye tracking com 38 participantes; o segundo replicou o trabalho com 211. Produtos distratores receberam mais atenção quando eram, ao mesmo tempo, categoricamente semelhantes e espacialmente próximos do produto focal. Sob essa distração, a identificação do item buscado ficou menos precisa.
Breugelmans, Campo e Gijsbrechts manipularam a ordem de prateleiras num supermercado online. A pesquisa acompanhou compras fictícias por seis semanas nas categorias margarina e cereal, com 321 e 265 participantes reportados nas condições. Estar na primeira tela e perto de um produto focal ou indisponível alterou a propensão de escolha, sobretudo quando o sortimento era mais difícil de avaliar.
| O que a evidência permite dizer | O que ela não permite prometer |
|---|---|
| Produtos semelhantes e próximos podem disputar atenção e reduzir precisão de identificação. | Que afastar um item sempre aumenta conversão. |
| Ordem e proximidade podem alterar escolhas em prateleiras online específicas. | Que a mesma magnitude vale para qualquer categoria ou galeria de PDP. |
| Organização visual afeta atenção, identificação e comparação. | Que o shopper conclui a decisão inteira antes de ler. |
Aplicações em prateleira online são evidência direta dentro dos métodos estudados. Transferir os resultados para uma PDP exige teste próprio.
Considere uma PDP com duas variantes. O preço promocional é válido apenas para a opção selecionada e depende de uma condição. Todas as palavras podem estar corretas. Se o preço estiver mais perto da variante errada, se o selo estiver solto ou se a condição aparecer longe da promessa, a página constrói uma associação que a copy não declarou.
| Relação | Organização recomendada | Risco |
|---|---|---|
| Preço, desconto e condição | Mesmo bloco, hierarquia clara e condição legível. | O desconto parecer valer para outra variante. |
| Variante e estado | Proximidade, contorno e rótulo textual de seleção. | Depender apenas de cor ou aproximar SKUs independentes. |
| Selo e produto | Ancorar o badge ao item cujo atributo ele descreve. | O selo parecer universal ou pertencer ao produto vizinho. |
| Imagem e legenda | Proximidade direta, sem elemento interveniente. | A legenda explicar a imagem errada. |
| Benefício e condição | Apresentar juntos e com pesos legíveis. | Destacar a promessa e esconder a restrição. |
| Patrocinado e orgânico | Rótulo explícito e separação perceptível. | Similaridade mascarar a origem do resultado. |
Essas recomendações não são atalhos universais de conversão. São hipóteses operacionais sustentadas por pesquisa sobre percepção, atenção e fatores humanos. A implementação precisa respeitar a categoria, a plataforma e a tarefa concreta.
Uma promessa em destaque e sua restrição distante continuam sendo frases verdadeiras. Um selo genérico colocado ao lado de um SKU específico pode ser tecnicamente correto em algum contexto. Um preço visualmente colado a uma variante e semanticamente ligado a outra pode sobreviver a uma revisão de copy. O problema está na relação criada.
Quem recebe o benefício, o selo, a avaliação ou a condição precisa ser identificável sem investigação.
Condição relevante não pode ser empurrada para longe apenas porque reduz a força visual do claim.
Patrocinado, recomendado, similar e variante são relações diferentes. A aparência deve preservar essa diferença.
A WCAG 2.2 exige que informação e relações apresentadas visualmente possam ser determinadas programaticamente ou estejam disponíveis em texto. Também exige sequência significativa, impede o uso exclusivo da cor para comunicar estado e estabelece contraste para componentes não textuais.
Uma variante selecionada usa contorno, rótulo textual e estado programático. Cor é reforço, não a única pista.
Título, preço, condição, variantes e avisos mantêm no código a sequência que a página comunica visualmente.
Bordas quase invisíveis não criam uma região útil para todos. Reordenar blocos só com CSS pode produzir uma história no olho e outra no leitor de tela. Acessibilidade não é acabamento: é a preservação da relação.
Afaste-se ou aplique blur. Os blocos principais continuam claros? Itens de escopos diferentes se misturam?
Cubra títulos e textos. Borda, posição e distância ainda apontam para a relação correta?
Remova a cor. Seleção, erro, disponibilidade e pertencimento continuam identificáveis?
Percorra o DOM ou use um leitor de tela. A sequência mantém preço, condição, variante e aviso próximos no significado?
Para cada preço, selo, review, claim e condição, responda em um segundo: isso pertence a qual produto e em que escopo?
A copy informa. O layout atribui. Quando os dois concordam, a página reduz trabalho e torna a oferta verificável. Quando divergem, o texto pode continuar correto enquanto a experiência comunica outra relação.
Este ebook se conecta a Carga Cognitiva, que explica o custo mental, e a Processamento Visual e Priming, que trata atenção inicial. Aqui, o foco foi outro: a atribuição de pertencimento entre elementos.
Nota de transparência: estudos de percepção e fatores humanos explicam mecanismos, não prometem conversão. As recomendações de PDP são aplicações para teste. Nenhuma estatística foi usada como benchmark comercial universal.