Exemplos de página de produto para conversão otimizada: completo com guia
Publicados: 2022-03-01Imagine isto: é tarde da noite e você se encontra na web. Você está procurando a solução perfeita para o problema que o incomoda a semana toda. Você já esteve aqui antes. Desleixado, cabeça nas mãos, e o sono está batendo à sua porta. Pouco antes de toda a esperança se perder, Eureka! Você finalmente obtém um resultado de pesquisa promissor. Com a respiração suspensa, você clica e…
Nada acontece. Depois de uma eternidade, uma tela branca começa a renderizar com paredes de texto e uma única e minúscula imagem pixelizada do produto. Flashbacks da era do dial-up enchem sua mente. Você verifica a página em busca de alguma solução, mas não encontra informações sobre preços, avaliações de clientes e vários números de telefone solicitando mais informações. Não é um insight de link funcional, e sua única prova social é uma animação de um gato dizendo que este produto é “Purrrrrfect!” É dolorosamente aparente: você tropeçou em um cemitério de sites.
Não deixe que este pesadelo seja a sua loja! As melhores experiências do usuário vêm de sites atraentes e atualizados regularmente, em vez de sites que deixam o usuário se perguntando se deve executar seu software antivírus. Se você está apenas começando ou deseja atualizar sua loja de comércio eletrônico, estamos aqui para ajudar!
Neste artigo, abordaremos os critérios mínimos que toda página de produto deve ter, bem como algumas opções de design a serem evitadas. Até reunimos uma coleção de nossas páginas de produtos favoritos com uma lista rápida de prós e contras para cada um para ajudar a inspirar seu próximo projeto!
Construindo a página de produto perfeita
O objetivo da sua página de produto é, bem, vender seu produto! Mas também se trata de entender o que seus visitantes esperam que seu site faça por eles. A pessoa média nos EUA gasta sete horas e 50 minutos por dia na internet. Com tanto tempo todos os dias investidos em diferentes sites, as pessoas que visitam seu site tratarão sua experiência da mesma forma que um sommelier de primeira classe criticaria uma garrafa de vinho. Seus visitantes são altamente capazes de perceber as nuances entre uma experiência boa e uma ruim.
A página do seu produto não deve apenas incluir os fundamentos que seus visitantes esperam, mas deve fornecer uma experiência de usuário sem atritos, ao mesmo tempo em que inclui seu próprio toque exclusivo que os fará voltar.
Atender às expectativas de seus usuários pode parecer uma corda bamba se você não tiver certeza do que eles estão procurando. É por isso que montamos um guia descrevendo as melhores e as piores práticas para projetar sua página de produto que o ajudará a se envolver com os usuários e, por fim, aumentar sua taxa de conversão.
Práticas recomendadas da página do produto
Há muito o que fazer para criar páginas de produtos brilhantes, por isso criamos uma lista de recursos e conceitos de páginas de produtos que consideramos os mais importantes para melhorar a experiência do visitante quando usados com bom gosto.
- URL limpo
- Nome cativante
- Informações de preços transparentes e antecipadas
- Call to Actions (CTA's) de alta visibilidade
- Disponibilidade do item
- Opções distintas de produtos
- Imagens nítidas de produtos com ângulos, situações e modelos de câmera multiplos
- Capacidade de comparar produtos semelhantes
- Botão “Adicionar aos favoritos/lista de desejos”
- Imagens, vídeos e gifs otimizados para a Web e de alta qualidade
- Seção de perguntas frequentes
- Funcionalidade de zoom
- Realidade aumentada
- visão 360°
- Descrições de produtos vívidas
- Recurso de bate-papo ao vivo
- Uma mistura de mídia de produto e estilo de vida para narração de histórias
- Design responsivo
- Seção relevante de “produtos relacionados”
- Seção "Upsell"
- Capacidade de aumentar a quantidade de produto
- Guia de tamanho/ajuste (se aplicável)
- Navegação perfeita
- Opções de filtro intuitivas
- Botão “Voltar ao topo” pegajoso
- Altamente acessível para usuários com capacidades diferentes
- Políticas de envio e devolução antecipadas
- Botões pegajosos “Adicionar ao carrinho” ou “Comprar agora”
- Prova social
- Detalhes estendidos (materiais, especificações técnicas, dimensões, peso, características especiais, etc.)
- Sem redundância
- Fonte espaçosa e interessante
- Tempos de carregamento rápidos
- Funcionalidade entre navegadores
- Modo escuro amigável
Uma palavra de cautela - tenha cuidado com a fluência de recursos. É quando uma página assume tantos recursos desnecessários que acaba prejudicando a experiência geral do usuário. Um recurso de realidade aumentada pode não ajudar uma empresa que vende palitos de dente, mas ajudaria uma empresa que vende móveis grandes. Certifique-se de reservar um tempo para avaliar quais recursos podem ajudar a mostrar melhor seu produto sem adicionar tudo sob o sol à sua página.
Piores práticas da página do produto
Ao começar a implementar as melhores práticas em seu site, você deve estar atento a algumas das piores práticas listadas abaixo. Esses conceitos podem variar em gravidade, desde confundir os usuários usando a cor da fonte azul do hiperlink para texto normal, até algo mais malicioso, como inserir itens indesejados no carrinho de compras de uma pessoa.
- Demasiadas cores
- Preço complicado
- Design inconsistente
- Isca e táticas de troca
- Ocultar taxas adicionais
- Descrição muito longa/muito curta ou copiada
- Nomes de produtos inconsistentes
- Falsas garantias
- Recomendar produtos não relevantes
- Enterrando a chamada para ações
- Imagens, vídeos, gifs pequenos e de baixa qualidade
- Conversa negativa/prova social
- Pop-ups recorrentes
- Confirmar vergonha
- Inserindo itens no seu carrinho
- Navegação pouco clara
- Fonte compacta
- Espaço negativo ocupado
- Sem perguntas frequentes
- Sem prova social
As 25 principais páginas de produtos
Vida da ranhura
O que gostamos
- Solução muito informativa e fácil para descobrir o tamanho do seu anel.
- Grande pressão social (feed do Instagram, comentários)
- A descrição é facilmente digerível.
O que não gostamos
- O preço não está claro
- Poderia usar um botão “Comprar agora” na área de trabalho
- Não usa nenhuma técnica de upsell
Yeti
O que gostamos
- Recurso puro, onde ele mostrará o local mais próximo que você pode comprar
- Tipografia única
- Marca consistente
O que não gostamos
- Grande espaço em branco inútil na galeria de fotos
- Seção "compre agora" irritantemente grande e pegajosa
- Sem uso de vídeos ou gifs
Humano Simples
O que gostamos
- Ótima ferramenta de navegação no lado esquerdo da tela
- A seção de revisão vai para a esquerda e para a direita em vez de se expandir para cima e para baixo, usando menos espaço
- Ótimo uso de imagens para vender recursos e história
O que não gostamos
- Nenhum botão pegajoso "comprar agora"
- Nenhuma seção de upsell quando eles se especializam em um sistema/ecossistema de lixo
- As cores para CTA, cabeçalhos, resenhas e imagens/emblemas não combinavam.
Enfeitado
O que gostamos
- A página facilita um senso de comunidade entre os compradores com grande prova social
- Muitos CTAs
- A tipografia se encaixa na voz da marca com ícones para combinar
O que não gostamos
- As imagens do produto poderiam ter sido melhor integradas acima da dobra
- Grande espaço em branco pelo FAQ
- Falta qualquer cabeçalho fixo, botão “Comprar agora” ou maneira de pular para o topo
Nanofolha
O que gostamos
- O cabeçalho fixo inclui navegação e o botão “Comprar”, que também se oculta quando você rola para baixo.
- Animação de rolagem incrível acima da dobra
- Excelente construção de histórias através de imagens
- O título da página muda quando você alterna as guias
O que não gostamos
- A seção Dynamic Glowing Effect está faltando um vídeo
- O vídeo poderia ser reproduzido sem abrir uma janela
- Espaço em branco grande e não utilizado sob a dobra
Quip
O que gostamos
- Upsell, upsell e ainda mais upsell!!
- Ótimo uso de cores
- Bom uso de gifs em vez de imagens estáticas
O que não gostamos
- Preço inconsistente
- A seção de revisão leva você para fora da página do produto e carece de prova social
- Política de garantia/devolução/envio oculta, pode usar links para leitura adicional
DBmarca
O que gostamos
- Ótimas opções de personalização que se refletem nas imagens do produto.
- Fantástica narrativa contada pela voz assumidamente abrasiva da marca.
- A animação de rolagem com fotos de alta resolução mantém o usuário envolvido
O que não gostamos1200
- Calls to action muito limitados
- Sem upsells ou cross-sells, apenas uma venda sugestiva
- Sem cabeçalho fixo ou botão “Adicionar ao carrinho”
Vessi
O que gostamos
- Excelentes animações, especialmente a animação do sapato explodindo
- Bom cabeçalho pegajoso com o botão "Adicionar ao carrinho"
- Seção de revisão fantástica que você pode expandir
O que não gostamos
- O feed do Instagram poderia ter sido interativo
- As imagens poderiam ter ampliado ao passar o mouse em vez de clicar
- Cabeçalho fixo poderia ter permitido que você mudasse a cor
Marucci
O que gostamos
- Extensa personalização que atualiza a imagem do produto com base na variante escolhida
- A imagem do produto fica na parte superior da tela
- Design minimalista, oferece apenas o que você precisa
O que não gostamos
- Nenhum botão "Comprar agora" pegajoso
- Poderia ter usado ícones de confiança e mais provas sociais
- Falta cor e criatividade geral
Águia
O que gostamos
- Seção interativa e informativa "Recursos especiais"
- Criar seção de upsell e cross-sell
- Excelente cabeçalho pegajoso com navegação e botão “Comprar agora”
O que não gostamos
- Seção de revisão extra longa
- As imagens do produto poderiam ter sido mais exclusivas entre as variantes
- Grandes colunas laterais vazias que poderiam ter sido usadas para expandir a história da marca, que a página não possui
Banda Olufsen
O que gostamos
- Prova social de especialistas
- Ótimo uso de botões e cabeçalhos, uso incrível de upsells em toda a página em seções relevantes
- Fotos e vídeos incríveis do produto
O que não gostamos
- Poderia estilizar melhor suas tags H
- Sem perguntas frequentes “na página”
- Sem comentários de clientes
Homem de Couro
O que gostamos
- Excelentes imagens do produto
- A seção "Ferramentas", "Recursos" e "Especificações" é interativa, intuitiva e informativa
- Engajamento da comunidade com @leathermantools em seu feed do Instagram
O que não gostamos
- A seção de revisão é grande, também a seção de revisão de destaque é redundante
- Nenhuma história sendo contada
- Nada pegajoso (além do chat)
Fluxo de refrigerante
O que gostamos
- Parceiros de varejo do Show
- A descrição do produto não é apenas um parágrafo de texto, mas é dividida em pontos facilmente digeríveis
- A seção de comparação é legal
O que não gostamos
- Excesso de espaço em branco
- Sem apelo do usuário (sem história, sem benefício
- Desorganizado/sem fluxo para ele
Herman Miller
O que gostamos
- Uso fora da caixa de tipografia
- Ótimo uso de vídeo
- Muitas informações detalhadas com ótimas imagens para acompanhar
O que não gostamos
- A lista suspensa de detalhes do produto é aberta automaticamente, criando uma grande parede de texto simples
- Alinhamento de texto inconsistente
- A seção de perguntas e respostas do produto e a seção de revisão deveriam ser um menu suspenso
HURU
O que gostamos
- Bom uso de upselling
- Explique bem o produto através de imagens e descrições informativas
- Boa funcionalidade de carrinho, adicionar ao carrinho na parte inferior permite adicionar ao carrinho enquanto permanece na página
O que não gostamos
- A seção de revisão deve ser menor, os clientes estão acostumados a ser menor
- CTA não tem cor, mas tem uma animação legal
- A seção de revisão poderia ter sido minimizada
JBL
O que gostamos
- Melhor check-out fixo que vimos até agora
- Ótimo uso das cores da marca
- Ótima seção de comparação
O que não gostamos
- Controle deslizante de recursos não é ótimo, cor inconsistente, botão próximo ruim
- Os botões na página levam você a uma página separada
- Seções de suporte redundantes
Corsário
O que gostamos
- Botões fixos, mas o cabeçalho adesivo desaparece quando você rola para baixo para fornecer o máximo de espaço para o restante da página do produto. Ele reaparece quando você rola para cima
- Excelente uso de vídeo em toda a página
- Animação de rolagem com fotos de alta resolução e CTAs mantém o usuário engajado
O que não gostamos
- Chato acima da área de dobra quando comparado ao resto da página
- Sem upsells ou seção de cross-sell
- Navegação lenta pela galeria de fotos
UgMonk
O que gostamos
- G
- Bom uso de gifs, em vez de imagens estáticas
- Bom uso de upsells e cross-sells
- Bom uso da prova social
O que não gostamos
- As imagens são redundantes
- Revisar o produto poderia ser melhor (leva você ao fundo sem um caminho rápido de volta)
- Não há como comprar o produto rapidamente ou em qualquer ponto da página
Escalão
O que gostamos
- Grande senso de comunidade via Instagram
- Muito pouco espaço em branco desperdiçado
- O cabeçalho adesivo inclui um botão “Comprar agora”
O que não gostamos
- A seção de pitbull está polarizando
- A seção de membros poderia ter usado alguma seção interativa
- No Safari, ocorre um problema de rolagem de travamento ao tentar rolar por uma galeria de fotos
DJI
O que gostamos
- Grandes upsells com um atraente botão “Comprar agora” que possui uma integração de estimativa de entrega
- Boa seção "na caixa"
- Excelente uso de imagens para a seção “Olhe mais de perto”
O que não gostamos
- Nenhuma seção de revisão com pouca prova social
- A seção “Qual é melhor para você” deve ter links para os produtos referenciados
- Não há muita história para a página do produto
Cerveja Dr (20)
O que gostamos
- Mantém o esquema de cores em toda a página, incluindo as estrelas na seção de revisão. Cada página do produto tem um esquema de cores exclusivo com base no estilo de arte
- Bom cross-selling de outros produtos
- Fantástica prova social em toda a página
O que não gostamos
- Sem upsells (poderia vender produtos)
- Seção de revisão extra longa
- Sem cabeçalho fixo ou botão "Voltar ao topo"
Cortes
O que gostamos
- A seção de seleção de produtos é diversificada
- Grande pressão social, eles até têm sua própria hashtag
- O vídeo deles combina perfeitamente com a página
O que não gostamos
- Seção de revisão desnecessariamente grande
- Nenhuma história/laços emocionais com o produto
- Nenhum botão “Comprar agora” ou capacidade de pular para o topo
Alloi
O que gostamos
- Estatísticas animadas de provas sociais
- Pode minimizar a seção de revisão
- A seção de perguntas frequentes é fácil de ler e se encaixa bem
O que não gostamos
- A seção projetada para a perfeição pode ser interativa
- Os botões "próximo" e "anterior" da imagem do produto mudam de posição com base na imagem, ao selecionar cores diferentes, as imagens não se encaixam na cor correta
- Uso indevido de sublinhar conteúdo/texto que não tem link para nada
Dispositivos de plotagem
O que gostamos
- Design de página agradável
- O tom da cópia é relaxado
- Vídeos e imagens bem integrados
O que não gostamos
- Sem prova social
- Não interativo quando poderia ser e poderia usar mais animações
- Sem upsell
Muito Difícil
O que gostamos
- As opções de personalização são refletidas nas imagens do produto.
- Fantástica narrativa contada pela voz sem remorso da marca.
- Ótimo uso da prova social do instagram
O que não gostamos
- Nenhum botão "Comprar agora" pegajoso
- Sem upsells
- Seção de revisão maciça
Conclusão
Agora que você terminou de folhear todos os nossos exemplos de páginas de produtos favoritos, pode ficar mais claro o que diferencia uma boa experiência do usuário de uma ruim. Enquanto você está agora equipado com o conhecimento para criar ótimas páginas de produtos, não puxe um Capitão Ahab e passe a vida inteira procurando a página de produto perfeita . Nós vamos poupar-lhe o aborrecimento, não há um. Basta estar atento ao tempo e conhecimento de internet do seu visitante para que você possa superar suas expectativas.
Se você sente que precisa de alguma orientação extra ou se isso é muito grande, pare de hesitar em seus sonhos e entre em contato com nossa equipe de especialistas em páginas de produtos na WebCitz hoje mesmo!