Aqui vai um pequeno experimento que você pode fazer agora mesmo. Segure o celular com uma mão só, do jeito que você faz quando rola a tela esperando na fila ou sentado no ônibus. Agora tente tocar o canto superior esquerdo da tela com o polegar sem mudar a forma de segurar. Difícil, não é? Essa sensação trêmula e esticada é o ponto de partida da zona do polegar — a área que o polegar consegue alcançar com conforto quando você segura o celular com uma mão.
Entender a zona do polegar não é só teoria. É o que decide se um comprador consegue tocar com facilidade em “Adicionar ao carrinho”, se ele encontra o menu e se finaliza o pedido ou desiste no meio do caminho. Este artigo trata do alcance do polegar na tela, de por que isso importa para a experiência de compra no celular e de por que colocar a navegação na parte de baixo combina com a forma como as pessoas realmente seguram o celular.
O que é a zona do polegar e por que ela é real
O conceito de zona do polegar foi popularizado por Steven Hoober depois de observar mais de 1.300 usuários de celular no mundo real. Ele percebeu três formas principais de segurar o aparelho: com uma mão só, apoiando com uma mão e tocando com a outra, e segurando com as duas mãos. O uso com uma mão só representou cerca de metade de todas as observações — o mais comum de todos. Em outras palavras, com muita frequência as pessoas usam o celular com apenas um polegar.
Quando você segura o celular com uma mão, o polegar se move ao longo de um arco, com o centro perto da base da palma. Por causa disso:
- A área mais fácil de alcançar é a parte central e inferior da tela. O polegar descansa aqui naturalmente, sem esforço.
- A área de esticada são as laterais no meio da tela. Dá para alcançar, mas a mão fica um pouco tensa.
- A área mais difícil são os dois cantos superiores, especialmente o que fica na diagonal em relação à mão que segura. Alcançar esse ponto normalmente exige mudar a forma de segurar ou usar a outra mão.
Você não precisa acreditar só na minha palavra. Digite “thumb zone” no Google e você vai ver o conhecido mapa de três cores — verde para alcance fácil, amarelo para esticada, vermelho para difícil de alcançar — que Samantha Ingram descreveu na Smashing Magazine, com base na pesquisa de Hoober. Essa é uma das ideias mais repetidas em UX, e a razão de ela continuar viva é que combina com a anatomia da mão, e não com uma tendência passageira.
O paradoxo: o mais importante fica justamente no ponto mais difícil de alcançar
Vale a pena parar nisso. Em muitos sites de compras, o ícone do hambúrguer (três linhas horizontais) — onde fica escondida toda a navegação principal — está no canto superior. Isso significa que a porta de entrada para todas as categorias de produtos cai bem na parte mais difícil de alcançar da zona do polegar.
O problema não para na mão cansada. O hambúrguer também esconde conteúdo. O Nielsen Norman Group estudou isso tanto em celulares quanto em desktops e concluiu que esconder a navegação atrás de um ícone de hambúrguer torna mais difícil para os usuários encontrarem o que precisam, leva mais tempo e dá uma sensação de maior dificuldade. Somando tudo: você colocou o menu onde a mão tem dificuldade de chegar e o escondeu dos olhos do usuário.
Para um lojista, isso tem um custo bem concreto. Segundo o Baymard Institute, a taxa média de abandono de carrinho fica em torno de 70% há mais de uma década, e no celular costuma ser ainda maior. Cada passo um pouco mais difícil é mais um motivo para o cliente ir embora. Quando alguém está na dúvida entre comprar e não comprar, ter que mudar a forma de segurar o aparelho só para abrir um menu é um pequeno atrito — mas tudo isso se acumula.
Projetar bem para mobile: trazer as ações importantes para o alcance do polegar
O princípio é simples, ainda que aplicá-lo exija disciplina: coloque as interações importantes na zona do polegar e não as empurre para as bordas.
Para uma loja, especificamente:
- O botão de ação principal — “Adicionar ao carrinho”, “Comprar agora”, “Finalizar compra” — deve ficar na metade inferior da tela, onde o polegar descansa. Muitos bons temas fixam o botão de compra na parte de baixo da página do produto justamente por isso.
- A navegação principal deve ficar visível na área de fácil alcance, em vez de escondida atrás de um ícone no canto.
- Coisas usadas raramente e um pouco arriscadas — excluir, sair, fechar — podem ficar na área mais difícil de alcançar. Ser difícil de tocar aqui acaba virando uma camada de proteção contra toques acidentais.
Um exemplo familiar: se você vende comida ou moda e os clientes costumam navegar pela sua loja em movimento, segurando o celular com uma mão só, então ter o botão “Adicionar ao carrinho” ao alcance do polegar pode ser a diferença entre um pedido fechado e uma rolada rápida pela tela, seguida de esquecimento.
É também por isso que a zona do polegar costuma ser mencionada junto com padrões de leitura como o padrão F ou o padrão Z. O padrão F e o padrão Z falam de como o olho percorre o conteúdo; a zona do polegar fala de até onde a mão consegue chegar. Um bom layout mobile precisa honrar os dois: colocar as coisas importantes onde o olho olha e onde a mão alcança.
Por que uma Tab Bar embaixo combina com a forma como as pessoas seguram o celular
Se a área mais fácil de alcançar é a parte de baixo da tela, então uma barra de navegação posicionada embaixo é uma resposta direta a essa realidade anatômica. Essa é a Tab Bar — uma faixa com alguns ícones fixos na parte de baixo da tela, como a barra inferior dos aplicativos do Shopee, Lazada ou Instagram que todo mundo conhece.
A Tab Bar é popular no mobile porque reúne várias coisas ao mesmo tempo:
- Está sempre visível — você não precisa abrir nada para vê-la — então resolve o problema da navegação escondida que o NN/g apontou.
- Fica bem na zona do polegar, então o polegar a alcança sem esforço.
- Limita a quantidade de itens (normalmente de 3 a 5), o que obriga você a escolher os caminhos mais importantes: Início, Categorias, Busca, Carrinho, Conta.
A Tab Bar não substitui tudo. Um catálogo de produtos profundo, com vários níveis, ainda pode precisar de um slide menu. Mas como espinha dorsal da navegação mobile, a Tab Bar combina muito melhor com a forma como as pessoas seguram o celular do que um hambúrguer no canto de cima.
Esse é um dos tipos de menu que o Navi+ consegue montar sem código, ao lado de um Mega Menu para desktop e um Slide Menu. Você configura mobile e desktop separadamente — uma Tab Bar embaixo para celulares, um Mega Menu para computadores — e tudo é arrastar e soltar. Um ponto que vale a atenção dos lojistas: adicionar uma barra de navegação pode facilmente deixar a página mais pesada, e os limites considerados “bons” do Google para os Core Web Vitals são bem rígidos (LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos, CLS abaixo de 0,1). O Navi+ é otimizado para não derrubar essas métricas, então você tem a navegação posicionada bem na zona do polegar sem abrir mão da velocidade.
Algumas coisas para lembrar
A zona do polegar não é um truque decorativo. É uma forma de respeitar uma verdade simples: com muita frequência, um comprador está usando apenas um polegar.
Algumas perguntas que vale a pena fazer quando você olhar de novo para a sua própria loja no celular:
- O botão de compra principal está na metade inferior da tela?
- O menu principal aparece de forma aberta, ou está escondido no canto de cima?
- Existe alguma ação importante que obriga o cliente a esticar a mão até um canto distante?
Você não precisa refazer tudo de uma vez. Basta segurar o celular com uma mão, percorrer a sua própria jornada de compra e deixar o seu polegar mostrar onde as coisas ainda travam.
Este artigo faz parte do guia mais amplo sobre Navegação mobile — por que o menu hambúrguer está ficando ultrapassado e o que usar no lugar.