Como melhorar o Varejo · Estudo Nº 01
Deixa seu contato e leva o PDF junto.
O estudo continua aberto: dá pra ler tudo sem preencher nada. O cadastro serve pra você levar o PDF e receber os próximos estudos desta linha.
Como melhorar o Varejo · Estudo Nº 01
O estudo continua aberto: dá pra ler tudo sem preencher nada. O cadastro serve pra você levar o PDF e receber os próximos estudos desta linha.
Sua home tem seis banners. Cerca de 1% dos visitantes clica em algum deles, e 84% desses cliques ficam no primeiro. Os outros cinco são inventário que existe no CMS e não existe na cabeça de ninguém. A Ikesaki fez a coisa mais simples possível a respeito: colocou um contador de posição embaixo do carrossel e, dentro do contador, um botão que abre os seis de uma vez numa lista. Medimos a funcionalidade no ar, com print datado, contra os requisitos publicados de Baymard, NN/g e WCAG. Uma parte é para copiar amanhã. Outra parte é para não copiar.
Esta linha só fala de funcionalidade que existe no ar, em site de varejo real, com prova. Nada aqui é conceito de apresentação: é o que estava publicado no dia da captura, medido com o navegador aberto.
Sua home tem seis banners. Quantos deles o shopper vê antes de rolar a página?
Quando o comercial vende o quinto slot do carrossel pra uma marca, o que exatamente foi vendido?
Seu carrossel gira sozinho. Quem decidiu quantos segundos bastam pra ler um banner?
O shopper viu de relance um banner que interessava e ele passou. Como ele volta?
Você construiu um controle bom pro desktop. Ele aparece no celular, onde estão 79% das compras?
01
Vitrine mostra tudo ao mesmo tempo e deixa o olho escolher. Carrossel mostra um por vez e pede que a pessoa espere pelo próximo. A diferença parece pequena no briefing e é enorme no dado: quem estuda comportamento em carrossel de home mede sempre a mesma curva, em sites diferentes, em anos diferentes.
1%
dos visitantes da home clicam em algum slide do carrossel. Em 28.928 cliques medidos.
Erik Runyon · nd.edu · out 2012 a jan 2013
84%
desses cliques ficam no primeiro slide. O resto se divide de forma quase igual entre todos os outros.
Erik Runyon · nd.edu
40 / 18 / 11
A curva num site com rotação automática: 40% dos cliques no primeiro slide, 18% no segundo, caindo até 11% no último.
Erik Runyon · cinco sites Notre Dame
46%
dos carrosséis de home em e-commerce têm implementação com problema de usabilidade.
Baymard Institute
Distribuição de cliques dentro do carrossel da home do nd.edu, sobre 28.928 cliques. Os slides 2 a 5 aparecem aqui como divisão aproximadamente igual dos 16% restantes, que é como o autor descreve o resultado. Não é taxa de conversão nem CTR sobre visitantes: é a repartição entre quem já clicou.
O agravante é a rotação automática. A NN/g documentou um caso em que a oferta principal de um varejo, um desconto de 100 libras, ficava visível apenas 20% do tempo porque o carrossel girava a cada cinco segundos. A participante do teste procurou a oferta, não achou, e resumiu o problema numa frase: "não deu tempo de ler, fica piscando rápido demais".
"Carrosséis com avanço automático e conteúdo em movimento são o problema número um de usabilidade na web hoje." Jakob Nielsen · Nielsen Norman Group
A conclusão fácil seria "tire o carrossel". Só que a home de varejo tem uma fila real de demandas concorrentes: a campanha da categoria, o frete, o acordo com a indústria, o lançamento, o institucional. Alguém vai ter que dividir aquele espaço. A pergunta boa não é como eliminar o carrossel, e sim como dar ao shopper uma saída de emergência para fora dele.
A regra desta linha
Todo carrossel é uma promessa de que existe mais coisa ali. Ou você mostra o que é, ou está pedindo fé.
02
A home da Ikesaki tem um carrossel de banners como quase todas. A diferença está embaixo dele. Onde a maioria dos varejos coloca uma fileira de bolinhas, a Ikesaki colocou três coisas: seta para trás, seta para frente, e no meio uma pílula que diz em qual banner você está e quantos existem no total.
Clicar no sinal de mais abre um painel sobre a home escurecida, com os seis banners empilhados numa lista rolável. Não é uma página nova, não é uma landing de campanhas, não perde o lugar da navegação. Cada banner da lista leva para o mesmo destino do banner no carrossel.
O controle diz quantos banners existem. Sem isso, o shopper não tem como saber se vale a pena investigar. Bolinha é uma pista, contador é uma resposta.
O botão de expandir está dentro da pílula do contador, não perdido num canto. O olho já foi até ali para descobrir "3 de 6"; o convite para ver os outros três chega no mesmo instante.
Banner de home é uma peça larga com texto pequeno. Em grade de miniaturas ele vira ilegível e o shopper não consegue decidir. Empilhado, cada banner mantém proporção e legibilidade.
O painel é um modal sobre a home. Não gasta um carregamento de página, não gera uma URL sem conteúdo próprio, e preserva o clique original de cada banner: a mesma peça leva ao mesmo destino, dentro ou fora do painel.
1964, Liberdade, São Paulo
Tirar o produto de trás do balcão foi a inovação da loja. Tirar o banner de trás da fila é a mesma ideia, com sessenta anos de atraso digital.
O primeiro autosserviço de cosméticos do Brasil, fundado por Hirofumi Ikesaki
03
Elogio sem auditoria é publicidade. Então medimos o carrossel inteiro contra requisitos publicados por terceiros: os dez requisitos de carrossel de home do Baymard Institute, a recomendação da NN/g sobre avanço automático, e o critério 2.2.2 da WCAG. Tudo o que está na coluna "o que medimos" foi observado com o navegador aberto na data da captura.
| Requisito publicado | O que medimos na Ikesaki | Veredito |
|---|---|---|
| Não deixar o carrossel ser a única rota até o conteúdo (Baymard) | As campanhas também aparecem no menu de departamentos e nas vitrines da própria home. O carrossel não é rota exclusiva. | Passa |
| Controles manuais evidentes (Baymard) | Setas grandes dos dois lados, contador de posição legível no centro. Acima da média do mercado brasileiro. | Passa |
| Mostrar ao shopper o conjunto todo (prática observada, não requisito formal) | O painel "Veja Todos" resolve isso melhor do que qualquer implementação padrão de plataforma que conhecemos no Brasil. | Referência |
| Intervalo de rotação razoável: 5 a 7 segundos para peça leve, até 10 para peça com texto (Baymard) | Medimos 4,5 segundos por slide, estável ao longo de 30 segundos. Os banners têm preço, condição de frete e texto legal em corpo pequeno. | Falha |
| Pausar a rotação com o mouse sobre o carrossel (Baymard) | Com o cursor parado sobre o banner por 12 segundos, o carrossel avançou três posições. Não pausa. | Falha |
| Parar a rotação depois de o usuário interagir (Baymard) | Depois de clicar na seta "próximo", a rotação automática continuou e avançou mais três posições em 14 segundos. | Falha |
| Mecanismo para pausar, parar ou esconder conteúdo em movimento com mais de 5 segundos (WCAG 2.2.2, nível A) | Não existe controle de pausa. Setas e painel navegam, mas nenhum deles interrompe o movimento automático. | Falha |
| Evitar rotação automática no celular (Baymard) | O carrossel também gira sozinho no celular, onde o gesto de arrastar já dá controle total ao shopper. | Falha |
| Nome acessível em todo controle (WCAG / prática de acessibilidade) | As setas têm rótulo ("Anterior", "Próximo"). O botão de expandir não tem rótulo nem texto: quem usa leitor de tela ouve apenas "botão". A melhor funcionalidade da página é a única invisível para esse público. | Falha |
| Texto alternativo descritivo nas imagens | Os seis banners têm alt="Banner". Nenhum descreve a oferta, a marca ou o destino. | Falha |
| A funcionalidade existe no celular | A linha de controle inteira (setas, contador e botão de expandir) está no HTML com display:none abaixo do breakpoint. O celular recebe seis tracinhos. | Falha |
Como medimos. Navegador Chromium em 1440x900 e 390x844, região Brasil, sem bloqueador. Rotação amostrada a cada 500ms durante 32 segundos lendo o próprio contador da página. Pausa no hover e parada após interação testadas isoladamente. Acessibilidade lida no DOM (atributos aria-label, alt e role), não por auditoria completa de leitor de tela. O roteiro de captura fica versionado junto com este estudo e pode ser reexecutado.
No Brasil, cerca de 79% das transações de e-commerce acontecem pelo celular; desktop e notebook respondem por 12%. A funcionalidade que este estudo elogia foi entregue exatamente na fatia de 12%.
display:none. A funcionalidade já foi construída, testada e paga. Falta uma decisão de layout responsivo para ela aparecer onde estão quatro em cada cinco compras.
A frase para levar para a reunião
Funcionalidade que não aparece no celular não é funcionalidade. É protótipo em produção.
04
Nada disso exige plataforma nova, projeto de TI de trimestre nem verba de mídia. É trabalho de front-end de home, do tamanho de um sprint, com efeito direto sobre o inventário que a sua área comercial já vende.
"3 / 6" custa uma linha de código e responde a pergunta que a bolinha deixa em aberto. Onde couber, escreva o número.
O botão de ver tudo tem que morar ao lado do número, no ponto exato onde o shopper percebe que existe mais coisa. Botão de expandir num canto da tela é botão que ninguém acha.
Banner é peça larga. Lista vertical rolável preserva a legibilidade; miniatura em grade transforma a sua campanha em selo colorido sem informação.
Modal sobre a home, fechamento por X e por tecla Esc, e cada peça do painel apontando para o mesmo destino que aponta no carrossel. Uma peça, um destino, dois lugares.
Se só der para entregar em um dispositivo, entregue no celular. É onde a fila do carrossel é mais cara: uma peça por tela, sem visão periférica dos vizinhos.
Rotação nunca abaixo de 5 segundos, 7 a 10 quando a peça tem preço, condição ou texto legal. E pausa quando o mouse entra, parada definitiva quando o shopper interage.
Rótulo acessível no botão de expandir ("Ver todos os banners") e texto alternativo real em cada peça ("Frete grátis para todo o Brasil acima de R$ 299,90"), no lugar de alt="Banner". Ganha o leitor de tela e ganha a leitura por máquina.
Evento de abertura, evento de clique por posição dentro do painel. É esse dado que diz se o slot 5 saiu do limbo, e é ele que você leva para a próxima negociação com a indústria.
05
Na taxonomia de ativos de mídia que a Salll usa para comparar mídia kit de varejo, o banner principal da home é o item H1: a superfície mais disputada e a mais cara da loja. Ela quase sempre é vendida como um conjunto de posições intercambiáveis, e quase nunca é entregue assim.
Um painel "ver todos" transforma cinco posições dormentes em cinco posições alcançáveis, sem tirar espaço de ninguém e sem aumentar o tempo de rotação.
Com evento de clique por posição dentro do painel, o varejo passa a ter dado próprio para defender preço por slot, em vez de negociar no achismo de que "todos aparecem igual".
Para a indústria, o contador é um instrumento de transparência: dá para perguntar em qual posição a peça entra, quantas peças dividem o espaço e qual o intervalo de rotação, antes de assinar.
Monitoramos prateleira digital em varejo e marketplace e transformamos o que aparece na tela em decisão de execução. Este estudo é um exemplo do método aplicado a uma superfície de home; o mesmo olhar vale para busca interna, categoria e página de produto.
Captura recorrente das superfícies que importam, com prova datada e histórico. O que mudou, quando mudou e o que isso fez com a sua marca na tela.
Da leitura ao arquivo pronto: título, imagem, conteúdo enriquecido e ficha, no padrão de cada canal, com o básico correto antes do enfeite.
Caio Salim · fundador da Salll
Ex-sócio de operação Amazon na Europa, hoje à frente da metodologia Salll de execução em prateleira digital. Escreve esta linha de estudos sobre funcionalidades reais do varejo brasileiro.
Execução de prateleira digital. Enxergamos, priorizamos, criamos, acionamos e confirmamos.