Detalles de usabilidad en los enlaces

El elemento más importante de la Web, y uno de los más descuidados por los webmasters, es el hiperenlace . La capacidad de las páginas web de enlazarse unas con otras constituye el verdadero motor de la red. Sin el hiperenlace, la comunicación y la interactividad se harían sustancialmente más complicadas, y la Web se convertiría en una mera biblioteca de documentos aislados y de difícil acceso.

La capacidad del hiperenlace ha creado una forma revolucionaria de lectura y organización de los documentos. Es el llamado hipertexto .

El hipertexto se diferencia del resto de modos de lectura en la linealidad. Mientras que los modos clásicos se componen de textos completamente lineales, con un orden, un principio y un fin establecidos, el hipertexto permite saltar entre diveros documentos sin la necesidad de seguir una línea uniforme.

Este tipo de navegación guarda cierta semejanza con la estructura de la mente humana, que está llena de información enlazada mediante conectores , a través de los cuales podemos ir saltando, en ocasiones involuntariamente, entre nuestros pensamientos.

Dada su importancia, el hipertexto y más concretamente los enlaces de una web, son elementos que a la hora de desarrollar un proyecto deben cuidarse mínimamente desde el punto de vista de la usabilidad . A continuación se describen una serie de detalles que se deben tener en cuenta en el momento de establecer enlaces en la web.

Enlaces subrayados y de color azul

La usabilidad , tanto en Internet como en otros entornos que requieren de un uso humano, se apoya en símbolos y convenciones aceptadas por todos. Por ejemplo, un cartel con una flecha situado en una estación de metro indica el camino que hay que seguir para llegar a una línea determinada, que identificamos con un número y un color. En este caso entran en juego el símbolo de la flecha que indica una forma de uso , y los colores y números que ayudan a identificar las distintas líneas de las que se compone la red de metro.

Lo mismo sucede en todos los entornos que necesitan ser usados de una u otra forma: vías de circulación, programas de software, electrodomésticos, comida precocinada, salas de cine, recintos deportivos, cajeros automáticos... y por supuesto Internet.

Una convención en Internet, aceptada por los usuarios, es que los enlaces se muestran visualmente subrayados y de color azul. El subrayado en el entorno web, no sólo implica un enlace a otro documento, sino que también indica la unidad de palabras que conforman ese enlace. De esta forma, en un texto con varios enlaces consecutivos se pueden distinguir rápidamente unos de otros ya que el subrayado unifica las palabras de cada uno de ellos, cosa que no sucedería de no usar subrayados.

El color azul de los enlaces es otra convención, quizás menos marcada que el subrayado, pero también conveniente para reforzar el concepto. En cualquier caso, sea cual sea el color del enlace, es importante que éste sea distinto según el estado.

Distintos colores según el estado del enlace

La mayoría de navegadores y la especificación CSS estándar nos ofrecen esta posibilidad y es conveniente aprovecharla ya que con un solo cambio de color se puede proporcionar una información interesante acerca de un enlace. El estado de un enlace en un navegador visual indica si éste es normal, si está activo, si se ha visitado, si tiene el foco del teclado, o si tiene el cursor del ratón encima.

Por defecto, y a no ser que se especifique lo contrario mediante CSS, un navegador muestra los enlaces normales en un color azul claro de código hexadecimal #0000ee, y los enlaces en su estado visited con un azul oscuro #551a8b.

Ésta es otra de las convenciones de la web. Los enlaces a páginas ya visitadas aparecen en un color distinto, normalmente un tono más oscuro al resto. Con ese cambio de color se identifica rápidamente que el enlace cuestión tiene algo de distinto respecto a los demás, que por convención significa que ya figura en el historial del navegador.

El resto de estados también se pueden modificar mediante CSS y esta capacidad se puede aprovechar, aunque siempre con la condición de que aporte alguna información sustancial al enlace. De lo contrario, esas modificaciones son innecesarias y pueden llegar a confundir.

Innovaciones en el uso de enlaces

Por ejemplo, el color de fondo ligeramente distinto en el estado hover marca la totalidad del enlace cuando se situa el cursos sobre él. Esto ayuda a identificar, junto con el subrayado, las palabras de las que se compone un enlace, pero de forma especial cuando éste se ha cortado debido a un salto de línea.

Recientemente se han hecho innovaciones en el uso de los enlaces, como los iconos que indican si un enlace es externo, o las capas semi transparentes que explican el contenido del enlace. Éstas son buenas ideas que proporcionan información útil al usuario aunque todavía no se han convertido en convenciones aceptadas por todos.

