Diseño de enlaces

Los enlaces o links son una de los elementos más importantes en las interacciones de los productos digitales, y, además, tienen una gran influencia en la experiencia de los usuarios, ya que gracias a ellos podemos navegar de una página a otra. Desafortunadamente son tan comunes que el diseño de enlaces a menudo se ignora en los proyectos de diseño de UX.

En HTML los enlaces se marcan con la etiqueta <a>, y el estilo estándar hace que el enlace sea azul y subrayado, por lo que los usuarios siempre entienden qué significa cuando una palabra o frase tiene ese estilo.

Además, para añadir el destino de un enlace utilizamos el atributo href, por lo que la sintaxis de un enlace es:

<a href=”URL”>Texto del enlace</a>

El problema de los enlaces subrayados es que la legibilidad se puede ver afectada si la parte subrayada se superpone al texto. Tendremos que tener en cuenta el borde inferior del subrayado y adecuar el estilo para que sea completamente legible. 

Tipos de enlaces

Podemos clasificar los tipos de diseño de enlaces principales de las páginas web en tres categorías diferentes:

• Enlaces internos. Son los que se utilizan para navegar por diferentes partes del producto digital, dentro del mismo dominio.
• Enlaces externos. Son enlaces a páginas web de distinto dominio, y generalmente enlazan información relevante en los textos y facilitan su comprensión.
• Enlace de posición. Se utilizan para ejecutar comandos, como por ejemplo la opción de “ver más”. Suelen ser acciones adicionales, como es ir de un lugar a otro dentro de la misma página.

También nos podemos encontrar, por ejemplo, con los enlaces de inicio. Estos enlaces son los que permiten volver a la página de inicio al clicar en el logotipo del sitio web. Aunque no haya ningún indicativo de que el logo es un enlace, es un estándar, por lo que los usuarios ya saben lo que va a ocurrir cuando pulsen sobre el logo.

Tampoco nos podemos olvidar de los CTA, que aunque suelen ser botones que nos llevan a realizar otra acción, no dejan de ser un enlace. Su finalidad siempre es conseguir una conversión, ya sea leer un artículo, comprar un producto o suscribirte a una newsletter. 

Estados de enlace

Los enlaces pueden tener distinto aspecto visual dependiendo de las acciones que se hayan realizado sobre él. Para modificar los diferentes estados de los enlaces tendremos que utilizar CSS, lo que nos permitirá personalizarlo. Los estados de los enlaces más comunes son:

• Normal. Es el estilo del enlace normal. Como ya hemos dicho, el estilo habitual de un enlace es en color azul y subrayado.
• Desplazamiento (hover). Es el estilo del enlace al pasar el cursor por encima. Normalmente se utiliza algún elemento visual para identificar un enlace cuando pasamos el cursor por encima, como por ejemplo que se resalte el texto o cambie de color.
• Visitado. Es el estilo del enlace cuando ya se ha visitado. La forma habitual de representar lo es con color morado y subrayado.  

Cómo diseñar mejores links

Los enlaces son una parte muy importante de las webs, por lo que como diseñadores de UX los tenemos que tener en cuenta y debemos adaptarlos los usuarios. Estos son algunos puntos que tenemos que tener en cuenta:

• El texto con enlace tiene que ser significativo, y debemos evitar textos genéricos como “haz clic aquí”. El texto de anclaje o anchor text es la parte visible del enlace, por lo que nos tenemos que asegurar de que sea descriptivo y representativo de los que los usuarios se van a encontrar cuando accedan a ese enlace. Además, actualmente el anchor text es uno de los factores que utiliza Google para medir la optimización de un sitio web.  
• Debemos asegurarnos de que todos los estados del enlace son accesibles. Por ejemplo, tenemos que tener en cuenta que si solo indicamos los estados con color los daltónicos no lo podrán interpretar, por lo que hay que buscar otras fórmulas.
• También nos tenemos que asegurar de que los usuarios pueden interpretar dónde hay un link. La mejor forma es haciendo uso de los estándares, ya que son decisiones de diseño que los usuarios ya entienden cuál es su significado. Además, el texto que describa el enlace debe de ser claro, simple y comprensible, además de explicativos por sí mismo. El usuarios tiene que saber donde va a dirigirse una vez que pulse en enlace 

Lo más importante a la hora de diseñar los links de nuestro producto es mantener la coherencia a lo largo de todo el diseño. Además, también nos tenemos que asegurar de que los enlaces son accesibles y fáciles de utilizar para los usuarios.