Durante o processo de escolha-decisão-compra, o celular é utilizado, principalmente, para comparar produtos, preços e características – essa é a atividade de pesquisa mais realizada no smartphone para 33% dos respondentes do Consumer Barometer Survey 2014/15*.
A página de produto deve oferecer ao consumidor tudo que ele precisa saber para decidir e tirar do bolso o cartão de crédito. O usuário tem que:
– Conhecer os detalhes importantes do produto – quais cores e tamanhos estão disponíveis, por exemplo
– Saber o preço
– Entender como o produto se compara com outras opções nos quesitos que são relevantes para ele (é mais barato? Tem mais memória? É mais bonito? Essa loja parcela em mais vezes que a outra?)
Além disso, é igualmente importante facilitar a ação, ou seja: proporcionar um call to action (CTA) claro e bem posicionado.
Na tela do mobile, isso tudo precisa ser bastante condensado. Há que se questionar, por exemplo, se faz sentido ocupar todo o espaço antes da dobra com uma linda imagem, que mostra bem o produto, mas que não deixa espaço para outras informações. Dependendo do produto, os usuários talvez queiram ver uma foto maior do que a que cabe na tela – e, nesse caso, vale mais a pena oferecer um “tap to zoom” do que usar todo o espaço disponível para fazer caber uma foto grande. Mas também não faz sentido mostrar cinco parágrafos de texto superinformativo que o usuário vai ter que rolar a tela sem fim para ler.
O que é importante em uma página de produto no mobile?
– A primeira coisa é garantir que o espaço antes da dobra contenha o primordial (lembrando que um mesmo site pode adotar estratégias diferentes de apresentação dependendo da categoria do produto).
– Apresentar informações em tópicos, com fonte grande e legível, utilizando recursos gráficos (como negrito) para realçar o mais relevante. E o que é mais relevante? É a resposta à pergunta “o que eu preciso saber para decidir por esse produto?”
– Utilizar elementos adequados para a seleção de opções, como tamanho e cor
– Preço
– Formas de pagamento
– CTA estrategicamente posicionado. O ideal é que o botão “Comprar” esteja sempre presente, antes da dobra e acompanhando a rolagem da tela:
– O mobile site do Enjoei apresenta uma imagem bem grande do produto – e encolhe o preço
– Os CTAs acompanham a rolagem
– Abaixo da dobra ficam a descrição e as informações mais técnicas, em tópicos
– E os 3 pontinhos ali em cima, o que são? Novidade: abrem uma tela com as formas de compartilhar o produto, não apenas nas redes mas também no WhatsApp (função nativa do celular que começa a ser executada também no desktop)
O Walmart trabalha com dois tipos de CTA. O flutuante:
E o fixo:
Em ambos, o preço é muito bem destacado, em uma cor “positiva”. E o botão verde é difícil de não ser visto.
Porém, a regra de que o CTA tem que estar antes da dobra nem sempre é obedecida:
– Em uma página superelegante, a Uniqlo apresenta fotos do produto e opções de cores e tamanhos em elementos visualmente agradáveis e de fácil seleção.
– Mas é preciso rolagem para ver os CTAs – que, apesar do tamanho adequado, não têm uma cor muito chamativa.
– O recurso de abas para mostrar mais detalhes, como a descrição e materiais, é bastante utilizado em mobile.
– E o preço, cadê o preço? Bem discretinho – até demais.
Já a Asos radicaliza. Não tem nem CTA antes da dobra nem nada além da foto e um link para um vídeo do produto sendo desfilado.
Isso funciona para a Asos e para a Uniqlo? O que baseou o desenho da página de produto do Walmart e do Enjoei? Para chegar a alguma conclusão ou recomendação, precisamos de análise da conversão, teste A/B, métricas, teste de usabilidade. Como em tudo na vida, os números (e a conversa com os usuários) é que vão balizar de maneira assertiva as decisões de UX.
, updated on
Ramiro Garcés says:
Bom artigo. Cheio de detalhes, como deve ser. Em e-commerce os detalhes interessan porque eles podem aumentar as vendas. Obrigado pela informação!