Quero menus fáceis. Quero “clicar e ir!”
May 5th, 2007
Se você ao desenhar um menu definiu visualmente a área de cada um de seus itens faça com que cada área seja eficiente quando o usuário clicar nela.
Vamos ver um menu do Imasters pra entender essa história (clique na imagem para vê-la na íntegra):
O designer definiu uma área para cada item do menu organizando o layout mas - querendo ou não - também sugeriu ao usuário a área onde ele pode clicar só que o mesmo designer esqueceu de dar a funcionalidade de link que a área propõe.
É sério.
Basicamente o usuário usa o mouse para alcançar a área do item, clicar e ir para uma outra página.
O item do menu não precisa ser um lindo botão, precisa somente ter uma área definida como um retângulo para que o usuário clique nele.
Por diversas vezes vi pessoas clicando em retângulos e nada acontecendo - meu pai é um exemplo =]
E a situação piora quando há uma resposta visual da interface mas o link não funciona de acordo.
No site Via6 o item do menu muda de cor quando o mouse está sobre ele mas o ato de clicar resulta em nada pois o link é válido somente para o texto do item.
A área de clique e a resposta visual à interação do usuário são fatores de grande importância para uma boa navegação e compreensão do funcionamento do site.
Veja um bom exemplo no portal Agrolink:
Há outro exemplo no Estadão onde os itens do menu nem possuem uma área visualmente definida:
E veja mais um exemplo no próprio Imasters:
Ainda não te convenci??
Tu acha que de qualquer forma o usuário vai clicar no texto do item do menu e que gastar tempo com o CSS pra isso é bobagem??
Está bem então, mas faça um teste: navegue com o firefox no site do UOL e depois no da Folha . (este teste vai expirar algum dia quando um dos sites for alterado)
Se possível veja outras pessoas navegando neles também.
Navegue, veja e analise se o simples cuidado com as áreas de cliques promovem ou não uma melhor experiência para usuário.
Bom, não sei sobre você, mas eu quero menus fáceis na web, eu quero clicar e ir!
May 10th, 2007 at 9:37 am
Muito interessante o artigo, concordo plenamente. Mas não sei em qual navegador você testou o menu do iMasters. Foram realizados testes no Internet Explorer 6 e 7, no Firefox entre outros e em todos eles a área definida visualmente como link é sempre clicavel, inclusive isso foi uma preocupação da equipe durante o desenvolvimento da interface justamente considerando a questão da usabilidade.
Abraços
May 10th, 2007 at 9:56 am
Agora observei que os links mais abaixo no menu que não possuem sub-menu realmente não ficam com a área clicavel no IE6. Uma pena! De qualquer forma realmente consideramos isso uma questão importante.
July 7th, 2007 at 6:29 am
Andre,
estou realmente contente por ter recebido a sua visita neste meu pequeno blog e ainda mais contente pelos os teus dois comentários e pela alteração no menu do site do Imasters.
Estou te respondendo somente agora pois mal comecei a blogar e por um motivo de saúde, que ainda estou tentando resolver, acabei deixando ele, o blog, de lado.
Bom, mas o que eu queria mesmo com este comentário era agradecer a tua visita e os teus comentários.
Obrigado Andre,
abraços e t+
July 13th, 2007 at 11:54 am
Cara esse é um baita ponto… Realmente muito designer ignora isso… po um site do tamanho do da Folha, que não somente peca na área do link como também no tamanho dele(quase ilegível!!!), é uma prova do descomprometimento com uma análise básica dessas.
“O tópico é muito óbvio”, foi o que pensei no meio do desenrolar do teu texto, mas se os profissionais não fazem… é bom apontar mesmo.
Valeu!