Todos os cases case 01 · discovery, benchmark e UI

Redesenhando o menu de navegação

O menu de um e-commerce de esportes tinha categorias demais e deixava muita gente perdida. Cruzei dados de comportamento, benchmark e análise heurística para desenhar uma navegação mais simples e objetiva, em msite, app e desktop.

Papel
Product Designer (UX/UI)
Contexto
E-commerce de esportes
Métodos
Desk research, dados, benchmark e análise heurística
Plataformas
Msite, app e desktop
Entrega
Telas e protótipo navegável

Contexto

Para melhorar a experiência de navegação, o menu precisava ficar mais fácil de usar para quem está procurando algum produto.

A base de usuários ativos tem uma faixa etária ampla e níveis muito diferentes de familiaridade com tecnologia. Por isso, o menu precisava ser simples e objetivo, sem desviar a atenção de quem está comprando.

  1. Discovery
  2. Benchmark
  3. Análise heurística
  4. Arquitetura da informação
  5. Design e protótipo

Discovery

Comecei reunindo tudo o que já existia sobre o comportamento das pessoas no menu atual e somei pesquisa de referências, benchmark e uma análise heurística nos três devices.

Desk research

Analisei as diretrizes da Nielsen Norman Group sobre menus. Estes foram os pontos que mais pesaram nas decisões:

  • Use recursos visuais em menus longos. Imagens, ícones e um uso moderado de cor ajudam a entender (e diferenciar) opções desconhecidas, mas nunca devem substituir rótulos de texto claros;
  • Não cubra a tela com o menu em telas maiores. O menu aberto não deve ocupar a tela toda. Em dispositivos móveis, a regra pode ser flexibilizada;
  • Indique onde o usuário está. "Onde estou?" é uma das perguntas fundamentais da navegação, e não indicar a localização atual é provavelmente o erro mais comum em menus;
  • No mobile, economize espaço. Esconder a navegação atrás de um botão (o ícone de hambúrguer) libera a tela para o conteúdo.

O que os dados de comportamento mostram

Uma análise de conversão por origem de tráfego mostrou que a navegação não é homogênea: ela depende da intenção inicial da pessoa e de quanta clareza ela encontra já no primeiro toque.

Menu

engajamento
44%
conversão
80%
receita
88%

Lidera nas origens que mais geram receita (tráfego direto e busca orgânica, por exemplo). Quem usa o menu costuma ser mais qualificado e confia nele para avançar.

Banners da home

engajamento
26%
conversão
40%
receita
48%

Ganham força em mídia paga, display e push no mobile: quem chega por mídia responde mais a estímulo visual.

Busca

engajamento
18%
conversão
23%
receita
23%

Pouca gente usa no geral, mas ela cresce em SMS e mídia paga. Isso sugere um comportamento de "atalho" ou uma necessidade que a página de chegada não resolveu.

Participação de cada componente, considerando o last click.

Menu e busca: dois comportamentos diferentes

Entende-se que as pessoas usam o menu quando querem explorar opções ou entender o que a loja oferece, e a busca quando já sabem o que procuram. Além disso, quem usa a busca também costuma usar o menu, mas o contrário acontece bem menos.

  • Menu: é por ele que a maior parte dos produtos é encontrada, e ele ganha da busca em acessos e em conversão na maioria das categorias. Isso mostra clareza e confiança na hora de descobrir, e interesse na variedade da loja;
  • Busca: apesar de ser usada para procurar produtos específicos, quem compra depois de uma busca acaba levando itens de casual, tênis e running, com ticket mais baixo. Percebemos, assim, que a busca nem sempre entrega o que a pessoa procurava.
"[...] quando você pesquisa por Tênis, a busca pode ser imprecisa ou então aparecem produtos relacionados a ele e não necessariamente o Tênis [...] se eu for pela categoria ali (menu) eu sei que vai ser um pouco mais precisa pra mim."
Participante, 26 anos · fala feita em entrevistas anteriores, sobre ter preferido o menu para buscar o produto

Apesar de a busca receber mais pesquisas, a conversão é maior na pesquisa pelo menu. Isso aponta uma lacuna no retorno de resultados da busca e mostra que navegar pelo menu pode ser mais assertivo, apesar de ser mais complexo. Reformular a jornada do menu pode aumentar a conversão e o ticket médio.

