PDP

icon picker
Desktop

*O estudo de CRO verificou que a maior interação dos usuários com a PDP se deu com as imagens dos produtos. Hoje o site não está seguindo a padronização do site global, com a vitrine de produtos na esquerda e as informações relativas ao produto à direita. É interessante seguir o design do global, mas com relação às imagens, a nossa sugestão é deixá-las em tamanho maior, como as referências da Nike e New Balance, pensando no usuário da Asics Brasil, que passa bastante tempo analisando as imagens do produto, além de deixar o design mais clean e atual.
Estudo de CRO - Análise de Hotjar:
image.png

Atualmente:
image.png
Global:
image.png
image.png
Sugestões / Referências:
image.png
image.png
image.png
Nossa sugestão de estrutura:
Breadcrumb
Quatro espaços grandes para as imagens à esquerda
Título do Produto na cor primária e em tamanho grande, dando destaque (no Global está 24px);
Feminino | Masculino | Infantil | Unissex na cor primária e no mesmo tamanho do título;
Categoria - exemplo: Corrida | Futebol na cor cinza e em tamanho menor que o título;
Avaliações com link âncora (se tiver), como na referência do Global.
Valor do produto na cor primária e em tamanho menor que o título e, aqui deixar visível a informação do valor parcelado, como na referência da Nike.
Tamanho com o grid recomendado pelo Guide Global + Guia de Medidas (botão link)
image.png
*É interessante ter um botão link abaixo das opções de tamanho, como na referência da Nike acima, para captação de lead e para demonstrar o cuidado com o usuário que não encontrou o seu tamanho, atraindo, assim, a sua atenção.
Seletor de quantidade + CTA “Selecionar Tamanho” (caso o usuário não tenha selecionado ainda) e, depois que o tamanho estiver selecionado “Adicionar à Sacola”.
Cálculo do Frete
Placeholder com texto “Informe seu CEP” + botão “ok” + Não sei meu CEP (botão link)
Informações sobre o Produto - Descrição | Características | Tecnologia
*O ideal é deixar todas as informações já visíveis para o usuário, de preferência em estado primário aberto, mas para não fugir muito do design global, podemos deixar a Descrição já aberta e as outras informações fechadas, deixando intuitivo para o usuário que ao clicar a aba irá abrir com as informações.
Referência do Global:
image.png
Opção de compartilhar com amigos - Facebook e Instagram
Vitrine de Produtos Similares
Título: Você também pode gostar
Sugestões de produtos similares
*É interessante ter uma vitrine de Produtos Semelhantes/Similares também, pois auxilia o usuário que não ficou satisfeito com aquele produto que está vendo, encurtando sua jornada. Verificamos pelas gravações do Hotjar, que os usuários utilizam muito a barra de buscas dentro das páginas de produtos, então, uma vitrine com produtos semelhantes facilitaria essa busca.
Avaliações
Título: O que as pessoas falam sobre o produto
Botão de “Escrever Avaliação”
*É interessante ter um botão flutuante com a imagem do produto + título e preço + seletor de tamanho + CTA “Adicionar à Sacola”, acompanhando a navegação (conforme referência da Nike), o Global não tem esse botão, mas em termos de usabilidade e navegação, é o ideal.
Referência da Nike:
image.png
Newsletter
Footer

Próxima Página →
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.