Resumindo o artigo anterior: quanto maior a área de um objeto clicável em relação com a distância que precisa ser percorrida pelo ponteiro do mouse, mais fácil é de clicá-lo. E como aplica-se isto ao web design?

Formulários de contato

O formulário de contato é o exemplo mais clássico da aplicação da Lei de Fitts. Muitos sites colocam o botão de “Enviar” muito próximo do botão “Limpar” ou “Resetar”. Embora seja bom ter um botão para limpar todos os campos, muitas vezes pode se tornar um problema quando o formulário é muito extenso e a Lei de Fitts não é respeitada.

O que acontece? Você tá lá, preenchendo aquele formulário super longo e na hora de finalizar, em vez de clicar em “Enviar” você sem querer clica em “Limpar”. Pronto, foi-se tudo que você digitou. Não vou entrar na discussão sobre se o botão de limpar é realmente necessário, mas apenas vou mostrar o quão fácil é quando há uma diferenciação maior entre os dois botões.

Para evitar este problema, basta deixá-los bem à parte. Com isto, a distância percorrida pelo mouse será maior, dando tempo do usuário entender o que cada botão faz (pois terá tempo de lê-lo). Os botões em tamanhos diferentes também ajudam, pois você quer dar prioridade ao “Enviar” e, caso o usuário queira limpar o formulário, ele terá um pouco mais de dificuldade (já que precisa “mirar” o ponteiro do mouse).

O objetivo não é dificultar o envio do formulário para o usuário, mas sim facilitar para que ele não apague sem querer em vez de clicar em “Enviar”.

Links

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.

Em resumo, o ideal seria colocar no seu CSS:
a:link {
padding:15px 0px; //Ou seja, no topo e abaixo do link, há um espaço clicável de 15px e nas laterais não há
z-index:9; //Assim um link não altera o tamanho da linha toda
}


Um exemplo sem a aplicação da Lei de Fitts seria assim (coloque o mouse sobre o texto). Já um link com a aplicação da Lei ficaria com o seguinte aspecto quando você coloca o mouse sobre ele: coloque o mouse aqui em cima.

Notou como só bastou chegar perto do link para ele ficar clicável?

No entanto, algumas coisas devem ser notadas:

• Em textos com links demais, o usuário pode ficar confuso ao colocar o mouse sobre um link determinado. Portanto, nestes casos, procure usar uma diferenciação no estilo a:hover.
• Se você usa imagens ou cores como fundo de seus links, isto pode lhe trazer alguns problemas (veja o exemplo acima: o fundo acabou cobrindo parte das outras linhas).
• Em alguns navegadores, a cópia de um texto pode trazer problemas.
• Cuidado ao usar o padding lateral, pois o link pode acabar ficando afastado das palavras que antecedem e precedem-no.

Usando as laterais da tela

Uma das coisas que eu admiro no Mac é a possibilidade de programar determinadas funções para os quatro cantos da tela. Se eu jogo meu mouse pro canto superior direito, o Mac OS X mostra todas as janelas que tenho aberto. Quando jogo o mouse pro canto inferior direito, sou levado a outras telas de desktop.

Acesso rápido aos diferentes desktops graças a Fitts

Isso facilita pois são funções que qualquer power-user usa constantemente. A Lei de Fitts é aplicada, pois não há a necessidade de mirar em um determinado botão para que essa tarefa seja executada, diminuindo o tempo que se leva e aumentando a produtividade.

No Windows, por exemplo, se você jogar seu mouse pro canto inferior esquerdo e clicar, o menu Iniciar será ativado. Você nem precisa mirar naquele canto; basta jogar o mouse pra lá e pronto. Como é uma funcionalidade muito usada, o acesso ao menu Iniciar deveria ser rápido e sem a necessidade de parar para analisar se você está clicando no local certo.

A área das telas é limitada, o que oferece maior precisão para os elementos que se encontram na borda. Ou seja, quanto menos precisão for necessária para conseguir uma determinada funcionalidade (o click do mouse), mais rápido será de executar a tarefa (lembra da fórmula no artigo anterior?).

A Lei de Fitts pode parecer algo óbvio para muitos, mas para os que achavam que era bobeira “facilitar a vida do usuário”, agora vocês tem prova técnica para colaborarem.

Outras fontes de informação

Tem muitos artigos sobre a Lei de Fitts na web. 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.

Eis alguns sites sobre a lei de Fitts que podem ser interessantes.

• Lei de Fitts no Wikipedia (BR)
• Lei de Fitts no Mac (BR)
• Usability First (ING)
• MindHacks (ING)
• Teste da aplicação da lei de Fitts (ING)
• Aplicação da Lei de Fitts em links

Espero que estes artigos tenham sido úteis a você.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Entendendo a Lei de Fitts
• Como melhorar a usabilidade no seu layout
• Não pense no design baseado em suas preferências

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 é usada 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 Fitts e por que ele está sendo usado muito hoje em dia na web?

O que diz a Lei de Fitts?

Em termos simples e aplicados ao web design, a Lei de Fitts diz que quanto maior a área de um objeto clicável 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 (ou qualquer elemento clicável) tiver um tamanho maior e uma distância maior de qualquer outro elemento da tela, a probabilidade de clicar em um elemento errado é menor. Embora isto pareça ser óbvio, muita gente não entende isto.

Distância maior = menos chance de erro

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.

Qual é a equação da Lei de Fitts?

Matemáticamente, a equação é a seguinte:

Equação da Lei de Fitts

Onde:

• T = Tempo de movimento. Ou seja, o tempo que decorre desde o início até o final do evento.
• a, b = Variáveis. Neste 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 experimentalmente 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.

Mas o que significa tudo isto?

“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. O tempo que leva ao usuário clicar em algo é medido através do tamanho do objeto a ser clicado e da distância percorrida (no caso do web design, com o mouse).

Se você quiser que o usuário dê mais importância a um determinado objeto, você deve levar em conta que uma área maior e distância menor (do ponteiro do mouse) equivale a um tempo menor para o click. Ou seja, há um senso de facilidade maior devido ao pouco tempo consumido.

Já se você quiser dificultar uma ação (click indesejável, por exemplo), vale o contrário: área menor e distância maior (do ponteiro do mouse). Isso faz com que o tempo gasto para se clicar naquele objeto seja maior, dando mais tempo ao usuário processar se é realmente necessário aquela ação (a de limpar todos os campos de um formulário, por exemplo) e evitando que erros sejam cometidos.

Aí vai algumas outras conclusões as quais você pode chegar aplicando a Lei de Fitts:

• Botões e outros controles de interface com um tamanho razoável são facilmente clicáveis
• Botões e outros controles de interface com um tamanho razoável têm menos chance de serem clicados “sem querer”.
• As bordas de tela do computador são os lugares ideais para se ter botões e outros controles importantes (mais sobre isto no próximo artigo).
• Menus abertos são 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

No artigo de amanhã, vou exemplificar como que a Lei de Fitts pode ser aplicada ao web design. Fique ligado!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Aplicando a Lei de Fitts
• Como melhorar a usabilidade no seu layout
• Não pense no design baseado em suas preferências