Hotjar: mapas de calor e gravações

Nos últimos 6 meses, a busca foi muito mais acessada do que o menu de categorias, em desktop e em mobile. No mobile, menos de 3% dos cliques vão para o menu, enquanto 50% vão para a busca. No desktop, 30% dos cliques da área do cabeçalho são na busca.

Isso se explica pela dificuldade de refinar a procura pelo menu. Nas gravações, presenciamos usuários desistindo de utilizar o menu por conta do excesso de categorias e subcategorias.

Um usuário que tentou navegar por Feminino > Tênis para ver uma lista de produtos acabou abrindo um accordion e não chegou aos produtos.

Mapa de calor · mobile
Mapa de calor · desktop
Gravação: abriu o accordion
Gravação: desistiu e foi pra busca

Google Analytics

Para entender melhor por que as pessoas ficavam confusas com o menu, analisei todas as categorias e subcategorias da loja nos últimos 6 meses. O resultado: muitas categorias e subcategorias estavam com 0 eventos no período. Entende-se que há um excesso de categorias que pode estar atrapalhando a navegação.

Levei esse levantamento, feito diretamente no Google Analytics, ao time de marketing. Eles analisaram com calma e removeram várias categorias que não faziam mais sentido.

Matriz CSD

Certezas

  • Apesar de ser a mais usada, a busca é mais imprecisa;
  • Quem usa o menu confia mais no sortimento dele do que no da busca;
  • O dropdown de categorias precisará ser mantido, por causa da grande variedade de categorias;
  • Muitas categorias e subcategorias têm poucos cliques e pouca conversão;
  • A conversão no menu é maior do que na busca.

Suposições

  • Quem já sabe o que quer usa a busca;
  • No desktop, ao clicar nas categorias do cabeçalho, as pessoas se confundem ao ver uma página que não é uma PLP.

Dúvidas

  • Todas as categorias e subcategorias são realmente necessárias? Qual o CTR de cada uma?
  • Quais categorias podemos remover?
  • Qual a melhor forma de expor a grande quantidade de categorias que temos no menu?
  • Faz sentido levar usuários de desktop para a página da categoria, em vez de uma PLP com o produto selecionado?
  • Faz sentido o excesso de banners na primeira dobra das subpáginas?

Benchmark

Analisei como grandes players organizam o menu em desktop, msite e app: Mercado Livre, Amazon, Decathlon e Centauro, além de Shein, Magalu e Renner. Contabilizei a quantidade de cliques até uma lista de produtos (PLP) e anotei o que ajudava e o que atrapalhava.

Mercado Livre

Adota uma estratégia parecida com a da Shein, mas sem deixar a tela muito carregada: imagens menores e mais arredondadas, categorias com nome mais curto e mais espaço entre os elementos, o que dá mais "respiro". Em categorias estratégicas (moda, beleza etc.), a pessoa é levada a páginas próprias, com banners e cores de fundo próprios. Em desktop, a navegação é confusa porque não cabem todas as categorias na tela e é preciso rolar até o fim.

  • Msite: ao selecionar "moda", o menu marca a categoria, mostrando que a pessoa está lá;
  • Em categorias, a pessoa vai para uma página própria; em subcategorias, vai para uma PLP;
  • Os produtos já aparecem na primeira dobra, sem passar a sensação de ter entrado na página errada;
  • Desktop: 7 categorias independentes expostas no cabeçalho e 3 cliques até a PLP;
  • No msite, a navegação por categorias não é tão visível: 1 clique até os produtos se a categoria estiver na home e 3 se estiver em "ver mais";
  • No app, imagens nas categorias ajudam a reduzir o esforço cognitivo.
Msite e app

Amazon

Optou por exibir o menu exatamente da mesma forma em desktop e msite, o que pode tornar a navegação mais confusa no computador, considerando o espaço que poderia ser aproveitado. No app, as categorias aparecem de forma confusa por causa do comportamento de accordion dentro de cards.

  • Desktop: 10 categorias independentes no cabeçalho e 3 cliques até ver os produtos (4 se a categoria estiver em "ver tudo");
  • Em "ver tudo" só há excesso de texto e nenhum outro elemento, como ícones ou imagens, para guiar a pessoa;
  • Alguns títulos aparecem em caixa alta e outros não;
  • App: o accordion em formato de card não é o comportamento esperado e pode estranhar;
  • Excesso de imagens aumenta a carga cognitiva.
