8 secretos del enlace perfecto
El vínculo perfecto es simple, honesto y utilizable. He aquí cómo diseñarlo.
Hace unas semanas apareció un rostro frustrado a la vuelta de la esquina de mi escritorio. «Lo siento amigo, no imprimes nada, ¿verdad?»
«Bueno, sí, a veces», dije.
Tengo un escritorio dedicado en un espacio de trabajo conjunto, compartimos una impresora, y era esta impresora compartida la que frustraba la cara en cuestión: “He intentado durante horas imprimir esta maldita cosa, estoy absolutamente desesperado, no puedo encontrar el conductor adecuado en ninguna parte … «
«Creo que simplemente inicie sesión en el tablero y lo descargue», le dije. «Creo que eso es lo que hice, espera, déjame intentar», dije, encendiendo el tablero de la oficina. «Ve a las instrucciones de la impresora …»
«Sí, hice eso».
«… y luego haces clic en …»
«¡Oh Dios!» se lamentó. «Es un vínculo, ¿no?»
Estas son 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 «Descargar controlador» era un vínculo.
Mientras regresaba sigilosamente a su espacio de trabajo, parecía descortés preguntar si es daltónico o no, pero yo apostaría mucho dinero por ello; si es así, ese vínculo probablemente aparece en gris medio, mezclándose con el resto del texto.
Los enlaces son posiblemente el elemento más importante de cualquier documento. Sin ellos, la web es solo una colección de archivos almacenados en Internet. El vínculo perfecto es simple, honesto y utilizable. He aquí cómo diseñarlo.
1. Un buen vínculo no es un botón
… Y un buen botón no es un enlace.
Con frecuencia no entendemos bien el papel de los enlaces en la web. Un vínculo 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 ninguna acción. El enlace del controlador de impresora anterior no debería ser un enlace, debería ser un botón; los botones no enlazan datos, realizan una acción.
Es completamente cierto que la gran mayoría de las GUI 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 piezas de datos.
Los botones realizan acciones, los enlaces forman relaciones contextuales.
2. Un buen vínculo aclara su propósito
El problema de cómo se debe usar un enlace es fundamental para el hecho de que el elemento de anclaje es lo suficientemente flexible como para usarse de varias maneras sin romperse. A mailto: El enlace, por ejemplo, no debería ser un enlace (es una acción, no una conexión entre datos) que haya escapado a la obsolescencia por ser realmente muy útil.
Tenemos toda una jerarquía de títulos, incluidos los relativamente inútiles
y
—Pero tenemos un solo elemento de anclaje. En un mundo ideal, tendríamos múltiples elementos de anclaje para dar un significado semántico a los enlaces, tal vez un
Por supuesto, podemos aplicar diferentes estilos a diferentes clases de anclaje usando CSS. Tiene sentido que para aclarar el propósito, los enlaces internos deben tener un estilo acorde con la marca del sitio, pero que los enlaces externos deben ser distintos de alguna manera.
En Pensamientos de Tim Berners-Lee de 1997 sobre la naturaleza de la interfaz de usuario, afirma que:
la interfaz con un espacio universal debe tener una cierta consistencia universal
Ciertamente, la comprensión de los usuarios sobre cómo usar la web se ha desarrollado desde que se escribieron esas palabras, pero el punto esencial es cierto; los usuarios prefieren una interfaz de usuario que refleje su experiencia más amplia. Si bien existe un argumento para decir que los vínculos internos deben estar en consonancia con la marca de un sitio para aclarar a qué se vinculan, existe un argumento igualmente válido de que adherirse a los estilos predeterminados (fuentes del sistema azules, subrayadas) para los vínculos externos, no solo simplifica una interfaz, sino que también aclara que los datos a los que se vinculan están fuera del dominio del sitio actual.
Si la inconsistencia 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 los enlaces externos tienen el mismo estilo, en aras de la usabilidad, es el enfoque de fuente del sistema azul, subrayado, familiar el que mejor sirve al usuario.
3. Se visita un buen enlace
Gracias a las metáforas al estilo de William Gibson, tenemos una tendencia a conceptualizar la navegación por la web como un viaje a diferentes lugares. Los enlaces se consideran una puerta de entrada a algunosdónde de lo contrario, cuando de hecho son una puerta de entrada a algunosCuándo demás. Eche un vistazo al historial de su navegador. No es un mapa de ubicaciones, 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 más sencillo del diseño de interfaz de usuario
Tan importantes como los enlaces a datos futuros, son los enlaces a datos pasados: enlaces visitados. Los enlaces visitados son importantes porque se trata de enlaces visitados que contextualizan nuestro consumo de datos y resaltan (por su eliminación) aquellos datos que aún tenemos que consumir.
Los enlaces visitados pueden ser un poco burdos; idealmente, un enlace se compararía con el historial del navegador de un usuario para determinar no solo si el documento ha sido visitado, sino si el documento se ha actualizado desde la última visita del usuario. A pesar de esto, los enlaces visitados son el fruto fácil del diseño de la interfaz de usuario (fácilmente diseñado como una versión ligeramente desaturada y menos urgente de un enlace activo) y brindan información invaluable al usuario sobre su experiencia.
4a. Un buen vínculo 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 predeterminado de un hipervínculo en un navegador es azul. Los hipervínculos parecen haberse establecido en azul 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 un comportamiento aprendido o un color inherentemente más utilizable, se hace clic en los enlaces azules más.
(Debido a esta asociación profunda, ningún texto debería ser azul a menos que sea un enlace).
4b. Un buen vínculo rara vez es azul
Azul es el color más popular en todos los ámbitos. El azul también es el color más común en el diseño de la interfaz de usuario, especialmente entre los sitios de tecnología y noticias.
La omnipresencia del azul plantea un desafío para los diseñadores: si el color principal de la marca es el azul, ¿deberían los enlaces en el documento también ser azules, o el uso del azul en el diseño general ofusca la ubicación de los enlaces?
Siempre que diseñan con mucho azul, he descubierto 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 avanzar hacia el extremo azul del espectro: los rojos deben inclinarse 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, subrayar refuerza el indicador de color; si una persona es daltónica, aún puede ver el subrayado.
El argumento en contra del subrayado es que interrumpe el flujo del texto. Google eliminó los enlaces subrayados años atrás sin ningún inconveniente aparente, al menos no lo suficiente como para hacerles revertir la decisión. Pero los enlaces de Google son azules, el más enlazado de todos los colores de enlace y menos problemático para los daltónicos.
Si subrayar el texto es realmente demasiado perturbador, hay dos alternativas simples: puede diseñar un pseudo-subrayado aplicando un guión o puntos borde inferior al enlace que será visualmente menos impactante, o puede resaltar de una manera diferente, como aplicar un color de fondo al enlace.
(Al igual que para evitar el texto 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 tomó una mala decisión de diseño).
6. Un buen vínculo se destaca
Los enlaces deben ser identificables de un vistazo. La interacción es inconsistente en todos los dispositivos, y confiar en limpiar 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 seguimiento ocular sugiere que los usuarios escanean los enlaces, justo después de los títulos, para identificar las partes de la página que les resultan más interesantes. 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 enlaces para identificar contenido interesante.
Cuando se tratan como viñetas, los enlaces describen no solo los datos a los que enlazan, sino también el contenido en el que se encuentran. No vincularía a información sobre perfumes de un párrafo sobre bicicletas de montaña, por lo que es de sentido común que si hay un enlace a bicicletas de montaña, entonces el párrafo en el que reside también será sobre 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 inconexa. Sin embargo, nunca emplee el enfoque de «más información …».
Realizar una búsqueda en Google para «haga clic aquí» arroja 5,090,000,000 resultados. Una búsqueda similar de «leer más» arroja 17.090.000.000 resultados. Que desperdicio.
Más allá de las evidentes fallas de SEO de «leer más», «saber más», «hacer clic aquí», etc., los enlaces mal escritos dan la impresión de que el contenido actual está abdicando de su autoridad. De hecho, está diciendo: «esta información es superficial, hay mejor información en otros lugares».
Si un enlace está lo suficientemente bien diseñado, queda claro de un vistazo que es un enlace, y las instrucciones de estilo «haga clic aquí» son superfluas.
8. Un buen enlace facilita una buena experiencia de usuario
Es fundamental que los enlaces se puedan activar fácilmente, independientemente del dispositivo de envío; 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. Eso significa que los enlaces internos se abren en la misma ventana y los enlaces externos se abren 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. Siempre que haga esta elección, pregúntese si es probable que el usuario necesite el botón Atrás. Si es así, use una nueva pestaña para que pueda cerrarse fácilmente y devolver 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 está enlazando. Si está vinculando a contenido que es NSFW, o detrás de un firewall, considere usar el :antes de o :después pseudo elementos para insertar un icono junto al enlace, advirtiendo al usuario de lo que viene.
Un enlace siempre debe cumplir su promesa. Eso significa que cuando un usuario hace clic, toca, selecciona o activa un enlace, obtiene exactamente lo que estaban esperando. Y eso incluye garantizar que los enlaces nunca se rompan.
