Bouton

Date d’adoption : 
17 janvier 2018
Dernière mise à jour : 
20 février 2021

Pourquoi utiliser les boutons

Pour aider les utilisateurs à effectuer une action sur une page, comme lancer une application, sauvegarder leurs renseignements ou soumettre une commande.

Quand éviter les boutons

Les boutons ne devraient pas servir uniquement de liens vers une autre page. Ils sont réservés aux actions.

Évitez d’utiliser un bouton pour annuler ou effacer des renseignements d’utilisateurs. Utilisez plutôt un lien retour pour revenir en arrière ou apporter des modifications.

Si les utilisateurs veulent cesser d’utiliser le service, ils peuvent simplement fermer la fenêtre du navigateur.

Fonctionnement

Le texte du bouton doit commencer par une majuscule, et d’écrire l’action prévue en suivant le schéma verbe + nom.

Exemple :

  • « Effectuer un paiement » au début du service.
  • « Effectuer un autre renouvellement » pour ajouter un autre article à la commande.
  • « Passer à l’étape suivante » si les renseignements des utilisateurs ne sont pas sauvegardés.
  • « Terminer et passer à la caisse » pour effectuer le paiement.

Vous pourriez devoir ajouter des mots ou utiliser d’autres mots pour mieux décrire l’action. Par exemple, « Ajouter un claim » ou « Inscription à une autre adresse ».

Boutons principal et secondaire

Alignez les boutons du côté gauche de votre formulaire.

Bouton principal

Le bouton principal sert à effectuer l’action la plus importante de la page. Chaque page n’a qu’un seul bouton principal. Exemple :

Bouton secondaire

Le bouton secondaire sert à effectuer la deuxième action en importance ou une action facultative. Exemple :

Boutons principal et secondaire côte à côte

Séparez les deux boutons par « ou ». Exemple :

ou

Si les boutons principal et secondaire ne suffisent pas

Faites une recherche pour cerner les tâches les plus importantes pour les utilisateurs et vous concentrer sur ces dernières. Les autres tâches pourraient se faire sur d’autres pages.

Bouton désactivé

Les boutons désactivés sont grisés et peuvent semer la confusion. Vous devriez donc les éviter. Exemple :

N’utilisez ce bouton que si votre recherche démontre qu’il améliore la compréhension de l’interface utilisateur.