Msite e app

Decathlon

Mostrou uma consistência visual muito interessante em todos os devices, sem sobrecarregar a jornada. Optou por exibir só algumas categorias e conduzir a pessoa a uma PLP quando ela quer ver tudo daquela categoria. São poucos cliques e não há problema de carga cognitiva, principalmente pela boa hierarquia visual e pela organização das categorias.

  • A pessoa sabe exatamente onde está;
  • Desktop: 8 categorias independentes no cabeçalho e 3 cliques até a PLP. Ao clicar em uma seção, abre uma PLP já filtrada;
  • Prioriza subcategorias, em vez de cards de produto, no início da primeira dobra, para quem quiser afunilar a busca;
  • Poderia haver um aviso em "Acessórios", no cabeçalho, mostrando que a pessoa está naquela seção;
  • Msite: 2 cliques até a PLP. O menu é organizado, com respiro e um floating button no final para ver tudo;
  • App: a hierarquia visual não ficou boa, faltou destaque para os títulos.
Msite e app

Centauro

Optou por exibir todas as subcategorias em todos os devices, o que causa sobrecarga cognitiva. O pouco espaçamento entre as palavras e o peso das fontes agravam o problema. No app, organizou as categorias em cards, uma prática interessante quando combinada a uma jornada consistente.

  • Desktop: excesso de informações e pouco espaçamento. 12 categorias independentes no cabeçalho;
  • Dependendo da categoria, não há um banner à direita;
  • Msite: repetir a categoria na tela seguinte não faz sentido;
  • Msite: gostei do banner no final;
  • App: a navegação pelo menu é mais rápida, e os cards na parte superior da tela ajudam a organizar.
Msite e app

Shein

Adotou uma estratégia bem diferente dos outros: já exibe opções filtradas. É um caminho mais rápido até a PLP, mas a pessoa pode ficar perdida com o excesso de informações e com a diversidade de filtros. Mesmo com muito espaço no desktop, o problema também acontece.

  • Desktop: 10 categorias independentes no cabeçalho e 3 cliques até ver os produtos;
  • Já exibir as opções filtradas (por exemplo, jeans masculino) é ruim: são muitas possibilidades, e isso aumenta a carga cognitiva;
  • App: 2 a 3 cliques, mas exige muita carga cognitiva. O excesso de imagens aumenta o tempo que a pessoa precisa para pensar.
App

Magalu

A jornada é bem diferente nos três devices. A do app é a mais consistente: facilita o acesso às subcategorias, com uma página própria para cada categoria e cards de produto já na primeira dobra. Em desktop, a navegação é confusa porque não cabem todas as categorias na tela e o layout do drawer muda conforme o ponto de clique. No msite, o layout lembra o do desktop, mas perde a consistência visual nas telas seguintes.

  • Desktop: 3 cliques até ver os produtos, com muita carga cognitiva para chegar à PLP;
  • Msite: a partir de certo ponto, as telas mudam bastante e parecem de uma experiência mais antiga;
  • App: 2 cliques até ver os produtos. Gostei da ideia de uma página por categoria, já com os filtros.
App

Renner

Focou em exibir exatamente a mesma experiência em desktop e msite, o que deixou o desktop com pouco aproveitamento de espaço e com problemas de usabilidade. A pessoa encontra o que precisa com poucos cliques no menu, e a loja exibe filtros-chave na PLP para ajudar a afunilar a busca.

Msite

O que aprendi com o mercado

Analisando os players, percebemos que não existe um padrão de menu e que alguns adotam práticas que aumentam a carga cognitiva. Estes foram os insights:

  • Fazer com que o usuário acesse o que precisa com a menor quantidade de cliques possível (a maioria dos players leva 2 a 3 cliques);
  • Exibir imagens e ícones coerentes com a categoria;
  • Em desktop, a linha do cabeçalho exibe de 7 a mais de 10 categorias. Vale explorar a possibilidade de exibir mais;
  • Igualar as experiências dos três devices;
  • Em desktop, deixar o pop-up de categorias em largura total, mas sem ocupar a tela inteira;
  • Exibir as categorias na primeira dobra da home é essencial, e é preciso ter estratégia ao escolher quais categorias ganham destaque;
  • Nas páginas de categoria, orientar melhor onde a pessoa está, seja deixando a breadcrumb mais clara, seja melhorando os banners dessas páginas;
  • Exibir filtros de subcategorias e cards de produto logo na primeira dobra.

