Pega o celular com uma mão só e tenta comprar alguma coisa no seu próprio site. Se o polegar precisou fazer ginástica para chegar ao botão, você acabou de sentir na mão a Lei de Fitts. E o seu cliente sente isso todos os dias.
Mesmo botão, dois endereços. No primeiro celular, a ação principal virou um "OK" minúsculo no canto de cima, a região mais difícil de alcançar com uma mão. No segundo, ela ocupa a largura da tela e fica onde o polegar já descansa.
Metade das pessoas usa o celular com uma mão só
Em 2013, o designer Steven Hoober passou dois meses observando gente usando o celular na rua, em aeroportos, em ônibus e em cafés. Foram 1.333 observações. Entre quem estava tocando na tela, a divisão ficou assim:
Para metade dos seus visitantes, o mouse é o polegar. E o polegar não alcança a tela inteira com o mesmo conforto: a parte de baixo é natural, o meio pede esforço e o canto de cima, do lado oposto ao da mão, é território difícil. De 2013 para cá os celulares ficaram maiores, o que deixou o topo da tela ainda mais longe.
Mapa didático das zonas do polegar descritas por Hoober, para quem segura o celular com a mão direita.
Um psicólogo da Força Aérea e duas placas de metal
Paul Fitts era psicólogo e passou a Segunda Guerra e os anos seguintes estudando acidentes de avião atribuídos a "erro do piloto". Em 1947, ele e Richard Jones analisaram 460 desses casos e chegaram a uma conclusão incômoda para a época: muitos erros eram culpa do painel. Comandos parecidos ficavam lado a lado, e o piloto puxava o trem de pouso querendo puxar o flap.
Em 1954, já na Universidade Estadual de Ohio, Fitts publicou o experimento que virou lei. Os participantes tocavam alternadamente, com uma caneta de metal, duas placas separadas por uma distância. Ele variou a distância e a largura das placas e mediu o tempo. O resultado foi uma relação matemática estável:
`T = a + b · log₂(2D / L)`
T é o tempo para atingir o alvo, D é a distância até ele, L é a largura do alvo, e a e b são constantes que dependem da pessoa e do dispositivo. Em 1992, o pesquisador canadense Scott MacKenzie propôs a versão que a maioria dos estudos de interface usa hoje, `log₂(D/L + 1)`, mais estável para alvos grandes e próximos.
Traduzindo para o seu site: quanto menor e mais longe o alvo, mais tempo e mais erro. E a relação é logarítmica. Dobrar o tamanho de um botão minúsculo ajuda muito; dobrar o tamanho de um botão que já é grande ajuda pouco.
Por que alvo pequeno custa caro
Todo movimento de apontar tem duas fases. Na primeira, rápida e quase automática, a mão dispara na direção do alvo. Na segunda, lenta e consciente, ela faz pequenas correções até acertar. Quanto menor o alvo, maior a parte do tempo gasta nessa segunda fase, que exige atenção.
A correção é onde o clique se perde: a mão chega rápido perto do alvo e gasta o resto do tempo ajustando.
Com alvo grande, a fase rápida já cai dentro dele. Com alvo pequeno, o usuário gasta tempo ajustando, e às vezes erra e toca no vizinho. Para quem vende on-line, isso vira três problemas práticos:
- Tamanho é prioridade. A ação que gera receita merece o maior alvo da tela. Botão de "Comprar" do mesmo tamanho do link "Política de trocas" é empate técnico na hora errada.
- Distância é atrito. O campo seguinte do formulário e o botão de avançar devem ficar perto de onde o dedo já está.
- Erro tem custo duplo. No celular, o dedo que erra cai no link do lado, abre outra página, e o cliente precisa voltar. Muitos não voltam.
Qual o tamanho mínimo de um botão
Pesquisa e diretrizes das grandes plataformas chegam a números parecidos. Use como piso, nunca como meta:
| Referência | Tamanho mínimo |
|---|---|
| Parhi, Karlson e Bederson (2006), toque com o polegar | 9,2 mm |
| Apple, diretrizes do iOS | 44 pt |
| Google, Material Design | 48 dp |
| WCAG 2.2, nível AA de acessibilidade | 24 px |
O alvo infinito que fica na beira da tela
Existe um tipo de alvo que nunca é pequeno: o que encosta na borda. No computador, o cursor para na borda; o usuário pode jogar o mouse para cima com toda a força que ele não passa do limite. Na prática, o alvo tem altura infinita. É por isso que a barra de menus do Mac fica no topo da tela desde 1984, e não dentro de cada janela, e que o botão Iniciar do Windows mora num canto.
A borda trabalha por você. À esquerda, o cursor bate no limite da tela e para em cima do menu. À direita, ele passa do ponto, volta e ajusta.
No celular o dedo não para na borda, mas vale o equivalente: a parte de baixo da tela, onde o polegar descansa.
Quem acertou o alvo e quem fez o usuário mirar
Menu da Amazon. Em menus com submenu, o cursor que vai na diagonal costuma passar por cima de outro item e trocar o conteúdo no caminho. A Amazon calcula um triângulo entre o cursor e o submenu: enquanto o movimento fica dentro dele, nada troca. Ben Kamens destrinchou a técnica em 2013. O caminho até o alvo também conta.
A solução da Amazon: o cursor atravessa "Casa" e "Moda" a caminho do submenu, mas, como está dentro do triângulo, "Eletrônicos" continua aberto.
Safari no iPhone (iOS 15, 2021). A Apple levou a barra de endereço para baixo, perto do polegar. Fazia sentido pela Lei de Fitts, mas quebrou anos de hábito, e a versão final saiu com a opção de devolver a barra ao topo. Quando a mudança ergonômica briga com um costume forte (a Lei de Jakob), ofereça a escolha.
Alcance Fácil (iOS 8, 2014). Quando o iPhone passou para 4,7 e 5,5 polegadas, o topo saiu do alcance do polegar. Dois toques leves no botão de início e a tela inteira desce até a metade. Quando não dá para mover o alvo, traga o alvo até o dedo.
Pop-ups no celular (Google, 2017). O pop-up gigante com um "X" minúsculo no canto é a Lei de Fitts usada contra o usuário. Desde janeiro de 2017, o Google rebaixa páginas móveis com intersticiais que cobrem o conteúdo. O "X" pequeno agora custa SEO, além da paciência do cliente.
A lei ao contrário: quando o clique deve ser difícil
A Lei de Fitts também protege o usuário. Ações destrutivas e irreversíveis merecem ficar menores, mais longe e separadas das ações comuns: "Excluir conta" longe de "Salvar alterações", "Cancelar pedido" sem o mesmo peso de "Acompanhar pedido".
Dificultar o que destrói é bom design. Dificultar o cancelamento de uma assinatura ou esconder o "não, obrigado" é padrão obscuro, e o cliente percebe. No Brasil, os órgãos de defesa do consumidor já tratam o cancelamento difícil como prática abusiva.
Onde a Lei de Fitts já trabalha no Brasil
Abra o app de delivery, de banco ou de marketplace que você mais usa e repare: botão fixo no rodapé com o total da sacola, ocupando a largura da tela; barra de navegação embaixo nos apps de banco; "Copiar código Pix" como um botão largo, em vez de pedir que o cliente selecione mais de cem caracteres com o dedo; teclado numérico automático em CPF, CEP e celular; WhatsApp flutuante no canto inferior direito, na zona natural do polegar de quem é destro.
Se o seu site ainda pede que o cliente role até o fim da página para achar o botão de compra, ele está competindo com apps que entregam esse botão embaixo do dedo.
Checklist: seu site respeita o polegar?
Pegue o celular, segure com uma mão só e navegue pelo seu site.
Tamanho
- A ação principal é o maior botão da tela
- Áreas de toque com pelo menos 44 a 48 px
- Ícones pequenos têm área clicável maior que o desenho
- Links em lista têm espaço entre si para não acertar o vizinho
- No celular, o botão de compra fica fixo na parte de baixo
- O botão de avançar fica logo abaixo do último campo
- Nada importante depende do canto de cima da tela
- Ações destrutivas ficam longe das ações comuns
- Pop-ups no celular têm um "X" grande e fácil de achar
- Campos numéricos abrem o teclado numérico
- Código Pix tem botão de copiar
Os erros que mais vemos
Site desenhado e aprovado no monitor de 27 polegadas, quando a maior parte do tráfego chega pelo celular. Botão de "Comprar" que some na rolagem e só reaparece no fim de uma página longa. Ícone de 16 pixels como único alvo para adicionar ao carrinho. Botões de "Voltar" e "Pagar" lado a lado e do mesmo tamanho, no ponto mais sensível do funil.
A Lei de Fitts é a mais física das leis de UX. Ela depende do tamanho do dedo, da distância da mão e de 70 anos de medição, e não do gosto de ninguém. Discutir com ela é discutir com régua e cronômetro. Se quiser saber onde o polegar do seu cliente sofre, a Oneck audita o seu site no celular, com uma mão, do jeito que ele usa.
Fontes
- Paul Fitts, "The information capacity of the human motor system in controlling the amplitude of movement", Journal of Experimental Psychology (1954)
- "Fitts and Jones' Analysis of Pilot Error: 40 Years Later", Wright State University
- Steven Hoober, "How Do Users Really Hold Mobile Devices?", UXmatters (2013)
- Parhi, Karlson e Bederson, "Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices", MobileHCI (2006)
- Scott MacKenzie, "Fitts' law as a research and design tool in human-computer interaction", Human-Computer Interaction (1992)
- Macworld, sobre o recuo da Apple nas mudanças do Safari (2021)
- Search Engine Watch, sobre a penalidade do Google a intersticiais intrusivos no celular
