Usabilidade aplicada a home do seu e-commerce

em nov 14, 2014:por

Victor Ferrante

Victor Ferrante é formado em Publicidade e Propaganda pela PUC-SP, fascinado por e-Commerce e design. Colaborador da eNext e NextEcommerce.
Views254
usabilidade-homepage

Esse é o segundo artigo sobre usabilidade aplicada ao e-commerce, há um  tempo atrás escrevi sobre a usabilidade aplicada ao checkout, e agora escrevo sobre a página mais importante da sua loja: a homepage.

Estratégia de vendas: Produto x Categoria

No e-commerce, temos a possibilidade de trabalhar em 2 vertentes de display: produto ou categoria. Note que quando digo que são 2 vertentes, quero dizer que há predominância de produtos/categorias na primeira página da sua loja.

Produto: NetShoes

netshoes-index

Nessa estratégia, a home irá mostrar com bastante foco produtos específicos, olhem o exemplo da Netshoes. Na primeira dobra, com exceção do menu, não há indicação nenhuma para categorias. Todos os elementos dominantes te apontarão para produtos específicos. Esse modelo de página força o usuário que não procura por produtos específicos a utilizar a busca ou o menu. A utilização da busca em usuários que estão indecisos, ou que estão somente olhando geralmente não é aconselhável, mas esse approach se torna muito forte se sua loja consegue trabalhar com recomendações de produtos baseado nos interesses do seu usuário. A Amazon mesmo utiliza-se desse artifício com seus returning visitors.

Categoria: Kanui

kanui-index

A estratégia de trabalhar com categorias em vez de produtos fornece aos usuários uma série de opções para ajudá-los com suas indecisões. No exemplo da Kanui, não vemos um link sequer para página de produto. 100% da página te leva para categorias, landing pages, promoções. A ideia de se trabalhar com esse modelo de página, geralmente dita que se alguém está a procura de um produto específico, essa pessoa procurará o modelo/nome do produto no Google, e cairá na página de produto diretamente do Google, enquanto os visitantes que entram em seu site pela homepage não sabe muito bem o que ele quer, e está a procura de conhecer seu portifólio de produtos, ou ver os lançamentos, promoções, qualquer coisa que não seja o produto x propriamente dito.

Produto x Categoria: forças e fraquezas

Quando falamos de uma predominância de categorias na sua página inicial, temos como principal ponto forte a ideia de auxiliar, guiar seu visitante, se ele não está certo do que quer as páginas de categoria são ótimas para conhecer seu e-commerce. Contudo, quando falamos de caminhos para as páginas de categoria destacados (seja por flag, banner, etc) a probabilidade de seu usuário não usar seu menu como forma de navegação é muito maior, isso consequentemente fará com que ele desconheça como o fluxo de navegação funciona claramente. Talvez isso não seja um problema a princípio, mas pode se tornar problemático quando falamos de recompra. Já trabalhando com o modelo de produtos, a principal força a se pensar é a rapidez de impacto de seus produtos e ofertas. Assim como quando falamos de fluxo de navegação esse modelo obriga o usuário a conhecer seu negócio mais a fundo, podendo trabalhar com um fluxo mais completo e com maior usabilidade. Já no âmbito das fraquezas a mais óbvia é que além de seu mix de produtos parecer supérfluo, provavelmente seu usuário não fará uma pesquisa clara, que te obrigará a pensar em soluções mais completas de busca e recomendações.

Amplitude do mix de produtos

Quando um potencial cliente entra pela primeira vez na sua loja, eles se prendem fortemente às opções de navegação para determinar qual tipo de e-commerce ele foi parar. Seus usuários, em sua primeira visita, descem a página até um certo ponto, e depois sobem novamente, com o objetivo de estabelecer rapidamente uma impressão da gama de produtos que está disponível para compra. Inclusive esse hábito nos leva a muitos mal entendimentos, uma vez que a maioria dos e-commerces, mostram na página inicial, uma seleção bastante reduzida de seu catálogo.

netshoes-index

No site da Netshoes, por exemplo, temos um layout muito bem feito, 10/10 para o design, mas para um leigo, essa loja vende somente calçados. Não há destaque nenhum, nem no menu, nem nos banners, sobre roupas, acessórios, e outros produtos.
As pessoas que nunca entraram no seu site, não conhecem sua marca, não sabe quem é você, terão sua compreensão baseada no conteúdo da sua homepage juntamente com a navegação primária (na maioria das vezes o menu principal). Se o conteúdo da sua home for estreito, raso, e seu menu não seja claro, a maioria esmagadora de prospects entenderão que sua loja não vende o que eles querem, ou precisam. Esse mal-entendimento pode se tornar um grande problema para sua operação, uma vez que os seus visitantes dificilmente procurarão por qualquer produto que eles não acreditam que está disponível na sua loja, e sim no seu concorrente. Em alguns casos, existe a probabilidade dele nunca mais voltar para o seu site, já que os produtos que ele quer/gosta/precisa não existem na sua loja mesmo.

