web-dev-qa-db-fra.com

Daltonien: formes d'état

Je travaillais sur une table, avec des icônes d'état. J'utilisais des points colorés (couleur jaune/rouge/vert) pour transmettre le statut (succès, avertissement, danger) ... Évidemment, c'est une démarche problématique si nous pensons aux personnes daltoniennes.

J'essayais de trouver une référence sur les formes qui transmettent le statut mais semble que ce n'est pas standard ...

Ce sont 2 exemples que j'ai trouvés:

enter image description here

enter image description here

S'agit-il de conventions à ce sujet? Savez-vous s'il existe une référence au W3C?

69
Ana Neto

C'est une excellente question. Je crois qu'il n'y a pas de conventions en dehors du bon contraste de couleur du W3C.

Selon les liens ci-dessous, la meilleure façon est d'ajouter une sorte de repère visuel, une forme ou quelque chose qui ne dépend pas uniquement de la couleur. Par exemple, si vous souhaitez créer un statut "danger", vous pouvez ajouter une icône d'avertissement, pensez au signal piéton pour une référence physique.

https://www.w3.org/WAI/gettingstarted/tips/designing.html#ensure-that-interactive-elements-are-easy-to-identify

https://medium.com/civiqueso/creating-a-visually-accessible-map-c8831f952525

http://webcache.googleusercontent.com/search?q=cache:LjApKlqn4zsJ:www.jenunderwood.com/2014/09/04/visualcue/

23
S M

Utilisez des icônes , elles communiquent beaucoup plus que les couleurs seules. Si vous devez utiliser des couleurs, coloriez simplement les icônes.

icons

161
Garik

Les formes de base vont être une tâche difficile, il n'y a vraiment pas de convention sur celles-ci. À titre d'exemple: l'hexagone de Tristan pour l'arrêt est un cercle pour moi.

La réponse évidente est "utiliser des étiquettes". Mais si vous ne le pouvez pas, vous pouvez effectuer l'une des opérations suivantes:

  • utilisez la logique biais biais pour transmettre le message. Le plus net, le plus dangereux. Donc, encerclez: succès ; carré: avertissement ; triangle: danger .
  • utilisez une logique lecteur de musique pour transmettre le message. Donc, triangle: succès (en utilisant le jeu comme métaphore); carré: danger (en utilisant stop comme métaphore); 2 rectangles verticaux: avertissement (en utilisant la pause comme métaphore)enter image description here
  • n'utilisez pas de formes basiques et optez pour une iconographie plus reconnaissable. Il existe des icônes assez standardisées pour cela, elles viennent même sur des polices web. Vous pouvez être plus créatif si vous le souhaitez, bien sûr

Bien sûr, vous devez prendre en charge ces icônes avec une légende expliquant ce qu'elles signifient, mais cela ne devrait pas être un gros problème

10
Devin

Je n'ai pas vraiment recherché ni trouvé de recherche à ce sujet. Peut-être pourriez-vous utiliser localement la forme des panneaux de signalisation? Ici, nous avons des indications sur la forme des panneaux de signalisation.

  • Rond (blanc) avec bordure (rouge) = ne faites jamais ça
  • Rond (bleu) sans bordure = vous devez toujours le faire
  • Triangle avec bordure = attention
  • Carré (bleu) sans bordure = un petit rappel
  • Octogone = arrêt
5
TristanSchaaf

Whoa, c'est un sujet intéressant et inattendu.

Je suis loin d'être un expert sur le sujet, mais je dois dire que la carte couleur + icône présentée dans l'article moyen semble trop complexe à mon humble avis (et basée sur aucune donnée empirique autre que mon instinct/goût).

J'ai toujours été intéressé par la façon dont les jeux offrent des modes daltoniens, généralement disponibles dans les paramètres, pour au moins les types de daltonisme les plus communs.

  • Tritanopie
  • Deutéranopie
  • Protanopie

