Boutons

Travail en cours

Cette page porte sur le travail en cours.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utilisez des boutons pour créer un appel à l'action qui incite l'utilisateur à soumettre du contenu à partir d'un formulaire. De plus, utilisez des boutons pour amener les utilisateurs à une page Web qui présente des renseignements supplémentaires.

Conception et codage

Utilisation de base

Par défaut

Utilisez les catégories de boutons sur des éléments <a>, <button> ou <input> afin de créer une uniformité visuelle. Le navigateur présente certains éléments comme un bouton. Toutefois, il manque d'uniformité visuelle pour chaque genre de bouton. L'apparence de bouton par défaut peut être différente pour chaque navigateur.

Apparence
Par défaut
Stylisé
Bonne utilisation

Points de conformité :

  • Utilisez l'élément <button> tant que possible afin de vous assurer de la concordance avec le rendu multinavigateur
    • Il y a un bogue dans Firefox <30 that qui rend impossible l'établissement de line-height dans les boutons fondés sur <input>
    • La hauteur de ces boutons est inégale dans Firefox
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Bouton par défaut :
<button type="submit">Bouton</button>
<input type="button" value="Saisir" />
<input type="submit" value="Soumettre" />
<a class="btn btn-default" href="#"</a>

// Bouton stylisé :
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Saisir" />
<input class="btn btn-default" type="submit" value="Soumettre" />
<a class="btn btn-default" href="#" role="button">Lien</a>

Utilisation améliorée

Couleurs

Utilisez pour ajouter des couleurs aux boutons. Les couleurs signifient notamment un lien vers des renseignements d'avertissement (bouton d'avertissement) à un lien vers le prochain module d'apprentissage (bouton succès).

Apparence
Bonne utilisation

Points de conformité :

  • Utilisez les boutons comme suit :
    • Par défaut : Bouton standard
    • Primaire : Donne un poids visuel supplémentaire et indique l'action primaire dans un ensemble de boutons
    • Succès : Indique une action réussie ou positive qui permet à l'utilisateur de passer à phase suivante ou au module suivant
    • Info : Bouton contextuel pour les messages d'alerte informationnels
    • Avertissement : Indique que la prudence sera de mise avec cette action
    • Danger : Indique une action dangereuse ou potentiellement négative
    • Lien : Réduit le rôle du bouton en le faisant ressembler à un lien, tout en maintenant le comportement d'un bouton
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Défaut : 
<button type="button" class="btn btn-default">Défaut</button>

// Primaire :
<button type="button" class="btn btn-primary">Primaire</button>

// Succès :
<button type="button" class="btn btn-success">Succès</button>

// Info :
<button type="button" class="btn btn-info">Info</button>

// Avertissement :
<button type="button" class="btn btn-warning">Avertissement</button>

// Danger : 
<button type="button" class="btn btn-danger">Danger</button>

// Lien :
<button type="button" class="btn btn-link">Lien</button>

Taille

Utilisez pour augmenter ou diminuer la taille d'un bouton.

Apparence
Bonne utilisation

Points de conformité :

  • Taille par défaut : Utilisez pour un bouton ordinaire
  • Boutons petits ou très petits : Utilisez lorsque plusieurs boutons se trouvent dans une barre à outils et que l'espace est restreint. La taille du bouton est réduite afin de maximiser le nombre de boutons qui figure sur une seule rangée
  • Gros bouton : Utilisez-le lorsque vous voulez lui donner une importance accrue sur la page. Puisque les boutons par défaut crée déjà une importance et un appel à l'action, la valeur ou le besoin d'augmenter leur taille est limité
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Gros bouton :
<button type="button" class="btn btn-default btn-lg">Gros bouton</button>

// Bouton par défaut :	  
<button type="button" class="btn btn-default">Défaut bouton</button>

// Petit bouton :
<button type="button" class="btn btn-default btn-sm">Petit bouton</button>

// Très petit bouton :
<button type="button" class="btn btn-default btn-xs">Très petit bouton</button>

Largeur maximale

Utilisez pour créer des boutons de blocage de niveau (ceux qui s'étend sur toute la largeur d'un contenant apparenté).

Apparence
Bonne utilisation