Possua uma seleção ampla de tipos de produtos na sua homepage

Com o objetivo do minimizar o mal entendimento, ou uma subestima do seu mix de produtos, é recomendado demonstrar a diversidade do seu catálogo fazendo-se de uma seleção diversificada de diferentes produtos de diferentes categorias. Isso é particularmente importante para sites que vendem uma seleção de produtos de diferentes vertentes. Somente uma olhada na página já deve indicar a diversidade de produtos que sua loja possui.

tricae-index

Na tricae por exemplo, está explícito que além de roupas, e calçados, o mix de produtos deles envolve mobília, brinquedos, artigos em geral.

Obviamente você não vai dar o mesmo destaque para todas as categorias. As categorias que dirigem sem negócio, as mais rentáveis, com mais visitas, mais procuradas devem possuir um maior peso na página, mas se você tem o objetivo de evitar que seus primeiros visitantes subestimem seu mix, reserve um pouco de espaço para as outras categorias. No caso da Netshoes é natural que a maior parte de sua loja seja para vender calçados, mas a troca de alguns banners para vender casacos e camisetas seja uma opção válida. Algo importante a acrescentar é que a primeira impressão do seu usuário virá independente de seu destque ser um produto ou uma categoria, uma vez que somos seres visuais, as pessoas olharão a imagem, independente de ser uma genérica de categoria, ou um produto que realmente está a venda. Os clientes ‘dão uma olhada’ por cima somente para formar uma impressão do seu site, então esse detalhe não afeta muito a primeira impressão Destaque ao menos 30% das suas principais categorias Devido a capacidade das imagens de demandar mais atenção para compreensão, os visitantes confiam nelas para supor o mix de produtos da sua loja. Enquanto outros elementos, como botões, flags, tags e fontes são usados para chamar atenção para seus produtos, as imagens ainda são, tipicamente, mais dominantes e por isso que os seus produtos/categorias exigem imagens para bom entendimento.

walmart-index

Veja como o walmart trabalhou a página inicial deles, ela se resume a todas as categorias e algumas recomendações de produtos.

Enquanto é praticamente impossível destacar todos os produtos/categorias disponíveis no site, a maioria dos sites onde os visitantes conseguem definir qual tipo de produtos eles possuem, destacaram visualmente pelo menos 30-40% de suas principais categorias na homepage.

kanui-index

Quando destacamos 30-40% das categorias, geralmente, para o usuário, é insuficiente as informações da página inicial para formar uma opinião sobre o mix de produto da loja. Dependendo da complexidade da sua página, a amplitude de seu mix, e o nível de personalização implantada você precisará pelo menos: 1. Construir um sistema que troca inteligentemente os produtos de vitrine de acordo com promoções, para garantir uma diversidade de nível sobre as categorias na página inicial em todas as visitas. 2. Manualmente definir cada seção para garantir uma diversidade suficiente. Qual estratégia funciona melhor para o seu modelo de negócio, depende de uma série de fatores, entre eles: recurso de pessoal, amplitude de mix, volume de vendas.

Produtos em destaque devem ter referência a sua categoria

Independentemente de quão apurada é sua usabilidade, seu layout, sua árvore de navegação, etc. Em um certo momento algum (ns) de seu(s) usuário(s) se perderão no meio de tanto produto e informação. Geralmente, quando isso acontece os visitantes param a navegação onde estão e olham ao longo da página por qualquer coisa (produtos, textos, banners) na nuvem semântica do produto que estão procurando. Durante algumas pesquisas, a Baymard, observou que nessa procura por elementos semelhantes a seu objetivo final, os analisados levam o cursor para o tal elemento e após a apuração detalhada do que é exatamente aquilo, acabam por definir que não é relevante para sua busca final, mas sim como caminho para tal. Na realidade aquele produto específico não é considerado relevante, embora a categoria seja. Olhem o exemplo da PBKids

pbkids-

Se há um visitante querendo comprar fantasias, provavelmente sua atenção será chamada instantaneamente pela princesa, contudo não há um caminho simples para chegar a categoria, entre aspas você obriga seu cliente a comprar fantasia de princesa. Alguns usuários, nesse caso, chegam a clicar até na fantasia da princesa, esperando que ao chegar a página de produto, ele consiga acessar a categoria pelo breadcrumb hierárquico – com o objetivo final de conseguir chegar na tão desejada categoria. Com certeza, são poucos os visitantes que tem essa capacidade criativa para esse obstáculo, tornando esse caminho não muito aconselhável. Com isso em mente, sempre tente colocar em suas vitrines não somente um link para a página de produto, mas também para a página de categoria da qual o produto em questão pertence. Essa funcionalidade agiliza a navegação por todo o site, permitindo que seu cliente consiga pular de categoria em categoria de suavemente mesmo que ele tenha feito um caminho não-usual, como por exemplo no site do Ponto Frio: pontofrio

