Design de interface do usuário para comércio eletrônico: Como criar páginas de coleção de produtos envolventes (6 táticas práticas)

Introdução

Infelizmente, as páginas de coleção de produtos são frequentemente ignoradas por designers e redatores. Embora muito esforço seja feito para criar páginas de produtos e páginas de destino extremamente envolventes, as páginas de coleção são deixadas de lado e permanecem lamentavelmente desinteressantes.

Vamos dar uma olhada em seis maneiras práticas de criar páginas de coleção de produtos que envolvam, inspirem ações e gerem tráfego e conversões.

Certifique-se de que a foto principal do produto seja envolvente

O primeiro obstáculo de design que as páginas de coleção de produtos precisam superar é garantir que a foto principal seja envolvente e interessante. Se você não captar a atenção de um comprador praticamente assim que ele entrar na página ou em algumas rolagens, provavelmente já o perdeu.

Comece considerando tudo o que você sabe sobre seu público-alvo. Do que ele gosta? Por que gostam de seus produtos? O que eles gostam em seus produtos? Como você pode colocar esses recursos em primeiro plano?

Em seguida, comece a considerar o layout. As imagens precisam ser ampliadas? Elas precisam de um fundo vibrante ou neutro? Quantos produtos você deve mostrar em uma linha?

O ideal é que você faça um teste A/B com diversas variações de design. Às vezes, as menores alterações podem fazer a maior diferença.

Veja esta página de coleção de roupas de bebê. Os produtos em si são bonitos e atraentes, portanto, não precisam ser exibidos de forma particularmente inovadora. A etiqueta "novo em" claramente diferencia determinados produtos e garante que o comprador os observe.

Colocar produtos como esse em um fundo neutro é uma ótima maneira de fazê-los se destacar.

Fonte: mamasandpapas.com

Outra maneira de tornar a foto principal em uma página de coleção atraente é mostrar o item em uso. Se você observar essa página de estufas inclinadas, verá como isso pode ser executado sem esforço. Cada imagem é completamente diferente, com uma paleta de cores diferente e mostrando o item de um ângulo diferente. Eles tornaram fácil imaginar o produto em sua própria casa.

Fonte: greenhouseemporium.com

Essa é uma ótima tática se você quiser facilitar para o cliente a visualização da aparência do produto final e ajudá-lo a imaginar um estilo de vida completo.

Certifique-se de que os filtros não causem muita distração

As páginas de coleções exigem filtros para serem úteis. Não se pode esperar que os clientes naveguem por páginas e páginas de produtos para encontrar um item específico. É provável que eles não estejam cientes da amplitude de sua oferta e talvez não tenham tempo para fazer compras demoradas.

Os filtros devem categorizar seus produtos de forma significativa. Preço, tamanho e material são apenas alguns dos filtros mais comuns a serem usados. Considere os próprios produtos e quais são os fatores de diferenciação.

Quanto mais complexo for o produto, mais filtros deverão existir. Você também pode oferecer filtros úteis, como "não para iniciantes" ou "somente para profissionais", se eles ajudarem os clientes a selecionar o item certo.

Os filtros também não devem distrair muito. Eles devem ser fáceis de acessar, mas não devem ocupar uma grande parte da página ou interferir de alguma forma na experiência de navegação.

Dê uma olhada nesta página de coleções de tábuas para decks compostos. Os filtros são fornecidos à esquerda e atingem o equilíbrio certo entre serem facilmente perceptíveis e não atrapalharem. Observe que eles também são dobráveis, de modo que a grande quantidade de informações não sobrecarrega o cliente.

Eles também foram ordenados de forma lógica - a maioria das pessoas vai querer restringir as cores e os materiais antes de se aprofundar em detalhes mais específicos, como o tamanho.

Fonte: Ovaeda.com

Você pode implementar facilmente uma solução semelhante que não ocupará muito espaço, mas que ainda assim melhorará significativamente a experiência do usuário e permitirá que os clientes reduzam suas opções em questão de segundos.

Exibir descrições curtas do produto ao passar o mouse

Pense nas páginas de coleção de produtos como um centro de informações. É nela que você exibe todos os seus produtos em uma determinada categoria. Quanto mais útil você for, maior será a probabilidade de um cliente converter.

Tente não fazer com que os compradores cliquem em um item, leiam a descrição do produto e depois cliquem novamente. Eles precisam perder tempo rolando a tela para descobrir onde pararam. Ou, se eles continuarem abrindo produtos em novas guias, logo ficarão sobrecarregados com o número de itens que estão tentando comparar.

Quanto mais informações úteis você puder exibir na página de coleção, melhor. Ao adicionar uma descrição simples e curta do produto quando alguém passa o mouse sobre um produto, você pode ajudar os clientes a comparar os produtos ali mesmo.

Essa página de coleta de cálcio bariátrico mastigável faz um ótimo trabalho. Você recebe uma breve descrição do produto, informando quais vitaminas e minerais podem ser encontrados no produto. Os benefícios também são destacados: o sabor é ótimo, promove a saúde imunológica e assim por diante.

