Éléments d'action

Les boutons et liens forment les éléments d'action, qui doivent être associés à des usages cohérents et distincts. Regardez la vidéo pour en savoir plus.

Les boutons permettent aux utilisateurs de déclencher une action.  Les liens permettent aux utilisateurs de naviguer vers un autre endroit. Les liens pointent vers quelque chose ; les boutons invitent à réaliser une action.

L'usage des boutons et liens doit être cohérent et distinct. Il est essentiel d'utiliser de manière cohérente les contrôles de l'interface utilisateur, en particulier les éléments d'action comme les liens et les boutons.
Des icônes peuvent être ajoutées aux liens et aux boutons, avec ou sans texte. Si vous souhaitez que l'utilisateur clique sur une icône pour déclencher une action, vous devez l'intégrer dans un bouton ou un lien. L'utilisation d'une icône non intégrée dans un bouton ou un lien pour déclencher une action n'est pas recommandée et ne respecte pas les normes d'accessibilité.

Un bouton-icône peut être stylisé de manière à ressembler à l'icône seule, mais il doit toujours être possible de passer le curseur dessus (style « hover ») pour fournir plus d'informations aux utilisateurs.

Les liens doivent faire référence à la page à laquelle ils renvoient, ou donner toute autre indication claire. 

Par exemple, un lien vers une page d'offres d'emploi doit être libellé « Offres d'emploi ». Un lien « Voir plus » n'indique pas clairement à l'utilisateur où il va l'emmener.
Un lien vers une page qui fait référence au titre de la page doit reprendre la majuscule du titre. Si le lien renvoie à une page intitulée « Offres d'emploi », le lien doit reprendre le O majuscule.
Vous pouvez aussi donner une description courte et concise de ce que l'utilisateur trouvera sur la nouvelle page, par exemple : « Deux nouvelles offres d'emploi ».

Dans les deux cas, l'utilisateur voit clairement que le lien est associé à des offres d'emploi.

« Cliquez ici » n'est pas une formulation adéquate pour un lien, car elle n'indique pas clairement ce que l'utilisateur verra en cliquant. En outre, si un lien est correctement stylisé et qu'on voit clairement qu'il est possible de cliquer ou d'appuyer dessus (en d'autres termes, si son texte est en bleu), vous ne devriez pas avoir à utiliser le mot « cliquer », car l'utilisateur sait déjà qu'il peut cliquer.

Les boutons doivent présenter une forme verbale pour expliquer clairement ce qui se passe lorsque l'utilisateur clique dessus. Libellez ainsi « Enregistrer » ou « Soumettre » un bouton permettant de soumettre un formulaire. Une formulation sans verbe manque de clarté.

Seule exception à la règle : lorsqu'un bouton sert à déclencher l'ouverture d'un menu. Dans ce cas, le libellé figurant sur le bouton doit expliquer clairement ce que contient le menu, comme pour un lien. Par exemple, le style du bouton « Actions » doit être différent de celui des boutons qui ne déclenchent pas l'ouverture d'un menu. Dans cet exemple, ce bouton n'est pas encadré. C'est toujours un bouton, mais il a l'air différent.

En général, les formulaires proposent aux utilisateurs au moins deux options : l'une, appelée action principale, est essentielle à l'accomplissement d'une tâche et l'autre, moins utilisée, est dite action secondaire (il s'agit souvent d'une action d'abandon, par exemple « Annuler »).

Pour limiter les risques d'erreur, l'option d'action principale doit être visuellement distincte des actions secondaires.

Voici un bon exemple de bouton d'action principale, correctement libellé et visuellement distinct. 

Les exemples suivants montrent des boutons correctement et mal libellés. Le bouton correctement libellé utilise un « mot d'action » pour améliorer la clarté et réduire les risques d'ambiguïté et de confusion.
Si l'action est négative (par exemple, si elle déclenche la suppression de quelque chose), l'accent visuel doit être mis sur l'option d'abandon, qui permet d'annuler rapidement la suppression.
Les directives de Pega concernant l'ordre des boutons suivent celles d'Apple et de Google ; l'action principale est affichée le plus à droite et l'action d'abandon le plus à gauche.

Cet exemple montre plusieurs problèmes. Il est tiré d'une application bien connue. 

La fenêtre modale est intitulée « Cancelling », ce qui manque de clarté : qu'est-ce que l'utilisateur annule ?

Le texte et les boutons ajoutent à la confusion. Annuler est-il synonyme de rejeter, ou un clic sur le bouton Cancel signifie-t-il que je rejette l'annulation ? Si c'est le cas, pourquoi est-ce l'action principale ? Ce genre d'erreur génère inévitablement de la confusion et des résultats incorrects.

Évitez d'associer des boutons à plusieurs actions, car chaque action sur un bouton ou un lien dans une interface utilisateur Pega déclenche un appel distinct au serveur. Veuillez consulter le cours sur le front-end pour plus de détails à ce sujet.

Vérifiez vos connaissances avec l’interaction suivante.