Link

Définition

Le lien ou “hypertexte” est un élément de navigation fondamental. Il permet à l’utilisateur de naviguer de page en page. Localisés dans des paragraphes de textes (mentions légales, footer, etc.) ils se distinguent par leur couleur et sont soulignés. 

Accéder à la librairie Figma NEO 3

Quand utiliser le composant ?

Le lien est utilisé pour :

  • naviguer d’une page à une autre au sein d’une même application ;
  • aller visiter un site externe ;
  • se rendre sur une ancre de navigation dans la page dans laquelle il se trouve.

Quand ne pas utiliser le composant ?

Le lien ne doit pas : 

  • déclencher d’action comme par exemple “Valider”, “Annuler” ou “Fermer” contrairement au bouton ;
  • être utilisé pour filtrer du contenu, utilisez le composant chips.

Anatomie

A - Couleurs

Le lien prend la couleur primaire de la marque de votre projet. Pensez à utiliser le token de couleur suivant pour tous vos liens par défaut : primary/text/regular/default. Le hover correspond quant à lui au token suivant : primary/text/regular/hover.

B - Tailles

Tailles disponiles pour les liens Neo 3 :

C - Comportements

Hover

Le hover du lien doit utiliser la couleur primaire de votre marque.

UX/UI Designer tips

Les font tokens à utiliser sont :

  • default: primary/text/regular/default
  • hover: primary/text/regular/hover

Do don’t

A - Labels des liens

Utilisez des labels en relation avec le contexte du lien.  Le label du lien doit être clair et expliciter sa destination.

Le label des liens doit être en relation avec le contexte et ne doit pas contenir de terme générique.
Oui
Ne pas utiliser de terme générique ou dupliquer l’information pour ajouter un lien.
Non

B - Lien sans icône

Ne pas insérer d’icône dans les blocs de textes pour accompagner les liens.

Le lien est sans icône.
Oui
Ne pas ajouter d’icône avec le lien.
Non

B - Lien et button link

Ne pas utiliser de « Button link » dans les blocs de textes pour remplacer les liens.

Le style de texte lien est bien utilisé.
Oui
Ne pas utiliser le composant “button link” à la place d’un lien.
Non
Préférez un "button link" lorsque vous voulez un meilleur guidant visuel pour encourager l’utilisateur au clic.
Oui
Le lien n’encourage pas l’utilisateur à cliquer et ne dispose pas des intéractions nécessaires à ce contexte.
Non

A - Intitulés obligatoires et explicites

Pour les personnes malvoyantes et aveugles qui n’ont pas une vision globale de la page, il est essentiel de comprendre la fonction d’un lien. En effet, le contexte visuel et la proximité des informations ne sont pas toujours disponibles pour ces personnes.

Pour les personnes ayant un handicaps cognitifs, un lien peu ou pas explicite n’incite pas à l’action et à la compréhension du lien. La personne ne sait pas et ne comprend pas vers quelle page elle se dirige si l’intitulé du lien ne l’explique pas suffisamment.

Un lien peut être rendu explicite par lui même grâce à l’intitulé du lien mais également via son contexte. Dans la mesure du possible il est préférable de rendre un lien explicite sans avoir à consulter le contexte (lien dit explicite hors contexte).

B - Comprendre le contexte d'un lien

Il n’est pas toujours possible de produire des liens explicites hors contexte dans ce cas il est nécessaire de s’appuyer sur le contexte du lien.

C’est souvent le cas sur des liens avec pour intitulé par exemple : « en savoir plus », « cliquez ici », « ici », « plus d’informations », etc.

Le contexte est défini comme suit :

  •  Le contenu de la phrase qui contient le lien ;
  • Le contenu du paragraphe (balise p) contenant le lien ;
  • Le contenu de l’élément de liste (balise li), ou le contenu d’un élément de liste parent (balise li) de l’élément de liste, contenant le lien ;
  • Le contenu de du titre (balises hx) précédent le lien ;
  • Le contenu de la ou des cellules d’en-tête du tableau (balises th) associées à la cellule de données du tableau (balise td) contenant le lien ;
  • Le contenu de la cellule de données de tableau (balise td) contenant le lien.