7 grand axes horizontaux
Le sonTexte de remplacementNavigationPremier plan et arrière-planLa couleurErgonomie et utilisabilitéDesign d'informationImages fixes et animationsBouton de navigationTexte, typographie et lisibilitéLa couleurPrincipes de conception

Bouton de navigation

Les boutons peuvent devenir une autre source de confusion lorsqu’on parle de vision colorée déficiente. La fonction des boutons dans les interfaces multimédias concerne le plus souvent la navigabilité ou l’indication d’information. De sorte que généralement, les boutons utilisent des dessins, des formes et des couleurs qui sont codés pour signaler, guider et faire naviguer.

Figure XII – Pertinence de l’ajout d’indicateur en plus de la couleur

Voici la démonstration de la pertinence d’opter pour l’addition de texte, de chiffres, de signes ou d’icônes sur les boutons afin d’informer les utilisateurs. Le duo de la deuxième colonne simule la vision des protanopes et le duo de la troisième colonne simule la vision des deutéranopes.

  • D1

Les principaux problèmes que rencontrent les utilisateurs avec les boutons se produisent principalement lorsque :

  • la couleur devient le seul indicateur signifiant (Figure XII);
  • la couleur agit comme porteuse de codes ou de sens (ex. : rouge = arrêter et vert = avancer);
  • la couleur induit des informations comme par exemple, dans le cas des sections d’un site, lorsqu’on utilise le rose pour la section lingerie et le beige pour la section des matériaux ;
  • les niveaux de contrastes sont insuffisants entre les boutons et le fond ou entre les boutons eux-mêmes (Figure XIII).
Figure XIII – Comparaison des couleurs de boutons

Remarquer la différence entre les duos de la première colonne et les duos des deux autres colonnes qui correspondent à la vision des dichromates. Les duos de la deuxième colonne simulent la vision des protanopes et les duos de la troisième colonne simulent la vision des deutéranopes.

  • D2-D3-D5

Pour corriger la majeure partie de ces inconvénients plusieurs solutions peuvent se mettre en action simultanément :

  • D’abord, une vérification à partir des applications de simulation de couleur afin d’évaluer les contrastes.
  • La pertinence d’opter pour l’addition de texte, de chiffres, de signes ou d’icônes sur les boutons afin d’informer les utilisateurs.
  • L’inclusion de forme et de texture graphique pour aider à la distinction entre les boutons (Figure XIV).
  • Une autre solution plus sophistiquée, consiste à donner aux boutons un effet de survol (rollover) pour signaler une information ou une action.
  • Des « clips » sonores pertinents et discrets renforcent l’efficacité des boutons et peuvent combler les lacunes dues aux couleurs.
Figure XIV – Utilisation de formes en plus de la couleur

On voit ici l’importance d’utiliser d’autres éléments graphiques pour distinguer les couleurs entre elle. Le trio de la deuxième colonne simule la vision des protanopes et le trio de la troisième colonne simule la vision des deutéranopes.

  • D4

Comme pour tous les éléments d’un projet Internet, l’adjonction de texte de remplacement garde ici son importance. D’autre part, l’usage d’info-bulles devrait être envisagé sérieusement pour assister les utilisateurs qui ne connaîtraient pas la signification de certaines couleurs codées, de signes ou d’icônes accompagnant ou formant les boutons.