Points de conformité :

  • Utilisez .btn-block lorsque le bouton se trouve dans un petit contenant
    • Ce bouton s'étend sur toute la largeur d'un contenant apparenté et est totalement justifié dans l'espace disponible
  • Testez le bouton dans toutes les résolutions
    • Dans une conception adaptative, les boutons qui prennent la largeur maximale peuvent ne pas avoir une belle apparence dans toutes les résolutions
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Bouton de blocage de niveau :
<button type="button" class="btn btn-default btn-block">Bouton de blocage de niveau</button>

État d'activation

Utilisez .active avec les éléments <button> et <a> si vous avez besoin qu'un bouton semble actif en tout temps (habituellement aux fins d'affichage et d'enseignement sur des boutons ou liens factices). Lorsqu'un utilisateur appuie sur un bouton, il semble être actif (avec une ombre interne, ainsi qu'un arrière-plan et une bordure plus foncés). Pour les éléments <button> et <a>, ils sont stylisés automatiquement dans CSS au moyen de :active.

 

Apparence
Bonne utilisation

Points de conformité :

  • Ajoutez .active à l'élément <a> ou <button> pour indiquer qu'un lien ou un bouton est actif
  • Utilisez lorsque la cible de lien ou de bouton correspond à l'adresse de la page courante
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Bouton actif :
<button type="button" class="btn btn-default active">Bouton</button>
	
// Lien actif :  
<a href="#" class="btn btn-default active" role="button">Lien</a>

État de désactivation

Utilisez pour désactiver des boutons et des liens (non cliquable) et donne une apparence décolorée.

Apparence
Bonne utilisation

Points de conformité :

  • Utilisez disabled="disabled" pour déactiver un bouton
  • Ajoutez la catégorie .disabled à un élément <a> afin d'indiquer qu'un lien est désactivé
  • Retirez l'attribut href afin de désactiver complètement les liens, car la catégorie ne change que l'apparence de la balise <a>, non la fonctionnalité
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Bouton désactivé :
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Bouton</button>
	
// Lien désactivé :  
<a href="#" class="btn btn-default btn-lg disabled" role="button">Lien</a>

Groupes

Utilisez pour regrouper une série de boutons sur une seule ligne avec le groupe de boutons.

Appearence

Par défaut :

Gros :

Petit :

Très petit :

Justifié (lien) :

Justifié (boutons) :

Bonne utilisation

Points de conformité :

  • Utilisez pour créer une seule barre à outils de boutons
  • Enveloppez une série de boutons avec .btn dans .btn-group
  • Ajoutez .btn-group-*à .btn-group au lieu d'appliquer des catégories de tailles de bouton à chaque bouton d'un groupe
  • Enveloppez une série de boutons avec .btn dans .btn-group btn-group-justified − pour utiliser des groupes de boutons justifiés avec des éléments <a>
  • Enveloppez chaque bouton dans un groupe de boutons pour utiliser des groupes de boutons justificatifs avec des éléments <button>. La plupart des navigateurs n'appliquent notre CSS que pour la justification aux éléments <button>. Puisque nous prenons en charge les boutons de déroulement, nous pouvons le contourner
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Par défaut :
<div class="btn-group">
  <button class="btn btn-default" type="button">...</button>...
</div>

// Groupe de gros boutons :
<div class="btn-group btn-group-lg">...
</div>

//Groupe de petits boutons :
<div class="btn-group btn-group-sm">...
</div>

// Groupe de très petits boutons :
<div class="btn-group btn-group-xs">...
</div>

// Liens justifiés :
<div class="btn-group btn-group-justified">
   <a class="btn btn-default" role="button">...</a>...
</div>

// Groupe de boutons justifiés :
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">...</button>
  </div>...
</div>

Barres à outils

Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne.

Apparence
Bonne utilisation

Point d'observation :

  • Utilisez pour créer une barre à outils qui contient plusieurs groupes de boutons
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point d'observation précédent
Code
// Plusieurs groupes de boutons :
<ul class="btn-toolbar list-inline" role="toolbar">
  <li class="btn-group">
   <button type="button" class="btn btn-default">1</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">4</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">6</button>
  </li>
</ul>

Genres de boutons

Utilisez le bon texte de bouton pour la bonne interaction avec les utilisateurs.

Ne vous concentrez pas sur les couleurs et les styles des boutons.

Les boutons ci-dessous sont stylisés au préalable aux fins d'orientation et de démonstration.

Pourvu que tous les points de conformité sur les boutons soient respectés, le bouton peut avoir différents regroupements, couleurs, tailles, etc., que ce qui est présenté.

Genres et exemples de boutons
Type de bouton Exemple Point(s) d'observation
Bouton d'action primaire

Exemple :
  • Mise en page type
    • Ordre par fréquence d'utilisation de gauche à droite, du plus fréquent au moins fréquent (bouton le plus à gauche = bouton d'action primaire)
    • Il s'agit du bouton le plus exécutable sur une page
    • Est déclenché lorsqu'on appuie sur la touche Entre dans une zone de formulaire
  • Exception
    • Utilisation de la pagination − le bouton « Suivant » (qui se trouve à droite), est le principal bouton d'action
