Cada tipo de menu foi criado para resolver um problema diferente. Escolher o errado não vai quebrar sua loja imediatamente, mas faz o cliente pensar mais do que precisaria — e toda vez que um cliente precisa pensar, é um momento em que ele pode ir embora. Este artigo passa pelos tipos de menu do Shopify mais comuns e, para cada um: o que é, quando faz sentido, quando não faz e os erros que os lojistas costumam cometer.
Vale guardar um número antes de entrar nos detalhes. Segundo o Baymard Institute, a taxa média de abandono de carrinho no e-commerce gira em torno de 70%. Nem toda perda se deve à navegação, mas uma navegação bagunçada faz a sua parte para afastar o cliente antes mesmo de ele chegar ao carrinho.
Os quatro tipos abaixo não são excludentes. Uma loja costuma usar vários ao mesmo tempo — por exemplo, um mega menu no desktop e uma tab bar no celular. A questão é usar o tipo certo para o contexto certo.
Mega menu: bom para muitas categorias e clientes navegando no desktop
Um mega menu é um grande painel que se expande. Quando você passa o mouse ou toca em um item do topo, um painel largo se abre e mostra muitas subcategorias de uma vez, muitas vezes com imagens ou um produto em destaque. O cliente vê todo o layout da loja num único olhar.
Funciona bem quando a loja tem muitas categorias — digamos, 10 grupos ou mais, como um limite aproximado — e a maioria dos clientes entra pelo computador. Setores em que o comprador gosta de navegar antes de decidir, como moda, cosméticos, casa e móveis, tendem a combinar com esse estilo. O cliente ainda não sabe exatamente o que quer, então colocar muitos caminhos à frente dele ajuda.
Um mega menu não combina quando a loja tem poucos produtos ou a maioria dos clientes está no celular. Uma loja que vende dez modelos de camisa e abre um painel enorme é exagero — fica com cara de vazio. E como 79% do tráfego do Shopify vem do mobile (segundo o Shopify), um design que só fica bom em tela grande abandona a maior parte dos clientes.
O erro mais comum é entulhar coisa demais. O lojista quer mostrar tudo, então empilha cada categoria e cada banner num só painel. O resultado é que o cliente se sente sobrecarregado e não clica em nada. Opções demais equivalem a nenhuma opção. Agrupe as coisas de forma enxuta, deixe espaço em branco e destaque só as poucas coisas que você realmente quer vender.
Slide menu: bom para categorias em vários níveis e clientes que sabem o que querem
Um slide menu (também chamado de menu hambúrguer, aberto pelo ícone de três traços) desliza a partir da borda da tela. Ele mostra as categorias como uma árvore — você toca num grupo e seus subgrupos se expandem, descendo vários níveis. É uma forma organizada de encaixar uma estrutura complexa num espaço estreito.
Um slide menu faz sentido quando a loja tem muitos níveis de categoria e você precisa de uma hierarquia clara, especialmente numa mentalidade mobile-first. Pense numa loja de autopeças: Marca › Modelo › Tipo de peça. O slide menu deixa o cliente descer pelo galho certo sem carregar uma página nova a cada passo.
Não faz sentido quando a loja é simples. Se você tem só algumas categorias, escondê-las atrás de um ícone só dificulta a vida do cliente. O Nielsen Norman Group mostrou que a navegação escondida reduz a chance de o cliente encontrar o item que precisa e o deixa mais lento do que quando o menu está visível.
Ajuda entender a natureza dela: um slide menu esconde informação. Isso o torna bem adequado a quem já sabe o que quer — a pessoa abre o menu de propósito e vai direto para um galho conhecido. Ele é mais fraco para navegação exploratória, porque o cliente não vê nada até tocar. Se o seu objetivo é que o cliente esbarre em produtos, um slide menu sozinho não basta.
Tab bar: bom quando a maioria dos clientes está no celular
Uma tab bar é uma faixa de navegação fixa, presa na parte de baixo da tela do celular, que normalmente abriga os 4 ou 5 itens mais importantes, como Início, Categorias, Busca, Carrinho e Conta. Ela está sempre visível — não importa o quanto o cliente role a tela, ela continua ali.
A força da tab bar é a posição. A pesquisa de Steven Hoober sobre como as pessoas seguram o celular (mais de 1.300 observações no mundo real) descobriu que a maioria das ações no mobile é feita com um polegar, e o centro-inferior da tela é onde o polegar alcança com mais facilidade — muitas vezes chamado de thumb zone (zona do polegar). Colocar as ações principais embaixo significa colocá-las exatamente onde a mão do cliente já está descansando.
Uma tab bar faz sentido quando a maior parte do tráfego vem de celulares, o que é verdade para a maioria das lojas Shopify hoje. Ela também mantém as coisas importantes — sobretudo o carrinho — sempre a um único toque, em vez de obrigar o cliente a rolar de volta ao topo da página.
Note que uma tab bar tem espaço para pouquíssimos itens. Não tente enfiar sete ou oito ícones; escolha os 4 ou 5 mais importantes e deixe o resto para o slide menu ou para as páginas de categoria. Pense na tab bar como um atalho, não como toda a sua navegação.
FAB: um botão flutuante para uma ação
Um FAB (floating action button, ou botão de ação flutuante) é um botão redondo que flutua sobre o conteúdo, pensado para uma ação importante — conversar com a loja, ver o carrinho ou voltar ao topo da página. Ele está sempre lá, mas discreto, sem ocupar espaço de fato.
Um FAB faz sentido quando existe exatamente uma coisa que você quer que o cliente consiga fazer de qualquer lugar. Um exemplo comum é o botão de chat do Messenger ou do WhatsApp flutuando no canto inferior direito — um cliente olhando um produto que tem uma dúvida pode tocar e perguntar na hora, sem ficar procurando.
O que vale lembrar: um FAB não substitui um menu. Ele é um atalho para uma ação, não a casa de todo o seu sistema de navegação. O erro comum é carregá-lo de coisas — um botão que se expande em cinco ou seis opções, ou três ou quatro botões flutuantes ao mesmo tempo cobrindo o conteúdo e até bloqueando o botão Adicionar ao carrinho. Nesse ponto o FAB deixa de ser uma conveniência e vira um obstáculo. Um FAB, um propósito.
Algumas coisas que valem para os quatro
Qualquer que seja o tipo escolhido, estes três pontos valem sempre.
- Separe a configuração do mobile e do desktop. É a mesma loja, mas os clientes nos dois dispositivos se comportam de formas diferentes. Um único menu que seja ideal para os dois normalmente não existe; é melhor usar um mega menu no desktop e uma tab bar ou slide menu no celular.
- Não troque velocidade por nada. O Google define boas metas para os Core Web Vitals em LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos e CLS abaixo de 0,1. Um menu bonito que faz a página pular ou carregar devagar faz mais mal do que bem. Segundo dados do Shopify, uma loja média instala por volta de 6 apps, então cada app que você adiciona pesa na página — ser seletivo importa.
- Não deixe seu menu quebrar quando você trocar de tema. Se o menu estiver amarrado ao tema, você terá que refazê-lo do zero toda vez que mudar o visual.
É também por isso que muita gente usa uma ferramenta de navegação separada. O Navi+ consegue montar os quatro tipos acima — mega menu, slide menu, tab bar, FAB e um menu em grade — por arrastar e soltar, sem código, com mobile e desktop configurados separadamente, e o menu continua intacto quando você troca de tema. A ferramenta também foi feita para não prejudicar seus Core Web Vitals. Mas seja qual for a ferramenta que você use, o princípio é o mesmo: escolha o tipo de menu com base nos dispositivos dos seus clientes e em como eles compram, não no que parece mais chamativo.
Este artigo faz parte do guia maior sobre Como escolher o tipo de menu certo para sua loja Shopify.