¿Por qué los links (Hiperenlaces o enlaces) van subrayados?, ¿cómo es la manera correcta de mostrar los enlaces en una web?

Links: Soy azul y subrayado, pero sin negrilla. - Css: Ya veremos....

Aunque no viví el inicio del Internet, sí llegué un poquito más allá. cuando las web eran leeeeeentas, los gif’s animados eran la locura. este último comentario me recuerda a Los Simpsons y el capítulo en que Homero crea una web:

Aún así, cuando tuve mi primer pc con internet ya existía el color… el video y otras cosas más.

¿Porqué los enlaces van subrayados?

Un día estábamos en clase de Programación 4 y el profesor nos preguntó: “¿Porqué los enlaces van subrayados?”, y uno que a veces cree tener la razón dice: “Es para diferenciar de un párrafo o de un título, bla bla bla…”. la pregunta seguía: “¿porqué los enlaces van subrayados?, si son para resaltarlos. ¿porqué no van en negrilla?”.

La explicación con la que llegó el profesor (Jimmy Campo) fue que el una vez estaba leyendo un libro de Netscape que vendieron en oferta en un negocio X de la ciudad de Popayán; en el cual hablaban de los enlaces, decía algo así:

“Cuando usted haga click en un enlace en su pantalla MONOCROMÁTICA…”

Con eso ya tenemos un punto de partida, pantalla monocromática, lo cual nos explicó que antes las pantallas eran a blanco y negro, lo cuál en navegadores de solo texto o pantallas blanco y negro (Pantallas gris claro y gris oscuro) la única forma de mostrar que una porción de texto es un enlace pues era SUBRAYÁNDOLO.

¿Cómo se deben mostrar los enlaces en una web?

Es conocido que con una instrucción en CSS podemos quitarle el subrayado a los enlaces, pero ¿realmente debemos quitarle esa propiedad?.

Personalmente no, aunque se puede hacer. Miremos Google: En la portada, la mayoría de enlaces tienen subrayado y en un color azul, el azul por defecto, ahora si no estuviera esas dos propiedades, ¿podrías ubicar cuál porción de texto es un enlace?. tal vez no…

Peor aún, si le quitáramos el ícono de “click” (La manito con un solo dedo)  no sabrías si es un enlace, la única forma sería comenzar a revisar enlace por enlace haciendo click, hasta que uno de ellos te abriera una web. algo ilógico.

Ahora imaginate el usuario con un enlace, con la manito pero sin el texto estar subrayado, lo más lógico es que comience a buscar en tooooodo el texto hasta que le salga una manito y hacerle click.

Esto tomaría más tiempo de lo común, lo que incrementa menos productividad o efectividad en tu sitio web, pero si desde el inicio dejamos marcado con un subrayado, el usuario a primera vista verá dónde está los enlaces y se ubicará.

El color es importante, lo ideal es que se mantenga el color azul en todo sitio web, pero por estética no siempre se puede mantener el azul. ¿qué tal un sitio web de fondo amarillo y enlaces azules?. es como para quemarse los ojos :P.

Entonces no es necesario, pero la idea es mantenerlo.

Los enlaces ya visitados la idea es que sean morados, como viene por defecto el navegador, para saber qué tanto se ha visitado en una web y qué enlaces me faltan por visitar, no sé si han notado que cuando uno abre Google y busca algo, algunos resultados ya están en morado, lo que nos indica que ya ha sido visitado y no perderé tiempo en visitarlo.

Casos en que ya se sabe que es un enlace y recomendación para menús

En algunos casos, por ejemplo en Facebook, la mayoría de enlaces no llevan subrayado, la razón es que el usuario ya sabe que es un enlace o que esa porción de texto es una acción (ejemplo: “Me Gusta”, “Comentar”, “Titulares”, etc…)  pero aún así la mayoría de los enlaces que no están subrayados están de color azul y se diferencian de los demás.

Los menús verticales y las listas por recomendación no deben ir con subrayado, por que dificulta la visualización de estos.

Hay dos estilos que se maneja mucho para enlaces que no tienen subrayado e indicarle al usuario que es un enlace:

  • Que el enlace apenas se pase el ratón por encima, haga que se subraye y cuando el ratón no esté encima, vuelta a su estado natural y no esté subrayado.
  • Que el enlace, apenas se pase por encima, este cambie de color de fondo e indique que ahí pasa algo, acompañado de el ícono de la manito el usuario entenderá que es un enlace.

Espero que les sirva y mejoren la estética, usabilidad y accesibilidad de sus proyectos en relación a los enlaces.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , , , , , , , , , , , , ,
Publicado en accesibilidad, contenido, css, enlaces, General, navegadores, usabilidad

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: