Statut de la flèche vers le bas et de la flèche vers le haut
Je dois créer une application iOS, où il y a des catégories et je dois montrer la diminution et l'augmentation du statut d'une catégorie particulière.
Pour diminuer, j'ai utilisé une flèche rouge vers le bas. Pour augmenter j'ai utilisé une flèche verte vers le haut.
Mais dans certaines catégories, une flèche vers le bas est bonne pour les ventes.
Je suis donc coincé avec quoi faire avec les icônes et les couleurs.
Mon approche initiale était de changer la couleur de la flèche vers le bas du rouge au vert. Mais le problème est que les daltoniens ne comprendront pas.
Puis j'ai pensé à placer des emojis de sourire et de tristesse. Pour le bien, il sourira et pour le mal, il sera triste. Flèche vers le bas et sourire ensemble emoji. Cependant, cela ne serait pas professionnel.
Veuillez voir cette capture d'écran:
Je vais en faire une réponse afin que je puisse développer mon commentaire.
Votre problème principal n'est pas une chose flèche, icône, couleur ou emoji. Votre problème principal est d'ordre conceptuel: vous mélangez des taxonomies avec des gradations qui pourraient être (elles le sont!) Absolument opposées. Ainsi, vous êtes ajouter une charge où l'utilisateur doit faire une interprétation de si votre taxonomie et votre méthode de gradation transmettent une bonne ou une mauvaise chose. C'est extrêmement confus, le niveau de friction ira au toit et tôt ou tard, vous devrez le refaire car il a plus de problèmes que d'avantages.
Au lieu de cela, faites 2 sous-listes : une où "up" est bonne et une où "up" est mauvaise. Vous pouvez conserver votre méthode de flèche haut/bas actuelle telle qu'elle est maintenant, y compris les couleurs. Et si les couleurs vous dérangent, choisissez coffre pour les daltoniens couleurs neutres.
L'important est que up doit signifier up et absolument rien d'autre , donc vos flèches actuelles feront l'affaire. Ensuite, ce que vous devez définir est de savoir si pour un sous-ensemble spécifique up est bon ou mauvais.
Aussi simple que ça, pas de choses compliquées, directement au point
Addenda
Je viens de remarquer que l'une de vos taxonomies inclut le mot Biens. Soyez très prudent et essayez de trouver des alternatives car votre gradation se situe entre bons et mauvais concepts , par conséquent, cette formulation pourrait ajouter une couche supplémentaire de friction. Ou peut être pas. Au cas où, ça vaut le coup d'être testé
Addendum 2
Comme alternative: qu'en est-il de l'utilisation de quelque chose comme dans la réponse de Gino van de Staaij ? Je veux dire, une icône non ambiguë indiquant des informations objectives: la quantité augmente plus/la quantité diminue . De cette façon, vous n'avez pas besoin d'ajouter de subjectivité et votre application mesurera les données réelles. Je ne sais pas si c'est possible, donc l'ajouter comme chemin alternatif/suggestion
Peut-être pourriez-vous utiliser uniquement du noir pour les flèches afin que l'utilisateur connaisse l'augmentation ou la diminution, placez-les à gauche, puis à droite utilisez un rapport d'état de style "barre de santé" qui aurait l'air professionnel et pourrait indiquer le positif/aspect négatif et même sévérité. (Utilisez des couleurs autres que le rouge/vert si vous êtes préoccupé par les problèmes de daltonisme)
(* REMARQUE: mes couleurs peuvent ne pas correspondre à l'orientation des flèches car je viens de le faire au hasard sans essayer de découvrir quelles flèches sont bonnes (vertes) et lesquelles sont mauvaises (rouges))
(De plus, les flèches peuvent même ne plus être nécessaires si vous ajoutez ces publicités visuelles, le tri peut être modifié en fonction des performances (c'est-à-dire "bon" v "mauvais") au lieu de directionnel (c.-à-d. "incrément" v "décrément") 
. c'est juste que les personnes daltoniennes pourront toujours les lire même sans les informations de couleur) - Version indicative des couleurs à gauche, simulation des daltoniens à droite 
J'ai toujours aimé ces icônes, qui indiquent une tendance sur un graphique. La forme et la direction combinées de la flèche indiquent la progression de la tendance . 
Je les ai obtenus chez Ionicons: http://ionicons.com/
Mettez le bon en haut et mauvais en bas (ou peut-être inversez ceci si vous voulez attirer davantage l'attention sur les mauvais). De cette façon, vous aurez deux sections divisées par une cartographie conceptuelle claire .
J'imagine que la question principale est plus du type " Dans quels domaines avons-nous du mal?" plutôt que " Cette section a-t-elle augmenté ou diminué? "Cette conception permettrait à l'utilisateur de comprendre clairement que" ceux-ci se portent bien et ceux-ci se portent mal ".
Gardez toujours les flèches, mais coloriez toutes les flèches (haut et bas) dans la section BON vert. Colorez toutes les flèches (haut et bas) dans la section BAD rouge.
Que vous étiquetiez ces sections ou non, cela dépend de vous. (Bon/Mauvais, Amélioration/Aggravation, etc.)
Exemple:
J'ai changé les flèches en quelque chose qui, selon moi, pourrait être traité plus rapidement. Les lignes fines ne fournissent pas une indication visuelle aussi forte que la direction dans laquelle ils pointent.
Peut-être qu'au lieu d'émoticônes non professionnelles, vous pouvez utiliser un symbole plus simple pour indiquer un bon ou un mauvais résultat.
Dans ce cas, j'ai utilisé une tique et une croix:
Mais comme l'indication est probablement plus importante que la direction, nous pouvons mettre davantage l'accent sur les tiques et les croix:
Notez que les flèches sont maintenant plus petites et s'estompent vers la couleur d'arrière-plan, elles sont donc visuellement secondaires aux bonnes/mauvaises icônes, mais elles peuvent toujours fournir leurs informations si l'utilisateur le souhaite.
J'aime aussi la suggestion de Gino d'utiliser des flèches en zig-zag pour communiquer une tendance à la hausse ou à la baisse (comme sur un graphique), mais je n'ai pas eu le temps de les dessiner!
Une autre façon d'afficher la tendance serait d'utiliser des nombres: +20, -5, etc. Bien que l'affichage des valeurs puisse sembler trop d'informations, on pourrait soutenir que les flèches sans amplitude peuvent être trompeuses ou même dangereux.
Par exemple, +0,1 est plus proche de -0,1 que de +100, mais les flèches représenteraient les deux changements positifs comme équivalents. De même, le nombre concerné dans cet ensemble de données serait perdu avec seulement des flèches: +3, +5, +1, -839, +2, +4, -3
Comme compromis entre les nombres et les flèches, des flèches à double tête pourraient être utilisées pour les balançoires supérieures à 10 et les flèches à trois têtes pour les balançoires supérieures à 100.
Vous avez raison d’éviter l’utilisation de la couleur seule - en particulier lorsque vous envisagez des états rouge/vert de la même forme.
La façon d'aborder cela est de changer la forme de la flèche et il y a plusieurs façons de le faire. Quelques suggestions:
1) Vous pouvez mettre en jeu la gauche et la droite, où la droite est progressive et la gauche rétrograde - une flèche pointant vers le haut et la droite est un incrément positif mais une flèche pointant vers le haut et la gauche est un incrément négatif. (NB: je pense que c'est probablement trop compliqué pour une utilisation générale)
2) Vous pouvez essayer de varier l'épaisseur des lignes des flèches - des lignes plus lourdes pourraient indiquer un effet plus souhaitable.
3) Vous pouvez utiliser des formes solides et basculer entre rempli et contour.
Ce ne sont que quelques suggestions pour vous aider à penser au-delà de votre bloc actuel - Vous pouvez trouver autre chose entièrement!
Pour tirer parti de la réponse de @Adriano Repetti et en empruntant à nouveau à Conception du tableau de bord de l'information par Stephen Few, je voudrais souligner certaines hypothèses sur votre point de vue et faire un suggestion.
En tant que personne qui n'est pas daltonienne, il m'a quand même fallu un certain temps pour comprendre ce que toutes les flèches signifient! Votre interface m'a dérouté, j'ai donc essayé de réfléchir à ce que vous avez l'intention de faire.
J'ai donc pensé qu'il était assez clair que vous vouliez que j'entre dans cette application si ces catégories ont augmenté ou diminué, depuis la dernière mise à jour. Il est également clair qu'un jugement est en cours quant à savoir si l'augmentation/la diminution a un impact positif ou négatif sur chaque élément - indiquant éventuellement une valeur souhaitée ou cible.
Il s'ensuit que le bouton `` Tout '' semble un peu redondant, car il est peu probable que je souhaite tout incrémenter en même temps (je suppose que c'est ce que cela fait), étant donné que certaines choses nécessiteront une incrémentation et une décrémentation.
Avoir les symboles sur les deux autres boutons en haut pour être les mêmes que les icônes dans la liste m'a longtemps dérouté. Étant donné que le bouton `` Tout '' pourrait aller, peut-être que prendre beaucoup de place en haut de l'écran est une bonne façon de procéder.
Comme d'autres l'ont souligné, la tendance au fil du temps n'est pas bien représentée par une seule icône, donc peut-être qu'un graphique de tendance quelconque aiderait à la compréhension. Comme il y a un objectif ou un moyen de passer, peut-être qu'un graphique à puces fonctionnerait.
J'ai fait une maquette. J'ai supprimé la flèche `` droite '', ce qui, je suppose, signifie `` montrez-moi plus de détails sur cette catégorie '', et je l'ai laissé aux utilisateurs d'appuyer simplement sur le titre de la catégorie pour voir plus de détails.
Vous pouvez également varier la saturation de la barre pour montrer l'importance - je suis avec tout le monde pour éviter d'utiliser la couleur pour donner du sens. Une saturation élevée montre un avertissement, en termes de "c'est mauvais, faites attention!"
Vous pouvez également échanger le graphique à puces contre une ligne spark pour montrer comment il a changé au fil du temps.
J'éviterais de ne transmettre des informations qu'avec des couleurs . Le vert pour "haut" et le rouge pour "bas" n'est pas un motif universellement accepté (et daltonien les gens peuvent ne pas le voir). Étant donné que vous ne faites pas besoin de couleur, je le laisserais simplement tomber. Utilisez un symbole gris, la couleur n'est pas nécessaire.
Pour mieux donner un sens à la tendance (et clarifier la signification des symboles pour ne pas confondre avec actions de déplacement) vous pouvez utiliser une flèche barrée ↗. Une autre option? Choisissez les symboles les plus universellement compris: + et -.
Maintenant, le deuxième point est de savoir si une tendance positive est une bonne chose ou non. Vous n'avez pas besoin de charger votre interface utilisateur avec des symboles et des couleurs, ce dont vous avez probablement besoin est de surligner uniquement quand une tendance est mauvaise. Cette solution a trois très bons résultats:
- Vous gardez votre interface simple, aucun symbole inutile n'est visible. Vous ne surchargez pas le cerveau des utilisateurs avec des informations non essentielles. Cela est particulièrement vrai dans votre cas, car vous avez dit qu'il s'agissait d'un tableau de bord.
- Les utilisateurs n'ont à apprendre aucune convention (une flèche vers le bas épaisse est mauvaise, une flèche vers le bas fine est bonne et ainsi de suite ...)
- Vous mettez immédiatement en évidence ce qui doit être noté (une mauvaise tendance). Si rien n'est affiché, alors tendance est un bonne chose.
Pour tout rassembler dans une maquette:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Dans cet exemple, j'ai ajouté le symbole de tendance à la hausse/à la baisse, mais il peut être déplacé vers une autre position en fonction du style général de votre application (et il doit probablement être plus petit, BTW). Notez qu'il peut être omis lorsque la vue est filtrée car elle est redondante.
Quel symbole (! dans mon exemple) est préférable que l'on dépend de nombreux autres facteurs: est-ce une alerte ou vous voulez simplement la mettre en évidence? Faut-il prendre des mesures immédiates? Est-ce quelque chose de dangereux? Notez que vous pouvez même supprimer ce symbole supplémentaire et le remplacer + et - (par exemple couleurs inversées ou icône encerclée/encadrée) mais cela peut être beaucoup moins clair si l'alerte n'est pas limitée à quelques éléments (car vous ne pouvez pas immédiatement comprendre lequel est mis en surbrillance et lequel ne l'est pas). Vous pouvez également utiliser d'autres techniques pour mettre en évidence un élément, des centaines de publications à ce sujet sont disponibles.
Addendum: vous voudrez peut-être lire Conception de tableau de bord efficace par Stephen Few.
Pensez à séparer la liste en deux sous-listes, une des "choses qui sont bonnes quand elles augmentent" et une des "choses qui sont mauvaises quand elles augmentent".
Je ne sais pas quel est votre domaine d'activité exact ici, mais il semble que vous ayez des éléments générateurs de revenus et des éléments générateurs de passif, alors pourquoi ne pas simplement faire deux listes? Cela pourrait être fait "en ligne", c'est-à-dire dans la même liste verticale, mais avec un séparateur, ou sur des pages séparées. Dans les deux cas, la séparation des deux types d'articles le rendrait beaucoup plus clair.
Une chose à noter en général, sans tenir compte des implications de la cardinalité ou de la couleur des flèches: les flèches qui pointent vers le haut ou vers le bas sont généralement déroutantes, car elles peuvent avoir plusieurs significations:
- Cette ligne peut être réduite ou développée en cliquant sur la flèche;
- Cette ligne peut être déplacée vers le haut ou vers le bas en cliquant sur la flèche;
- Cette ligne a changé de valeur par rapport à la dernière fois;
- Cette valeur de ligne peut être modifiée en cliquant sur la flèche.
Le problème est qu'une flèche qui pointe juste dans une direction cardinale a été utilisée pour différentes significations dans le passé. Cependant, si votre flèche pointe dans une direction intercardinale orientale, donc en haut à droite ou en bas à droite, la flèche n'implique plus une dimension, mais deux dimensions à la place, où une dimension est fortement impliquée comme étant le temps.
Bien que cela ne résout pas votre problème directement, je pense que c'est quelque chose qui mérite d'être gardé à l'esprit et qui peut aider à résoudre l'ambiguïté sous d'autres aspects.
Pourquoi ne pas montrer un changement numérique en%?
Vous pouvez colorer le texte en vert/rouge pour aider les non-daltoniens à savoir si le nombre est bon ou mauvais (dans le cas où un pourcentage négatif pour une catégorie est une bonne chose); les personnes daltoniennes auraient toujours accès aux mêmes informations en un coup d'œil sans la courtoisie d'un indice de couleur du texte.
Que diriez-vous simplement d'un cercle vert pour le bien et d'un cercle rouge pour le mal? Je ne vois pas comment cela dépeint moins d'informations que vos flèches - en supposant qu'elles sont universellement d'accord avec votre évaluation selon laquelle une baisse dans une catégorie est mauvaise et une hausse dans une autre catégorie est mauvaise.
C'est cool de se soucier des personnes daltoniennes. Je suggère de penser un peu en dehors de la boîte et de mettre un option daltonien dans les paramètres de l'application. De cette façon, vous pouvez passer à des couleurs plus adaptées