Como você vai fazer isso, não importa muito no que se diz a respeito a usabilidade, somente em relação a layout. Você pode optar por colocar as categorias e todas as sub-categorias, somente as categorias, ou até as categorias juntamente com as 2 ou 3 sub-categorias mais relevantes/similares. Além dos benefícios já expostos, como a navegação fluída, esse modelo de vitrine serve muito bem para detalhar para o consumidor exatamente o que ele está vendo. Nunca se sabe quando um de seus usuários olhará para uma cadeira e pensar que é uma cadeira de miniatura, ou de brinquedo – essa ambiguidade certamente cessa no segundo em que o produto estiver dentro de uma hierarquia entitulada de ‘móveis’. Por último, essa explanação de qual categoria somado ao link para a página pertencente talvez ajude a clarificar para seu usuário que ele está vendo somente uma pequena parte de seu mix de produtos daquela categoria. Houve casos documentados de usuários definindo que o mix de produto de uma loja se limitava aos produtos em destaque da homepage, simplesmente por não ver a categoria de cada um.

Banners contextuais devem levar para todos os produtos dispostos

Primeiramente, banners contextuais são aqueles em que se utiliza de uma imagem completa, complexa, em casos de móveis, por exemplo ao vender um sofá, insere-se o sofá dentro de uma sala completa, com televisão, tapetes, almofadas, mesas de centro e tudo para ficar vendável. É Geralmente trabalhada para vender um certo produto(s) ali disposto, ou anunciar uma certa categoria. Muito utilizado em lojas de moda e acessórios de luxo e em lojas de móveis, é um recurso muito válido quando pensamos em tornar seu produto desejável mas merece um cuidado especial quando pensamos na usabilidade que ele requer.

Por exemplo, no site da Mobly, temos a utilização dessa ferramenta, mas em qualquer lugar onde eu clicar nesse banner, ele me levará para a categoria de estantes modulares, o trabalho de fotografia + design está excelente ao meu ver, mas se um usuário quer comprar a mesa, ele não consegue, é preciso procurá-la em algum outro lugar.

mobly-estantes

Quando digo que os produtos devem ser acessíveis, digo que alguns deles exigem essa funcionalidade, nesse banner em específico, não trabalharia com link para todos os elementos, por exemplo o tapete, os vasos, os itens adjuntos não necessitam de ter um link, somente os que estão dispostos e que ocupam um espaço relativamente grande na composição, por exemplo as cadeiras, mesa, poltrona e talvez a lata de lixo.

Não consegui achar nenhum site brasileiro que tenha essa funcionalidade, se vocês conhecerem algum me avise que troco o exemplo, mas no e-commerce americano, um ótimo exemplo para entender o que digo é o site da Crate&Barrel

crate-and-barrel-banner

 

Notem que ao clicar na mesa de centro, somente a mesa de centro que aparece, e o mesmo acontece com o resto dos itens, pode parecer detalhe bobo, mas a facilidade e a usabilidade que esse tipo de preocupação te resulta é incrível. Especificamente no caso da Crate&Barrel, não há indicação nenhuma que esses elementos são clicáveis, somente o cursor que alterna, talvez porque essa funcionalidade já exista há anos no e-commerce deles, não haja a necessidade, mas aqui no Brasil por ser novo, recomendo fortemente alguma indicação, como um “+” , “veja”, ou um hover-state.

Em relação ao que acontecerá quando agir a interação entre o usuário e a imagem, na verdade pode ser tanto redirecionado para a página do produto, ou abrir um popupzinho como no exemplo, qualquer comportamento que torne explícito ao usuário que ele pode comprar aquele produto específico a qualquer momento.

Essa funcionalidade por ser tão poderosa, não é interessante de explorar somente na página inicial, mas também em oáginas de categoria e produtos, trabalhar com a vitrine de “quem comprou, comprou também” juntamente com essa solução pode te trazer resultados reais. Inclusive já vi casos onde o usuário fala que quer comprar também a mesinha mas desiste por que: “deve ser difícil achar ela nesse site”.

Deixe um comentário

O que achou do conteúdo? Compartilhe sua opinião:

Gostou do nosso conteúdo?

Deixe seu e-mail aqui e receba as novidades do mercado

2 Comentários :

  1. Wow!! Incriver esse artigo Victor! Parabéns!

  2. Dante Lima disse:

    Boa Victinho! Bem legal esse artigo =)

eNext Dashboard

eNext Dashboard

SLI Systems

SLI Systems

Calendário

 
JUL 25