A "usabilidade" de informar ao usuário que um link é externo ao seu site

Não, esta não é mais uma discussão se um link externo ao seu site deve ou não abrir em outra janela. Eu já discuti este assunto aqui. Eu já escrevi sobre as razões pelas quais o atributo target foi retirado das especificações de documentos strict da W3C e também já escrevi que se você realmente quer forçar os links externos no seu site a abrirem em outra janela, você deve utilizar JavaScript e não o atributo target. No final, minha opinião é que você não deve forçar um link ser aberto em outra janela se ele for externo ao seu site. Eu acredito que esta tem que ser uma decisão do usuário e não do site.

Estas coisas tratam de comportamento, mas existe uma outra discussão sobre a usabilidade envolvendo links externos. Navegando no meu site rapidamente você consegue perceber que há vários links distribuídos em vários artigos. Você sabe quais deles linkam para outros textos dentro do meu site e quais não? Eu espero que saiba. Porque já faz um bom tempo que eu utilizo uma pequena imagem external no formato de seta nos links que são externos ao meu site.

Blogs são repositórios de textos e links. A maioria dos blogs (como o meu) insere vários links para vários lugares diferentes incluindo trechos e páginas do próprio site. Indicar para o usuário quais links apontam para o seu próprio site e quais são externos é uma forma interessante de organizar a informação e de deixar claro para o usuário quando um link está relacionado diretamente com o site (interno) em que o usuário está atualmente e qual não faz parte daquele “sítio” (externo). Simples assim. Há uma solução em CSS bem simples que faz isso.

CSS e o atributo rel faz isso por você

O atributo rel como eu já escrevi anteriormente, indica qual a relação entre o seu site e o site/página que você está linkando. Ele pode possuir o valor que você quiser. No meu site, os links que são externos, eu insiro o atributo rel com o valor de “external” da seguinte maneira:


<a href="http://www.site_externo_ao_meu.com.br" rel="external">
   Isto é um link
</a>

E no meu CSS eu coloco uma regra mais ou menos assim:


* [rel~=external] {
	background:url("external.gif") right 2px no-repeat;
	padding-right:13px;
}

