¿Cuidas tus enlaces?
Probablemente estés leyendo este weblog porque has seguido un enlace desde otro sitio web. Es la esencia de Internet, millones de documentos enlazados entre sí al alcance de un “click”, rápido y sencillo. Sin embargo, este pequeño salto hipertextual ha podido ser menos sencillo de lo que pensamos.
Habitualmente nos encontramos páginas web dónde es difícil interpretar qué es un vínculo y qué no lo es, o cuando menos, dónde nos llevará el vínculo, si se abrirá en una ventana nueva o si se va a “perder” la página en la que estoy.
Cuidar nuestros enlaces para ayudar a los usuarios a reconocer e interpretar rápida y correctamente los vínculos de nuestros documentos web, sin obligarles a pensar, es crucial.
Una vez más super Jakob Nielsen al rescate, en el alertbox “Guidelines for Visualizing Links” , nos recuerda algunas pautas de cómo deben ser los enlaces para mejorar su eficacia y facilidad de uso:
- Se deben colorear y subrayar para diferenciarlos del resto del texto. Para ello no se debe subrayar nada que no sea un enlace. Otro tanto ocurre con el color de los mismos, no se debe usar el mismo color para resaltar elementos que no sean enlaces.
- Los estados visitado y sin visitar han de diferenciarse con una tonalidad distinta del mismo color, “apagando” el enlace ya visitado, de este modo el usuario interpreta más rápido la página. Sencillamente le estamos diciendo: por aquí ya pasastes… fíjate en estos otros enlaces que todavía no has visitado.
- Accesibilidad. Cuidado con el color que eliges para los enlaces, los verdes y los rojos son más problemáticos para personas con deficiencias visuales. Para evitar confusiones basadas en el color lo mejor es subrayar los enlaces. El tamaño del texto es importante, un enlace demasiado pequeño es más dificil de acertar para personas mayores o con deficiencias motrices.
- Facilitar la predicción de a dónde lleva el enlace, usando texto significativo y el atributo title para ampliar información sobre el enlace.
Con estas pautas que nos recuerda Nielsen resolvemos los principales problemas de los enlaces textuales, pero ¿se podría mejorar?. ¿Qué hay del comportamiento del vínculo?.¿Se abrirá una ventana nueva?.¿Es una enlace a otra parte del mismo sitio que estoy navegando (ancla) o me lleva a otro sitio distinto?
Nada nos indica a priori, salvo que lo hayamos especificado literalmente en el atributo title, el comportamiento de estos enlaces. En este sentido merecen ser resaltadas algunas iniciativas como la de Minid.net (minid ha cambiado recientemente de MT a Wordpress y con ello de diseño por lo que ya no podemos verlo insitu aunque supongo que no tardará mucho en rescatar su aspecto anterior)

En esta solución gráficamente se avisa de que el enlace nos va sacar de minid dándonos la posibilidad de decidir si lo queremos abrir en una ventana nueva para no perder la original.
De forma parecida actúa Yahoo. Junto a los enlaces aparece un símbolo que nos permite abrir el enlace en otra ventana directamente.

Algunos estaréis pensando que para qué tanta parafernalia si basta con hacer clic con el botón derecho del ratón sobre el enlace y elegir “abrir en ventana nueva”, o pulsar Ctrl y hacer clic para abrirlo en una nueva pestaña (para los que usen mozilla u opera). Pero no tenemos que olvidar que muchos usuarios nóveles desconocen esas posibilidades y, sobre todo, que cuanto más explícito sea el enlace, cuanto mayor infomación previa proporcione, más eficaz será.
En definitiva debemos cuidar los enlaces textuales para que se identifiquen fácilmente y salten a la vista respecto al resto de los contenidos proporcionando toda la información posible de su destino y comportamiento. Píldora aparte merecen los enlaces más “gráficos”, menús de navegación, listas de enlaces, efectos rollover, etc.
Para finalizar, y antes de que nos echéis a los perros, sabemos que nethodical imcumple varias de las recomendaciones aquí descritas, desde hoy trabajaremos para solucionarlas… pero ¿y tú? ¿cuidas tus enlaces?.
9 Septiembre 2007 a las 22:54
Hola, tengo una duda. El programa dreamweaver, utilizandolo para validar XHTML me dice que “el atributo TITLE no esta permitido dentro de una etiqueta (la de los vinculos)” ¿cual es el problema, hay algun atributo que lo pueda sustituir?