Análise heurística

A análise heurística é um método de avaliação de usabilidade que identifica problemas em uma interface com base em princípios consolidados, como as 10 heurísticas de Nielsen. Avaliei a jornada do menu nos três devices e atribuí a cada problema um nível de criticidade.

0 sem problema 1 cosmético 2 baixa prioridade 3 média prioridade 4 crítico: alta prioridade

Principais achados

  1. Falta de clareza de contexto e localização: a pessoa não entende claramente em qual categoria ou subcategoria está;
  2. Sobrecarga cognitiva: excesso de categorias e subcategorias dificulta a leitura e a tomada de decisão;
  3. Baixa prevenção de erros: no app, as categorias exibidas não condizem com os produtos listados, e não há botão de voltar ao selecionar uma categoria.

1. Visibilidade do status do sistema

4
problema
  1. Ao acessar as subpáginas de categorias, não fica claro que a pessoa está na subpágina da categoria que escolheu;
  2. No app, dependendo da categoria escolhida, a lista de produtos exibida não condiz com ela.
solução
  1. Diminuir a quantidade de banners na primeira dobra das subpáginas;
  2. Inserir filtros de subcategorias;
  3. Inserir cards de produto logo na primeira dobra;
  4. Sobre o app: a definir.

2. Correspondência entre o sistema e o mundo real

3
problema
  1. Dependendo da categoria escolhida, o termo exibido na breadcrumb é um termo interno (por exemplo, "lst/mi-masculino").
solução
  1. Analisar a possibilidade de alterar o nome de exibição na breadcrumb.

3. Controle e liberdade do usuário

3
problema
  1. App: depois de selecionar uma categoria, não há botão de voltar caso a pessoa escolha a errada. Isso só acontece quando há subcategorias.
solução
  1. Inserir o botão de voltar.

4. Consistência e padrões

2
problema

Desktop: problema de consistência visual (margens, "games" em caixa alta).

solução

Ajustar espaçamento e tipografia.

5. Prevenção de erros

4
problema
  1. As imagens não condizem com as categorias;
  2. O título não condiz com a categoria clicada (por exemplo, masculino).
solução
  1. Inserir imagens ou ícones condizentes com as categorias e fazer o mesmo com alguns títulos exibidos na PLP.

6. Reconhecer é mais importante do que lembrar

4
problema
  1. Em app, o mesmo ícone é usado para todas as subcategorias;
  2. Em desktop, o título da PLP não condiz com a categoria clicada;
  3. Em desktop, o nome exibido na breadcrumb nem sempre é o da categoria: exibimos nomes técnicos;
  4. Ao ir para subpáginas de categorias, não fica claro em que página a pessoa está, e ela precisa se lembrar.
solução
  1. Remover ou substituir os ícones;
  2. Colocar no título sempre o que a pessoa pesquisou;
  3. Analisar alterar o nome exibido na breadcrumb;
  4. Criar banners que indiquem em qual categoria a pessoa está.

7. Flexibilidade e eficiência de uso

0

Não se aplica.

Não se aplica.

8. Estética e design minimalista

4
problema
  1. Excesso de categorias e subcategorias.
solução

Identificar e filtrar quais categorias e subcategorias são importantes para o negócio.

9. Ajude os usuários a reconhecer, diagnosticar e recuperar de erros

3
problema

Não há problemas de usabilidade, porque já exibimos uma tela para quando a página está indisponível. Mas há oportunidades de melhoria nessa tela.

solução

Implementar as melhorias propostas para essa tela.

10. Ajuda e documentação

0

Não se aplica.

Não se aplica.

Arquitetura da informação

Para mapear a melhor arquitetura, uni o comportamento do usuário às boas práticas do mercado e montei um sitemap organizado por estilo de navegação, exploração comportamental e acesso rápido a funcionalidades-chave. As categorias e subcategorias abaixo são as que estão nos protótipos.

Menu

Cabeçalho só no desktop

  • Todas as categorias
  • Ofertas
  • Corrida
  • Futebol
  • Sportstyle
  • Feminino
  • Saúde
  • Outlet
  • Lojas parceiras
Todas as categorias

