Página de produto em e-commerce mobile: como aproveitar o espaço

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:

enjoei

– 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)

enjoei

O Walmart trabalha com dois tipos de CTA. O flutuante:

walmart

E o fixo:

walmart

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:

uniqlo

– 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.

asos

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

Alessandra Nahra

Escrevo, cuido de bichos, danço, cozinho, planto e tento ser amável com todo mundo.

One thought on “Página de produto em e-commerce mobile: como aproveitar o espaço

comente