Você já se perguntou por que os supermercados colocam o leite no fundo da loja e os chocolates perto do caixa?
Simples: colocar os itens essenciais no fundo da loja incentiva os compradores a passear e procurar outros produtos. Colocar pequenos itens (como chocolates) perto do caixa incentiva compras por impulso.
Tudo isso faz parte da ciência do design de lojas. O layout certo da loja pode aumentar as vendas, melhorar a fidelidade e ajudar os clientes a encontrar o que desejam com mais rapidez.
Sua loja online não é diferente. A organização e o layout dos seus produtos têm um grande impacto sobre o que (e como) os clientes compram de você.
Neste artigo, mostraremos como fazer o layout de seus produtos para maximizar vendas e conversões.
3 coisas a considerar ao selecionar um layout de produto
O layout do produto pode parecer um problema simples quando você o aborda pela primeira vez. No entanto, como a maioria das coisas em
1. Escolha
A escolha é uma
O layout eficaz do produto é essencialmente um processo de equilíbrio dessa dualidade. Ou seja: dar a impressão de ter muitas opções de escolha, mas ao mesmo tempo manter o site fácil de usar e navegar.
A ciência diz que a tomada de decisão é mentalmente desgastante. Quando você confronta os compradores com muitas opções, eles correm o risco de não fazer nenhuma escolha.
Então, como você supera esse problema no layout da sua loja?
Uma solução é usar imagens em destaque que levam a produtos adicionais. Por exemplo, observe como Made.com usa imagens separadas para categorias inteiras de produtos (como “móveis de jardim”):
Pense nisso como um teaser para atrair compradores.
Idealmente, você desejará manter seu
Portanto, antes de iniciar o processo de layout, liste o seguinte:
- Toda a sua gama de produtos e suas respectivas categorias e subcategorias
- Categorias funcionais como “produtos mais vendidos”, “produtos em destaque”, etc. e os produtos nelas contidos.
O próximo passo é usar essas informações para construir um
Isso ajudará os compradores a encontrar o que desejam, sem sobrecarregá-los com muitas opções.
Se sua loja Ecwid for adicionada a um site, você pode adicionar um menu de navegação adicionando um trecho de código:
- para um layout horizontal
- para um layout vertical.
Aqui estão as instruções para lojas Ecwid adicionadas em WordPress e a Wix sites também. No Ecwid Instant Site, o menu horizontal está disponível apenas.
2. Informações do produto
Aqui está outro ato de equilíbrio que você deve realizar ao selecionar o layout de uma loja: mostrar informações do produto.
Você deseja fornecer aos clientes as informações de que precisam para clicar e fazer uma compra. Ao mesmo tempo, você não quer sobrecarregá-los com muitos detalhes – pelo menos não antes de estarem na página do produto real.
Seu modelo mental nessa situação deve facilitar a tomada de decisões e despertar o interesse do cliente. Pergunte a si mesmo: o que informação mínima meus clientes precisam clicar em um produto?
Você descobrirá que essa resposta varia de loja para loja e de produto para produto.
Por exemplo, observe como a Amazon oferece apenas quatro pontos de informação na página da categoria: nome do produto, preço (incluindo desconto), classificação e disponibilidade Prime:
No Ecwid, você pode adicionar classificações e comentários semelhantes com a ajuda do aplicativo Stampled.io.
Embora esta informação seja necessária para um grande varejista como a Amazon, para pequenas empresas como Joias de areia e pedra, as classificações não são tão importantes. Conseqüentemente, as páginas da categoria mostram apenas o nome e o preço do produto.
É fácil cair na armadilha de fornecer poucas informações nas páginas de categorias. A melhor maneira de evitar isso é entrevistar seus clientes e perguntar quais informações eles usam para tomar decisões de compra.
3. Design da loja
A maneira como você projetou sua loja terá um grande impacto no layout do produto.
An
- Homepage
- Categoria e páginas de pesquisa
- Páginas de produtos individuais
Quais produtos você escolhe para exibir em cada
Por exemplo, observe como a Amazon promove seus próprios produtos em sua página inicial, caso você não tenha feito login:
É comum que as lojas promovam as últimas ofertas na página inicial. Certifique-se de alinhar essas ofertas com seu público-alvo. A BestMadeCo, por exemplo, faz uma promoção do Dia dos Pais tendo em mente sua clientela majoritariamente masculina.
Focar em:
- Descobrir quais produtos você deseja que os clientes comprem (de preferência, seus produtos mais vendidos e/ou com margem mais alta)
- Manter a uniformidade do projeto em diferentes
tipos de página.
Quer você decida destacar seus mais vendidos ou novidades, Ecwid permite que você crie uma categoria para produtos em destaque na página inicial e nomeie-o de acordo com suas necessidades.
6 melhores práticas para Ecommerce Layout do produto
Embora você certamente possa criar um esquema de layout exclusivo para o seu
1. Coloque os principais produtos e ofertas acima da dobra
A área “acima da dobra” é o espaço da tela visível quando os clientes acessam seu site pela primeira vez. Na verdade, esta área representa 80% de toda a atenção do espectador na maioria dos sites.
Dado o tipo de atenção que este espaço recebe, é uma boa ideia colocar os seus principais produtos acima da dobra. Isso pode incluir:
- Últimas ofertas, vendas e descontos
- Produto ou categorias de produtos mais vendidos
- Produtos lançados recentemente (funciona melhor no início da temporada de compras)
On Target.com, por exemplo, você verá as ofertas mais recentes no topo da página:
Se você tiver muitas ofertas, considere adicionar um controle deslizante, como este exemplo do Walmart. Observe também as promoções abaixo do menu de navegação:
Alguns varejistas de moda evitam layouts convencionais em favor de promover a imagem da marca. Sobre ASOS, por exemplo, você obtém uma imagem de marca com a opção “Comprar Homens” ou “Comprar Mulheres”.
Essa tática funciona quando você está tentando promover a visão de uma marca com um lookbook. A maioria dos varejistas, entretanto, se sairá melhor com um produto convencional.
Siga a mesma ideia nas páginas de categoria: empurre seu
2. Misture layouts horizontais e verticais
Existem essencialmente duas maneiras de organizar seus produtos em qualquer página: horizontalmente ou verticalmente.
Um layout horizontal permanece estático. Há um botão na borda da página para rolar ainda mais as listagens.
Este exemplo da Amazon ilustra melhor as coisas:
Em Ecwid, Produtos vistos recentemente também são mostrados horizontalmente. Você pode escolher a quantidade de itens para exibi-los na parte superior ou inferior da vitrine.
Produtos relacionados é outro
Por outro lado, um layout vertical não possui esses botões de rolagem. Em vez disso, você vê cada vez mais produtos em um
Idealmente, você deve usar uma combinação desses dois layouts:
- Layout horizontal quando você deseja mostrar alguns produtos de várias categorias, como em Produtos visualizados recentemente
- Layout vertical quando você deseja mostrar muitos produtos da mesma categoria, como uma pesquisa e páginas de categoria
3. Siga as convenções e as expectativas do usuário
Há situações em que você desejará não ser convencional em seu design. O layout do produto não é um deles.
O layout do seu produto tem como objetivo orientar os usuários quando eles acessam seu site. Um layout convencional garante que eles encontrem o que desejam e não fiquem desorientados.
As convenções, é claro, variam de setor para setor. No entanto, existem algumas coisas que você deve considerar:
Use um layout de grade
Em um layout de grade, os produtos são organizados em
Este layout tem sido a convenção para
Ao usar este layout, certifique-se de manter as caixas do mesmo tamanho. Como mostra este estudo de caso, o uso de caixas de tamanhos iguais pode aumentar a receita por visitante em até 17%.
Se você vende com o Ecwid, isso não é um problema para você – o Ecwid possui uma grade de tamanho igual que se adapta automaticamente a diferentes telas.
Mostrar navegação no topo das listas de produtos
Outra convenção que você deve seguir é colocar as opções de classificação no topo da página.
Os clientes esperam esse posicionamento e naturalmente olharão para aqui quando acessarem a página de uma categoria.
Oriente os clientes com migalhas de pão
Breadcrumbs são elementos de navegação que mostram aos usuários seu caminho desde a página inicial, assim:
Adicioná-los ao topo da página ajuda a orientar os visitantes. Ele informa em qual página ou categoria eles estão e como podem voltar para a página inicial.
4. Concentre-se nos recursos visuais, mas não se esqueça do texto nas páginas dos produtos
Online, a única forma de mostrar seus produtos é por meio de recursos visuais. É por isso que imagens grandes de produtos aumentam
No entanto, embora os recursos visuais sejam importantes, seu layout também deve ter espaço para texto descritivo. Uma boa cópia não apenas descreve o produto, mas também ajuda a vendê-lo e à sua marca.
Por exemplo, considere como a BestMadeCo usa textos fortes em sua página inicial para vender um produto lançado recentemente. O layout ajuda o texto a combinar perfeitamente com a imagem.
Cópia do produto é particularmente importante nas páginas de produtos. Seu layout deve fornecer aos clientes todas as informações importantes de que precisam para tomar uma decisão logo acima da dobra. Isso deve incluir:
- Preço (incluindo desconto, representado visualmente)
- Avaliação do produto e número de comentários
- Nomes de produtos e marcas
- Se o produto está em estoque (e se o estoque está acabando)
- Detalhes do transporte
2-3 principais detalhes do produto
Este é um exemplo de como não fazer layout de produtos. A página do produto não tem nenhuma cópia – é difícil tomar uma decisão.
Como acontece com a maioria das coisas, o layout da Amazon é perfeito aqui, oferecendo aos clientes tudo o que precisam para tomar uma decisão.
5. Adicione recomendações de produtos e produtos relacionados
Nas páginas de produtos, você tem dois objetivos:
- Leve o cliente à página de checkout ou
- Faça com que o cliente veja outro produto
Para este último, você deve ter uma seção de produtos recomendados ou relacionados. Você pode colocá-lo após as informações do produto ou antes delas.
A Amazon faz isso particularmente bem. Observe os produtos relacionados e as listagens “também visualizadas” abaixo da dobra:
Se você tiver vários produtos na mesma coleção, exiba-os também. Aqui está um bom exemplo do WorldMarket:
As listagens de produtos relacionados nem sempre precisam ser visuais. Você também pode mostrar pesquisas relacionadas para direcionar os clientes a itens nos quais eles possam estar interessados.
Experimente diferentes layouts para produtos relacionados/recomendados. Tente colocá-los acima do rodapé, abaixo da descrição do produto, etc.
6. Experimente detalhes do mouse nas páginas de categoria
Uma maneira de melhorar
Por exemplo, este sítio mostra detalhes do produto e um botão adicionar ao carrinho ao passar o mouse:
O objetivo dessa tática é fornecer aos usuários informações importantes rapidamente. Funciona melhor quando você espera que os usuários naveguem rapidamente por um grande número de produtos, como em lojas de roupas. Pode não funcionar para outras categorias, mas você ainda pode executar alguns testes A/B e ver os resultados.
No Ecwid, você pode ativar os botões “Comprar agora” nas listas de produtos para ajudar seus clientes a navegar (e comprar) rapidamente seus produtos.
Quando um cliente clica nesse botão, sua loja não abre a página inteira do produto. Em vez disso, seu cliente verá um pop-up com opções de produtos:
Caso o seu produto não tenha opções, ele irá direto para o carrinho.
Conclusão
Quando se trata de layout de produto, é melhor seguir as convenções e seguir o que os líderes de mercado já estão fazendo. Catalogue seus produtos detalhadamente, categoriza-os minuciosamente e, em seguida, organize-os em um layout de grade padrão.
As melhores práticas compartilhadas acima funcionarão para a maioria das lojas em todos os setores. Experimente-os em sua própria loja!
- Como consertar a navegação da sua loja
- Tudo o que você precisa saber sobre merchandising de produtos
- Merchandising online: como fazer o layout de produtos na loja online
- O que é merchandising de moda e por que é tão importante?
- 10 erros de design de lojas online
- 15 pares de fontes perfeitos para o seu site de comércio eletrônico
- Teoria das cores: tudo o que você precisa saber sobre temas de cores
- 7 ideias criativas para sua página de produto de comércio eletrônico
- O poder de uma imagem heróica em web design
Must-have Princípios de UX a serem seguidos em uma loja online- Auditoria de design do site
- Desbloqueando o poder do design UX para comércio eletrônico
- Qual é a diferença entre UI e UX no comércio eletrônico?