Mantener el tamaño del enlace al pasar el ratón

Son extremadamente comunes las páginas en las que, mediante CSS, los enlaces cambian de tamaño entre su estado normal y el estado hover , que se activa al colocar encima el cursor del ratón. En la mayoría de ocasiones se trata un cambio de grosor, de normal a negrita.

Este efecto, para mí bastante desagradable, desplaza hacia la derecha todo el texto que hay a continuación del enlace en el momento en el que se coloca el cursor sobre él. De esta forma la lectura se hace incómoda ya que visualmente hay que reubicar las palabras. Lo mismo ocurre al quitar el cursor. El enlace retoma su tamaño y el texto vuelve al sitio en el que estaba al principio produciendo el mismo efecto.

Un texto cargado de enlaces de este tipo puede hacerse un auténtico infierno ya que constantemente habría que estar haciendo pausas para buscar de nuevo el punto de lectura en el que nos encontrábamos.

Es conveniente para la lectura de un texto que éste tenga una maquetación fija, que no se mueva al producirse un evento, de forma que una persona pueda seguir cómodamente las líneas.

El mismo efecto incómodo produce un cambio en el tamaño de la tipografía, no sólo de letra pequeña a grande, sino también al revés. Existen páginas en las que los enlaces tienen una tipografía exageradamente grande y el estado hover los convertía en mucho más pequeños. Aparte de cambiar, como se ha explicado antes, la ubicación del texto o de otros elementos de la página, también se reduce el área activa del enlace, con lo cual un clic en alguna zona de ese enlace es posible que no funcione.

No usar JavaScript en la barra de estado

Otra de las convenciones aceptadas al respecto de los enlaces es que al colocar el cursor sobre uno de ellos aparece en la barra de estado del navegador la URL a la que apunta. Sustituir esta URL por una cadena de texto es realmente sencillo con JavaScript, y puede parecer que se trata de un detalle elegante, pero, en mi opinión, lo que hace es ocultar a los usuarios información útil acerca de un enlace.

Una práctica habitual es escribir en la barra de estado el mismo texto del enlace, con lo cual, no sólo se oculta información relevante, sino que además no se ofrece nada nuevo a cambio, que es lo único que podría justificar el hecho. En cualquier caso, y aunque se ofrezca información explicativa no es conveniente escribirla en la barra de estado puesto que, al tratarse de un lugar poco habitual, se corre el riesgo de que no sea percibida.

No usar enlaces mediante JavaScript

No suele haber ningún motivo especial para que los enlaces de una página estén programados mediante JavaScript, a no ser que haya una intención de dificultar y encorsetar las acciones del usuario. Esto sucede, por ejemplo, en el interior del correo web de Hotmail. Allí no hay forma de cargar el contenido de los correos en ventanas nuevas -pestañas en caso de Mozilla-, cosa facilitaría la navegación a la mayoría de usuarios.

Además este tipo de enlaces rompen algunas reglas dentro del esquema de navegación, como el cambio de color del estado visited , del que ya se ha hablado, o la capacidad de los buscadores araña para ir saltando entre las páginas.

Enlaces integrados en el texto

Desde el punto de vista de la redacción, es conveniente que los enlaces vayan integrados en el texto de forma que, si estos no estuvieran, siguiera teniendo sentido. De esta forma se consigue que los enlaces estén integrados de una manera más natural dentro del texto, y que tengan asociadas unas palabras que describan de forma más fiel el contenido del documento que van a mostrar.

Listas de enlaces

Por otro lado, cuando se trata de enlaces colocados en serie, en lugar de integrados dentro de un texto, como por ejemplo, un menú, es importante que estos formen parte de listas de elementos en HTML. De esta forma la lista de enlaces tiene un sentido semántico marcado.

Artículo original de: Joaquín Martí García

www.7bytes.net/nota.php?id=5

Escribe un comentario

Expresa tu opinión sobre este recurso y compártela con los demás.

ExcelenteBienPasableRegularMejor lo quitáis Valoración

Nombre (requerido)

Email (requerido, no será mostrado)

Web (opcional)

Título

Escribe aquí tu comentario

Validación

Por favor, introduce abajo el texto que se muestra en la imagen. De ese modo, evitamos los envíos automáticos masivos y podemos contestar antes a los mensajes legítimos como el tuyo.