Ensinei o que é a Lei de Fitts no artigo passado, mas como que se aplica ela no desenvolvimento de sites? Este artigo vou dar exemplos de como que pode ser usado para melhorar a experiência do usuário.

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).

Aplicando a lei de Fitts em formulários

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.

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

Assine o feed RSS!

Artigos relacionados

Fique por dentro de muito mais!

Assine nosso feed RSS ou seguia o Design Blog no Twitter para ficar sempre ligado nas novidades no mundo do design!