Quando esbocei o layout de uma loja de café usada como modelo em 2014, fazia sentido descrever o cabeçalho, a página inicial, a categoria e o detalhe do produto quase como blocos de construção: logo à esquerda, carrinho à direita, filtros aqui, botão de compra ali.
As expectativas básicas das pessoas não mudaram muito. O contexto mudou: a maioria dos designs precisa funcionar no celular, as ofertas estão mais complexas e cada script adicional compete por velocidade e atenção. Por isso, já não recomendo copiar um layout cegamente. Recomendo percorrer as tarefas dos clientes.
O cabeçalho deve orientar, não mostrar todas as opções
No cabeçalho, as pessoas procuram a marca, a navegação, a busca, a conta e o carrinho. Nem tudo precisa ter o mesmo destaque. A prioridade muda conforme o catálogo e a etapa da compra.
- O logo leva à página inicial e tem um nome em texto compreensível.
- A busca é fácil de acessar quando as pessoas conhecem um produto ou parâmetro.
- O carrinho mostra seu estado e não desaparece depois que um item é adicionado.
- O contato ou a ajuda podem ser encontrados sem competir com a compra.
- O menu funciona por toque, teclado e sem exigir mira precisa com o mouse.
Um menu lateral pode ajudar em um catálogo amplo. Com dez categorias, muitas vezes ele é apenas um obstáculo impressionante. O Google recomenda tornar categorias e produtos acessíveis por links de navegação comuns; somente a busca pode não expor todo o catálogo aos robôs. Os princípios estão descritos na documentação sobre estrutura de sites de e-commerce.
A página inicial deve distribuir o tráfego, não narrar o catálogo inteiro
Na página inicial, preciso entender rapidamente o que a loja vende, para quem é e por onde continuar. Em vez de um slider automático, prefiro uma prioridade clara e várias entradas estáveis para as principais situações de compra.
Os mais vendidos podem ajudar, assim como categorias sazonais, orientações ou um motivo para confiar na loja. Cada bloco precisa ter uma função. “Para a página não ficar vazia” não é uma função.
Uma categoria ajuda a restringir a escolha
Uma categoria não é texto de SEO colado acima de uma grade de produtos. É uma ferramenta de decisão. Seu nome e sua breve introdução definem a oferta, os filtros a restringem e a ordenação ajuda conforme a situação do cliente.
- Nomeie os filtros na linguagem dos clientes, não com os campos internos do banco de dados.
- Mostre as escolhas ativas depois da filtragem e facilite sua remoção.
- Exponha subcategorias importantes como links, não apenas como valores de script.
- Mostre os dados necessários para a comparação na lista; coloque o restante no detalhe.
- Um resultado vazio deve oferecer um caminho de volta, não um beco sem saída.
As trilhas de navegação ajudam as pessoas a entender sua posição no catálogo e podem ajudar os mecanismos de busca a compreender a hierarquia. Se você usar dados estruturados, siga a documentação atual do Google sobre breadcrumbs.
O detalhe do produto precisa responder às perguntas antes e depois do botão
Um botão visível de adicionar ao carrinho é a base, não o detalhe completo. Antes de decidir, as pessoas precisam do nome, preço, variante, disponibilidade, envio, devoluções, fotografias e informações adequadas ao risco da compra.
Para café, importam a origem, o sabor, a torra, o peso e o preparo. Para uma furadeira, as especificações, a compatibilidade e o serviço importam mais. Não existe uma ordem universal. Existe uma pergunta universal: o que o cliente precisa saber para comprar a variante certa e não devolvê-la depois?
As avaliações devem ser confiáveis e estar relacionadas ao produto específico. Os produtos recomendados devem apoiar a escolha, não desviar alguém de uma compra quase concluída. Um botão social no detalhe do produto ainda não é prioridade. Já deveríamos ter superado a época em que um botão de curtir era a resposta para tudo.
O carrinho e o checkout devem eliminar surpresas
O carrinho precisa permitir alterar a quantidade e a variante e remover itens. Mostre o preço total, o envio e a data de entrega o mais cedo possível, não depois da terceira etapa e do cadastro.
O checkout como convidado costuma ser uma opção padrão sensata. Se uma conta oferecer valor real, ofereça-a depois do pedido. Os formulários precisam de rótulos corretos, preenchimento automático e erros que expliquem o que corrigir. As áreas de toque devem ser grandes o suficiente; o critério atual está descrito na WCAG 2.2, em Target Size.
Meça tarefas, não a cor do botão
O teste A/B pode ajudar quando uma empresa tem tráfego suficiente, uma hipótese e uma métrica decisiva. Alterar banners semanalmente sem uma amostra suficiente é um campo de experimentação, não uma conclusão confiável.
Acompanho o uso da busca e dos filtros, as ações de adicionar ao carrinho, os erros de formulário, o abandono em cada etapa, as devoluções e as dúvidas ao suporte. Completo os números observando as pessoas e suas perguntas. A análise mostra onde; uma pessoa muitas vezes explica por quê.
A base da mensuração está no Google Analytics 4. Discuto as verificações de desempenho em Como acelerar um site.
Uma loja online não precisa ser original no lugar onde fica seu carrinho. Precisa convencer sobre por que comprar este produto aqui.
Para argumentos em páginas de produto e vendas, continue com Elementos importantes de uma página de vendas. A base completa do site está em Como começar um projeto de site.