Como projetar páginas de detalhes de produtos móveis de alta conversão: 8 dicas à prova de balas

Vamos fazer uma experiência rápida.

Vá para sua conta do Google Analytics para sua loja de comércio eletrônico.

Quais páginas têm o maior número de visualizações de página?

Tenho quase 100% de certeza de que serão as páginas de detalhes do seu produto. Se não for, provavelmente há algo muito errado!

Não me refiro a uma página de produto específica para um único item. Em vez disso, quero dizer o modelo - todas as páginas de seus produtos combinadas. (BTW, leia sobre os modelos de página de produto aqui)

As páginas de produtos são as páginas mais importantes em qualquer site de comércio eletrônico

É difícil subestimar a importância das páginas de produtos quando se trata de comércio eletrônico. Eles são facilmente as páginas mais importantes, ultrapassando as home-pages, as páginas de checkout, as páginas de categorias e assim por diante.

Imagine, por exemplo, que você está procurando um novo MacBook Air no Google.

Você digita uma consulta na caixa de pesquisa e é imediatamente saudado com anúncios de produtos que o levam diretamente às páginas de detalhes do produto.

A maioria dos resultados do Google leva a páginas de detalhes do produto.
Outras campanhas de marketing também fazem a mesma coisa: remarketing do Facebook, PPC, e-mails, anúncios sociais e assim por diante.
Quase sempre, eles levam diretamente às páginas do produto.

Portanto, é absolutamente crucial que as páginas de seus produtos tenham uma boa conversão. Nesta postagem, vou mostrar a você algumas dicas simples, pequenas e incrivelmente eficazes para a otimização de conversão de suas páginas de produtos para celular.

Por que me concentro no celular ao discutir como criar páginas de produtos que convertem?

A maneira como as pessoas fazem compras está mudando. Em 2017, as compras pelo celular representaram 58,9% de todas as vendas do comércio eletrônico. Em 2021, esse número deve saltar para quase 75%.

A maneira como as pessoas fazem compras está mudando. Em 2017, as compras de #móveis representaram 58,9% de todas as vendas de #commerce. Em 2021, esse número deve saltar para quase 75%. #stats Clique para tweetar
Mais pessoas estão fazendo compras com seus telefones celulares. Fonte.
Ao garantir que sua estratégia de otimização leve em conta esse cenário em constante mudança, você estará preparando sua loja de comércio eletrônico para o sucesso na era das compras pelo celular.

A maioria dos varejistas online presta mais atenção às páginas de desktop (aliás. Aqui você encontrará uma lista de verificação de otimização de página de produto para desktop!).

Mas tão certo quanto a noite segue o dia, a maior parte do tráfego futuro em algum momento começará a vir dos amados telefones celulares dos visitantes do seu site.

Apenas uma lista rápida das 8 dicas de otimização da página de detalhes de produtos móveis à prova de balas:

Dica nº 1: coloque as fotos primeiro
Dica nº 2: suporte gestos móveis
Dica nº 3: deixe claro que há mais imagens
Dica nº 4: ajuste a seção de adicionar ao carrinho em uma única tela (removendo a necessidade de rolar)
Dica nº 5: adicione prompts à seção Adicionar ao carrinho
Dica # 6: permita que os visitantes acessem facilmente informações adicionais
Dica nº 7: use camadas superiores de tela inteira
Dica nº 8: adicione vendas cruzadas e upsells

Vamos mergulhar.

Dica nº 1: coloque as fotos primeiro

As pessoas compram com os olhos!

E eles querem ver o produto imediatamente.

Na verdade, na maioria das vezes as pessoas não se importam com o nome de um produto.

Eles só querem ver!

ASOS coloca suas imagens acima do cabeçalho do produto principal.
Portanto, abra o máximo possível para a imagem do produto e coloque-a bem no início da página do produto.

Na Growcode, às vezes melhoramos as taxas de conversão de clientes móveis colocando o nome do produto abaixo da imagem principal. Você deve executar seus próprios testes A / B para ver se funciona para você.

Dica nº 2: suporte gestos móveis

É hora de mais um “experimento”.

Você está no seu celular e vê uma foto em um site de comércio eletrônico de um produto que deseja.

O que você faz?

Você desliza!

Você pousa em uma ótima foto. Mas você quer ver os detalhes do lindo vestido ou os fones de ouvido de última geração recém-lançados.

