Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Dicas sobre links

Publicado em: 2006-04-24 — 21.703 visualizacoes         

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

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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://www.maujor.com/blog/2006/04/24/dicas-links/trackback no seu site.

8 comentários na matéria: “Dicas sobre links”

  1. joaoNo Gravatar disse:

    Lendo os comentarios deu para perceer que as ideias sao bem legais,nos da uma boa ideia de criação.

  2. Extensões úteis do WordPress #01 - External Links at Emanuel Felipe .NET disse:

    […] Dicas sobre links […]

  3. geanNo Gravatar disse:

    lendo esse artigo vejo o qto ainda temos q aperfeiçoar nossa interpretação do que realmente é necessario numa home.
    perfeito
    ta add

  4. Locação de EquipamentosNo Gravatar disse:

    Muito interessante o blog, parabéns.

  5. JoaresNo Gravatar disse:

    Mais uma vez destruindo em seus artigos e dicas em cara!!!

    Parabéns!

  6. DaniNo Gravatar disse:

    O seu blog está muito bonito!!!
    Adorei! Gostoso de ler.
    Bjs.

  7. Rafael SlonikNo Gravatar disse:

    Eu estava falando informalmente sobre isso há alguns dias:
    http://m4web.com.br/log/2006/04/17/aula-de-hoje-links/

  8. F-Ranieri disse:

    Dicas sobre links – por Maujor

    Hoje mesmo estive comentando com o meu primo (densenvolvedor de sistemas) sobre a minha vontade de aprender e a busca pelo conhecimento. Todos os dias enxergo (encontro, descubro) informações bastante interessantes, que, ou ficaram esquec…

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo