[canha]

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)





(Texto de minha autoria, retirado do meu blog através deste link)

Abraços,
Canha.

[Prog]

A lei de Fitts não se aplica a navegadores que não o Internet Explorer?

Pq esse exemplo aí do IBRAW não ta prestando no meu Firefox.

Ps.: ótimo artigo.

[canha]

Sério que não abre no seu FFx?
No meu roda tranquilo.

ps: valeu ;D

[Prog]

Posta aí o print screen.

ps.: To a um ponto de dizer que essa lei é coisa coisa de desocupado. *rs*

[canha]

Discordo firmemente sobre isso ser "coisa de desocupado".
Afinal de contas, compare os botões de formulários de sites de 1999 com os sites de hoje. Há uma clara utilização da Lei de Fitts, ainda mais nos sites "Web 2.0". Não é a toa que os botões importantes são feitos maiores hoje em dia. Por mais desordenada que a internet possa parecer ser, muita coisa que existe por aí têm embasamento científico.

Ah, abaixo o screenshot


abs

[Prog]

Seria exigir demais que o exemplo funcionasse em todos os navegadores e todos os sistemas.

Totalmente compreensível.

[Micox]

Acho que Independente da página de testes estar disponível em outros navegadores ou não, eu concordo plenamente com as afirmações da lei de fits.

O que é mais fácil e mais rápido pra qualquer usuário?
botoezinhos juntos
ou
botoes grandes e separados?

(não só no mundo da web)
concordation

[Prog]

Mas Micox...

Isso existe desde antes desse Fitts nascer.
A única coisa que ele fez foi aplicar uma fórmula matemática a teoria.
http://en.wikipedia....us_or_Minus_Two

E pq não aplicar a lei de Meyer invéz da lei de Fitts?!

[Micox]

Ah, foi malz, eu não sabia hehehe

[Elomar França]

ótimo artigo! ^^


e quanto ao menu do vista, o botão tem uma distânciazinha lateral de borda, mas ela também é clicável.

Mesmo assim, ainda se perde um pouco de tempo, porque o usuário não sabe disso de primeira.

[Yooo]

Adorei!!!!!!!!!!!! é disso que o webdesigner brasileiro precisa: conceito!

beijosssssssss