fbpx Skip to content

8 secretos del eslabón perfecto

El enlace perfecto es simple, honesto y utilizable. Así es como se diseña.

Hace unas semanas apareció una cara de frustración a la vuelta de la esquina de mi escritorio. “Lo siento amigo, no imprimes, ¿verdad?”

“Bueno, sí, a veces”, dije.

Tengo un escritorio dedicado en un espacio de trabajo conjunto, compartimos una impresora, y fue esta impresora compartida la que frustró la cara en cuestión: “Llevo horas intentando que se publique esta maldita cosa, estoy absolutamente desesperado, no puedo encontrar al conductor adecuado en ningún sitio….”

“Creo que sólo tienes que iniciar sesión en el tablero de instrumentos y descargarlo”, le dije. “Creo que eso es lo que hice, espera, déjame intentarlo”, dije, encendiendo el tablero de la oficina. “Vas a las instrucciones de la impresora…”

“Sí, yo hice eso.”

“…y luego haces clic…”

“¡Oh, Dios!”, se lamentaba. “Es un vínculo, ¿no?”

Aquí están las instrucciones con las que había estado luchando:

Una persona inteligente y profesional había pasado dos horas buscando el controlador adecuado para una impresora Canon, sin darse cuenta de que la instrucción “Download Driver” era un enlace.

Mientras regresaba a su espacio de trabajo, me pareció descortés preguntar si es daltónico o no, pero yo apostaría mucho dinero por ello; si lo es, ese vínculo probablemente parezca grisáceo, mezclándose con el resto del texto.

Se puede decir que los enlaces son el elemento más importante de cualquier documento. Sin ellos, la web es sólo una colección de archivos almacenados en Internet. El enlace perfecto es simple, honesto y utilizable. Así es como se diseña.

1. Un buen enlace no es un botón

…y un buen botón no es un vínculo.

Frecuentemente malinterpretamos el papel de los enlaces en la web. Un enlace describe la relación entre dos datos, proporcionando contexto y, a menudo, proporcionando significado.

Los botones realizan acciones, los enlaces forman relaciones contextuales

Un enlace no realiza una acción. El enlace del controlador de impresora de arriba no debe ser un enlace, debe ser un botón; los botones no enlazan datos, realizan una acción.

Es totalmente cierto que la gran mayoría de las GUIs le permiten tocar o hacer clic en un enlace para acceder a los datos vinculados, pero eso es simplemente un atajo. La función principal del enlace es establecer una conexión entre los datos.

Los botones realizan acciones, los enlaces forman relaciones contextuales.

2. Un buen enlace aclara su propósito

El hecho de que el elemento de anclaje sea lo suficientemente flexible como para ser utilizado de varias maneras sin romperse es fundamental para el problema de cómo se debe utilizar un eslabón. Un mailto: link por ejemplo no debería ser un link (es una acción, no una conexión entre pedazos de datos) que ha escapado a la deprecación por ser realmente muy útil.

Tenemos toda una jerarquía de encabezados -incluyendo los relativamente inútiles y

– pero tenemos un único elemento de anclaje. En un mundo ideal tendríamos múltiples elementos de anclaje para dar un significado semántico a los enlaces, quizás un elemento para enlaces externos (datos sobre un dominio diferente) y un elemento para enlaces internos (datos sobre el mismo dominio). En la actualidad, lo más cercano que podemos llegar a dar significado semántico a los enlaces es el uso de rutas absolutas para los enlaces externos y rutas relativas para los enlaces internos.

Por supuesto, podemos aplicar diferentes estilos a diferentes clases de anclaje utilizando CSS. Tiene sentido que, para aclarar el propósito, los enlaces internos se diseñen de acuerdo con la marca del sitio, pero que los enlaces externos sean distintos de alguna manera.

En los pensamientos de Tim Berners-Lee de 1997 sobre la naturaleza de la interfaz de usuario, afirma que:

la interfaz a un espacio universal debe tener una cierta consistencia universal

