Se você vende na Shopify e está penando com o menu no celular, existe um padrão que muitos aplicativos grandes de ecommerce usam, e vale a pena aprender com ele. É a forma de combinar uma tab bar e um slide menu: deixe a Tab Bar cuidar das idas rápidas e deixe o Slide Menu cuidar de quando a pessoa quer se aprofundar. Este artigo fala sobre como esses dois trabalham juntos e onde o FAB entra nessa história.
Eu já administrei uma loja e cometi o erro clássico: enfiei tudo dentro de um único menu hambúrguer e confiei que “quem estiver comprando vai tocar nele se precisar”. Na prática, as pessoas são bem menos pacientes do que a gente imagina.
Por que um só tipo de menu não basta
No celular, o comportamento de quem compra se divide em dois grupos bastante claros.
O primeiro grupo sabe o que quer. A pessoa chega para ver o carrinho, para buscar ou para voltar à página inicial. Ela precisa se mover rápido e ir direto ao ponto.
O segundo grupo ainda não decidiu o que comprar. Quer passear pelas categorias e ver o que tem de interessante. Precisa de um mapa completo da loja.
Um único menu tem dificuldade de atender bem aos dois. Se você enfia tudo em um hambúrguer, o primeiro grupo precisa dar um passo a mais por coisas que deveriam levar um só toque. O Nielsen Norman Group descobriu que esconder a navegação principal atrás de um botão a torna mais difícil de encontrar e mais lenta de usar do que quando os itens ficam à mostra. Por outro lado, se você tentar expor toda a árvore de categorias na tela, o primeiro grupo se sente sobrecarregado e a tela fica abarrotada.
A solução não é escolher um dos dois. É dividir os papéis.
A Tab Bar cuida dos destinos principais
A Tab Bar é uma barra de navegação fixa na parte de baixo da tela, geralmente com 4 a 5 itens. Ela está sempre visível, então a pessoa não precisa tocar para abri-la.
Sua posição embaixo não é por acaso. Segundo a pesquisa de Steven Hoober, feita com mais de 1.300 observações de usuários, cerca de 75% das ações na tela são feitas com o polegar. A parte central de baixo da tela é exatamente onde o polegar alcança com mais facilidade quando se segura o celular com uma mão. Colocar os destinos importantes ali faz com que as pessoas toquem com precisão e rapidez, cometendo menos erros.
Então o que deve ir na Tab Bar? Apenas os destinos mais usados e que precisam ser alcançados mais rápido. Por exemplo, numa loja de moda:
- Início
- Buscar
- Categorias (ou “Produtos”)
- Carrinho
- Conta
Cinco itens é a medida certa. Mais do que isso e cada botão fica espremido e difícil de tocar; menos do que isso e você desperdiça um espaço precioso. Este não é o lugar para listar todas as subcategorias — é o lugar para algumas das maiores portas de entrada.
O Slide Menu cuida de toda a estrutura de categorias
A Tab Bar só tem 4 ou 5 espaços. Mas uma loja de verdade costuma ter dezenas de categorias e subcategorias. Para onde elas vão?
É aqui que entra o Slide Menu. O Slide Menu abre a partir da borda da tela e consegue comportar toda a estrutura de categorias, com vários níveis. A pessoa quer ir de Masculino para Feminino, de Camisetas para Calças, de uma coleção para outra — o Slide Menu é o lugar para isso.
A parte boa desse padrão está em como o Slide Menu abre. Você coloca um item “Categorias” ou um ícone “Mais” direto na Tab Bar. A pessoa toca nele e o Slide Menu desliza para fora. Assim os dois menus se conectam: a Tab Bar está sempre ali para as idas rápidas, e também é a porta de entrada para o Slide Menu quando se quer navegar em profundidade.
Um detalhe pequeno mas importante: quando você de fato usar um Slide Menu, identifique-o de forma clara com um texto em vez de deixar um ícone solto, e coloque-o onde as pessoas esperam encontrá-lo. O NN/G recomenda usar o ícone padrão de três linhas junto com um rótulo, para que as pessoas consigam imaginar o que tem lá dentro. O Slide Menu não é ruim — ele só fica ruim quando tem que fazer o trabalho da Tab Bar e o dele ao mesmo tempo.
A divisão de papéis se resume a isto: quando a pessoa precisa de velocidade, usa a Tab Bar; quando quer explorar tudo, abre o Slide Menu. É exatamente essa combinação de tab bar e slide menu que muitos aplicativos grandes de ecommerce usam, e ela funciona na Shopify sem exigir nenhuma mudança radical.
O FAB: um complemento, não um substituto
O FAB (Floating Action Button, ou botão de ação flutuante) é um botão redondo que fica flutuando, geralmente no canto inferior direito, sobreposto ao conteúdo da página. Muita gente acha bonito e quer usá-lo para navegação. Eu desaconselho.
O FAB deve ser reservado para exatamente uma ação — uma que seja importante e repetida. Alguns exemplos sensatos:
- Um botão de chat de suporte, para que as pessoas tirem dúvidas rápidas quando estão em dúvida
- “Ver as ofertas de hoje” durante uma promoção
- Voltar ao topo em páginas de listagem de produtos muito longas
O motivo pelo qual o FAB não deve carregar a navegação principal: ele é só um botão. Quando você toca nele, ele tem que abrir um menu — o que significa voltar direto ao padrão de navegação escondida que a gente justamente queria evitar. A Tab Bar cuida melhor da navegação porque está sempre visível e tem vários espaços. O FAB combina com uma chamada para ação única e clara.
Em outras palavras: a Tab Bar e o Slide Menu cuidam do “para onde ir”, enquanto o FAB cuida de “fazer uma coisa”. Não deixe que um pise no terreno do outro.
Por que vale a pena acertar nesse padrão
Existe um motivo prático para se importar com o menu do celular. Segundo o Baymard Institute, a taxa média de abandono de carrinho gira em torno de 70%, e no mobile é ainda maior, perto de 80%. Quando a pessoa já tem dificuldade de se orientar pelo menu, ela vai embora antes mesmo de pensar em finalizar a compra.
A velocidade da página também conta. Um menu pesado pode deixar o carregamento lento e causar deslocamentos no layout. O Google define como limite “bom” para os Core Web Vitals um LCP abaixo de 2,5 segundos, um INP abaixo de 200 milissegundos e um CLS abaixo de 0,1. Quanto mais enxuto e leve o menu, mais fácil é se manter dentro desses limites.
Há mais uma coisa a pesar: a quantidade de aplicativos. Uma loja Shopify costuma instalar muitos apps, e cada um adiciona mais um pedaço de código rodando na página. Se uma única ferramenta de menu consegue dar conta da Tab Bar, do Slide Menu e do FAB num só lugar, você evita ter que remendar várias coisas separadas.
Monte esse padrão sem código
A parte difícil do padrão combinado é a configuração. Você precisa de uma Tab Bar separada para o mobile, de um Slide Menu conectado a ela e, possivelmente, de um FAB para uma CTA — tudo isso tem que se encaixar e não interferir na versão desktop.
É justamente isso que o Navi+ foi feito para resolver. Você configura a Tab Bar e o Slide Menu em um só lugar, define cada um separadamente para o mobile, arrasta e solta, sem precisar de código. As configurações de mobile e desktop são separadas, então a versão desktop continua usando um Mega Menu normal. O menu também permanece no lugar quando você troca de tema, e é otimizado para não prejudicar seus Core Web Vitals.
O que eu quero deixar para você não é uma ferramenta específica, mas a mentalidade de dividir os papéis: não faça um único menu dar conta de tudo. Deixe a Tab Bar cuidar das idas rápidas, o Slide Menu cuidar da navegação em profundidade e o FAB cuidar de uma única ação. Quem está comprando vai se orientar com mais facilidade, e isso costuma ser o primeiro passo para que essas pessoas fiquem mais tempo.
Este artigo faz parte do guia mais amplo sobre Navegação mobile — por que o menu hambúrguer está saindo de moda e o que usar no lugar.