O que é Lei de Fitts?
A Lei de Fitts, também chamada de Fitts’s Law, é um princípio de usabilidade que relaciona o tempo de um movimento ao tamanho do alvo e à distância até ele. Alvos maiores e mais próximos são atingidos mais rápido; alvos pequenos e distantes exigem mais tempo e geram mais erros.
O princípio veio de estudos de movimento humano e se aplica bem a interfaces. No desktop, o alvo é o botão e o movimento é o do cursor. No celular, o alvo é a área tocável e o movimento é o do polegar, que parte de uma posição de descanso na base da tela.
A Lei de Fitts tem uma consequência prática direta. As ações mais importantes de uma página merecem os maiores alvos, posicionados perto de onde a atenção e o dedo já estão. As ações destrutivas ou de menor prioridade merecem alvos menores e mais afastados, o que reduz o clique acidental.
Como funciona na prática?
A aplicação começa listando as ações principais de cada tela: adicionar ao carrinho, avançar no checkout, enviar formulário. Em cada uma, você avalia dois fatores: o tamanho da área clicável e o caminho que o visitante percorre até ela.
O tamanho vale mais do que parece. A área tocável inclui o preenchimento ao redor do texto, e não só o texto em si. Um botão com rótulo pequeno pode ter alvo grande se o padding for generoso. Em rótulos de formulário, associar o texto ao campo aumenta o alvo sem mudar o visual.
A distância entra na composição da página. No celular, a faixa inferior da tela é a mais fácil de alcançar com o polegar, o que explica barras de ação fixas em lojas virtuais. No desktop, as bordas e os cantos funcionam como alvos praticamente infinitos, porque o cursor para neles.
Cada ajuste vira hipótese e passa por teste A/B antes de virar padrão do design system.
Lei de Fitts vs Lei de Hick: qual a diferença?
| Aspecto | Lei de Fitts | Lei de Hick |
|---|---|---|
| O que descreve | Tempo para alcançar um alvo | Tempo para escolher entre opções |
| Variável central | Tamanho e distância | Quantidade de opções |
| Aplicação típica | Botões e áreas de toque | Menus e listas de escolha |
Veredito: a Lei de Fitts atua depois da decisão, no momento em que a pessoa move o cursor ou o dedo até o elemento escolhido.
Exemplos de uso
- Uma loja virtual aumenta o botão “Comprar” no celular e o fixa na base da tela, na zona alcançável pelo polegar.
- Um formulário passa a aceitar clique no rótulo do campo, e não só no quadradinho da caixa de seleção, ampliando o alvo sem mudar o layout.
- Um painel afasta o botão “Excluir conta” do botão “Salvar” e reduz seu tamanho, diminuindo o risco de clique acidental.
Erros comuns
- Criar botões com área de toque pequena demais no celular, onde o dedo cobre mais espaço que um cursor.
- Colocar ações opostas, como confirmar e cancelar, coladas uma na outra e com o mesmo tamanho.
- Usar ícones sozinhos como alvo, sem preenchimento ao redor nem rótulo.
- Ignorar a zona de alcance do polegar e concentrar as ações principais no topo da tela do celular.
Perguntas frequentes sobre Lei de Fitts
Qual o tamanho mínimo de um botão no celular?
As diretrizes de plataformas e de acessibilidade web publicam recomendações de área mínima de toque, e vale consultar a documentação oficial vigente em vez de decorar um número. A regra prática é simples: o alvo precisa acomodar o dedo com folga, incluindo o espaçamento entre elementos vizinhos.
A Lei de Fitts só vale para botões?
Não. O princípio vale para qualquer elemento que a pessoa precise atingir: links, abas, campos de formulário, itens de menu, controles de carrossel e ícones de fechar. Sempre que existe um movimento até um alvo, tamanho e distância influenciam o tempo gasto e a taxa de erro.
Botão maior sempre converte mais?
Não. O tamanho ajuda a acertar o alvo, mas a decisão de clicar depende da clareza da oferta e da confiança do visitante. Um botão gigante em uma página confusa continua sem cliques. A Lei de Fitts resolve o movimento; o conteúdo ao redor resolve a motivação.