Você sabe como chamar atenção do seu cliente logo que ele chega em sua loja virtual? O que você deixa em destaque? Como é o processo de categorização? O seu cliente se sente influenciado a comprar?

Para responder a essas perguntas é preciso analisar com calma sua loja virtual, desde a home – página de entrada – até o checkou – após o pagamento. Isto é a usabilidade de um e-commerce. E sobre isto, o Victor Ferrante da ENext fez dois artigos excelentes que compartilhamos abaixo. Confira e destaque sua loja!

Usabilidade na Home Page

A home é a página de entrada de toda loja virtual e, sendo assim, precisa chamar atenção do seu consumidor. Para isto, há algumas estratégias que você pode por em prática. Veja.

1. Estratégia de vendas: Produto x Categoria

Na home existem duas possibilidades de layout em destaque: ou você deixa uma predominância de produtos, ou de categorias. Veja dois exemplos:

a) Predominância de Produto: NetShoes

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.

netshoes-index

A utilização da busca em usuários que estão indecisos, ou que estão somente olhando geralmente não é aconselhável, mas essa estratégia 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 visitantes recorrentes.

b) Predominância de Categoria: Kanui

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.

kanui-index

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 portfólio de produtos, ou ver os lançamentos, promoções, qualquer coisa que não seja o produto propriamente dito.

Qual é o melhor: Produto ou Categoria?

Escolha categoria quando: você precisa auxiliar e guiar seu visitante se ele não está certo do que quer. Ou seja, se sua loja é nova, não tem uma marca fixada e o visitante precisa conhecer toda linha de seus produtos.

Contra: 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.

Escolha produtos quando: você precisa de 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.

Contra: 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.

2. Estratégia de vendas: 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 mostra 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, mas para um primeiro visitante que não conhece a marca, 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 se o menu não seja claro, a maioria esmagadora de possíveis clientes 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.

 

Quer saber sobre tendências em e-commerces? Veja aqui.

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

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. Na Tricae por exemplo, está explícito que além de roupas e calçados, o mix de produtos deles envolve mobília, brinquedos e artigos em geral.

tricae-index

Obviamente você não vai dar o mesmo destaque para todas as categorias. As categorias que dirigem o 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 pode ser uma opção válida.

Algo importante a acrescentar é que a primeira impressão do seu usuário virá independente de seu destaque 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 e volume de vendas.

3. Estratégia 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 tantos produtos e informações. 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, assim 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 forma suave, mesmo que ele tenha feito um caminho não-usual, como por exemplo no site do Ponto Frio abaixo.

pontofrio

Para colocar em prática cocê pode optar por colocar as categorias e todas as subcategorias; ou somente as categorias; ou até as categorias juntamente com as 2 ou 3 subcategorias 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 intitulada ‘móveis’.

Por último, essa ligação de categoria ao produto ajuda a mostrar para seu usuário que ele está vendo somente uma pequena parte do 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.

4. Estratégia de vendas: Banners contextuais devem levar para todos os produtos dispostos

Primeiramente, banners contextuais são aqueles em que se utiliza de uma imagem completa e complexa, por exemplo, os banners de lojas de móveis que quer vender um sofá mas o insere dentro de uma sala completa, com televisão, tapetes, almofadas, mesas de centro e tudo para ficar vendável. Estes tipos de banners são geralmente trabalhados para vender um certo produto disposto em uma cena, ou também para anunciar uma certa categoria. Esta estratégia é muito utilizada em lojas de moda e acessórios de luxo e em lojas de móveis.

No site da Mobly temos a utilização dessa estratégia. Em qualquer lugar onde clicar no banner ele levará para a categoria de estantes modulares. O trabalho de fotografia + design está excelente, mas se um usuário quer comprar a mesa, ele não consegue, é preciso procurá-la em algum outro lugar.

mobly-estantes

Nesse caso, os produtos em destaque na imagem também deveriam ganhar links, ou seja: link nas cadeiras, mesa, poltrona e talvez na lata de lixo. No e-commerce americano, um ótimo exemplo para entender esta tática é o site da Crate&Barrel abaixo.

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 simples, 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. Aqui no Brasil ainda é uma estratégia nova.

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 pop-up 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 páginas de categoria e produtos. Trabalhe com a vitrine de “quem comprou, comprou também” juntamente com essa solução pode te trazer resultados reais. Inclusive há 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”.

A Usabilidade aplicada ao checkout

