A Internet é feita de Hyperlinks. A capacidade de interligar documentos com um clique do mouse é o grande argumento de venda da Web e esta funcionalidade é o que a torna tão fantástica. Eu gostaria de dedicar alguns minutos para discorrer sobre a usabilidade das âncoras no design. Existem algumas diretrizes e dicas a serem consideradas com a finalidade de orientar os visitantes a identificar de uma forma efetiva, os links em um site. Existem (pelo menos) dois diferentes cenários onde aparecem as âncoras: na navegação e no conteúdo. Vamos examinar resumidamente cada um deles.

Links no conteúdo

É comum a inserção de links no conteúdo de um documento com a finalidade de fornecer uma referência quer a um documento externo quer a um ponto no mesmo documento ou um caminho seja qual for, onde serão encontradas informações complementares ao assunto tratado. Tal procedimento enriquece e dá um suporte consistente ao conteúdo do documento desde que os links levem a informações valiosas.

Clique aqui para fazer isto! Clique aqui para obter aquilo!

Embora tal técnica venha sendo abandonada, frequentemente ao nevegar na Web me deparo com a situação de estar clicando em links cujo texto descritivo é "Clique aqui". Lendo o artigo de Jakob Nielsen’s Top Ten Web Design Mistakes of 2005 aprendi a identificar o inconveniente do uso de textos não descritivos em links.

Você não só desorientará seu leitor deixando com dúvida se deve ou não seguir o link como também estará se impondo limitações no que diz respeito aos mecanismos de busca e indexação de sites. A menos que seu visitante esteja tendo o primeiro contato com a Internet ele saberá identificar um hyperlink bem como saberá que para ativá-lo deverá clicá-lo. O texto dos seus links deve estar de acordo com o contexto onde inserido e assim fornecer uma descrição clara ainda que breve, do conteúdo do documento para onde remete o leitor. Ao usuário deve ser fornecida uma idéia geral para onde ele irá baseada no texto do link e nas palavras ou frases que circundam o link.

Links abrindo uma nova janela

Muitos desenvolvedores acreditam que a prática de abrir links externos em uma nova janela com uso do atributo target="_BLANK", faz com que o usuário continue navegando no seu site. Esta crença fundamenta-se no fato de que se um usuário abre uma nova janela ele irá ler o conteúdo, fechar a janela aberta e continuar no site onde estava. Na prática isto não ocorre. A abertura de uma nova janela confunde o usuário de vez que o botão voltar do seu navegador já não mais funciona. A abertura de uma nova janela traz o sentimento de repulsa natural à indesejáveis janelas pop-up. A maioria dos usuários atualizados é capaz de abrir um link em uma nova janela ou em uma nova aba se for exatamente isto que eles desejarem. Lerão o conteúdo do documento lincado e retornarão ao seu site no ponto onde o deixaram. Se você quer que um link externo abra em uma nova janela, então informe isto claramente ao usuário.

Visibilidade de links

Uma constatação frustante é quando links não se parecem obviamente com links. Deverá ser possível com uma simples passada de olhos no documento, ser possível identificar claramente o que é e o que não é link. Eu penso que o expert Jakob Nielsen’s foi bem explicativo no seu Alertbox de 10 de maio de 2004: Guidelines for Visualizing Links. Ele aborda relevantes itens de usabilidade das âncoras.

Naquele artigo há considerações importantes sobre links visitados. Muitos desenvolvedores não dão importância à necessidade de se fazer distinção entre links visitados e não visitados. É comum acontecer de um link aparecer em diferentes locais do documento nomeado com textos diferentes e eu mesmo já me deparei com uma situação em que tive múltiplas abas do navegador abertas no mesmo documento. É importante fazer a diferenciação entre links visitados e não visitados.

Links mailto:

Outra constatação frustante é com o mau uso dos links mailto:. É extremamente frustante clicar em um link de contato e ser remetido ao seu cliente de email padrão (NT: abertura de uma nova janela com o Outlook Express, por exemplo). Links cujo texto seja ‘Contato’ ou ‘Fale Conosco’ supostamente devem remeter o usuário a uma página contendo informações e/ou formulário de contato. Deixe claro ao usuário que ao clicar o link ele será levado ao seu cliente de email ou forneça um endereço de email como texto do link se é que você pretende a abertura de uma nova janela com o cliente de email padrão do usuário. Estes procedimentos informarão antecipadamente ao usuário a abertura do seu programa de email e que ele não será levado à um formulário de contato.

Links de navegação no site

O mecanismo de navegação do seu site é talvez o elemento mais consistente e presente no layout. Ele deverá ser funcional, estético e óbvio. O usuário deverá ser capaz de identificá-lo instantaneamente e ele deverá ser muito bem organizado. Existia uma crença de design a alguns anos atrás e que ainda persiste nos tempos atuais que se rotulou de Mystery Meat Navigation. Mystery Meat é uma referência a elementos de navegação que não carregam qualquer indício visual de sua existência e são identificados somente quando passa-se o mouse sobre eles ou se interage com eles. Isto é uma prática que deve ser evitada a todo custo com a finalidade de assegurar usabilidade a sua navegação.

Notas finais

Para finalizar gostaria de falar sobre "efeitos" em links. Entenda por "efeito", aquilo que acontece a uma âncora quando você interage com ela. Uma mudança de cor ou qualquer outra característica que mude quando você resolve seguir o link. O que realmente sobressai quando se trata de efeitos é quando o desenvolvedor usa efeitos que distorcem a posição do texto e de elementos que estão próximos ao texto do link. Criando um efeito negrito ou mesmo alterando a posição do link pode confundir e irritar o usuário em alguns casos. É claro que em determinadas condições um efeito como este será muito bem vindo, mas isto deve ser feito de uma forma a mais inteligente possível. Se um efeito aplicado ao seu link está interferindo com outros elementos ou até mesmo com o layout, é melhor procurar um outro tipo de efeito.

Referências

• Top Ten Web Design Mistakes of 2005
• Guidelines for Visualizing Links
• Jakob Nielsen’s Alertbox: Top Ten Mistakes in Web Design

Créditos

Este artigo é uma tradução do original em inglês de Jonathan Christopher
publicado em http://www.mondaybynoon.com/2006/04/24/click-here-to-read-this-article/

[ Atualizações: ]

2006-05-19: Encontrei esta pérola em http://www.scribbling.net/dont_click_here e transformei para uma versão em português para ilustrar esta matéria

“Clique aqui para baixar minha coletânea de crônicas, intitulada ‘Você é um idiota e preciso dizer-lhe explicitamente como interagir com uma página Web’.”

Conside a seguinte alternativa:
“Baixe minha coletânea de crônicas, intitulada ‘Respeito seus conhecimentos sobre navegação na Web uma vez que você está interagindo com meu site’.”

Qual das alternativas acima lhe parece a melhor?
Usar “clique aqui” como texto de um link denota total desconhecimento do conceito fundamental de funcionamento de uma página Web.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-04-24 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/04/24/dicas-links/trackback no seu site.