# Dez decisões de design de e-commerce que aumentam a conversão de forma mensurável > Nada de "use mais espaço em branco" nem de "teste a cor do botão". As escolhas específicas de hierarquia visual, fotografia, tipografia e mobile que realmente movem a conversão em lojas de verdade. Ryan Badger - 3 de novembro de 2024 - 7 min de leitura ## Decisões de design que realmente movem a conversão Os artigos de design costumam cair em dois campos. "Use bastante espaço em branco!" (vago demais) ou "Faça teste A/B de 47 cores de botão" (granular demais). Nenhum dos dois ajuda quem olha para a própria loja e se pergunta por que ela converte 1,3%. Este post trata das decisões específicas de design visual que deslocam a conversão de forma mensurável em lojas de e-commerce. Não é gosto. Não é estética de marca. São as escolhas de layout, hierarquia, cor e tipografia que ajudam as pessoas a comprar ou atrapalham. ## 1. Hierarquia visual: o mais importante deve parecer o mais importante A maioria das lojas dá o mesmo peso visual a tudo na página de produto: texto de 16px, preço de 18px, títulos de 18px. Todos os elementos competem; nenhum vence. O olho não tem por onde entrar. Solução: o que você quer que seja clicado deve ser a coisa maior e de maior contraste da página. - Título do produto: 28-36px - Preço: 20-24px, em negrito, claramente delimitado - Botão Adicionar ao carrinho: largura total no celular, o elemento visualmente mais pesado da página - Descrições, listas de especificações, informações de envio: 14-16px, mais discretos Quando você olha sua página de produto a 2,5 m (8 pés) de distância (sim, literalmente, recline-se), dá para dizer qual é a ação principal? Se a página toda parece uma sopa cinza, sua hierarquia está quebrada. ## 2. Espaço em branco em volta do CTA, não em todo lugar "Use mais espaço em branco" é repetido como dica universal de design. O que realmente importa é o espaço em branco em volta dos botões e dos elementos-chave, não o espaço em branco pelo espaço em branco. - Pelo menos 40-60px de respiro em volta da área do Adicionar ao carrinho - O preço em seu próprio espaço limpo, sem apertar contra outros textos - Imagens de produto com espaço (sem ficar coladas de ponta a ponta, sem margem) Aperte todo o resto (avaliações, informações de envio, produtos relacionados). São secundários. A área do CTA vence por ser a única com espaço para respirar. ## 3. Fotografia de produto consistente vence fotografia de produto "melhor" Um catálogo de 50 produtos em que as fotos são todas um pouco diferentes (fundos diferentes, iluminação diferente, níveis de zoom diferentes) parece amador. Um catálogo em que toda foto tem o mesmo ângulo, a mesma iluminação, o mesmo enquadramento e o mesmo fundo parece profissional. É um problema de volume, não de qualidade. Seus 5 mais vendidos podem ter fotos hero bem trabalhadas. Todo o resto deve ser fotografado de forma idêntica, mesmo que um pouco menos glamourosa. A inconsistência sinaliza "loja pequena e pouco confiável" mais do que a baixa qualidade. Regra prática: - Foto principal: fundo branco ou liso, centralizada, mesmo enquadramento em todo o catálogo - Fotos secundárias: estilo de vida / em uso, tom consistente - Todas as fotos na mesma proporção e resolução ## 4. Contraste do CTA, não a cor do CTA "Botões laranja convertem X% mais que verdes!" Você vê essa afirmação "testada" o tempo todo. Isolada, é bobagem. O que importa é o **contraste com a página ao redor**. Um botão laranja num site de tema laranja é invisível. Um botão azul no mesmo site é um farol. Escolha a cor de maior contraste com a paleta dominante do seu site. Se sua página é branca + preta + bege, seu CTA deve ser a única cor que não aparece em nenhum outro lugar. Ponto secundário: evite botões fantasma (só contorno, sem preenchimento) para CTAs principais. Parecem elegantes, mas vão mal nos testes de conversão porque sinalizam "secundário" ao olho. Use preenchimento sólido para Adicionar ao carrinho, Finalizar pedido, Comprar agora. ## 5. Tamanho da fonte e largura da linha no celular A maioria das lojas mobile tem texto pequeno demais e largo demais. Os celulares exibem texto com maior densidade de pixels; o que são 16px no desktop parece pequeno no celular. O piso de tipografia para mobile: - Texto corrido: 16-18px no mínimo - Largura da linha: 40-60 caracteres por linha - Altura da linha: 1,4-1,6x o tamanho da fonte - Botões / áreas de toque: 44px de altura no mínimo (diretriz de acessibilidade da Apple) Se os visitantes estão dando zoom com os dedos nas descrições dos seus produtos, sua fonte está pequena demais. Teste num celular de verdade, à distância do braço, não no emulador mobile do navegador. ## 6. Adicionar ao carrinho fixo no celular Role uma página de produto longa no celular: quando você termina de ler a descrição, o botão Adicionar ao carrinho está 3 telas acima. Clientes que já decidiram comprar agora precisam rolar de volta, e isso derruba a taxa de conversão. Solução: um Adicionar ao carrinho fixo que flutua na parte de baixo da tela do celular assim que o botão original sai da visão. Um toque, o carrinho abre, sem caça ao botão. No desktop: o carrinho fixo vira opcional (a tela é maior). No celular: inegociável. ## 7. Imagem hero que mostra o resultado, não o produto A maioria das seções hero mostra o produto isolado, no branco. Serve como foto de referência; está errado para um hero. O hero precisa comunicar "como é a vida com isto" em 2 segundos. Melhor: o produto em uso, no contexto, com uma pessoa ou cenário que combine com o seu comprador-alvo. - Cuidados com a pele: alguém usando, luz da manhã, banheiro - Móveis: a peça num cômodo real, com cara de vida - Vestuário: num corpo, em movimento, não em manequim - Comida/café: sendo preparado ou saboreado, não foto de produto O hero com o produto em uso converte melhor que o hero com o produto isolado porque faz mais do trabalho de imaginação pelo comprador. Ele consegue se ver usando sem precisar imaginar. ## 8. Componentes consistentes em toda a loja Uma falha comum: as páginas de produto usam um estilo de card, as de categoria usam outro, e a home tem um terceiro. Os clientes sentem essa inconsistência mesmo sem saber nomeá-la. As lojas parecem confiáveis quando os mesmos componentes aparecem de forma consistente. Um pequeno design system de e-commerce é: - Um componente de card de produto (usado nos destaques da home, nas grades de categoria, nos relacionados, nos resultados de busca) - Um sistema de botões (primário, secundário, terciário; só esses três) - Um sistema de estilos de títulos (H1, H2, H3; aplicados com consistência) - Uma paleta de cores (no máximo 3 cores da marca, mais escala de cinza) - Uma escala tipográfica (no máximo 3-4 tamanhos) A maioria das lojas faz 15 variações de cada um quando uma bastaria. Menos variações = aparência mais profissional. ## 9. A primeira tela é o anúncio para rolar a página A área visível no primeiro carregamento (acima da dobra) tem uma função: fazer o visitante querer rolar. Só isso. Não tente fechar a venda na primeira tela. O que é necessário acima da dobra: - Para quem é isto (em uma linha) - O que é o produto (visualmente, uma boa imagem) - Um CTA claro (Adicionar ao carrinho ou Comprar) - Um sinal de confiança tranquilizador (nota + número de avaliações, ou citação da imprensa, ou cliente de destaque) O que NÃO é necessário acima da dobra: - Vários CTAs disputando atenção - Um carrossel hero que avança sozinho a cada 3 segundos (mata a conversão; os clientes travam quando o conteúdo se move) - Todos os benefícios do produto - Galerias de depoimentos ## 10. Tire o carrossel da sua home Relacionado ao ponto anterior, mas merece um item próprio: os carrosséis hero da home estão mortos. Estudos mostram de forma consistente que slides hero rotativos são clicados em 1-3%, e só o primeiro slide recebe atenção relevante. Escolha a mensagem que você colocaria no slide 1 e coloque-a como um hero estático. Descarte o resto. ## O que o Shoprocket resolve A loja com temas já vem com modelos que seguem a hierarquia visual, o contraste e os padrões mobile acima. Se você usa o embed do widget no seu próprio site, o design da página ao redor é seu, mas: - **Carrinho em gaveta** (não carrinho em página inteira) é o padrão - **Carrinho fixo no mobile** suportado - **Imagens de produto responsivas** com entrega automática em WebP e proporções corretas - **Construtor de sites + mais de 40 temas** para você não precisar montar o design system do zero - **Ganchos de CSS personalizado** permitem adaptar o embed ao visual do seu site ```
``` O que o Shoprocket não controla: suas imagens hero, a consistência da sua fotografia, seus textos, seu sistema de cores. Isso é com você, para acertar ou errar. > **Dica:** Abra sua loja no celular agora. Pegue uma página de produto. Dá para ver o Adicionar ao carrinho sem rolar? O preço é claramente a segunda coisa maior? Dá para ler a descrição sem apertar os olhos? Se a resposta a qualquer uma dessas for não, essa é a primeira correção de design a fazer. ## Resumo - **Hierarquia:** o elemento mais importante deve parecer o mais importante. Confira com o teste dos 2,5 m (8 pés) - **Espaço em branco em volta do CTA**, não em todo lugar pelo espaço em si - **Consistência fotográfica** vence qualidade fotográfica. Um estilo em todo o catálogo - **Contraste do CTA, não a cor.** A cor de maior contraste com a paleta da sua página vence - **Tipografia mobile: texto de 16px+, áreas de toque de 44px+** - **Adicionar ao carrinho fixo no celular** é inegociável - **Imagens hero mostram resultados** (produto em uso), não produto no fundo branco - **Um design system pequeno (3 cores, 4 tamanhos, 3 variantes de botão)** parece mais profissional que 15 variações - **A primeira tela vende a rolagem**, não o produto. Uma mensagem clara, um CTA - **Acabe com o carrossel da home**. O hero estático vence [Comece um teste grátis](https://app-v3.shoprocket.io/signup) se quiser uma loja com temas e esses padrões já embutidos. 14 dias, sem cartão. --- - HTML version: https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce - Language: Português (pt) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)