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

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
• Re-desenhando um site (dica)
• Designers não são web designers
• Erros comuns de usabilidade
• Erros em web design que devem ser evitados

A Lei de Fitts é uma daquelas teorias que ninguém sabia que existia, mas mesmo assim sempre praticou. Afinal de contas, o que uma regra destas – que surgiu em 1954 – tem a ver com o web design de hoje?

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 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 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
• Re-desenhando um site (dica)
• Designers não são web designers
• Erros comuns de usabilidade
• Erros em web design que devem ser evitados

O ano começou e a evangelização continua. Usabilidade é a palavra de ordem, e eis 7 erros comuns que devem ser evitados.

Navegação inconsistente

A navegação de um site deve fazer duas coisas: mostrar uma lista de locais que você pode ir e mostrar sua localização atual. Ele deve manter-se consistente no site todo pois ele é uma âncora – deve ser familiar para que as pessoas entendam o que é e elas devem sentir que possuem controle de onde estão para continuar navegando. Alterando a navegação de página para página vai apenas criar uma confusão mental, então mantenha-o simples e consistente.

Links não identificados por cor e/ou sublinhado

Links são os elementos-chave em um site – eles são a fundação da web. Faça-os fáceis de serem identificados. A convenção é que os links sejam azuis e sublinhados. No entanto, você não precisa seguir essa convenção se não convir ao seu estilo do seu site, mas você deve destacá-los de uma maneira ou outra. Eu ficaria longe de links em preto, a não ser que sejam localizados no contexto certo (por exemplo, uma barra de navegação).

Registro necessário para visualizar conteúdo

Já esteve em uma situação onde você esteve procurando por algo no Google apenas para encontrar um site que pede um registro para visualizar ele? Escondendo conteúdo valioso do usuário é uma barreira séria e frustrante para seu visitante, que é propenso a não voltar mais.

Formulários de registro longos

E não são apenas os formulários longos que são ruins – qualquer coisa que seja longa é ruim. Formulários de registro são uma barreira séria: você está forçando ao usuário a trabalhar. Pessoas odeiam preencher formulários, então remova tudo aquilo que não é absolutamente necessário. Mesmo se o formulário parecer longo, as pessoas perdem o tesão. Lembre aos usuários que eles podem preencher campos opcionais mais tarde.

Paginação excessiva

Lembra daquele artigo interessante que começou bem, e no final dele você notou que ele possue outras páginas? É frustrante pois você agora precisa abrir mais páginas, esperá-las carregar para terminar de ler o artigo. Isso pode até aumentar seus pageviews e fazer com que você possa ganhar mais com publicidade, mas vale a pena? Além de ser irritante para seus usuários, é também ruim para o SEO pois você estaria separando conteúdo relevante em páginas. Isso faz com que o robô dos sistemas de busca fiquem confusos a ponto de não entender sobre o que é cada página.

Texto longo demais

Aí vai aquele “longo demais” de novo. Seus visitantes não vão ler a página toda pois geralmente eles estão procurando por algo específico ou algo de seu interesse. Eles fazem isto escaneando a página inteira procurando por algo no qual focar. Use texto negritado, títulos grandes e imagens para providenciar uma estrutura escaneável para seu conteúdo.

Sem informação de contato

Por último mas não menos importante, se seus visitantes tem um problema com seu serviço (ou talvez só queiram te parabenizar por algo), deve haver uma maneira de entrar em contato. Você também não precisa postar seu e-mail, telefone residencial e celular no site, mas deve haver pelo menos um formulário de contato. Existem sites que nem isto possuem.

Existem outros erros de usabilidade importantes? Deixe seu comentário abaixo!

Fonte: Usability Post (traduzido e adaptado por Canha)

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
• Entendendo a Lei de Fitts
• Re-desenhando um site (dica)
• Não há uma dobra

Uma dica básica para quem está re-desenhando seu site: liste os problemas. Afinal de contas, um site só deveria ser refeito caso algo não esteja certo. E como identificar os problemas?

Identificando os problemas

Isso é extremamente importante. Se você está re-desenhando seu site é por que ele tem problemas. Quais? Qual o impacto desses problemas? Vou tomar como exemplo um site que estou re-desenhando:

Vamos fazer uma lista dos problemas que esse site apresenta:

• Pouco contraste entre texto e fundo
• Não há nenhuma descrição do que se trata o site
• Cadê o link para a página inicial?
• Cadê a busca?
• A imagem principal é o que? Qual o objetivo dela?
• O que é aquele “Hot news headlines”?