_Fonte: Bariatricfusion.com _

Observe como as descrições são curtas. Você pode lê-las em alguns segundos e continuar a comparar os produtos.

Ao aplicar essa tática, considere cuidadosamente a descrição do mouse. Ela não precisa ser igual à descrição na página do produto. Ela deve discutir brevemente os benefícios ou os principais recursos do item, diferenciando-o claramente dos outros produtos da página.

Concentre-se em ser informativo em vez de forçar uma venda aqui. É mais provável que os clientes se convertam se estiverem confiantes em sua escolha.

Inclua alguma prova social

A prova social é uma ótima ferramenta para tornar as páginas mais envolventes e úteis. Elas mostrarão aos seus clientes que você é confiável e que seus produtos são de boa qualidade. Isso é especialmente importante para novos clientes que ainda não estão familiarizados com sua marca e que podem estar mais hesitantes em converter.

A prova social pode ser apresentada de várias formas, mas as classificações por estrelas são o tipo mais útil de prova a ser colocado nas páginas de sua coleção. Elas servirão a vários propósitos:

• avaliar a qualidade do produto individual
• mostrar quantos clientes o compraram e dedicaram seu tempo para avaliá-lo
• ajudar os clientes a tomar decisões de compra mais rápidas

As classificações por estrelas são fáceis de incorporar. Dê uma olhada na página da coleção de paletas de sombras da Sephora. Elas são fáceis de identificar e exibem todas as informações relevantes: quantas avaliações existem e qual é a satisfação geral com o item. Você também pode ver claramente que uma dessas paletas é muito mais popular do que as outras.

Fonte: sephora.com

Outro ótimo sinal de prova social a ser incorporado em suas páginas de coleção são as notificações de venda em tempo real.

Dê uma olhada nesta página de adesivos personalizados para laptops. Enquanto você está navegando, um pop-up discreto aparece no canto inferior direito, informando quem fez uma compra no site, de onde são e o que compraram.

Essa é uma ótima maneira de adicionar um pouco de FOMO às suas táticas de marketing. Serão mostrados aos clientes outros itens, itens que são claramente populares porque alguém acabou de comprá-los. Isso também enviará fortes sinais de confiança e credibilidade.

Verifique se o pop-up não é muito chamativo ou distrai. Além disso, tente espaçá-los para que não comecem a incomodar os compradores.

Fonte: vinylstatus.com

Exibir várias visualizações de produtos

Quanto melhor os clientes puderem ver um produto, maiores serão as chances de conversão. Quanto mais imagens de um item você exibir na página de coleção, mais engajamento e interesse você gerará.

Você pode incorporar mais de uma imagem de várias maneiras. Você pode permitir a rolagem em uma galeria de produtos ou exibir uma foto diferente ao passar o mouse.

Essa página de roupas masculinas da H&M apresenta uma galeria de produtos com rolagem. Você pode ver todas as fotos apresentadas na página individual do produto diretamente da página da coleção, para que não precise clicar fora dela.

Fonte:hm.com

Se você preferir exibir apenas uma foto diferente ao passar o mouse, dê uma olhada nesta página de coleção de moda praia feminina para se inspirar. A marca está mostrando de forma inteligente a parte de trás do item ao passar o mouse, para que você possa ver a peça inteira sem precisar abrir outra página. Essa é uma ótima tática para marcas de roupas.

Fonte:simplybeach.com

Ao escolher se deseja adicionar uma galeria ou uma foto de foco, considere a natureza do item. Quantas fotos o comprador precisa ver? E quais devem ser essas fotos?

Você pode mostrar o produto sendo usado ou pode apresentar fotos de clientes, caso elas tenham maior probabilidade de influenciar um novo comprador. Você pode mostrar o item de perto ou até mesmo listar as especificações do produto.

Exibir itens vistos recentemente

As recomendações de produtos geralmente são reservadas para páginas de produtos individuais. É também nesse local que as marcas colocam o carrossel de "visualizações recentes".

No entanto, ao apresentá-lo na página de coleção, você pode lembrar gentilmente os clientes dos itens que eles já viram e gostaram. Poupe o tempo e o esforço deles para voltar ao histórico de ter várias guias abertas ao mesmo tempo.

Confira a página dos tênis de corrida masculinos da Adidas. Assim que visualizar um produto individual, você verá um recurso "visto recentemente" na parte inferior da página da coleção, o que o ajudará a ficar de olho nos itens que despertaram seu interesse.

Fonte: adidas.com

O mesmo carrossel também é apresentado em páginas de produtos individuais, proporcionando uma experiência de navegação personalizada.

Você também pode recomendar produtos aos clientes com base nos itens que eles visualizaram, da mesma forma que faria nas páginas de produtos.

Concluindo

Considere quais dessas táticas de design de página de coleção de produtos você pode implementar em suas próprias páginas. Talvez todas as seis possam desempenhar um papel importante no aumento de suas taxas de conversão.

Tenha sempre em mente a natureza de seu(s) produto(s) e os pontos problemáticos de seu público. O que eles estão procurando e como seus esforços de design podem ajudá-los a encontrar isso?