Ouvrir une session
  • Utilisez pour ouvrir une session dans une application
  • Déterminez l'emplacement d'« Ouvrir une session » dans le cadre de l'architecture d'information du site
S'inscrire
  • Utilisez pour s'inscrire à un service ou à un programme
  • Les nouveaux utilisateurs ne doivent pas le combiner avec « Ouvrir une session »
Fermer une session
  • Utilisez pour fermer une session dans une application
  • Assurez-vous que le bouton « Fermer une session » s'affiche sur chaque page dans le coin supérieur droit pour toutes les applications qui nécessitent une ouverture de session
Précédent / Suivant
  • Suivant :
    • Utilisez-le pour faire passer l'utilisateur à la page suivante ou à l'étape suivante du processus
    • Il s'agit souvent du bouton d'action primaire
  • Précédent :
    • Lisez-le pour faire passer l'utilisateur à la page suivante ou à l'étape suivante
    • Veuillez à ce que ce soit le bouton le plus à gauche
    • Ne l'utilisez s'il n'y a aucune page à laquelle on peut retourner (par exemple, une page d'accueil ou des pages de confirmation)
Pour connaître d'autres options, consultez Pagination.
Soumettre
  • Soumettre 
    • Utilisez-le pour envoyer des données
  • Soumettre attestation
    • Utilisez-le pour obtenir une attestation de données soumises aux fins de traitement en raison d'une incidence financière ou d'une exigence juridique
    • Placez une case à cocher qui n'est pas étiquetée par défaut « J'atteste que XXX », où les X décrivent ce qui est attesté
      • La formulation doit être examinée par le BPR opérationnel et probablement par les services juridiques
    • Placez le bouton « Soumettre » (ou une étiquette propre à un autre contexte) sous la case à cocher
      • Si la case à cocher d'attestation n'est pas cochée et qu'on a appuyé sur le bouton « Soumettre », affichez une erreur qui indique que la case à cocher doit être sélectionnée pour la réussite de la soumission
    • Étiquetez la case à cocher avec le mot « Attester » si un formulaire papier connexe utilise aussi le mot « Attester »
    • N'utilisez pas le mot « Attester » comme étiquette de bouton
  • Soumettre confirmation
    • Utilisez-le pour confirmer que les données entrées sont exactes avant le traitement de la soumission
    • Utilisez-le lorsqu'il y a peu d'incidences financières et d'exigences juridiques à remplir (au lieu de l'attestation)
    • Placez une case à cocher qui n'est pas étiquetée par défaut « Je confirme que XXX », où les X décrivent ce qui est confirmé
      • La formulation doit être examinée par le BPR opérationnel
    • Placez un bouton « Soumettre » (ou une autre étiquette propre au contexte) sous la case à cocher
      • Si la case à cocher de l'attestation n'est pas cochée et qu'on a appuyé sur « Soumettre », affichez une erreur qui indique que la case à cocher doit être sélectionnée pour la réussite de la soumission
    • Étiquetez la case à cocher avec le mot « Confirmer » si un formulaire papier connexe utiliser aussi le mot « Confirmer »
    • N'utilisez pas le mot « Confirmer » comme étiquette de bouton
Calculer
  • Utilisez-le pour faire un calcul
