stamatios
← Voltar ao feed
Botão gigante ocupa canto da tela ao lado de minúsculo botão de cancelar, Lei de Fitts guiando cliques e dark patterns
Produto & Design

Lei de Fitts explica por que botões grandes e nas bordas vencem

resumo de ~3 min

{ "resumo": "## A origem: cockpits de avião, não sites\n\nA Lei de Fitts nasceu em 1954, quando o psicólogo Paul Fitts estudava o sistema motor humano para projetar controles de cockpit de aeronaves. Ele demonstrou que o tempo para mover até um alvo depende da distância até ele e, inversamente, do seu tamanho: quanto maior e mais próximo, mais rápido e com menos erros, porque movimentos rápidos em direção a alvos pequenos geram um trade-off entre velocidade e precisão. É um dos achados mais reprodutíveis da interação humano-computador e vale para cursor de mouse, toque na tela ou mão alcançando um dial físico.\n\n## A fórmula e o custo de interação\n\nA expressão clássica é MT = a + b · log₂(2D / W), em que MT é o tempo de movimento, D a distância ao alvo, W sua largura e a e b constantes do dispositivo e da pessoa. A parte prática é o formato da relação: o ganho de aumentar um alvo é acento no início e depois se achata - dobrar um alvo minúsculo ajuda muito; dobrar um já grande quase não muda nada. Isso define o chamado custo de interação: alvos pequenos, distantes e que exigem precisão o elevam.\n\n## Prioridade por geometria\n\nA leitura ingênua - "faça botões maiores" - é incompleta, pois não se pode tornar tudo grande. A lei é uma ferramenta para expressar prioridade pela geometria: a ação principal deve ser o maior e mais fácil alvo da tela, e as ações secundárias devem ficar menores e mais discretas. Dois fatores atuam:\n\n- Tamanho: alvos maiores reduzem erros até um patamar. A Nielsen Norman Group nota que ícone com rótulo de texto é um alvo maior que o ícone sozinho, e toda a área visível de um link ou card deve ser clicável, não só o texto.\n- Distância: manter alvos perto de onde a atenção e o ponteiro já estão - o botão "próximo" perto do campo recém-preenchido, barras de ferramentas perto do conteúdo que modificam.\n\n## Prime pixel e magic pixels\n\nO "prime pixel" é onde o cursor já está no início da interação - distância zero, o ponto mais barato de alcançar; controles de alto valor devem ficar perto dele. As "magic pixels" são bordas e cantos da tela: no desktop, elas se comportam como infinitamente grandes, pois o cursor não pode ultrapassar o limite físico. É por isso que a barra de menus fixada no topo do Mac é rápida e que barras de ferramentas que encostam na borda vencem as que têm margem não clicável. O contraponto: os cantos são também os pontos mais distantes do prime pixel, então reservam-se a atalhos de usuários avançados ou itens que podem passar despercebidos.\n\n## Mobile: a zona do polegar\n\nNo toque, a lógica das bordas infinitas enfraquece: o polegar não tem parada rígida, e molduras, notches e formas de segurar o celular atrapalham. O que substitui esse raciocínio é a zona do polegar - o arco alcançável confortavelmente com uma mão, que favorece a porção inferior e central da tela. Os mínimos de plataforma decoram dessa lei: cerca de 44×44 pontos no iOS, aproximadamente 48dp no Android, com o WCAG tratando 24px como piso e 44px como alvo confortável. Alvos grandes mas amontoados reintroduzem erros: "Salvar" e "Cancelar" devem ser comparáveis de relance, mas espaçados o bastante para ninguém perder o trabalho ao tocar o botão errado.\n\n## A lei apontada ao contrário: dark patterns\n\nComo a lei previably previsão do que será clicado, ela pode ser usada contra o usuário. Exemplos: uma tela de compra que dá um bloco enorme e chamativo a "Subscribe & Save" e esconde a compra única em um rádio minúsculo; ou fluxos de cancelamento em que o link de descadastro em e-mails de renovação automática aparece em texto minúsculo e de baixo contraste. A mecânica é idêntica; muda a intenção. O teste ético é simples: você está facilitando a ação que o usuário veio fazer ou a que você lucra, em prejuízo dele? Colocar anúncio ou upsell surpresa no prime pixel é a versão cotidiana desse uso indevido.\n\n## Checklist e limites\n\nO texto propõe uma sequência de revisão: nomear a ação principal (se não der, há um problema de prioridade), torná-la o maior alvo mais fácil de alcançar, rebaixar as secundárias, aproveitar o prime pixel, usar bordas e cantos deliberadamente, respeitar a zona do polegar e os tamanhos mínimos no mobile, e verificar honestamente de quem é a tarefa que se está acelerando. A lei não corrige motivação, texto confuso ou arquitetura de informação ruim; é mais como a gravidade - uma força constante agindo sobre toda interação, esteja você atento ou não.", "hook": "Em 1954, o psicólogo Paul Fitts descobriu, estudando controles de cockpit de aviões, que o tempo para atingir um alvo depende da distância e do tamanho dele. Setenta anos depois, essa mesma lei explica por que a barra de menus do Mac é rápida, por que "Salvar" e "Cancelar" precisam de espaço entre si e como telas de assinatura empurram cliques que você não pretendia dar.", "entities": ["Paul Fitts", "Nielsen Norman Group", "Apple", "iOS", "Android", "WCAG"], "themes": ["design-e-ux"], "story_key": "lei-de-fitts-ux", "reasoning": { "story_key": "O fato central do artigo é a aplicação da Lei de Fitts ao design de interfaces, do conceito original aos dark patterns.", "themes": {"design-e-ux": "Artigo sobre craft de design de interface: alvos de toque, hierarquia, usabilidade e acessibilidade."}, "entities": { "Paul Fitts": "Criador da lei, autor do estudo de 1954.", "Nielsen Norman Group": "Fonte citada do corolário sobre ícones com rótulos.", "Apple": "Exemplo da barra de menus fixada no topo como uso da lei.", "iOS": "Cita mínimo de alvo de 44×44 pontos.", "Android": "Cita mínimo de aproximadamente 48dp.", "WCAG": "Guia de acessibilidade citado com piso de 24px e alvo de 44px." }, "excluded": {} } }