Usabilidad del hipervínculo: Directrices para enlaces utilizables

 

No es de extrañar que los hipervínculos sean parte integrante de la experiencia en Internet y que hayan sido desde el comienzo, cuando Tim Berners-Lee describió la web como simplemente “documentos y enlaces”.

 

Links – “texto o un gráfico que indica que se puede hacer clic”, en palabras de Microsoft, siguen siendo el principal medio por el cual los usuarios navegan por la web, moviéndose dentro de un sitio o a sitios externos relacionados a través de clics. Enlaces utilizables significan, que los usuarios pueden lograr el objetivo de por qué están en su sitio web … (lo que) afectará positivamente en su experiencia”.

 

Los hipervínculos usables son la esencia de la buena experiencia de usuario.

 

A pesar de la importancia de los hipervínculos en la experiencia de usuario, la conexión de páginas web, sitios, personas e ideas con un solo clic, el diseño de hipervínculo en UI/UX no es un gran tema de discusión. Simplemente están allí, lo que podría ser la razón por la que los propietarios de sitios web y diseñadores  no se centran en los problemas de usabilidad  tanto como deberían.

 

La mayoría de los sitios siguen la convención de hipervínculos azul subrayados con mayor o menor adherencia a las mejores prácticas que se encuentran en las Pautas de Accesibilidad para el Contenido Web del W3C. Sin embargo, el diseño de hipervínculo convencional tiene buenas y malas implicaciones para la experiencia del usuario, particularmente en el paisaje de la interfaz de usuario en constante evolución.

 

En las 3 décadas desde que Berners-Lee nominó el enlace como el elemento fundamental de la navegación web, todo ha cambiado. ¿Es hora de que el hipervínculo cambie también?

 

La historia de los hipervínculos

 

El formato de subrayado azul de los hipervínculos convencionales es un rasgo de los días en que los diseñadores de la interfaz de usuario tenían muy poco margen para la creatividad del diseño. En los primeros prototipos de navegador, como el prototipo WWW Browser original de Berners-Lee, la pantalla estaba limitada a 16 colores y el azul era el más oscuro a negro. Algunas pantallas de monitor sólo configuraban blanco y negro, lo que llevó agregar del subrayado.

 

Tres décadas más tarde el azul subrayado todavía tiene un dominio en la visualización del  enlace, a pesar de que los hábitos de consumo de Internet, el uso del dispositivo, las interfaces e incluso cómo apuntamos y hacemos clic, han pasado por una revolución.

 

Subrayado azul y hipervínculos

 

Los Pro

 

Entonces, ¿por qué el subrayado azul ha demostrado ser tan duradero? Una pista radica en el hecho de que, según Jakob Nielsen, “la vida es demasiado corta para hacer clic en cosas que no entiendes.” Él tiene razón; Los enlaces tienen que ser reconocibles instantáneamente como tales para ser utilizables. En pocas palabras, los enlaces carecen de ‘affordance‘. Es imposible entender su función de su apariencia. Saber a través de la experiencia y el aprendizaje. En este sentido, la forma en que son visualizados es vital para su éxito.

 

Nielsen señala que “la coherencia es la clave para enseñar a los usuarios lo que significan los colores de los enlaces”. El azul ha proporcionado históricamente esa consistencia, consolidando la asociación psicológica del azul con “clickability”.

 

Si los usuarios tienen problemas para ver el color, el  subrayado del hipervínculo convencional entra en juego: si no percibes el azul todavía percibes el subrayado.

 

Subrayar también tiene otros beneficios. Según un estudio realizado en 2003 por la Universidad de Hamburgo, los enlaces subrayados funcionan como una suerte de sub-encabezamiento dentro del texto, guiando a los usuarios a la información importante al navegar. El subrayado también facilita la búsqueda de vínculos y el aumento de las tasas de clics, aunque no estén resaltados por ningún otro medio.

 

Los contras

 

Otro cambio del hipervínculo azul subrayado es el uso del dispositivo. Cuando el hipervínculo azul subrayado nació, nadie podría haber imaginado los poderosos mini computadores que todos llevaríamos en nuestros bolsillos dentro de una generación. Pantallas táctiles y wearables han revolucionado la forma en que interactuamos con los dispositivos, y el hipervínculo comienza a mirar más que un poco torpe en los dispositivos móviles. Son difíciles de hacer clic, a menudo caen fuera de la zona del thumbzone, y hacer malabares con varias páginas es una pesadilla.

 

 