Ciertamente, la comprensión de los usuarios de cómo usar la web se ha desarrollado desde que se escribieron esas palabras, pero lo esencial es cierto: los usuarios prefieren una interfaz de usuario que refleje su experiencia más amplia. Mientras que hay un argumento para decir que los enlaces internos deben estar en consonancia con la marca de un sitio para aclarar con qué se enlaza, hay un argumento igualmente válido de que adherirse a los estilos por defecto -azul, subrayado, fuentes del sistema- para los enlaces externos, no sólo simplifica una interfaz, sino que aclara que los datos a los que se enlaza están fuera del dominio del sitio actual.

La cuestión de si la incoherencia de los enlaces causa más confusión de la que alivia debe abordarse caso por caso. Pero en los casos en los que los enlaces internos y externos tienen el mismo estilo, en interés de la usabilidad, lo que mejor sirve al usuario es el conocido sistema de fuentes azul y subrayado.

3. Se visita un buen enlace

Gracias a las metáforas de William Gibson, tenemos una tendencia a conceptualizar la navegación por Internet como un viaje a diferentes lugares. Los enlaces son vistos como una puerta de enlace a algunos donde , cuando en realidad son una puerta de enlace a otros cuando . Echa un vistazo al historial de tu navegador. No es un mapa de lugares, sino un registro cronológico de eventos. Los enlaces son puntos en la línea de tiempo de nuestro consumo de datos.

los enlaces visitados son el fruto colgante del diseño de la interfaz de usuario

Tan importante como los enlaces a datos futuros, son los enlaces a datos pasados: enlaces visitados. Los enlaces visitados son importantes porque son enlaces visitados los que contextualizan nuestro consumo de datos y destacan (por su eliminación) los datos que aún no hemos consumido.

Los enlaces visitados pueden ser un poco toscos; idealmente, un enlace se compararía con el historial del navegador de un usuario para determinar no sólo si el documento ha sido visitado, sino si el documento ha sido actualizado desde la última visita del usuario. A pesar de esto, los enlaces visitados son el fruto del diseño de la interfaz de usuario -fácilmente estilizados como una versión ligeramente desaturada y menos urgente de un enlace activo- y proporcionan información invaluable al usuario sobre su experiencia.

4a. Un buen enlace es siempre azul

El principio formalizado por la psicología como el Mero Efecto de Exposición nos enseña que cuanto más familiar es algo, más atractivo es.

El color por defecto de un hipervínculo en un navegador es el azul. Los hipervínculos parecen haber sido establecidos como azules por pura casualidad (presumiblemente la preferencia personal de alguien en algún lugar). La decisión fortuita beneficia la usabilidad porque casi nadie tiene una deficiencia de visión azul; a diferencia del rojo y el verde, casi todos podemos ver el azul.

Ya sea que se trate de un comportamiento aprendido o de un color inherentemente más utilizable, los enlaces azules se hacen más clic.

(Debido a esta profunda asociación, ningún texto debe ser azul a menos que sea un enlace.)

4b. Un buen enlace rara vez es azul

El azul es el color más popular en todo el tablero. El azul es también el color más común en el diseño de interfaces de usuario, especialmente entre los sitios de tecnología y noticias.

La omnipresencia del azul plantea un reto para los diseñadores: si el color primario de la marca es el azul, ¿deberían los enlaces en el documento ser también azules, o el uso del azul en el diseño general ofusca la ubicación de los enlaces?

Siempre que diseño con mucho azul, he encontrado que los usuarios prefieren colores complementarios para los enlaces; naranja, o verde por ejemplo. Sin embargo, con la eficacia probada de los enlaces azules, vale la pena bordear hacia el extremo azul del espectro: los rojos deben bordear hacia el púrpura, los verdes hacia el turquesa.

5. Un buen enlace está subrayado

El argumento para subrayar es que, como en el ejemplo del controlador de impresora, el subrayado refuerza el indicador de color; si una persona es daltónica, todavía puede ver el subrayado.

El argumento en contra de subrayar es que interrumpe el flujo de texto. Google eliminó los enlaces subrayados hace años sin ningún inconveniente aparente, al menos no lo suficiente como para hacer que revirtieran la decisión. Pero entonces los enlaces de Google son azules, el color de enlace más distintivo de todos, y menos problemático para los daltónicos.