Esta regra funciona da seguinte maneira. Eu utilizo um seletor universal (*) seguido de um seletor de atributo cujo valor dele seja igual ou possua (~=) a palavra “external”. Dessa maneira eu consigo por CSS alterar a aparência de todos os hyperlinks que possuem o atributo rel com valor igual a “external”. Lá eu declaro uma imagem de background com a minha setinha que indica para um usuário que aquele link é externo ao meu próprio site. Funciona em todos os browsers modernos que interpretam CSS 2, incluindo o Internet Explorer 7. Alguém discorda?

  • Douglas d'Aquin

    no 6 funciona também? tinha feito coisa parecida por aqui e encontrei problemas… agora vou tentar de novo do seu jeito e vamos ver no que dá… espero que funcione

    valeu a dica

  • http://revolucao.etc.br/ Henrique Costa Perei

    Não funciona no IE6…

  • http://project47.viscountbox.com Carlos Eduardo

    Por isso que nem comecei a utilizá-lo :(

  • André

    Ae Henrique…

    Valeu por atender meu pedido!!

    Muito bom…

    Obs: eu me matei pra descobrir isso e não consegui… ahahhaahahaha

  • Wellington Gasparin

    Eu demorei um pouco para descobrir que a "setinha" representa site externo. Imagine um usuário leigo?! Mas a idéia da seta é muito boa. Acho que deveria haver uma forma de "dizer" ao usuário que tal símbolo representa algo. Um help no site com tabela uma símbolos seria o ideal ou existe uma outra forma mais explicita e melhor??

    Abraços…

  • Luan Almeida

    Já utilizo esse código a algum tempo, "copiei" daqui mesmo e notei que na wiquipédia a mesma tecnica é usada.

    Observei o beta do IE7 e não funcionava, porém notei que na versão final está tudo ok mesmo.

  • http://www.xmlbr.com.br Willian

    Eu tb já utilizo essa técnica que aprendi lendo o código CSS do Revolução!

    Valeu pela dica!

  • GOB

    Estranho.

    Andei reparando, de forma um tanto superficial no intervalo de exercícios de meu curso de PHP que, pelo menos aqui, utilizando IE6, nem todos os links externos estão aparecendo acompanhados de sua imagem escolhida.

    Perdoe-me por ter tempo apenas de um teste, mas, o artigo que verifiquei foi:
    http://www.revolucao.etc.br/archives/scrollbar-no

    Obrigado Henrique,

    Parabéns pelo site.

    Grande abraço.

    GOB

  • GOB

    Me perdoe.

    Devia ter lido os outros comentários antes.

    Abraços

  • http://pedrorafa.com/ Pedro Vasconcelos

    Estava pensando sobre esses temas ultimamente…

    Tenho um blog cujos visitantes são leigos em internet/navegadores. Eles usam ie6 e eu imagino que grande parte desconheça como abrir facilmente um link em nova janela/aba… Tenho, até então, usado o recurso de abrir links externos em nova janela (coisa que eu não gosto), mas para a navegação deles acho que seja interessante, e eles são o meu público…

    Mas vou começar a mudar de postura, e tentar educa-los a abrir os links onde eles quiserem, e não onde eu mandar. Acho isso muito mais sensato! Um pouco complicado no começo, na fase de educação, mas depois fica bem melhor!

  • http://rafaelmarin.wordpress.com Rafael Marin

    Desde que comecei meu blog comecei a colocar nos links externos o atributo rel external, mesmo que eu não tenha acesso ao CSS do blog (é hospedado no WordPress.com).

    Ótimo artigo, Henrique!

  • Camilo

    Acho que o uso de uma figura que tenha outro símbolo resolveria qualquer dúvida. Alguma coisa clara como o stop ou play de um DVD ou videocassete.

  • http://jaderubini.wordpress.com/ Jader Rubini

    O fato é que, avisando ou não, os usuários comuns (que não é o caso do público-alvo desse blog) nunca vão saber o que fazer com isso. Ninguém sabe que, pressionar Shift e clicar no link, faz com que ele abra em um nova janela.

    Por outro lado, a navegabilidade pode ficar entediante se sempre que você clica num link que deveria abrir em uma nova janela, esse link acaba abrindo na mesma janela onde você estava.

    Por isso, ainda prefiro a solução via Javascript.

  • Camilo

    Talvez alguma coisa parecida com o botão "Restaurar" do Firefox ou do IE, acho que quem não conhece entenderia melhor.

  • http://rufspace.com Fellipe Cicconi

    Fiz o contrário!

    Atribui à todas âncoras do site a seta EXCETO aquelas que apontassem para o meu próprio domínio (ou não apontassem para domínio algum), ficando mais ou menos assim:

    a[href ^="http://"] { background: url(imagens/external.png) center right no-repeat; padding-right: 16px; }

    e regra para links locais:

    a[href ^="http://rufspace"] { background: url(); padding-right: 0; }

    Esse método economiza meu tempo, pois não preciso ficar adicionando manualmente atributos as minhas âncoras, dado que uso um editor de texto rico (o TinyMCE) para postar em meu blog.

    No IE6 nem dá pra notar a diferença, pois esses seletores não funcionam mesmo! Em todos outros browsers, fica nota 10.

    Tirei essa idéia da Wikipédia. Achei sensacional. Estou estudando acrescentar ícones ao fim de âncoras que apontem para *tipos* de arquivos específicos, como PDFs por exemplo.

    Para tal, precisaria usar um seletor que não existe ainda… algo mais ou menos assim: a[href$=".pdf"] { } … e por conta dessa impossibilidade, fica ai a dica para quem quiser fazer isso com javascript mesmo.

    Aliás, seria interessantíssimo se pudessemos usar recursos avançados de regex nos seletores CSS, não acha?

    Bom artigo! Abraços.

  • http://danillonunes.com Marcus Danillo

    "Um help no site com tabela uma símbolos seria o ideal ou existe uma outra forma mais explicita e melhor??"

    Um site que precisa de um manual de uso não parece, para mim, um bom exemplo de usabilidade.

    "Aliás, seria interessantíssimo se pudessemos usar recursos avançados de regex nos seletores CSS, não acha?"

    Concordo.

  • http://www.techzine.com.br Rael B. Riolino

    Excelente artigo!

    Não conhecia esse seletor de atributos…. muito bom! E também nao tinha reparado que o ícone era para links externos… pensei que era pura estética…..

    Mais uma vez, valeu pela ajuda, Henrique!

    Até mais!

  • Pingback: A “usabilidade” de informar ao usuário que um link é externo ao seu site « [REF]()

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Por questões de marketing, todos os links externos, devem sim abrir em novas janelas. Já que o objetivo da maioria, é fazer com que o cliente fique o maior tempo possível em seu site, sem que ele seja perdido através de links para outros sites.

  • http://www.marcusvbp.com.br/site/ Marcus VBP

    Eugêncio, eu não concordo. Eu acho que a pratica de abrir links em outra janela irá trazer estatísticas erradas em relação ao tempo de permanência no site.

    Por exemplo, supondo que um usuário passe 30 minutos no seu site, quando na verdade ele estava visitando outro site que abriu em uma nova janela, deixando o seu em segundo plano. Ou seja, na verdade o usuário não passou nem um minuto em seu site.

    Eu prefiro não tratar o usuario como um robozinho, que vai lendo o site linearmente e quando encontra o primeiro link, sai daquele site para repetir a mesma operação em outro. Se o usuario está em seu site, é porque ele está atrás de uma informação, e ele só sairá quando a obtiver, e não porque ele clicou em um link.

    O botão "voltar" existe desde que existe navegadores, e eu acredito que todos saibam usá-lo, até mesmo os mais leigos!

  • http://kadu.ducz.com/cgi-sys/suspendedpage.cgi kadu

    Bem simples mesmo Henrique.

    Dica bacana! Já implementei :)

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Marcos, primeiro meu nome é Eugenio, sem o "c", mas sem problemas, rs.

    Sim, é possível que aconteça do usuário deixar o site em segundo plano e as estatísticas mostrarem que ele passou horas no site.

    Mas eu ainda prefiro, do mesmo jeito, abrir o site em uma nova janela, pois mesmo existindo o botão voltar, existem usuários com memória fraca, minha mãe por exemplo – aprendi muito sobre usuário iniciante observando-a navegando na internet – que está navegando e esquece as 5 últimas páginas que visitou. Se eu abrir em uma nova janela, mesmo em segundo plano, ele continua ali, na mesma página, mostrando ao usuário que ainda "estou vivo". E quando ele fechar essa nova janela, irá voltar para meu site. Se tiver sorte do usuário não ter encontrado o que procurava, ele irá tentar mais uma vez no seu site.

    Entendeu meu ponto de vista? Prefiro deixar o site em stand-by do que fazer com que saia totalmente da visão do usuário.

    Aí é claro que existem várias questões de usabilidade, que é um tema muito vasto, mas essa é uma opinião minha. A maioria dos clientes preferem que sites externos abram em outras janelas, e existem muitos casos de até um link interno abrir em outra janela.

    Usuário é usuário, cliente é cliente, não vamos esquecer essa parte.

    Abraços.

  • Rafael Oliveira

    Concordo com o Eugenio.

    No caso de um site comercial, de uma empresa por exemplo, seria mais interessante manter o visitante em "espera", para garantir que, caso ele não ache o que procura em outro lugar, ou simplesmente queira voltar para o tal site, ele não tenha que sair procurando o endereço na barra de endereços ou no histórico do navegador, ou em um caso mais crítico, ter que procurar novamente no Google/Yahoo/MSN/et cetera. Mas isso, é uma questão comercial. O cliente, sem dúvida vai preferir esse caminho.

    Mas em casos como o Revoluacao.art.br e outros site/blogs/fóruns de mesmo cunho, o uso de forçar o usuário a ir para outro site é meio abusivo mesmo, aqui, a maioria com certeza entende que com um "ctrl+clique" se abre o link em uma nova aba (Firefox/Opera).

    É uma questão de analisar o caso.

    Quanto ao ícone que mostra que um link é externo, uma legendinha simples já daria conta do recado. É uma coisa figurativa, usar uma seta para representar um link externo, então, não acho que seria um "ataque a usabilidade" mostrar ao usuário o que aquele símbolo significa.

    Té. =)

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Sim, varia de site para site, é o que você quer ganhar com ele (não em termos de dinheiro).

    Mas minha opinião é sólida, em qualquer site nunca abro um link que seria externo na mesma página. Prefiro usar um Javascript para resolver meu problema.

    E a questão do "Ctrl+Click", com extensões do Firefox e o browser Opera, é só clicar com o Scrollwell que faz a mesma coisa, ok?

    Abraços.

  • Rafael Oliveira

    Eu sei, é desse modo que uso. ^^

    Pra mim, depende do caso. Como já disseram, quando você lida com um público que, em maioria, conhece o funcionamento do browser e sabe como mexer "buntinhu" com ele, acaba ficando um pouco abusivo. Mas, é uma coisa que fica a vontade do autor, se ele acha necessário, que use.

    Té.. =)

  • http://www.dotes.com.br Luiz Júnior F

    aND God, please, Kill IE 6 =]

  • Luis

    mandou bem.

  • Pingback: Extensões úteis do WordPress #01 - External Links at Emanuel Felipe .NET()

  • Pingback: Marcos Dell Antonio’s Blog » Blog Archive » Alguém me ajuda: para que servem os hyperlinks?()

  • Rogerio G Miranda

    Meu Caro,

    Estou com um probleminha…

    Eu tenho um dominio na intranet, tipo: (ele não existe realmente, é apenas um exemplo)

    O usuário consegue navegar sem alterar esse endereço acima no browser. só que se ele digitar manualmente , o navegador continua funcionando normalmente, e eu não quero permitir isso.

    Ou seja, mesmo que alguém digite alguma coisa diferente de "http://site.com.br/index.htm&quot;, não seja permitido executar a pagina e a url permaneça inalterada… só vai executar se ele escolher uma das opções de navegação do site.

    Tudo bem? será que me fiz entender? se vc puder me ajudar eu agradeço. Meu MSN é [email protected], pode me adicionar que terei prazer em discutir com você. Abraço

  • Pingback: Nagüeva » É correto abrir links em novas janelas?()

  • amo

    parabéns pelo artigo, a dica * [rel~=external] foi muito util.