Je n'ai aucune idée de l'efficacité de cette solution, mais c'est la seule "solution" à laquelle je peux penser car, comme vous le mentionnez, il n'y a pas d'étalon-or dans l'utilisation des icônes/symboles ( https://www.nngroup.com/ articles/icon-usability / ).

En ce qui concerne un funfact, vous pouvez voir comment les écoles coréennes marquent les mauvaises réponses avec une coche et les bonnes réponses avec un cercle -

5
Federico Kotek

Les seules conventions que je connais sont (1) n'utilisent pas la couleur seule pour transmettre des informations (comme vous le signalez) et (2) n'utilisent pas les icônes seules non plus. (Voir "Les icônes ont besoin d'une étiquette de texte" dans cet article @ Nielsen/Norman .)

Je ne connais pas votre situation spécifique, mais nous pourrions extrapoler # 2 pour couvrir les formes. Par conséquent, vous devrez envisager d'utiliser du texte pour transmettre vos statuts. L'ajout d'un symbole ou d'une couleur est bien, mais ce ne sera pas ce qui fournira les informations d'état à tous vos utilisateurs.

3
Ken Mohnkern

Deux considérations ici, toutes liées à WCAG 2.0/1.4.1 . Le but est de ne pas se fier uniquement à la couleur ou à la forme pour transmettre un sens à un utilisateur ou à un appareil fonctionnel.

  1. Si les symboles que vous utilisez actuellement comportaient une sorte d'icône, vous résoudriez le problème de la dépendance à la couleur pour transmettre du sens.
  2. Si vous utilisiez des icônes dans les symboles et fournissiez un équivalent texte ("Succès", "Avertissement", "Erreur"), vous aideriez également les utilisateurs souffrant de daltonisme comme ceux qui utilisent un lecteur d'écran.
3
Nic

Une bonne stratégie consiste à renforcer un indicateur de forme ou de position avec une différence de luminosité.

Par exemple, les feux de circulation utilisent le rouge, l'orange et le vert, mais les personnes qui ne peuvent pas voir la différence peuvent toujours apprendre leur position en haut/au milieu/en bas. De même, on peut apprendre par la forme - un symbole X signifie "fermer" et + signifie "ajouter", etc.

Une fois la vérité apprise, elle est associée à une couleur, même si la couleur est incorrecte, il est toujours possible pour la personne d'identifier les bons feux de circulation par couleur, tant que la luminosité n'est pas similaire.

La plupart des verts utilisés dans la signalisation et presque tous les signaux de marche et les feux de circulation ont une teinte très claire de vert (haute luminosité/contenu blanc) et les rouges ont tendance à être d'une luminosité moyenne ou d'une teinte claire. Ce n'est pas par accident, même une personne qui voit en niveaux de gris serait toujours en mesure de distinguer les deux.

Comprendre cela vous ouvre plus d'options car vous pouvez toujours, par exemple, utiliser les teintes avec lesquelles les gens ont des problèmes tant que l'un est clair et l'autre sombre.

1
jv_

Les développeurs du jeu Borderlands ont eu le même problème . Pour ceux qui ne connaissent pas le jeu, c'est un jeu RPG/FPS situé sur une planète désertique futuriste où les monstres et les ennemis déposent du butin qui sont affichés avec un faisceau coloré en fonction de la qualité.

Pour gérer le daltonisme, ils

  • mettre des paramètres de daltonisme où les utilisateurs sélectionnent quel cas ils ont (protanopie, deutéranopie, ..)
  • répertorié toutes les couleurs de faisceau et les mettre dans un filtre Daltonize pour voir si elles sont toujours accessibles
  • ajout d'un indice textuel lors du survol de l'objet

Si vous souhaitez tester des couleurs sur un site internet ou autre, ne vous contentez pas de mettre une couleur à Daltonize, prenez tout le contexte (photos, texte, ...) pour voir si elle est lisible.

0
Goufalite