El diseño de enlaces en una página web

Uno de los elementos centrales en el  diseño web son los enlaces. Este recurso, esencial para el funcionamiento de la navegación web y el posicionamiento web, ha ido viendo modificado su aspecto a lo largo de los años.

Aunque las tendencias del diseño web reinventan el apartado visual de los portales año tras año, existen una serie de requisitos que se han mantenido más o menos estables con el paso del tiempo para que un enlace sea reconocido y funcione como tal.

Vamos a analizar qué factores son esenciales a la hora de definir el diseño de enlaces de una página web.

El enlace clásico: azul y subrayado

En los inicios de Internet y con la aparición de las primeras páginas web, el diseño de estas últimas no permitía demasiadas florituras por las limitaciones técnicas de entonces. En aquel momento, se estandarizó un formato visual para los enlaces que aún en la actualidad se sigue utilizando en muchos casos.

Dentro de un bloque de texto, se optó por distinguir a los enlaces del resto del contenido cambiando el color de los mismos a azul y subrayandoel texto ancla.

Este característico diseño continúa presente en muchos portales y es un recurso fácil a la hora de definir el aspecto de un enlace para que sea reconocido por casi todo el mundo.

Una evolución de este estándar es utilizar el subrayado y un color diferente al resto del texto, no necesariamente el azul. De este modo, podemos ser más coherentes con la línea visual del diseño web planteado.

Debe ser un elemento reconocible como tal

Para que un enlace cumpla su función, facilitar la navegación por los diferentes contenidos de una web, su diseño debe permitir reconocer el elemento en cuestión como enlace.

Por ejemplo, de nada sirve insertar un enlace en un bloque de texto si el usuario no podrá distinguirlo del resto de palabras que conforman el contenido.

Como ya hemos visto en el caso del enlace clásico y como veremos a continuación con algunos recursos que nos permitirán destacar los links, la clave para una buena experiencia de usuario es que el enlace sea identificado por los usuarios como tal.

Contraste

Color, tipografía, iconografía… Existen varias formas de hacer que un enlace resalte por encima del contenido colindante. De este modo, el usuario podrá percibir de forma intuitiva que está ante un elemento diferente al resto.

Texto del enlace

Aunque en algunos casos el texto del enlace no sea dominio del diseño web, el caso es que también tiene incidencia a la hora de identificarlos. Y no sólo las palabras que conforman el link, sino que la frase que lo preceda o lo siga también ayudará a distinguirlo. Por ejemplo, con el texto “Podéis consultar más información al respeto en Wikipedia” estamos dando una pista muy clara al usuario de que la última palabra contiene un enlace.

Cursor

Pese a que con la aparición y masificación del uso de los smartphones este indicador no es tan habitual, al navegar por una web con un ordenador y pasar con el cursor por encima de un enlace, este cambiará de icono. La mayoría de navegadores web implementan por defecto esta funcionalidad, que también podemos modificar mediante CSS.

Atributo Title

En línea con el punto anterior, en los navegadores web de escritorio, al hacer “hover” por encima de un enlace con el ratón, podremos visualizar el contenido del atributo “Title” del mismo.

Micro interacciones y animaciones

Podemos dotar a los enlaces de una web de pequeñas animaciones que ayuden al usuario a identificarlos como elementos de interacción, como por ejemplo pequeños movimientos, bucles, cambios de color, etc.

Refuerzo con botones e iconografía

Tal como comentábamos en el punto “Contraste”, podemos distinguir los enlaces de los demás elementos de nuestro diseño web para hacerlos reconocibles por los internautas.

Uno de los casos más habituales es utilizar botones o pastillas para envolver los enlaces. Y también podemos emplear iconografía, habitualmente flechas y similares, para reforzar su peso.

Posición que ocupan

Con el paso de los años, se han estandarizado muchos aspectos del diseño web. Algunos de ellos tienen influencia directa en los enlaces. Por ejemplo, si un texto forma parte de un menú de navegación, intuimos que se trata de un link, aunque no utilicemos ninguno de los recursos arriba mencionados. O si mostramos un listado en el footer. Dependiendo de la posición que ocupe un enlace, el usuario llegará a percibirlo como tal.

Estos son solo algunos de los elementos y recursos que nos ayudan a definir el aspecto visual de los enlaces. En cada proyecto que realizamos en La Teva Web revisamos al detalle el diseño de los enlaces y de todos los elementos que conforman el diseño web para crear portales adaptados a los requisitos de nuestros clientes.