*Atualmente, o breadcrumb está incompleto, além de inconsistente - departamento Feminino/Calçados/Corrida - Running. Segundo o estudo de CRO, os usuários estão clicando no título (feminino) e nas informações abaixo do título do produto, por acharem se tratar de breadcrumb. Para criar consistência com o Global e deixar visível ao usuário, o ideal é que o breadcrumb fique igual ao Global, conforme abaixo.
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 produtona 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.
Global: Referência da Nike:
Vitrine de imagens do produto com opção de zoom (como no Global)
* O estudo de CRO verificou muitos cliques nos bullets e sugeriu melhorias por parte de UX, então, pensando no comportamento dos usuários, o ideal seria que o carrossel foi automático, como o da Nike, e ainda para auxiliar na navegação, além dos bullets, setas indicativas - essa opção não foge tanto do design do Global. Ou, ainda, uma vitrine de produtos com miniaturas na lateral, conforme referência da Flormel. Como esta opção foge um pouco do design global, o ideal seria fazer teste A/B para verificar o comportamento do usuário.
Estudo de CRO: Referência da Flormel:
Tamanho com o grid recomendado pelo Guide Global + Guia de Medidas (botão link)
*É interessante ter um botão link abaixo das opções de tamanho, como na referência da Nike abaixo, 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.
Referência da Nike:
Seletor de quantidade
Cálculo do Frete
Placeholder com texto “Informe seu CEP” + botão “ok” + Não sei meu CEP (botão link)
*Verificar possível bug com relação ao CEP, pois fazendo testes, verificou-se que a informação não está correta - no lugar de SEDEX, era para ser PAC. Além disso não há feedback de estado de erro quando o CEP é inválido, pois no sistema atual todos os CEPs, até aqueles que não existem, estão como válidos.
Informações sobre o Produto - Descrição | Características | Tecnologia
*Segundo o estudo de CRO, os usuários clicaram bastante nas informações do produto, então, foi sugerido dar uma relevância maior, pois pode ser um grande fator de decisão de compra. Atualmente é necessário clicar no dropdown para visualizar as outras informações, 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.
Estudo de CRO: Global:
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”
Botão flutuante “Selecionar Tamanho”, que mudará para “Adicionar à Sacola”, após a seleção do tamanho, como na referência do Global.
*O ideal é que tenha também o título do produto, além do valor + CTA, para ajudar o usuário a lembrar qual o produto que ele está visualizando.”
Mobile
