Lei de Fitts: por que seus visitantes sentem seus CTAs e saem no celular

Você entregou uma página de destino limpa. Tráfego parece bom no desktop, mas sua conversão mobile é um desastre. Pessoas rolam, passam perto do CTA, e vão embora. O botão não está quebrado. Ele é apenas pequeno demais, fica longe demais, ou fica muito perto de outra coisa.

Essa é a Lei de Fitts comendo seus signups silenciosamente. O tamanho dos seus elementos interativos e onde você os coloca na tela literalmente decide se alguém clica ou desiste.

O que a Lei de Fitts realmente diz

Paul Fitts, um psicólogo, descobriu em 1954 que o tempo para acertar um alvo depende de duas coisas: como é grande o alvo e como é longe ele de ser alcançado. Menor e mais longe = mais lento. Maior e mais perto = mais rápido.

"O tempo para adquirir um alvo é uma função do tamanho do alvo e distância." , Paul Fitts

Esqueça a fórmula. A regra de ouro: se você quer que alguém clique seu CTA, faça-o grande e coloque-o onde os olhos deles já estão. Botões diminutos em cantos estranhos são fricção que você está cobrando seus visitantes para empurrar.

Por que nossos cérebros desaceleram em alvos pequenos

Quando você clica em um botão pequeno, seu cérebro tem que fazer trabalho extra de "apontar e corrigir". Em um link de texto de 13px, isso é uma pausa mensurável. Em um CTA do tamanho do polegar, é sem esforço. A fricção se acumula, cada milissegundo de "onde é isso novamente?" é um milissegundo mais perto do bounce.

Por que isso importa em uma página de destino

Ignorar a Lei de Fitts não apenas deixa sua página com aparência barata, mas custa seus signups diretamente.

Conversão

Seu botão "Começar grátis" deveria ser a coisa mais fácil de acertar em toda a página. Se ele tem o mesmo tamanho que o link de rodapé legal, você está dizendo aos visitantes que ambos são igualmente importantes. Eles não são.

Mobile

A maioria do seu tráfego está tocando sua página com um polegar. O polegar é gordo, impreciso e preguiçoso. Qualquer coisa menor que ~44px é um risco.

Acessibilidade

Visitantes com mãos tremendo, em ônibus balançando, ou com dedos maiores vão desistir de botões pequenos antes mesmo de ler sua oferta.

Erros

Botões aglomerados muito perto um do outro produzem erros de "dedo gordo". Pessoas clicam "voltar" em vez de "próximo" e vão embora porque a página parece quebrada.

Como usar a Lei de Fitts em sua página

Quatro movimentos práticos que você pode aplicar hoje.

1. Faça áreas de acerto maiores que o botão visual

A área clicável pode ser maior que o ícone ou label dentro dela. Use padding generosamente, não custa nada e previne cliques errados.

• Web: Não entregue links de texto de 12px sem padding. Envolva-os em um botão com espaço respirável.
• Mobile: Apple diz mínimo 44x44 pontos. Material Design diz 48x48 dp. Seu CTA deveria ser maior que isso.

2. Coloque elementos importantes perto do foco do usuário

Se um visitante acabou de preencher um formulário, o botão "Enviar" deveria estar logo sob o último campo. Não no canto superior direito. Não flutuando em outro lugar. Onde os olhos deles já estão.

3. Projete para a zona de polegar no mobile

A maioria das pessoas usa seus telefones com uma mão. O terço inferior da tela é a zona fácil. Os cantos superiores são estranhos.

• Zona fácil: Ações primárias. Seu CTA, o botão "Comprar".
• Zona estranha: Ações destrutivas ou raras. Logout, deletar.

4. Teste em dispositivos reais

Um botão que parece gigante em seu monitor de 27 polegadas pode ser invisível em um MacBook Air ou do tamanho de um polegar em um iPhone SE. Abra sua página no hardware real que seus visitantes usam.

Maneiras comuns que os construtores quebram isso

1. A caixa de acerto "invisível"

• O erro: Ícone bonito, mas a área clicável é exatamente o contorno do ícone. Visitantes sentem falta constantemente.
• O conserto: Envolva ícones em padding transparente então a área de acerto é quadrada e generosa.

2. Navegação aglomerada

• O erro: Links diminutos amontoados em rodapé ou cabeçalho sem espaço.
• O conserto: Adicione margem real entre elementos interativos. Erros são invisíveis para você, mas acontecem o tempo todo em dispositivos reais.

3. CTAs no canto errado

• O erro: Colocar a ação mais importante no canto superior esquerdo de uma tela mobile. O lugar mais difícil para um polegar destro.
• O conserto: Barras pegajosas na base ou botões flutuantes na zona fácil. Especialmente no mobile.

Como produtos reais usam isso

Instagram

A navegação principal do Instagram está na base da tela, perfeitamente alcançável pelo polegar. Cinco ícones, espaço generoso, sem erros de dedo gordo. Esse é o padrão que você deveria igualar.

Amazon

Amazon faz "Adicionar ao Carrinho" e "Comprar Agora" massivos. Alto contraste, largura total, impossível de perder. Eles testaram A/B isso por décadas. Eles sabem que o tamanho do botão move bilhões de dólares.

Princípios relacionados

Quando Lei de Fitts faz clique, esses são os próximos para aprender:

Lei de Hick

Como o número de escolhas na página desacelera ou acelera decisões de visitantes.

Recursos e leitura adicional

Diretrizes de Material Design

Encontre tamanhos confortáveis para áreas clicáveis no site de referência do Google.

Lei de Fitts: A Importância do Tamanho e Distância

Uma exploração profunda da história e aplicação da lei por Interaction Design Foundation.

Grupo NN: Lei de Fitts em UX

Estudos de caso e aplicações práticas dos líderes em UX baseada em evidências.

Perguntas frequentes