Na ergonomia, a lei de Fitts (“Fitts’ law“) é um modelo de movimento humano que prevê o tempo necessário para rapidamente mover a uma área designada com base na distância e tamanho desta área. Publicado por Paul Fitts em 1954, a lei de Fitts é usado como modelo para o ato de apontar no mundo real (por exemplo, com uma mão ou dedo) e no mundo virtual (em computadores, como por exemplo com um mouse). Afinal de contas, o que diz a lei de Fitt e por que ele está sendo usado muito hoje em dia na web?
Em termos simples e aplicados ao web design, a lei de Fitts diz que quanto maior a área de um botão (por exemplo) em relação com a distância que precisa ser percorrida pelo ponteiro do mouse, mais fácil é de clicá-lo. Ou seja, se um botão tiver uma largura maior e uma distância menor de qualquer outro elemento da tela, a probabilidade de clicar em um elemento errado é menor. Embora isto pareça estar cercado pela obviosidade, muita gente não entende isto. A lei de Fitts é uma equação que pode predizer quanto tempo demora para que você aponte seu mouse (ou dedo, em casos do mundo real) baseado no tamanho e distância do objeto.
Matemáticamente, a equação é como segue:
MT = a + b log2(2A/W)
Onde:
MT = movement time ou tempo de movimento. Ou seja, o tempo que demora para completar o evento.
a, b = parâmetros que podem variar de acordo com a situação. No caso, a representa o tempo de início/término da ação e b representa a velocidade do mouse ou mão. Essas constantes podem ser determinadas expirementalmente colocando uma linha reta como exemplo.
A = distância do movimento do início ao centro do alvo (ou botão).
W = largura do alvo/botão ao longo do eixo do movimento.
Outra forma de fazer esta equação é:
T = k log2(D/S + 0.5)
T = tempo para mover a mão ou ponteiro ao alvo.
k = aproximadamente 100 milisegundos.
D = distância entre a mão/ponteiro e o alvo.
S = tamanho do alvo.
“Ok Canha, agora você poderia explicar isto em português? Qual a aplicação dele no design de interfaces ou web design?”. Certo, querido leitor. Aí vai algumas das conclusões ás quais você pode chegar de acordo com a lei de Fitts:
– Botões e outros controles de interface com um tamanho razoável são fácilmente clicáveis pois quanto maior a área, menor é o espaço percorrido pelo mouse até chegar lá. Pense em um botão pequeno: o usuário precisará se concentrar mais para conseguir colocar o ponteiro sobre ele. Lógicamente, o tempo gasto é medido em milésimos de segundo porém não deixa de ser importante.
– Botões e outros controls de interface com um tamanho razoável têm menos chance de serem clicados “sem querer”. Mesmo se os botões estiverem encostados uns nos outros, se tiverem um tamanho adequado o usuário não irá correr o risco de clicar no botão errado.
– As bordas de tela do computador são os lugares ideais para se ter botões e outros controles importantes (como o botão “Iniciar” do Windows XP* e o menu do Mac OS X) pois o ponteiro do mouse se mantém na borda independente de o quanto o mouse for movido. Logo, essa área é considerada como tendo uma largura infinita. Ou seja, você move o mouse o quanto quiser mas o ponteiro sempre ficará naquela borda fazendo com que seja impossível não acertar o botão.
– Menus abertos são geralmente acessados de forma mais rápida que menus pull-down, já que o usuário não precisa mover o mouse mais do que o necessário.
– Menus em forma de torta são mais rápidos de acessar e têm uma razão de erro menor que itens em menus lineares por duas razões: porque itens de menu em forma de torta são todos iguais (têm a mesa distância do centro do menu); e por que suas bordas aumentam com o tamanho da torta, aumentando a área clicável.
* – Pelo que entendi, no Windows Vista já existe um problema. Aparentemente, o botão “Iniciar” dele é um círculo que possue distância lateral da borda. Ou seja, se você mover o mouse até a borda esquerda da tela perto do canto inferior, o botão não é clicável. Alguém confirma isto pra mim?
Se você notar bem, hoje em dia nos sites do estilo Web 2.0, os botões são maiores, formulários são maiores e links tendem a ter uma área de click maior (em CSS, você básicamente coloca um z-index para ter certeza que o link cobrirá o texto, juntamente com um padding maior). Isso evita com que o usuário clique nos botões errados, além de diminuir seu tempo “mirando” o ponteiro no botão certo. Um exemplo da utilização da lei de Fitts na web pode ser encontrado neste link, que utiliza CSS para demonstrar como um botão com área maior é melhor clicável.
O IBRAU (Instituto Brasileiro de Amigabilidade e Usabilidade) têm um exemplo perfeito da lei de Fitts em prática, que mede o tempo que você gasta clicando em pequenos botões e depois compara com o tempo gasto clicando em grandes botões. Com exemplos, fica mais fácil de entender.
Eis alguns sites sobre a lei de Fitts que podem ser interessantes.
– Usability First (ING)
– MindHacks (ING)
– Teste da aplicação da lei de Fitts (ING)