Com a home e páginas de categorias alinhadas com a usabilidade, chegou a hora de acertar a hora do checkou do seu e-commerce. Veja alguns pontos fundamentais para deixar o processo de compra mais eficiente.

1. Faça o que você diz que fará

Aposto que você adora surpresas né? Então vamos surpreender no checkout? Escrito assim parece até uma piada, mas o que mais vemos em sites do dia a dia são botões escritos: “prosseguir”, “próxima página”, “próximo” e uma seta acompanhando o texto. Porque não colocar simplesmente o que é o próximo passo? Ou ainda para onde vamos ao prosseguir? A seta por si só já tem a capacidade de informar ao cliente que ali é o lugar para clicar para prosseguir, não tem, portanto, a necessidade de se construir um botão hiperbólico. É a mesma coisa que dizer: vou subir ali em cima, ou vou entrar lá dentro.

Prosseguir

Nesse caso, fica claro que o prosseguir é o call-to-action e que é ali que devemos clicar, mas não sabemos para onde estamos indo! Simplesmente por colocar o próximo passo, conseguimos distinguir exatamente o que fazer agora e o que esperar do próximo passo. Veja abaixo a diferença:

Pagamento

Ao trocar prosseguir por pagamento, fica muito mais fluído o processo. O cliente já sabe que ao clicar ali, enquanto carrega a página, ele pode ir pegando o cartão ou outros dados, pois o próximo passo está explícito.

Quando estamos lidando com compra, com o gasto de nosso tão suado salário, não queremos saber de surpresa, queremos saber exatamente o que nos espera e para onde estamos indo.

2. Mantenha o processo focado

Quando seu consumidor está fazendo o checkout a única coisa que ele não precisa é se confundir. Todos sabemos que quando estamos no computador dificilmente nos focamos em uma coisa somente, sempre temos uma aba a mais aberta, seja para ver nossas curtidas, ou para lermos alguma notícia. A questão é que quanto menor a quantidade de informação na tela mais provável do checkout se completar.

Distrações no checkout

Isso quer dizer que não faz o muito sentido colocarmos ao lado da página de cadastro, por exemplo, um banner promocional, ou uma imagem. Atenha-se ao básico. Têm pessoas que são contra até a amostragem do sumário de compra, mas isso abre portas para outras argumentações. O fato é: se for pra colocar alguma coisa, coloque o resumo do pedido, sem enfeites, e call-to-action somente para o próximo passo do checkout!

3. Dê aos seus consumidores todas etapas de uma vez

O site da Mash tem um checkout incrível! Assim que se sai do carrinho para a parte dos formulários estão todas as etapas na tela, sem nem precisar girar o scroll e mover a página!

Página de Checkout Mash

Você deve estar pensando: a maioria das lojas são assim, todas etapas expostas e para cada uma página! Sim, isso é um fato, existe um motivo por trás da ideia de se dividir em etapas o processo de compra, mas no caso da Mash, ao você ir para a próxima etapa, simplesmente o box se expande ali na frente, e não precisa carregar outra página. O checkout em página única além de intuitivo está todo lá, explícito, é a honestidade em forma de e-commerce.

4. Surpresas podem até ser boas

Sim, as “guidelines” (se é que podemos usar essa palavra no e-commerce) de usabilidade dizem que o processo de maior conversão é o mais suave e fluído possível e isso é incontestável. O SmartCheckout da VTEX comprova isso com números, mas algumas vezes e em alguns casos específicos uma “lombadinha” pode cair bem. A Dell US fez um experimento que aumentou suas vendas em quase 5% simplesmente por adicionar um “Are you sure?” (Você tem certeza?) na hora de remover o produto do carrinho.

Cart Dell US

No caso da Dell, isso deu certo principalmente porque computadores são produtos de alta comparação, as pessoas tendem a pesquisar muito qual máquina comprar e onde comprá-la, então a utilização da ferramenta “você tem certeza” conseguiu trabalhar com esse comportamento de dúvida inerente aos seres humanos e, no “pensando melhor…”, levaram 5% a mais de Dell’s para as ruas.

***
Como se pôde ver, há muitos ajustes que podem ser realizados no seu e-commerce para melhorar a conversão. Vamos lá então? Comece hoje mesmo a testar e criar a melhor usabilidade para seus potenciais clientes!

 

Posts originais: Usabilidade aplicada ao checkou e Usabilidade aplicada a Home.