Enlaces: Usabilidad

Los enlaces, tambien conocidos como hipervínculos, son unos de los elementos más importantes dentro de una página web.

Por un lado permiten al usuario desplazarse por tu página web y por otro lado permiten que los buscadores vayan rastreando tu web buscando páginas y registrando nuevos contenidos.

Ahora me centraré en el aspecto del usuario y en el campo de la Usabilidad.

Resaltar los enlaces sobre el resto del texto

Algo que se puso muy de moda a la vez que aumentaba el uso de las llamadas hojas de estilos, o CSS, fue quitar la linea inferior de los enlaces y cambiar el color del texto de los enlaces, algo que por un lado está bien ya que nos permite jugar con los enlaces para adaptarlos al diseño de nuestra web, pero que por otro lado hay que hacer que resalten sobre el resto del texto para que sean visibles.

Lo ideal es que los enlaces estén subrayados para resaltarlos sobre el resto del texto y que estos además tengan un color llamativo y diferenciable del texto. Tambien hay que evitar utilizar texto subrayado que no sean enlaces, ya que los lectores los identificarán como enlaces, al igual que debemos evitar utilizar el mismo color que los enlaces en algún trozo de texto de nuestra web.

Voy a poner ejemplos de enlaces confusos:

¿Cuales son enlaces y cuales no?

1. AAA
2. BBB
3. CCC
4. DDD

En el tema del color utilizado para los enlaces, decir que incluso hay gente que sigue recomendando que se utilice el color azul para los enlaces activos y lila para los visitados, como se tomó por defecto en los navegadores en los comienzos del HTML y que aún siguen siendo identificados desde un primer vistazo como enlaces para cualquiera que navegue por una web.

Aunque no creo que haya ser tan radicales y creo que es posible combinar usabilidad en los enlaces con un buen diseño y por lo tanto utilizar otros colores que sean más acordes, aunque eso sí, resalten sobre el resto.

Prescindir del texto subrayado y utilizar negritas, italic…

Algunas webs prefieren utilizar el texto de los enlaces en negrita o en italic para resaltar los enlaces, yo definitivamente creo que esto siguen siendo trabas para nuestros visitantes y que como el texto subrayado no hay nada para identificar un enlace.

En su defecto podemos hacer que al pasar el cursor sobre los enlaces se subrayen, como en esta web, pero sin olvidarnos de darle un color llamativo y que lo diferencie del resto del texto.

Escribir enlaces en textos coherentes

El objetivo de poner enlaces no es “tirarlos” por el texto de tu web, sino colocarlos en el sitio correcto. Por eso los enlaces deben estar en un texto coherente, mejor lo explico con un ejemplo:

• Texto coherente
  … por eso os recomiendo la Guía de Usabilidad de este blog que…
• Texto incoherente
  … por eso os recomiendo ésto, que es una guía de usabilidad de este blog que…

Además de en los usuarios, pensemos tambien en los buscadores.

Utiliza textos no muy largos para los enlaces

En esto tambien entra el sentido común, os lo ilustro con un ejemplo:

• Texto corto y correcto
  … por eso os recomiendo la Guía de Usabilidad de este blog que…
• Texto demasiado largo
  … por eso os recomiendo ésto, que es una guía de usabilidad de este blog que…

Evidentemente hay que limitar la cantidad de palabras en el texto de un enlace, un máximo de cuatro o cinco palabras no está mal.

Situar las palabras más importantes al principio del texto del enlace

Para hacer más llamativos los enlaces tambien es interesante hacer que la palabra más importante del enlace esté al principio, transformando el texto, y en el caso de utilizar el texto de un artículo, como los que enlazo en este blog, tambien es interesante que la primera palabra empiece en mayúsculas para resaltarlo aún más.

• Palabra importante al principio
  … por eso os recomiendo el artículo sobre Anotaciones junto a los enlaces de este blog que…
• Palabra importante que no está al principio
  … por eso os recomiendo el artículo sobre los enlaces con anotaciones de este blog que…

Diferenciar enlaces dentro de tu web y fuera de tu web

En principio debemos ser responsables de que páginas web enlazamos, ya que es posible que al acceder a una página que hayamos enlazado nuestros lectores se puedan infectar con virus, ver como les saltan 20 popups y cosas por el estilo.

Aún así, siempre es bueno diferenciar lo que enlazamos de páginas externas y lo que enlazamos dentro de nuestra propia web.

Lo más recomendable es que los enlaces dirigidos a páginas externas estén a parte en sitios reservados como “Blogroll”, “Páginas webs amigas”, “Páginas Relacionadas” o “Fuentes utilizadas en este documento”, que claramente se identifican como enlaces externos o que estén marcados con un texto entre paréntesis detrás del enlace, algo así por ejemplo: (web externa) o (enlace externo).

Lo mismo deberíamos hacer con los enlaces en los que utilicemos popups o ventanas emergentes, que aunque en mi opinión deberíamos utilizarlos en contadas ocasiones, si los utilizamos es recomendable advertirlo con una anotación junto al enlace, al igual que cuando enlacemos páginas en otros idiomas.

Este tema ya lo comenté en Anotaciones junto a los enlaces.

Si quereis leer un poco más sobre enlaces os recomiendo estos dos artículos en inglés de evolt.org:

• Should hypertext links be blue and purple (en inglés)
• Writing effective link text (en inglés)

Sobre usabilidad os recomiendo que sigais la Guía de Usabilidad de este blog.

Compártelo

Si te ha gustado este artículo, envíalo a Meneame, Fresqui o Seoclon