O que você faz em seguida?

Você amplia!

O ASOS torna mais fácil para os clientes deslizar e ampliar imagens.

Você - e praticamente todos os seus clientes em potencial - realiza essas ações no piloto automático porque é isso que você está acostumado a fazer. O comportamento é automático.

E é por isso que você deve suportar gestos móveis! Habilite deslizar e aplicar zoom com facilidade (um polegar).

Ah, e por falar nisso, nunca há necessidade de abrir fotos em pop-ups de qualquer tipo. Só não faça isso.

Dica nº 3: deixe claro que há mais imagens

Os visitantes do seu site precisam de um pouco de incentivo. Depois de milhares de testes de divisão na Growcode, descobrimos que dicas e avisos estão entre as ferramentas mais eficazes no arsenal de otimização de conversão de qualquer varejista online.

Pense nisso. Como seus visitantes podem saber que você tem quatro fotos maravilhosas de seu novo vestido de verão emblemático?

Eles não vão. Não até que você dê a eles uma pequena sugestão.

E existem duas maneiras de fazer isso.

# 1: Mostre um trecho da próxima foto no quadro da foto atual.

Inclua a borda da próxima foto no quadro.
# 2: Mostrar pontos indicando que há mais para ver.
Incluir “círculos de deslizar” abaixo das imagens.
Simples, mas poderoso.

Dica nº 4: ajuste a seção de adicionar ao carrinho em uma única tela (removendo a necessidade de rolar)

Posicione estrategicamente todos os detalhes-chave de que um cliente precisa quando ele está prestes a colocar um item em seu carrinho de compras (descubra como otimizar o carrinho de compras móvel e qual é o melhor design de carrinho de compras móvel).

Todas as informações indispensáveis ​​devem estar próximas umas das outras e caber em uma única tela do celular.

Zalando inclui todos os detalhes-chave logo acima do CTA principal.
Esses elementos indispensáveis ​​são:

• Nome do produto
• Classificação por estrelas
• Preço
• Promoções de qualquer tipo
• Opções de tamanho / cor
• CTA em toda a tela (permita que os visitantes usem seu polegar favorito)

Não force os usuários a rolar para cima e para baixo para garantir que tenham o tamanho ou a cor certa. Coloque todas as informações vitais bem próximas.

Quer mais informações como essa?

Obtenha dicas semanais de comércio eletrônico, estratégias e conhecimentos líderes do setor.
Entregue direto na sua caixa de entrada.

em Li a política de privacidade e aceito os termos e condições da newsletter.

Selecione esta caixa de seleção para continuar

Uau! Você acabou de se inscrever. Verifique sua caixa de entrada para confirmar a inscrição.

Dica nº 5: adicione prompts à seção Adicionar ao carrinho

A seção adicionar ao carrinho é o melhor lugar para todos aqueles pequenos extras que incentivam os clientes a fazer uma compra. Em particular, considere incluir os três elementos a seguir:

• Crie urgência, mostrando quantos itens faltam.
• Se o item estiver à venda, risque o preço e mostre o desconto.

Nesta página de produtos da Etsy, os clientes são informados de que apenas cinco produtos estão disponíveis. O preço de venda também é destacado nesta página Etsy.

• Se os usuários obtiverem a entrega gratuita de um produto, destaque-o na seção adicionar ao carrinho.

Crutchfield inclui um lembrete de que este produto é “enviado de GRAÇA”.

Dica # 6: permita que os visitantes acessem facilmente informações adicionais

Os seres humanos são todos diferentes.

Alguns clientes são compradores rápidos como eu. Eu vejo uma bela imagem do produto e bam - está ordenado.

Mas também existem caras como meu pai. Ele lê cada informação antes de fazer um pedido.

E você precisa satisfazer os dois grupos.

Na página do produto ASOS acima, os clientes podem escolher ver mais detalhes.
Permita que os usuários mergulhem facilmente nos detalhes, se quiserem. E forneça informações sobre as opções de envio e pagamento também (junto com as descrições e especificações do produto).

Torne as informações acessíveis, mas também mantenha a página do produto agradável e curta - com opções para expandir apenas se os usuários quiserem.

Normalmente, emblemas claros e fáceis de compreender podem fornecer todas as informações e não há necessidade de escrever 2 a 3 frases.

