Você decidiu usar ícones com rótulos de texto na sua navegação. Boa decisão—os dados apoiam isso. Mas a próxima pergunta é menos óbvia e igualmente importante: como você organiza o ícone e o rótulo um em relação ao outro? Empilhados verticalmente? Lado a lado? Rótulo apenas ao passar o mouse? Cada padrão produz resultados significativamente diferentes dependendo do contexto, e escolher o layout errado pode anular os benefícios de adicionar rótulos em primeiro lugar.
O layout de um par ícone-rótulo afeta três coisas simultaneamente: capacidade de varredura (como os usuários encontram o que querem), precisão do toque (quantas vezes eles tocam o alvo correto) e densidade visual (quanto da navegação você consegue colocar em um espaço determinado). Obter o equilíbrio certo para a navegação específica da sua loja requer entender o que cada padrão faz bem e onde ele falha.
- Empilhamento vertical (ícone acima do rótulo) é o padrão para barras de abas mobile—usado pela Apple, Google e todos os principais apps.
- Pareamento horizontal (ícone à esquerda do rótulo) funciona melhor em menus deslizáveis e navegação desktop onde o espaço vertical é limitado.
- Rótulo ao passar o mouse falha completamente em mobile e reduz o engajamento em desktop em 22% comparado a rótulos sempre visíveis.
- A pilha vertical cria um alvo de toque efetivo 30–40% maior do que a navegação apenas com ícones.
Padrão 1: pilha vertical (ícone acima, rótulo abaixo)
A pilha vertical é o padrão mais comum de ícone-rótulo em interfaces mobile. O ícone fica na parte superior, o rótulo de texto fica diretamente abaixo, e os dois formam uma unidade visual única. Este é o padrão usado em todas as barras de abas iOS, todas as barras de navegação inferior Android e praticamente todos os principais apps mobile.
As Diretrizes de Interface Humana da Apple especificam este layout explicitamente para barras de abas: ícones de 25x25 pontos com um rótulo de texto diretamente abaixo na fonte do sistema. As diretrizes Material Design do Google espelham isso, especificando ícones de 24x24 dp com um rótulo de 12 sp abaixo. Ambas as plataformas chegaram ao mesmo layout independentemente porque a pilha vertical resolve o problema fundamental do mobile: espaço horizontal limitado.
Por que funciona em mobile:
Uma tela de telefone em modo retrato tem tipicamente 375–430 pontos de largura. Uma barra de abas mobile precisa caber 4–5 itens de navegação nessa largura. Empilhar o ícone acima do rótulo permite que você encaixe mais itens porque cada item ocupa aproximadamente 70–80 pontos de largura em vez dos 120–150 pontos necessários para um arranjo horizontal.
A pilha vertical também cria um alvo de toque natural que é maior do que o ícone ou o rótulo sozinhos. Quando os usuários apontam para a área geral de um par ícone-rótulo, eles têm um alvo que é aproximadamente 48–56 pontos de largura e 44–52 pontos de altura—confortavelmente acima do mínimo de 44x44 da Apple e 48x48 do Google. Isso é aproximadamente 30–40% mais tolerante do que um botão apenas com ícone de 24–28 pontos.
Testes A/B em sites de ecommerce mobile apoiam isso. O teste da Blend Commerce em lojas Shopify usou o layout de pilha vertical (combinando a convenção do iOS) e mediu um aumento de conversão de 10,37% comparado à navegação apenas com ícones. A pilha vertical não é apenas o padrão mais comum—é o mais testado.
Quando usá-lo:
- Barras de abas mobile ou barras de navegação inferior (3–5 itens)
- Navegação estilo app onde você quer combinar com as convenções do iOS e Android
- Qualquer navegação mobile persistente que fica na tela entre visualizações de página
Quando falha:
A pilha vertical é menos ideal para menus deslizáveis ou gavetas de navegação, onde os itens são listados verticalmente. Naquele contexto, empilhar um ícone acima de seu rótulo para cada item de menu desperdiça espaço vertical e cria um ritmo visual incomum. Menus deslizáveis usam o padrão horizontal em vez disso.
Padrão 2: par horizontal (ícone esquerda, rótulo direita)
O par horizontal coloca o ícone à esquerda do rótulo de texto na mesma linha. Este é o padrão para menus deslizáveis, navegação lateral, barras de navegação desktop e listas de navegação.
Por que funciona para menus e listas:
Quando os itens de navegação são listados verticalmente—como em um menu hamburger, barra lateral ou dropdown—o ícone serve como uma âncora visual que ajuda os usuários a varrer a lista mais rapidamente. Pesquisa do MIT AgeLab em padrões de varredura visual descobriu que ícones alinhados à esquerda criam “marcos” visuais de varredura que reduzem o tempo necessário para localizar um item específico em 18–25% comparado a listas apenas com texto.
O par horizontal também se mapeia aos padrões naturais de leitura. Em idiomas da esquerda para a direita, os usuários varrem o ícone primeiro (reconhecimento instantâneo), depois o rótulo (confirmação). O movimento dos olhos é suave e linear. Em uma pilha vertical, o olho tem que se mover para baixo do ícone para o rótulo, o que é mais lento ao varrer uma lista de muitos itens.
Tamanho e espaçamento que funcionam:
Material Design fornece orientações específicas para pares de ícone-rótulo horizontais em gavetas de navegação: ícone de 24x24 dp, 16 dp de espaço entre o ícone e o rótulo, rótulo em fonte de 14 sp com peso médio. A altura total de cada linha é 56 dp, o que fornece um alvo de toque confortável.
As diretrizes da Apple para navegação em estilo de lista são semelhantes: ícones de 22–29 pontos (dependendo da complexidade do ícone), com o rótulo à direita na fonte do sistema. A altura da linha é mínimo 44 pontos.
Quando usá-lo:
- Menus deslizáveis ou hamburger
- Navegação lateral em desktop
- Menus suspensos
- Telas de configurações
- Qualquer navegação listada verticalmente onde os itens são empilhados de cima para baixo
Quando falha:
O par horizontal não funciona bem em espaços horizontais restritos como barras de abas mobile. Cinco itens, cada um com um ícone e um rótulo lado a lado, simplesmente não cabem em 375 pontos de largura sem truncar rótulos ou deixar o texto ilegível.
Padrão 3: rótulo ao passar o mouse (apenas ícone, texto aparece ao passar)
Rótulo ao passar o mouse é um padrão cada vez mais comum em desktop, especialmente em navegação lateral como a usada em Gmail, Slack e vários aplicativos de dashboard. A navegação mostra apenas ícone em uma coluna estreita, e passar o mouse sobre um ícone revela um tooltip com o rótulo de texto.
Por que é tentador:
O apelo é óbvio. Você tem uma navegação compacta que ocupa espaço mínimo de tela, além da capacidade dos usuários descobrirem rótulos quando precisam deles. Parece ser o melhor dos dois mundos.
Por que os dados contam uma história diferente:
Rótulo ao passar o mouse tem um problema fundamental: requer que os usuários interajam antes de poderem identificar itens de navegação. Este é um passo para trás em relação a rótulos sempre visíveis, onde a identificação acontece de relance.
Os testes do Nielsen Norman Group em tooltips baseados em hover descobriram que apenas 15% dos usuários passam o mouse intencionalmente sobre itens de navegação para revelar rótulos. O resto já sabe onde as coisas estão (usuários experientes) ou desiste e procura em outro lugar. Isso cria uma curva de aprendizado acentuada para visitantes novos, que é exatamente o oposto do que você quer em uma loja de ecommerce onde a maioria dos visitantes são iniciantes.
Pesquisa do Baymard Institute em padrões de navegação de ecommerce descobriu que navegação dependente de tooltip produziu 22% menos conclusões de navegação bem-sucedidas comparado a rótulos sempre visíveis. Os usuários foram mais lentos, mais propensos a cometer erros de navegação e mais propensos a usar o botão voltar do navegador (um sinal de que acabaram no lugar errado).
E então há o problema óbvio: hover não existe em mobile. Telas sensíveis ao toque não têm um estado de hover. Um toque em uma navegação apenas com ícone dispara a ação imediatamente ou abre um tooltip que requer um segundo toque—adicionando um passo extra que usuários mobile não esperam e não tolerarão.
Quando pode ser aceitável:
- Ferramentas internas de dashboard ou admin onde os usuários são treinados e usam a interface diariamente
- Aplicativos apenas para desktop onde o espaço real de tela é extremamente limitado
- Barras de ferramentas secundárias (como barras de ferramentas de formatação) onde os ícones são altamente padronizados
Quando evitar:
- Qualquer navegação de ecommerce voltada para o cliente
- Navegação mobile de qualquer tipo
- Navegação primária onde visitantes de primeira vez precisam encontrar seu caminho
Padrão 4: rótulo abaixo no estado ativo
Uma variação que ganhou tração é mostrar rótulos apenas no item de navegação ativo atualmente. Isto é comum em implementações Material Design onde a barra inferior mostra ícones para todos os itens, mas exibe apenas o rótulo de texto na aba selecionada.
O tradeoff:
Este padrão economiza espaço horizontal enquanto ainda fornece contexto para a localização atual. As diretrizes Material Design do Google ofereceram isso como uma opção para navegação inferior com mais de três itens.
No entanto, testes mostraram que esta abordagem é inferior a mostrar rótulos em todos os itens. Um estudo conduzido pelo time de UX da Booking.com (compartilhado em uma conferência NNG de 2019) descobriu que sempre mostrar rótulos reduziu erros de navegação em 15% comparado ao padrão de rótulo apenas ativo. Os usuários precisavam ver quais eram todas as opções, não apenas qual eles já tinha escolhido.
Material Design atualizou desde então suas diretrizes para recomendar navegação rotulada para todos os destinos, não apenas o ativo.
Escolhendo o padrão certo para sua loja
A decisão se reduz a dois fatores: o contexto de navegação e o dispositivo.
| Contexto | Melhor padrão | Por quê |
|---|---|---|
| Barra de abas mobile (3–5 itens) | Pilha vertical | Combina com convenções da plataforma, alvos de toque grandes, cabe na largura |
| Barra de abas mobile (5+ itens) | Pilha vertical com barra rolável | Ainda pilha vertical, mas permite rolagem horizontal |
| Menu deslizável | Par horizontal | Varredura natural em listas verticais |
| Header desktop | Par horizontal ou apenas texto | Espaço horizontal amplo |
| Barra lateral desktop | Par horizontal (rótulos sempre visíveis) | Usuários precisam varrer opções rapidamente |
| Navegação de rodapé | Apenas texto | Ícones não agregam valor aqui |
| Botão de ação flutuante | Apenas ícone (com tooltip) | Ação única, ícone é suficiente |
Teste rápidoAbra sua loja em um telefone e tente identificar cada item de navegação sem ler um rótulo. Se você hesitar em algum item, é ali que um rótulo deveria estar. Se sua barra de abas mobile usa pares horizontais e os itens parecem apertados, mude para pilhas verticais. Navi+ permite que você alterne entre padrões de layout no construtor de menu, então testar diferentes combinações leva segundos em vez de horas de edição de tema.
O padrão mais seguro para a maioria das lojas Shopify é a pilha vertical para barras de abas mobile e o par horizontal para menus deslizáveis. Estes padrões combinam com o que os usuários já esperam dos apps que usam todos os dias, e têm os dados de teste mais fortes apoiando-os. Comece por aí e itere com base na análise da sua própria loja.
Este artigo faz parte do guia maior sobre Ícones vs texto em navegação: quando usar cada um (e quando usar os dois).