Há bem mais problemas (especialmente internamente), mas vamos nos focar nesses.

O ideal é que você tenha mais pessoas opinando sobre os problemas que o site pode apresentar. Faça um teste simples de usabilidade. Por exemplo, peça para alguém que você conhece que não saiba mexer muito com internet tentar navegar no site. Quais os problemas que ela encontra?

Com a lista de problemas em mãos, dá para começar a pensar em…

Possíveis soluções

Alguns problemas tem soluções fáceis e óbvias. Outras nem tanto. E é aí que vamos gerar outra lista oferecendo possíveis soluções aos problemas na mesma ordem (nesse exemplo, uso a / para oferecer mais de uma solução):

• Deixar texto com cor preta / Escurecer o fundo
• Colocar uma rápida descrição do que se trata o site no topo / Evidenciar o link “Sobre”
• Colocar o link “Home” no menu
• Criar uma caixa de busca rotulada “Busca” em um local específico do site
• Dar menos ênfase àquela imagem (que é o portfólio) / Deixar apenas uma chamada ao portfólio
• Remover o “Hot News Headlines” (que mostra as últimas do blog interno)

Faça tudo isso antes de começar a trabalhar no Photoshop ou desenhar rascunhos; com os problemas apontados e soluções oferecidas, o desenvolvimento do novo rosto do seu site vai ficar muito mais fácil.

Em tempo

Ando bem ocupado nessas últimas semanas com blog ficando fora do ar por problemas técnicos, novo emprego e vários serviços. Além disto, estou no processo de escrever um livro e atualizar o visual do Digital Paper. Eis um pequeno preview de como vai ficar:

Em breve, novidades e mais atualizações ;)

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

• Desenvolvendo sites para mobile
• Erros em web design que devem ser evitados
• Criando wireframes online
• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple

Muitas pessoas – designers inclusive – procuram sempre colocar o máximo de informação no menor espaço possível. E isso fica pior na web, onde a idéia de “dobra de página” é utilizada. Vou explicar por que não esta dobra não deveria existir.

Encontrei um artigo intitulado “There is no fold“, que utiliza dados coletados pelo blog ClickTale em seu artigo “Unfolding the fold” (“Desdobrando a dobra”).

Mas antes de passar para os dados importantes, algumas explicações: web designers e profisionais de usabilidade vem debatendo o tópico sobre rolamento de páginas desde 1994. Nos primórdios da web, a maioria dos usuários não estavam familiarizados com o conceito de rolamento e não era algo natural a ser feito. Como resultado, web designers desenvolviam sites que mantinham todas as informações importantes “acima da dobra” ou pior: deixando o site inteiro na área inicial da tela. Esta prática de “compactação” (“squeezing“) continua até nos dias de hoje.

Hoje em dia, o rolamento de páginas se tornou uma prática natural quando se navega na web. Rolamento é também associado ao design estilo “web 2.0″ por causa do texto grande e limpo. E conteúdo espaçado e limpo implica em sites mais longos.

O post do ClickTale tem vários gráficos resultados de testes feitos para conferir quem rola a barra do site, e os resultados são previsíveis: 91% das páginas pesquisadas possuem barra de rolamento, 76% das pessoas rolaram a barra vertical até algum certo ponto, e 22% rolaram até o final da página.

Com isso, podemos tirar algumas conclusões:

• Não tente compactar seu site. Há pouco benefício em compactar suas páginas pois a grande maioria dos visitantes vai rolar a barra abaixo da “dobra da página” para conferir o site todo.
• Já que os usuários vão rolar a barra até o fim do seu site, facilite a vida deles e divida seu site em seções para facilitar o escaneamento de informações.
• Minimize a quantidade de texto escrito e maximize a quantidade de imagens; usuários geralmente não lêem textos – eles escaneiam sites.
• Dê algum encorajamento a seus usuários usando um layout dividido com informações semelhantes juntas.

Facilite a vida do usuário O importante é facilitar o usuário a encontrar as informações que ele precisa – informações imperativas para que ele entenda do que se trata o site. Por exemplo, aqui no Digital Paper você encontra o logo (“Digital Paper”) e em seguida, uma descrição do assunto tratado (“design gráfico e web design”). Só depois que o texto aparece. Agora imagine se tudo estivesse “acima da dobra”?

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

• Re-desenhando um site (dica)
• Cantos arredondados para qualquer navegador
• Tá com medo do default?
• Inspiração de segunda – parte 5
• 5 dicas de design que se aprende com a Apple