La usabilidad de los enlaces subrayados

Experiencia de usuario
14/11/2016
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Hoy vamos a tratar un tema controvertido y discutido entre los diseñadores, si se debe o no poner subrayado en los enlaces.

2016-11-14-original
Foto de Sean McEntee

El patrón de diseño de los enlaces es probablemente uno de los más antiguos en el diseño web, tiene 30 años a sus espaldas, si ves algo azul y subrayado en un sitio web es un enlace. Cualquier usuario de la web conoce ese patrón de diseño y probablemente sea uno de los esquemas mentales más difíciles de romper en los usuarios de la web.

Historia del patrón de diseño de los enlaces

Cuando nació la WWW en 1989, los ordenadores tenían una paleta de colores muy reducida, usaban el estándar VGA que tenía 16 colores y habia nacido 2 años antes. Tan establecidos estaban esos 16 colores que son los colores básicos de la web que se nombran desde la especificación HTML 3.0.

Se eligió el color azul para los enlaces, porque después del negro es el que mayor contraste tiene con el blanco. Además la ceguera al color azul (tritanopia) es la mas rara de los tres tipos de cegueras al color. Es decir, se eligió el azul por razones de usabilidad pura y dura dentro de las posibilidades tecnológicas de la época.

Los ordenadores en aquel entonces, muchos no tenían color. De hecho muchos de los que estaban conectados a internet eran simples terminales en blanco y negro (o verde y negro), por lo que hacía falta una manera de diferenciar a los enlaces además del color. Para ello se usó otro patrón de diseño conocido (para la época) que era subrayar algo cuando se quería destacar en un texto escrito a máquina.

Decir que cuando se eligió, se pensó en que la web accedería todo el mundo, por lo que se pensaron en otros patrones más allá de los habituales en otras aplicaciones de hipertexto como Hypercard, HyperTies o Toolbox, que existían y alguna de ellas ya mostraban los enlaces en azul varios años antes que la web.

Usabilidad del subrayado en los enlaces

Al respecto de la usabilidad del subrayado de los enlaces, Cassandra Naji ha escrito un artículo en UX Booth sobre el tema.

Cassandra nos dice en su post que las críticas al subrayado de los enlaces desde el punto de la usabilidad y la experiencia del usuario son debidas a que un texto subrayado empeora la legibilidad de éste.

Cassandra se pregunta si esto es así, ¿por qué en 30 años no se ha cambiado? Ella cita un par de beneficios que los enlaces subrayados tienen:

  • Reconocimiento: el subrayado de los enlaces hace que los reconozcas al instante sin tener que mover el raton.
  • Ayudan al escaneo: como ya os hemos dicho en otros post la gente escanea los textos en la web, por lo que el subrayado hace más fácil la tarea de escanear los contenidos y buscar dónde se quiere ir con el siguiente clic.

Google tomó la decisión de dejar de subrayar los resultados de búsqueda en 2014, en favor de resaltar los enlaces en color azul y cuando pasas el ratón por encima de ellos (un :hover para los más técnicos), entonces subrayarlo.

Actualmente se puede usar el color para diferenciar o destacar los enlaces, por lo que el subrayado para los enlaces en productos digitales se puede eliminar salvo en un caso específico (que no nombra Cassandra) enlaces destinados a ser vistos en libros electrónicos que pueden ser: los índices de un libro electrónico, una tienda de ebooks o una web a través del navegador integrado de un ebook con conexión a internet. Ya que los libros electrónicos, o e-books, son los únicos dispositivos electrónicos actuales con un cierto número de usuarios relevante y que usen todavía una pantalla en blanco y negro con posibilidad de ejecutar un navegador web.

Así que salvo que diseñéis un producto digital para que sea para ser visto en un libro electrónico, tanto resaltar en azul los enlaces solo, como resaltarlos en azul y que con un :hover aparezcan subrayados son una buena solución.

Como siempre os decimos en el estudio si tenéis dudas de cómo va a funcionar algo, hacer un test A/B y observar los resultados de los tests y quedaros con la mejor opción.

Al final de su artículo, Cassandra nos da unas pautas a seguir con los enlaces:

  • No subrayes ningun texto que no sea un enlace
  • Diferencia los colores de los enlaces visitados y no visitados
  • Haz accesibles los enlaces escribiendo HTML semántico
  • Escribe mensajes específicos para los enlaces (nada de “haz clic aquí”)
  • Las frases de los enlaces que sean cortas (de 3 a 5 palabras)
  • Mantén la consistencia de los enlaces a lo largo de todo el sitio
  • No pongas más de 100 enlaces en una página (Matt Cutts te lo explica)

En el Estudio consideramos que estos consejos relativos a los enlaces son necesarios aún, porque la usabilidad en los enlaces suele ser un asunto que no se tiene muy en cuenta a la hora de diseñar los contenidos de una web, que es algo fundamental en la experiencia de usuario en un canal web.

En Torresburriel Estudio estamos especializados en diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos 🙂

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.