Feminino

Calçados

  • Tênis de treino
  • Tênis de corrida
  • Tênis casual
  • Chinelos
  • Botas
  • Crocs
  • Ver tudo

Roupas

  • Shorts
  • Camisetas
  • Camisas de time
  • Jaquetas e casacos
  • Top fitness
  • Calças e legging
  • Short saia
  • Regatas
  • Ver tudo

Acessórios

  • Bonés e viseiras
  • Bolsas e mochilas
  • Meias
  • Chinelos
  • Óculos
  • Ver tudo

Masculino

Calçados

  • Tênis de treino
  • Tênis de corrida
  • Tênis casual
  • Chuteiras de futsal
  • Chuteiras society
  • Chuteiras de campo
  • Botas
  • Chinelos
  • Ver tudo

Roupas

  • Bermudas
  • Camisas de time
  • Calças
  • Camisas polo
  • Jaquetas e casacos
  • Moletons
  • Shorts
  • Camisetas
  • Ver tudo

Acessórios

  • Bonés
  • Meias
  • Meiões
  • Mochilas
  • Óculos
  • Relógios
  • Ver tudo

Infantil

Calçados

  • Tênis
  • Chuteiras society
  • Chuteiras futsal
  • Chuteiras de campo
  • Chinelos e sandálias
  • Crocs
  • Botas
  • Ver tudo

Roupas

  • Camisetas
  • Jaquetas e casacos
  • Calças
  • Shorts
  • Conjuntos
  • Ver tudo

Acessórios

  • Mochilas
  • Lancheiras
  • Toucas
  • Meias
  • Bonés
  • Ver tudo

Saúde e bem estar

Para turbinar seu treino

  • Whey protein
  • Creatina
  • Pré-treino
  • Alimentação saudável
  • Vitaminas
  • Wearables

Marcas

As melhores marcas para o seu ritmo

  • Adidas
  • Puma
  • Nike
  • Asics
  • Oakley
  • New Balance
  • Kappa
  • Umbro

Esportes

Qual vai ser o seu ritmo hoje?

  • Futebol
  • Corrida
  • Basquete
  • Tennis e squash
  • Motosport
  • Musculação
  • Ciclismo
  • Aventura
  • Wearables

Design

Msite e app: a mesma navegação, em níveis

Comecei pelo mobile e igualei a experiência entre msite e app. A navegação acontece em níveis, e cada nível responde à pergunta "onde eu estou?":

  • Atalhos no topo: um bloco de acesso rápido às categorias e itens mais usados ("Mais acessados" no msite, "Para você" no app);
  • Título e botão de voltar em cada nível, para a pessoa sempre saber onde está e poder desfazer uma escolha;
  • Categorias com seta indicando que há um próximo nível;
  • Subcategorias em accordion (Calçados, Roupas e Acessórios) e um link "Ver tudo" para chegar direto à lista de produtos;
  • Espaço para um banner ao final do menu, que o time de marketing pode usar para divulgar campanhas.
Msite · categorias
Msite · nível 2, com botão de voltar
Msite · subcategorias
App · categorias
App · categoria

Desktop: o menu dividido em 3 espaços

No desktop, o menu abre em largura total, sem cobrir a tela inteira, e eu o dividi em três espaços, cada um com uma função e uma medida já definidas:

  1. 1
    CategoriasEspaço reservado só para as categorias. O respiro em branco é importante para gerar menos carga cognitiva.300 px de largura
  2. 2
    Espaço-chaveEspaço com medida fixa, pensado para o time de marketing usar como quiser. Veja abaixo.272 px de largura
  3. 3
    SubcategoriasEspaço reservado só para as subcategorias. Não recomendo exibir banners aqui, para não atrapalhar a navegação.592 px de largura

Espaço-chave: medidas fixas, uso flexível

A ideia principal do espaço-chave é permitir que o time de marketing crie possibilidades com independência e padronização. Por isso, separamos 272 px para que o time consiga combinar componentes de forma dinâmica: o "Para você" com um banner, apenas o "Para você" ou um banner ocupando todo o espaço.

Masculino · Para você + banner
Infantil · banner ocupando o espaço

Próximos passos

  • Acompanhar o CTR do menu e a conversão por origem, comparando com a baixa participação do menu que mostrei no discovery.
próximo caseEvoluindo uma Home Promocional