Si el subrayado de texto es realmente demasiado perturbador, existen dos alternativas simples: puede darle estilo a un pseudo subrayado aplicando un borde inferior punteado o punteado al enlace, que tendrá un impacto visual menor, o puede resaltarlo de una manera diferente, como aplicando un color de fondo al enlace.

(Al igual que con la evitación del texto en azul, nunca subraye el texto que no es un enlace; los usuarios concluirán que su enlace está roto mucho antes de darse cuenta de que ha tomado una mala decisión de diseño).

6. Un buen enlace destaca

Los enlaces deben ser identificables de un vistazo. La interacción es inconsistente entre los dispositivos, y depender de la limpieza de la página para descubrir enlaces es una receta para la frustración del usuario.

Los enlaces deben ser identificables de un vistazo

La investigación de Eye-tracking sugiere que los usuarios escanean a través de enlaces, justo después de los títulos, para identificar las partes de la página que más les interesan. Esta capacidad es aún más importante para los usuarios de lectores de pantalla, que no pueden escanear visualmente una página en busca de contenido relevante, pero pueden (y lo hacen) escanear a través de enlaces para identificar contenido interesante.

Cuando se tratan como viñetas, los enlaces describen no sólo los datos a los que enlazan, sino también el contenido en el que se encuentran. No se puede enlazar con la información sobre perfumes de un párrafo sobre bicicletas de montaña, así que es de sentido común que si hay un vínculo con las bicicletas de montaña, entonces el párrafo en el que reside también será sobre las bicicletas de montaña.

7. Un buen enlace utiliza una buena microcopia

Si es posible, mantenga los enlaces al final de las oraciones o al final de los bloques de texto; esto limita la interrupción del proceso de pensamiento y crea una experiencia menos desarticulada. Sin embargo, nunca emplee el enfoque de “más información…”.

Al realizar una búsqueda en Google para “haga clic aquí” se obtienen 5.090.000.000 de resultados. Una búsqueda similar de “leer más” arroja 17.090.000.000 de resultados. Qué desperdicio.

Más allá de los evidentes fallos de SEO de “read more”, “find out more”, “click here”, etc., los enlaces mal escritos dan la impresión de que el contenido actual está abdicando de su autoridad. En efecto, estás diciendo: “Esta información es superficial, hay mejor información en otra parte”.

Si un enlace está diseñado lo suficientemente bien, es claro de un vistazo que se trata de un enlace, y las instrucciones de estilo “haga clic aquí” son superfluas.

8. Un buen enlace facilita una buena UX

Es esencial que los enlaces puedan activarse fácilmente, independientemente del dispositivo de entrega; los sitios móviles necesitan áreas de impacto lo suficientemente grandes, los lectores de voz necesitan una microcopia distinta.

Un enlace siempre debe cumplir su promesa

Los enlaces deben seguir el enfoque razonado de la mayoría de los casos de uso. Esto significa que los enlaces internos se abren en la misma ventana y los externos en una nueva pestaña. Hay excepciones, un enlace a una política de privacidad, por ejemplo, es un enlace interno, pero debe abrirse en una nueva pestaña. Cuando haga esta elección, pregúntese si es probable que el usuario necesite el botón Atrás. Si es así, utilice una nueva pestaña para que pueda cerrarse fácilmente volviendo al usuario a la información anterior.

Ningún enlace debería sorprender a un usuario, y eso incluye el tipo de contenido al que se está enlazando. Si está enlazando a contenido que es NSFW, o detrás de un cortafuegos, considere usar los pseudoelementos :antes o :después para insertar un icono junto al enlace, advirtiendo al usuario de lo que se avecina.

Un vínculo siempre debe cumplir su promesa. Esto significa que cuando un usuario hace clic, toca, selecciona o activa un enlace, obtiene exactamente lo que esperaba. Y eso incluye asegurarse de que los enlaces nunca, nunca se rompan.