Uso
Cuándo usar
- Para navegar a un nuevo destino, ya sea interno o externo.
- Para saltar o desplazarse a un nuevo lugar en la página (anclas).
- Enlaces a correos electrónicos o números telefónicos (pueden iniciar una aplicación).
Cuándo no usar
- Para realizar una acción, como enviar un formulario, guardar o editar, utilizar el componente Botón.
Tipos
Cada tipo de enlace sugiere una acción concreta y guía a la persona usuaria hacia adelante en la navegación del sitio web.
Enlace predeterminado
Se utiliza para navegar dentro de una misma página como ancla, o para correos electrónicos y direcciones.
Enlace de acceso
Se utiliza para ver más información de una sección, redirigiéndote a una nueva página del mismo sitio web. Por ejemplo: "Ver más noticias".
Enlace de descarga
Se utiliza para indicar la descarga de un recurso. El nombre del enlace debe ser descriptivo, para darle contexto a la persona usuaria de lo que está descargando, y evitar etiquetado genérico como "Descargar archivo".
Enlace externo
Se utiliza para enlazar contenido a un sitio web externo, por fuera del dominio actual. Indica la redirección en una nueva pestaña, para no comprometer la navegación actual de la persona usuaria.
Tamaños
Hay dos tamaños de enlaces: grande y chico, tanto para dispositivos desktop, tablet y mobile.
Disposición
Enlaces independientes (Standalone links)
Se utilizan solos o después de un bloque de contenido. Se puede usar cualquier tipo de enlace (predeterminado, de acceso, externo o de descarga), para brindar mayor contexto sobre la acción a la que hace referencia, o para redirigir a otro punto por dentro o fuera del sitio web.
Enlaces de anclaje (Anchor links)
Los enlaces predeterminados se pueden utilizar como anclas al contenido en el cuerpo de una página. Esta disposición solo es útil si el contenido de la página es extenso ya que facilita el scroll directo a las secciones de información.
Al trabajar con anclas, es recomendable que los enlaces aparezcan al comienzo del cuerpo del contenido. Deben estar jerarquizados y organizados dentro de una lista de enlaces, bajo un título claro, como "Contenido en esta página", para que las personas usuarias identifiquen su función.
Enlaces en bloques de texto (Inline links)
Se utilizan para enlazar un concepto, frase o palabras dentro de un bloque de texto.
Uso del componente en Figma
Para los diseñadores en Figma, no existe un componente correspondiente al Enlace dentro de un bloque de texto, pero es posible replicar el estilo del componente siguiendo los siguientes pasos:
- Seleccioná el concepto, palabra o frase que quieras que sea un enlace en un bloque de texto.
- Aplicá el color text-link que se encuentra en las variables de color.
- Cambiá el estilo del texto por la variante correspondiente a "Enlace".
- Si necesitas reforzar la acción del enlace con un ícono, especificá en la entrega al equipo de desarrollo y maquetación si se trata de un enlace externo, de acceso o de descarga.
Ejemplos de uso
El color no debe ser el único medio visual para transmitir información, indicar una acción o responder a una interacción
Utilizar la variante de texto “Enlace” para diferenciar el componente del resto del texto
Contenido
El texto de los enlaces debe estar cuidadosamente pensado, para guiar a las personas usuarias de manera clara y eficiente hacia el contenido o la acción que buscan. Se recomienda que los enlaces sean:
- Específicos: describen con precisión lo que se encontrará al clickearlos, evitando textos ambiguos y genéricos.
- Sustanciales: las personas usuarias escanean los contenido de texto, y focalizan su atención en los elementos que destacan por tener un estilo diferente. En la mayoría de casos, se leen solo los enlaces y no el texto circundante, por lo que el texto del enlace debe entenderse de forma independiente y aislada, aún cuando haya información alrededor que sirva de contexto.
- Sinceros: el texto de los enlaces informa claramente sobre lo que sucederá al hacer click, y cumple lo más rápido posible con la acción para no perder la confianza de la persona usuaria.
- Concisos: redactar el texto de los enlaces de forma clara y concisa, priorizando que las primeras palabras transmitan el propósito del enlace rápida y claramente.
- Distinguibles: un cuerpo de texto puede tener varios enlaces en una misma oración, siempre que sean relevantes y sumen al contexto. Sobrecargar un párrafo u oración con diferentes enlaces, sin un objetivo claro o con fines comerciales, aumenta la carga cognitiva y empeora la experiencia de la persona usuaria.
Ejemplos de uso
El texto del enlace es demasiado largo y aumenta la carga cognitiva de las personas usuarias, dificultando el escaneo de los contenidos clave de la página.
Enlazar sobre una parte representativa del texto, que sea suficiente para entender la acción o redirección a la que hace referencia.
Los enlaces agregan carga cognitiva y afectan la lectura. No utilizar demasiados enlaces dentro de un párrafo.
Optimizar el uso de enlaces según lo que aportan al contexto. Antes de dividir y redirigir a la persona usuaria desde diferentes puntos, enlazar la información afín.
Sobre los textos de enlaces genéricos
A la hora de redactar el texto de un enlace, se desaconsejan frases genéricas como "Ver más", "Aprender más" o "Más información", salvo que el texto que precede al enlace clarifique el contexto. Las personas usuarias que utilizan medios alternativos para recorrer el sitio, como lectores de pantalla, no pueden volver rápidamente al texto del párrafo anterior para comprender a qué se refería el enlace.
Ejemplos de uso
El texto del enlace no describe a dónde se dirigirá la persona usuaria, ni qué se espera encontrar al ingresar, generando desconfianza.
Se recomienda tratarlos como llamados a la acción con frases verbales concisas para aumentar la compresión de la persona usuaria.
