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.
É 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.
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.
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.
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.
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.
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.
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.
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/
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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Lendo os comentarios deu para perceer que as ideias sao bem legais,nos da uma boa ideia de criação.
lendo esse artigo vejo o qto ainda temos q aperfeiçoar nossa interpretação do que realmente é necessario numa home.
perfeito
ta add
Muito interessante o blog, parabéns.
Mais uma vez destruindo em seus artigos e dicas em cara!!!
Parabéns!
O seu blog está muito bonito!!!
Adorei! Gostoso de ler.
Bjs.
Eu estava falando informalmente sobre isso há alguns dias:
http://m4web.com.br/log/2006/04/17/aula-de-hoje-links/