10/08/2015

Funções que não podem faltar na sua página de listagem de produtos

Funções que não podem faltar na sua página de listagem de produtos

Nesta aula nós abordaremos um modelo de página que é muito importante para as conversões do e-commerce: são as páginas de listagem de produtos. Em uma analogia com o varejo físico, essas páginas desempenham o papel de vitrine, ou de gôndula, dependendo do caso.

Na Nuvem Shop elas podem ser de três naturezas: a homepage, as páginas de categoria e a página de resultado de busca. Mais adiante nós falaremos de como utilizar o melhor de cada uma delas e assim fornecer um fluxo de navegação conciso e que termine em uma conversão!

Welcome Home

Mais uma vez utilizando a analogia do varejo físico, essa página cumpre, na maioria dos casos, o papel da principal porta de entrada de uma loja. Geralmente é onde está localizada a principal vitrine com os produtos “mais importantes” e outros atrativos que os lojistas utilizam para captar os olhares mais atentos.

No varejo online não é diferente. É nessa página onde o lojista tenta captar o máximo de atenção do seu cliente. Não é raro que essa página tenha grandes e belos banners que se alternam, além de uma lista com os melhores produtos da loja. No caso de uma loja multimarcas, é aqui que o lojista procura disponibilizar a lista de marcas – tudo isso para que o cliente seja persuadido a continuar navegando.

Por onde começar a desenhar essa página? A resposta é fácil, mas não simples! Mais uma vez, a coisa mais importante a se ter em mente ao desenhar uma página é o cuidado em pensar em uma solução de design que agregue valor tanto para o lojista quanto para o cliente.

Boas práticas também podem surtir um efeito positivo para uma boa experiência de compra, como fazer com que as informações de contato sejam sempre ou facilmente visíveis, prever lugares que o lojista possa inserir e remover informações como banners, menus de categorias, se certificar de que as informações mais importantes têm maior destaque, etc.

Na Nuvem Shop existem várias funcionalidades que podem ajudar o lojista a ter uma boa performance na sua homepage: banners rotativos, lista de produtos especiais, formulário para cadastro no mailing da loja (isso é muito importante para trabalhar com marketing digital), menu de categorias lateral e muitas outras.

Página de categorias

Se você trabalha com marketing digital ou faz anúncios pagos já deve ter utilizado uma dessas páginas quando quis anunciar um tipo de produto ou marca. Em suma, uma página de categoria apresenta uma lista com todos os produtos de uma determinada categoria, como por exemplo: roupas para bebês.

O problema dessas páginas é que quanto mais produtos uma categoria tem, mais difícil é de se encontrar um determinado produto. Praticamente todos os sites de e-commerces, em algum momento, compartilham desse mesmo problema.

Ao longo do tempo a Nuvem Shop desenvolveu vários recursos e funções padrão para templates baseados em boas praticas de UX (experiência do usuário) – que ajudam a minimizar os problemas que os clientes encontram ao navegar por essas páginas.

1. Função “Ordenar por”

Uma das funcionalidades mais básicas para a página de categorias é “Ordenar por”. Basicamente o que essa funcionalidade adiciona é a possibilidade do cliente ordenar a lista de produtos baseada em alguns critérios. Na Nuvem Shop, os critérios são: Preço: Menor ao maior, Preço: Maior ao menor, Alfabética A – Z, Alfabética Z – A, Mais antigo ao mais novo, Mais novo ao mais antigo, Mais vendidos.

Ordenar por - Luxury - Template Nuvem ShopAcesse o guia de implementação da funcionalidade “Ordenar por” neste link.

2. Função “Filtro”

A função de filtro, como o nome diz, adiciona um filtro para uma lista de produtos. Geralmente eles ficam localizados em uma coluna paralela à lista de produtos. O que essa funcionalidade faz é adicionar critérios bem específicos para a lista de produtos. Quanto mais produtos uma categoria tem, mais esses filtros se tornam indispensáveis. Por isso, não é difícil encontrar exemplos de filtros dos mais diversos tipos nos sites de grandes varejistas.

Na Nuvem Shop os filtros são criados automaticamente com base nas informações de “propriedades” localizadas no cadastro de produto dentro do Administrador Nuvem.

Filtros - Tech - Template Nuvem ShopAcesse o  guia de implementação da funcionalidade “Filtro” neste link.

3. Função “Mostrar mais produtos”

Ter muitos produtos em uma categoria gera outro problema para os clientes: a paginação.

Basicamente isso significa que uma quantidade especifica de produtos será mostrada em cada página. Por exemplo, se uma categoria possui 50 produtos e o site mostra dez produtos de cada vez, significa que teremos cinco páginas para essa categoria.

O problema disso é que a probabilidade dos usuários chegarem às últimas páginas é bem pequena, porque torna a navegação cansativa e por vezes frustrante. Existe uma infinidade de formas de tornar essa navegação mais amigável e confortável, uma delas foi adotada na Nuvem Shop como padrão para os templates.

A funcionalidade Botão “Mostrar mais produtos” adiciona um botão na lista de produtos para que o usuário possa ver mais itens sem ter que mudar de página através de uma paginação tradicional. O seu funcionamento é semelhante ao scroll infinito, entretanto, o carregamento dos novos produtos sempre dependerá da interação do usuário. Isso possibilita que ele possa interagir com outras partes do layout confortavelmente, como as informações que estão no rodapé.

Botão Mostrar mais produtos - Layout Nuvem Shop

Página de busca

A página de busca é bem parecida com a página de categoria. A diferença está no critério de exibição dos produtos, que depende muito do usuário.

A principal funcionalidade das páginas de busca na Nuvem Shop é que, caso o termo de busca não seja encontrado, uma lista de produtos destacados é mostrado. Isso evita que o usuário se frustre totalmente com a falta de conteúdo útil. Geralmente esses produtos são os mesmos que estão disponíveis na homepage.

Exemplo página 404 no Luxury - Layout Nuvem ShopParabéns por chegar até aqui! Você já passou da metade do curso! O que está achando até agora? Adicionaria mais alguma informação? Nas próximas aulas falaremos um pouco sobre os erros que geralmente são cometidos nessas páginas, tanto por designers, quanto por lojistas. Portanto, não deixe de acompanhar!

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Marcos Paiva

Marcos é designer e tecnólogo em gestão empresarial. É apaixonado por música e seriados da Netflix. Divide seu tempo em cuidar da familia, tentar ter uma banda, trabalhar e dormir (não necessariamente nessa ordem). De vez em quando escreve alguns tweets @marcos_paiva


funes-que-no-podem-faltar-na-sua-pgina-de-listagem-de-produtos