1 ano de garantia, frete grátis para todo o mundo, feito nos EUA, produtos artesanais ou similares podem ser facilmente comunicados por imagem. Descubra um exemplo.

Justin Gecevicius - Co-fundador da Agência Adkings

Dica nº 7: use camadas superiores de tela inteira

Como profissionais de marketing, todos nós amamos camadas superiores e pop-ups.

Eles funcionam bem no desktop porque as pessoas estão acostumadas com janelas que se abrem dentro de outras janelas - alguma idéia de por que o sistema operacional da Microsoft se chama Windows?

Mas as camadas superiores não funcionam bem em dispositivos móveis. Simplesmente não há espaço suficiente para várias janelas.

Portanto, quando você tiver informações adicionais que deseja apresentar por meio de uma camada superior, use uma de tela inteira.

ASOS usa uma camada superior de tela inteira.
Os clientes irão interpretá-lo como uma nova tela. Será como uma experiência in-app.

Também é melhor habilitar um movimento de deslizar para fechar a camada superior e fornecer uma maneira clara de x-out dela, como uma marca “X” ou link “fechar”.

Apenas certifique-se de que o botão de saída seja grande o suficiente para ser tocado por dedos desajeitados!

Dica nº 8: adicione vendas cruzadas e upsells

As páginas de detalhes do produto são os locais ideais para apresentar aos usuários itens extras disponíveis em sua loja.

Zalando inclui várias sugestões de produtos relacionados em suas páginas de produtos.
Digamos que você venda roupas, por exemplo. Você deve incluir pelo menos alguns dos seguintes elementos nas páginas de seus produtos:

• Roupas semelhantes.
• Acessórios e roupas de cortesia.
• Produtos diretamente relacionados, como “looks completos” ou bolsas da mesma marca.

Seu objetivo é fazer um upsell ou uma venda cruzada. De preferência ambos! Aliás, também funciona muito bem para o valor da vida útil do cliente.

Como princípio geral, colocar duas ou mais linhas (ou carrosséis) de produtos sugeridos é uma boa ideia.

E aqui vai uma dica rápida para conseguir mais produtos em uma única linha: mostre duas fotos completas de itens adicionais e parte da terceira. Isso fará com que os clientes deslizem para ver mais.
Mostre a borda de uma terceira imagem em seu carrossel de produtos sugeridos.

Resumo: 8 dicas para criar uma página de detalhes de produto móvel de alta conversão

Ok, então aqui está um rápido resumo do que abordamos. Você pode usar esta lista de verificação ao desenvolver sua próxima campanha de otimização:

• Dica nº 1: coloque as fotos primeiro
• Dica nº 2: suporte gestos móveis (deslizar e aplicar zoom em imagens)
• Dica nº 3: deixe claro que há mais imagens
• Dica nº 4: ajuste a seção de adicionar ao carrinho em uma única tela (removendo a necessidade de rolar)
• Dica nº 5: adicione prompts à seção Adicionar ao carrinho
• Dica # 6: permita que os visitantes acessem facilmente informações adicionais
• Dica nº 7: use camadas superiores de tela inteira
• Dica nº 8: adicione vendas cruzadas e upsells

Siga essas dicas e você criará páginas de produtos móveis que convertem como um louco!

Ah, e quase esqueci de mencionar que as páginas de produtos para celular precisam ser extremamente rápidas. É móvel. Você só tem três segundos. Caso contrário, seus clientes se foram.

Nunca se esqueça disso!

Além disso, assista ao nosso vídeo sobre a criação de páginas de detalhes de produtos incríveis no celular para que você tenha todas as informações resumidas e prontas para implementar em seu comércio eletrônico!

BTW, obtenha a Lista de verificação de otimização de comércio eletrônico de 115 pontos e eleve sua taxa de conversão!

Com base em oito anos de experiência, reunimos todos os nossos principais insights em um livro: A lista de verificação de otimização de comércio eletrônico de uma loja online de 7 pessoas. Se você deseja aumentar o desempenho de todas as suas páginas - da página inicial à melhoria de checkout no celular - pegue sua cópia aqui. E se você estiver mais interessado em otimizar seu comércio eletrônico, confira mais sobre nós e por que somos reconhecidos como líder em Otimização de Taxa de Conversão Agnecy por Clutch.