Annuler
  • Utilisez-le prudemment pour annuler une transaction et n'envoyez pas de renseignements
  • Qualifiez ce qui peut être annulé si on appuie sur le bouton, par exemple, « Annuler la demande »
  • Assurez-vous que l'utilisateur est retourné à l'endroit dans le processus s'ils ont sélectionné « Annuler la demande »
  • Utilisez-le avec prudence
    • Il est difficile pour les utilisateurs de comprendre quelles étapes sont annulées dans un circuit de tâches qui comprennent plusieurs étapes
  • Ne faites pas de « Annuler la demande » la touche d'action primaire
Sauvegarder
  • Sauvegarder
    • Utilisez-le pour explicitement apporter des changements à une page ou à une séquence de pages, à la base de données ou à la session
  • Ne pas sauvegarder
    • Utilisez-le pour explicitement ne pas apporter de changements à une page ou à une séquence de pages
Ajouter
  • Utilisez-le pour ajouter ou insérer un item, par exemple, ajouter une adresse
    • S'il y a lieu, précisez ce qui est ajouté dans le cadre du nom du bouton
  • Utilisez-le dans un processus de liste pour ajouter un autre item à une liste
Modifier
  • Utilisez-le pour modifier un item, par exemple, modifier une adresse
    • S'il y a lieu, précisez ce qui est modifié dans le cadre du nom du bouton
  • Utilisez-le dans un processus de liste pour modifier l'item sélectionné dans une liste
Supprimer
  • Utilisez-le pour supprimer un item, par exemple, supprimer une adresse
    • S'il y a lieu, précisez ce qui est supprimé dans le cadre du nom du bouton
  • Utilisez-le dans un processus de liste pour supprimer l'item sélectionné dans une liste
Afficher
  • Utilisez-le pour voir un item comme l'affichage du statut d'une demande
    • S'il y a lieu, précisez ce qui est affiché dans le cadre du nom du bouton
Extraire
  • Utilisez-le pour extraire un item, par exemple, extraire une adresse
    • S'il y a lieu, précisez ce qui est extrait dans le cadre du nom du bouton
Rechercher
  • Utilisez-le pour faire une recherche
Réinitialiser
  • Utilisez-le pour réinitialiser toutes les zones sur une page (sur le côté du client) pour les valeurs initiales au moment où la page a été chargée au départ
  • Demandez exactement aux utilisateurs ce qui est réinitialisé si la réinitialisation s'étend sur plus d'une page (par exemple, « Réinitialiser la page aux valeurs par défaut »)
  • Évitez de placer le bouton « Réinitialiser » pour les raisons suivantes :
    • les utilisateurs peuvent cliquer sur le bouton par erreur;
    • les utilisateurs n'ont pas besoin d'options inutiles pour encombrer l'interface et qui requièrent plus de temps de réflexion
Recommencer
  • Utilisez-le lorsque les utilisateurs doivent recommencer à partir de l'étape 1 selon une séquence d'étapes
Imprimer
  • Ne l'utilisez que dans les situations où il est nécessaire de demander à l'utilisateur d'imprimer quelque chose d'important (telle qu'une page de confirmation avec un numéro de confirmation ou de référence)
    • Un utilisateur peut utiliser la fonction d'impression dans son navigateur afin d'imprimer la page courante
  • Utilisez « Afficher en PDF » si l'action souhaitée est de charger le document en PDF pour le consulter (puis de l'imprimer au besoin)
Effacer
  • Ne pas utiliser
  • N'utilisez pas le bouton « Effacer »
  • Reportez-vous à la section sur le bouton « Réinitialiser »
Sortir
Quitter
Ne pas utiliser
  • N'utilisez pas les boutons « Sortir » ou « Quitter », car ils sont redondants
    • Les utilisateurs ferment souvent la fenêtre de leur navigateur pour sortir d'une application
  • Utilisez le bouton « Fermer la session » pour les applications qui nécessitent une ouverture de session
  • Envisagez d'utiliser le bouton « Annuler  XXX », car il peut être plus approprié selon l'exigence de l'application
Je suis d'accord Ne pas utiliser
  • N'utilisez pas la case à cocher ou le bouton « Je suis d'accord » afin de confirmer que la saisie de données est exacte
    • L'expression « Je suis d'accord » est principalement associée avec l'« avis de non-responsabilité » qui est présenté à l'utilisateur avant de lancer l'application
  • Reportez-vous à la section sur les fonctions « Confirmer » et « Attester »

Caractéristiques additionnelles

Des fonctions et des comportements complémentaires sont disponibles.

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification :