Lei de Fitts no web design

Want create site? Find Free WordPress Themes and plugins.

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)

Did you find apk for android? You can find new Free Android Games and apps.
Distribua

One comment

  • Oi Canha, Cara, gostei bastante de ler este teu texto. Adoro teorias que possam ser aplicadas ao Web Design (para que a gente saia do "achometro" e passe a fazer algo mais profissional/científico nesta área). Não conhecia a Lei de Fitts, mas com certeza vou me aprofundar mais. Se quiser trocar figurinhas sobre teorias aplicadas à web, estou á disposição. grande abraço, Marcos