El vínculo azul subrayado puede tener el peso de la historia en su lado, pero como Hoa Loranger de Nielsen Norman Group señala, “los significantes pueden evolucionar con el tiempo a medida que los usuarios de la web obtienen más exposición a diferentes señales de interacción y aprenden estas nuevas señales”. Diseñadores y UXers que quieren experimentar con la visualización de enlace, hay algunas alternativas viables por ahí, cada uno con sus propios pros y contras de la usabilidad para tener en cuenta.

 

Técnicas alternativas de visualización de hipervínculo

 

color

 

Sabemos que el azul produce más clics, pero ¿qué tipo de azul deberían usar los diseñadores de interfaz de usuario, exactamente? Hace unos años, los usuarios de Gmail probaron con 40 diferentes colores de vínculo a lo largo de la escala azul-verde: cuanto más azules, más clics obtuvieron, mientras que los enlaces hacia el extremo verde del espectro desalentaron los clics.

 

Si bien esto es probable sólo hasta las expectativas de los usuarios – azul significa enlaces, verde significa … ¿qué ahora ?, estas expectativas pueden ser superados por jugar con los colores de fondo. El estudio de Graves encontró que el color de fondo tenía un impacto sustancial en la legibilidad: el texto verde sobre fondo amarillo era el más rápido de leer, mientras que el rojo sobre el verde era más lento, mientras que el texto oscuro en fondos claros era mucho más legible que el texto claro en la oscuridad.

 

Los colores brillantes son “extra notorios y distrayentes” para el ojo y hacen que sea difícil de leer sin problemas.

 

 

Destacando y Decorando

 

Resaltar o sombrear alrededor de un hipervínculo tiene sus ventajas – hay poco impacto en el estilo de texto, no se necesitan píxeles adicionales e incluso se pueden superponer enlaces si es necesario (aunque esto no es recomendable ya sea en motivos estéticos o de usabilidad). La desventaja de destacar es que complica la paleta de colores del diseño y, al igual que otras técnicas decorativas como negrita, reduce sus opciones si necesita enfatizar una frase en particular.

 

Además, hay algo sobre destacar que sólo se ve torpe. Esto podría ser la razón por la cual entre los sitios web nombrados en la categoría de Mejor Diseño Visual (Estética) Webby Awards 2015, ninguno de ellos eliminó los enlaces destacados.

 

Hover to Reveal / Enlaces bajo demanda

 

Si hay una cosa que nunca debes hacer, creemos, es dejar que los usuarios confíen en los hovers para determinar si un texto es clickable. Los enlaces que sólo se hacen aparentes cuando el usuario hacer hover sobre el texto  son ideales para los fanáticos del diseño minimalista y aquellos que quieren texto prístino a toda costa, pero que tiene un alto costo ya que  la gente trata los clics como moneda, no lo gastarán frivolamente.

 

 

Símbolos

 

Históricamente, los diseñadores de la interfaz de usuario incluso han experimentado agregando símbolos a una palabra o frase entre líneas de texto – una mano apuntando o una flecha que es la más común. Creemos que ésta  técnica no proporcionan puntos finales a los enlaces, lo que interfiere con el formato de la página, o el espacio de la pantalla siendo  confuso”.

 

Bueno para: diseñadores que aman archivos SVG

Malo para: usuarios con dispositivos de pantalla pequeña

 

Móvil primero

 

A medida que más diseñadores trabajan Mobile First, comienzan a surgir nuevas convenciones y mejores prácticas alrededor de hipervínculos, como cortar el número total de objetivos táctiles (incluidos los hipervínculos) y “padding” alrededor de cada enlace para que coincidan con el tamaño promedio de dígitos.

 

 

 

 

 

Visualización de vínculos – el Takeaway

Parece que el diseño del hipervínculo está en el limbo. Mientras que el hipervínculo subrayado azul es obviamente una reliquia de días más simples y parece anticuado, los usuarios sienten una conexión profundamente arraigada entre el subrayado azul y clickability; Cualquier otra cosa simplemente no se hace clic con tanta frecuencia como un subrayado azul.

 

Sin embargo, las alternativas para la visualización de enlaces, como la variación de color y la decoración, vienen con sus propios problemas: la legibilidad, la capacidad de clic y la comprensión contextual se ven afectadas por el diseño del hipervínculo. Cualquier diseñador que varíe de la convención subrayada azul probablemente querrá ejecutar una gran cantidad de pruebas divididas para ver si los usuarios entienden y aprecian la variación de la norma.

 

Al final, Mobile First,  decidirá el futuro del hipervínculo, ya que los diseñadores buscan cada vez más formas de hacer que los objetivos táctiles sean más accesibles. Los próximos 30 años podrían no ser tan predecibles para el hipervínculo como las últimas 3 décadas.