Link
Les liens sont des éléments cliquables utilisés comme éléments de navigation. Ils peuvent apparaître seuls, au sein d'une phrase ou d'un paragraphe, ou directement à la suite du contenu.
Description
Les liens sont des éléments cliquables utilisés comme éléments de navigation. Ils peuvent apparaître seuls, au sein d'une phrase ou d'un paragraphe, ou directement à la suite du contenu.
Le label d'un lien exprime de manière claire l'action ou la redirection qui se produira lorsque l'utilisateur interagira avec celui-ci.
Il existe deux types de liens :
- Standalone links (component) : sont utilisés seuls, directement en dessous du contenu. Ils sont toujours utilisés avec une icône.
- Inline links (text style) : sont utilisés dans un paragraphe. Ils ne sont pas associés avec une icône.
Plateformes
Anatomie
- Label : décrit de manière claire l'action produite au clic du lien
- Icon (optionnel) : les icônes peuvent être utilisées dans les liens lorsqu'une clarté supplémentaire est requise. Par défaut, lorsque le lien apparaît seul, on utilisera l'icône chevron-right
Usage
Quand l'utiliser ?
Lorsque vous souhaitez :
- Rediriger l'utilisateur vers une autre page du site ou de l'application
- Rediriger l'utilisateur vers une étape optionnelle d'un flux (ex : mot de passe oublié)
- Rediriger l'utilisateur vers un site externe
- Rediriger l'utilisateur vers un élément de la même page
- Ouvrir la boite mail ou le carnet d'appel de l'utilisateurs
Do's and don'ts
-
Do
Les liens doivent être clairs et concis. L'utilisateur doit pouvoir anticiper l'action qui se produira au clic de ce dernier.
-
Don't
Il est fortement déconseillé d'utiliser des descriptions génériques du style "cliquez ici".
-
Do
Veillez à ce que les liens soient aussi courts que possible (tout en les rendant clairs).
-
Don't
Il est déconseillé d'utiliser des liens trop longs. Par exemple : URL complète ou phrase entière.
Anatomie
- Label : décrit de manière claire l'action produite au clic du lien
- Icon (optionnel) : les icônes peuvent être utilisées dans les liens lorsqu'une clarté supplémentaire est requise. Par défaut, lorsque le lien apparaît seul, on utilisera l'icône chevron-right
Usage
Quand l'utiliser ?
Lorsque vous souhaitez :
- Rediriger l'utilisateur vers une autre page du site ou de l'application
- Rediriger l'utilisateur vers une étape optionnelle d'un flux (ex : mot de passe oublié)
- Rediriger l'utilisateur vers un site externe
- Rediriger l'utilisateur vers un élément de la même page
- Ouvrir la boite mail ou le carnet d'appel de l'utilisateurs
Do's and don'ts
-
Do
Les liens doivent être clairs et concis. L'utilisateur doit pouvoir anticiper l'action qui se produira au clic de ce dernier.
-
Don't
Il est fortement déconseillé d'utiliser des descriptions génériques du style "cliquez ici".
-
Do
Veillez à ce que les liens soient aussi courts que possible (tout en les rendant clairs).
-
Don't
Il est déconseillé d'utiliser des liens trop longs. Par exemple : URL complète ou phrase entière.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.