Liens et boutons

Les liens et boutons, également appelés "call-to-actions" (CTA), sont des éléments clés dans la conception d'une interface utilisateur. Les liens et boutons permettent à l'utilisateur d'interagir avec l'interface et de réaliser des actions spécifiques, telles que l'envoi d'un formulaire ou l'accès à une nouvelle page. Leur design doit être soigné pour maximiser l'expérience utilisateur.

Les liens et les boutons ont 4 états distincts : neutre, focus, survol, désactivé. De plus, les liens peuvent avoir un état visité.
La zone interactive des liens doit respecter la norme de 36 pixels sur desktop et 44 pixels sur mobile (ref. 2.5.5 Taille de la cible) sauf pour les liens dans les textes courants qui suivent la taille du texte.
Sauf exceptions, les liens marquent un changement de page et les boutons une action à même une page. Un lien peut être déguisé en bouton afin d'augmenter sa visibilité.
Les libellés doivent être clairs, en fonction du contenu à afficher ou de l'action à poser.
L’information relative au document (type de document, poids, langue) doit être intégrée dans le lien.

Avantages

Inconvénients

Les liens et boutons sont des éléments clés pour guider l'utilisateur à travers une interface, en l'aidant à comprendre ce qu'il peut faire sur une page.
Ils peuvent améliorer la convivialité en rendant les actions plus évidentes et en simplifiant la navigation.
Les boutons peuvent attirer l'attention de l'utilisateur en raison de leur emplacement et de leur apparence, augmentant ainsi les chances qu'il effectue l'action souhaitée.
Les liens et boutons peuvent aider à rendre une interface plus accessible, en donnant aux utilisateurs des options claires et compréhensibles pour accomplir des tâches.

Si les boutons et les liens sont mal conçus, cela peut entraîner une confusion de l'utilisateur, l'empêchant de comprendre les actions qu'il peut effectuer sur une page.
Un excès de boutons peut rendre une page trop complexe et nuire à l'expérience utilisateur.
Des boutons de tailles et de styles différents peuvent causer de la confusion et rendre la page désorganisée.

Meilleures pratiques:

Utilisez une couleur contrastée pour les boutons et les liens pour qu'ils se démarquent sur la page.
Utilisez un langage clair et spécifique sur les boutons et les liens pour que les utilisateurs comprennent exactement ce qu'ils vont faire lorsqu'ils cliquent sur ces éléments.
Utilisez une taille de police appropriée pour que les boutons et les liens soient facilement lisibles.
Évitez les designs douteux, tels que des boutons qui ressemblent à des publicités ou des liens qui ressemblent à des liens de navigation.
Évitez d'utiliser trop de boutons sur une seule page. Utilisez plutôt des groupes de boutons pour classer les actions.
Testez l'emplacement et l'apparence des boutons et des liens pour voir ce qui fonctionne le mieux auprès des utilisateurs.

Références

Material Design: https://material.io/design/components/buttons.html
Ant Design: https://ant.design/components/button/
Bootstrap: https://getbootstrap.com/docs/5.0/components/buttons/
Apple HIG: https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/

Recommandations

Différencier les boutons des liens

Les boutons <button>/<input> permettent à l’utilisateur de déclencher des actions. Ils sont à employer pour soumettre des informations, pour afficher l’élément suivant ou précédent dans un carrousel, pour fermer une fenêtre modale, etc.

Les liens <a> permettent à l’utilisateur de naviguer. Ils sont à employer pour pointer sur une autre page ou sur une zone précise de la page courante par l’intermédiaire d’un système d’ancres.

💬 Remarques

Il est recommandé d'utiliser la balise <input type="button"> à l'intérieur d'un <form> (bouton Envoyer, etc...) et d'utiliser la balise <button> lorsque c'est une action (flèche, bouton fermer, etc...).

📝 Ressources

Upload

Add shortcut

Distinguer les liens du texte courant (fka 4.1.1)

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple, en les soulignant.

Cette règle concerne uniquement les liens à même le contenu principal. Les liens intégrés dans des groupes de liens (dans les menus, par exemple) ne sont pas concernés car suffisamment reconnaissables comme tels.

💡 Astuces

En plus de cette recommandation, il est également utile de prévoir l’apparence des liens au survol dans les maquettes :

Lien avec trait (exemple A) Normal : lien de couleur, souligné d'un trait pointillé 1 px. Survol : trait plein et large bande de couleur en arrière-plan. Usage : liens intégrés dans un texte courant. Pour les titres de grands formats et les titres dans un fil éditorial, le soulignement n'est pas nécessaire; cependant l'état de survol doit être précisé.
Lien sans trait (exemple B): Normal : lien de couleur. Survol : changement de couleur du lien et large bande de couleur en arrière-plan, déclinaison pâle de la couleur du lien. Usage : liens en énumération (module d'informations complémentaires, fil de liens éditoriaux, mots-clés, etc.).

💡 ₊ Astuces - bonification

Une autre bonne astuce est de modifier la couleur du lien lorsque le contenu a été consulté.

⚠️ Attention

Il est fortement déconseillé de :

Se baser uniquement sur la couleur pour différencier visuellement les liens du texte qui les entoure.
D’appliquer un effet de soulignement à d’autres éléments que les liens.

📝 Ressources

Upload

Add shortcut

Utiliser un intitulé explicite (4.2.1)

Un intitulé explicite doit être prévu pour chaque lien et chaque bouton, c’est-à-dire que la fonction du lien doit être parfaitement compréhensible à la lecture du seul intitulé, par exemple, Consulter le site.

Malgré tout, pour demeurer compréhensible, l’information précise concernant la page d’aboutissement doit se trouver dans l’attribut « title » (par exemple, Consulter le site Médium Large).

Identifier les liens externes (4.2.2)

Pour chaque lien qui déclenche une sortie du site, soit par l’ouverture d’une fenêtre d’extraction ou d’un nouvel onglet, prévoir une identification claire à l’aide d’une icône afin de prévenir l’utilisateur de cette action.

Cette icône complète le lien en le suivant immédiatement.

💬 Remarques

On applique une règle d'exception pour les contenus provenant de sites qui appartiennent à Radio-Canada, même si l'url diffère du site : ICI TOU.TV, ICI MUSIQUE, ICI EXPLORA, ICI ARTV.

Le pictogramme indiquant qu’il s’agit d’un lien externe complète le lien.