Buenas prácticas para el diseño de links

Supongo que todos somos conscientes de lo que es un link y de su importancia, pero muchas veces de lo que no somos consientes es de que un buen tratamiento de los mismos a la hora de pensar su diseño, puede traducirse en un ratio de conversión mayor (es decir en dinero), de un menor índice de abandono de la página o de que un usuario este más tiempo en nuestro sitio.

Creo recordar que Jakob Nielsen ya había dado algunas directrices en su alertbox, no obstante aquí no vamos a ver nada que no sepamos pero bien está recordarlo porque hay veces que aunque conocemos esto, no lo aplicamos.

Así que veamos estas buenas prácticas o guidelines o consejos (o como lo queráis llamar) para que nuestros links gocen de un diseño excelente y sobre todo para que el usuario los encuentre más perceptibles o le resulte más complicando pasar por alto un link que tenga cierta importancia:

El color de los links tiene que ser usado UNICAMENTE para links

El color que uses con los links lo tienes que usar ÚNICAMENTE con los links. Para tu texto usa otro de manera que tus links y tu texto quede rápidamente diferenciado. Esto no significa que el texto tenga que tener únicamente un color es decir el texto de tu página puede tener varios colores diferentes (el color del link puede ser verde y el color de un texto que advierta de algo puede ser naranja o rojo y el resto del texto negro) y vuelvo a insistir, el color de un link tiene que ser único.

Usa colores fuertes de fácil contraste y con algún tipo de subrayado

Cuanto más destaque un link como un elemento clicable mejor por eso el color de link debe de contrastar con el del resto del contenido de la web, además el subrayado es totalmente necesario si el color elegido para los links es verde o rojo, ya que a las personas con problemas en la vista (como el daltonismo) les ayudaran enormemente.

Uso de texto en negrita, cursivas o subrayados

Tienes que conseguir que el usuario rápidamente sepa que son los links, para esto, puedes usar negritas, cursivas o subrayados de manera que nuestros links destaquen rápidamente de nuestros textos.
Por cierto si te decides por los subrayados (el estándar) procura no subrayar nada que no sean links, ya que si esto ocurre el subrayado de ambos elementos pierde su razón de ser.

Uso de distintas tonalidades de un mismo color para los links visitados

Como ya hemos visto, el color de los links va a ser único, aunque cuando se haya visitado un link, tenemos que indicárselo a nuestro usuario.
Para esto, seguiremos usando el mismo color, pero un matiz diferente. Si nosotros usamos un color verde para nuestros links y un naranja para los links que ya hemos pulsado al usuario le va a resultar costoso establecer una relación entre ambos y posiblemente no lo consiga. Por eso y como se ve en la imagen el color de link tiene que ser vivo, brillante y saturado, mientras que el link visitado, tiene que dar el aspecto de usado.

ejemplo de link no visitado y link visitado

Uso de efectos hover simples

Cuando más simple se hace todo mejor, que ya tendremos tiempo de complicarlo, así que los efectos hover, hagámoslos simples, con subrayar el link (si no lo tienes ya subrayado claro) o des-subrayarlo o cambiar el color del fondo o cambiar el color de la fuente es más que suficiente.

Usa el title de link para darle más información al usuario de lo que va a hacer

El title de los links hay que usarlo SIEMPRE (además el SEO de tu empresa estará encantado con esto). Con él, le puedes dar al usuario más información que con el propio texto del link.

Establece el tamaño de la fuente en función de la importancia de los links

Utiliza tamaños de fuente grandes para links importantes y tamaños más pequeños para los links que no todo el mundo usa. Por ejemplo los links de tu menú pueden tener un tamaño mientras que los del pie de tu página deberían ser más pequeños.

Anuncio publicitario