Comment faire fonctionner les icônes monochromes?
Mon entreprise vient de mettre en place un thème d'icônes monochromes pour tenter de passer à une interface plus "moderne".
Les retours de la première série de tests utilisateurs ont été mitigés:
- Presque tout le monde convient que le thème est superbe
- Les personnes de moins de 25 ans ont peu de mal à manipuler l'interface
- Les personnes âgées ont du mal à savoir si les icônes sont activées, désactivées ou sélectionnées
- Les utilisateurs signalent des problèmes de localisation des éléments dans l'arbre de navigation, car ils ne peuvent plus utiliser la couleur pour distinguer les icônes
La plupart de nos utilisateurs sont des personnes âgées et utilisent le logiciel depuis des années. Comment conserver l'effet visuel saisissant d'un thème monochrome, tout en facilitant l'utilisation de l'interface? Je suis prêt à réintroduire une quantité limitée de couleurs.
- Sélectionné - Créez un état de sélection inversé qui rendrait cette fonctionnalité plus importante. De nombreuses façons d'accomplir, mais à titre d'exemple; Rendre l'arrière-plan du bouton noir avec une icône de crayon blanche ou gris clair.
- Activé - Augmente le contraste. Nos yeux deviennent moins sensibles à la lumière et voient une section plus étroite du spectre des couleurs à mesure que nous vieillissons. L'augmentation de la différence entre les gris activés et désactivés facilitera la différenciation.
- Distinguish - Vous pouvez également utiliser de nombreux autres mécanismes pour différencier ces deux états. Par exemple; une ombre subtile sous les états actifs aidera à les distinguer de leurs homologues désactivés.
- Taille - Le visuel que vous avez joint peut être réduit, mais de toute façon, si une grande partie de votre démographie est plus ancienne, vous devriez envisager de créer des icônes plus grandes. Cela aidera les yeux plus âgés à voir les différences entre les icônes et, finalement, facilitera la compréhension.
La réponse n'est pas un seul changement. Je soupçonne qu'une combinaison d'ajustements sera nécessaire pour atteindre votre objectif d'une meilleure compréhension.
contraste
Vos icônes manquent de contraste perceptible - à la fois entre l'icône et l'arrière-plan, ainsi qu'entre les icônes actives et les icônes inactives.
Augmentez le contraste.
Je déteste être un adepte de la tradition, mais je pense que, dans ce cas, il semble que le goût de la gestion de l'interface utilisateur ait pris le pas sur l'expérience utilisateur.
En termes d'expérience utilisateur, il n'y a rien de mal à ce que vous aviez, en fait, il semble que cela aurait pu être mieux - étant donné que tout le monde l'a compris. Les couleurs peuvent également aider avec vos rapports de contraste.
Il pourrait être utile de ré-aborder la conception et plutôt que de définir la spécification comme étant de supprimer les couleurs, examinez comment les couleurs sont utilisées et voyez s'il existe un moyen de "moderniser" sans le perdre. Quant à la façon dont vous le faites, cela dépend de vous en tant que concepteur d'interface utilisateur ainsi qu'en tant que concepteur UX.
La familiarité joue un grand rôle dans l'UX, même si vous n'aimez pas la façon dont elle force votre main!
J'espère que tout fonctionne! :)
Quelque chose à comprendre en ce qui concerne la vue humaine et l'âge - cela a tendance à empirer avec l'âge parce que les lentilles des yeux deviennent plus rigides et moins flexibles avec l'âge.
Pour cette raison, les affections oculaires comme l'astigmatisme (vision double, problèmes de focalisation) sont plus fréquentes à mesure que les gens vieillissent.
Ce que cela signifie pour l'expérience utilisateur, c'est que même si les plus jeunes peuvent apprécier de jolies petites icônes subtiles, les personnes âgées peuvent se plisser les yeux pour essayer de forcer leurs lentilles pas si flexibles à voir l'interface utilisateur de la même manière que le les jeunes le font.
Cela dit, voici quelques problèmes potentiels:
TAILLE - la taille des icônes doit être augmentée
Si votre public est un public plus âgé, veuillez prendre en compte la taille. Cela a à voir avec toutes les affaires de strabisme que j'ai mentionnées. Vous voulez que votre interface soit agréable à regarder, pas quelque chose qui incite les gens à se pencher en avant et à se dire "Attendez, qu'est-ce que c'est?"
Une interface plus grande avec de plus grandes icônes aidera également à aborder l'ensemble, "Je ne trouve rien dans l'arbre de navigation!" problème aussi.
CONTRASTE DE COULEUR ET MOTIFS - le contraste doit être augmenté et les motifs doivent également être cohérents
Comparez l'icône de l'outil crayon sélectionné à l'icône du dossier et à l'icône de la maison ou à toute autre icône dont la couleur de remplissage est plus foncée.
Remarquez comment ils sont très similaires en termes de couleur? Notez également la subtilité de la différence de couleur entre activé et désactivé (je suppose que le presse-papiers est désactivé)/icônes très légèrement colorées (celles vers la moitié droite).
Cela est source de confusion car même si l'outil crayon est sélectionné avec une boîte remplie de couleur carrée plus sombre, il partage toujours une couleur très similaire à d'autres icônes non sélectionnées comme l'icône de la maison et l'icône du dossier. De même, la subtilité de la différence de couleur entre activé et désactivé est trop subtile.
De plus, vous avez une collection d'icônes dont les motifs/schémas/styles de coloration ne sont pas tous uniformes (ce qui n'est pas nécessairement une mauvaise chose ou quelque chose que vous pouvez aborder, mais je le dis simplement en fait) car certains ne sont que des contours. .. comme l'icône i et certains sont remplis de couleur plus foncée comme les icônes de dossier et de maison et d'appareil photo.
En raison du manque d'uniformité dans la coloration -scheme/style- (certains remplis, certains décrits), cela ajoute un sens de variation naturelle à l'interface utilisateur qui introduit potentiellement un lieu de confusion pour trouver la racine. Parce que si quelqu'un cherche une icône sélectionnée et qu'il cherche une icône remplie ... il pourrait - à première vue - voir quelque chose comme l'icône du dossier et penser que c'est celle sélectionnée quand ce n'est pas parce que visuellement, il y a déjà icônes "remplies".
Pour ces raisons, j'estime que l'augmentation du contraste des couleurs et - si possible - l'amélioration du maintien du même motif/schéma/style dans la coloration des icônes (tous les contours uniquement ou tous les remplissages uniquement ou une combinaison des deux, ou, si vous vous souhaitez conserver la variation, assurez-vous qu'il y a suffisamment de variation entre les icônes non sélectionnées et les icônes sélectionnées) serait utile.
Une manière spécifique de peut-être souligner le fait que l'icône sélectionnée est sélectionnée est de faire en sorte que la couleur de remplissage de l'arrière-plan du carré soit une couleur unique pour l'interface. De plus, ajoutez une bordure 1px en utilisant une version légèrement plus sombre (et encore unique) de la couleur de remplissage. Quelque chose comme ça ferait que l'icône sélectionnée ressortrait plus, mais pas comme un pouce endolori.
Pour résumer cette section, un meilleur contraste de couleurs (en termes d'icônes individuelles et en termes d'icônes à l'échelle de l'interface) et une meilleure uniformité entre les icônes d'états similaires (icônes à l'échelle de l'interface, icônes re: sélectionnées, désactivées, etc.) aideront pour rendre l'expérience visuelle plus agréable pour les yeux. Cela permettra également d'améliorer la facilité avec laquelle les utilisateurs peuvent trouver les icônes dont ils ont besoin.
La tendance actuelle n'est pas monochrome, mais design plat. Vous pouvez toujours utiliser des couleurs, en prenant la couleur la plus importante qu'elle avait précédemment pour chaque icône devrait aider les utilisateurs habitués à l'ancien design.
Je pense qu'il y a des questions/considérations de conception qui doivent encore être décidées avant de pouvoir prendre la décision, à savoir:
- Essayez-vous de répondre aux besoins des utilisateurs plus âgés ou plus jeunes? Quelle est la répartition actuelle de l'âge des utilisateurs et quelle est la tendance? Est-il judicieux de concevoir exclusivement pour eux, ou de permettre une certaine personnalisation dans le logiciel?
- Le fond gris est-il conçu comme une couleur neutre ou pour éviter certains conflits de couleurs avec le reste de l'interface utilisateur? Le gris est généralement utilisé pour les états désactivés, vous ne devriez donc pas rendre l'état activé trop similaire sinon il n'y aura pas assez de contraste.
- N'est-il pas possible d'introduire d'autres éléments visuels qui aideront à diviser la navigation en sections logiques (par exemple des bandes verticales comme les barres de ruban MS Office).
- Plutôt que de se fier uniquement aux icônes, existe-t-il des info-bulles ou des étiquettes qui permettent aux utilisateurs de vérifier sur quelle icône ils appuient avant de le faire, surtout s'il s'agit d'une fonction importante qui modifie l'état des données?
Je pense que si vous pouvez répondre à ces questions et regarder comment les tests utilisateurs sont effectués, vous devriez trouver la réponse à la question.
Je pense qu'un bichrome jeu de couleurs pourrait mieux fonctionner que le monochrome dans ce cas.
Toutes les icônes sélectionnées peuvent être d'une seule couleur, c'est-à-dire vertes, et toutes les icônes non sélectionnées peuvent être grises. Faites juste attention à utiliser une couleur qui ne se confond pas facilement avec le gris dans des situations à faible contraste telles que l'angle de vue sous-optimal LCD. Le bleu serait un exemple de couleur avec un tel problème.
Lorsque les icônes sont monochromes, le contour est la chose la plus difficile pour un utilisateur de les distinguer. Vous devez améliorer le contraste. Je suggérerais 2 choses à faire tout en gardant la direction heureuse:
Supprimez l'arrière-plan gris de la barre d'outils. Gris sur gris n'est jamais une bonne combinaison. Vous pouvez rendre l'arrière-plan blanc sans violer vos instructions de garder le monochrome de l'interface utilisateur et lui donner une bordure grise pour vous assurer qu'il se démarque toujours comme une boîte à outils.
Avec un fond blanc, vous pouvez ensuite utiliser la nuance de gris plus pâle (précédemment utilisée pour le fond) pour les icônes désactivées.
Bien qu'il existe déjà de bonnes réponses théoriques, je pense qu'il existe une solution pratique à votre problème.
Le plus gros problème que vous avez cité est le contraste. Vos utilisateurs plus âgés ne peuvent pas faire la distinction entre les icônes sélectionnées et désactivées. Plutôt que d'essayer de rendre vos icônes désactivées moins visibles qu'elles ne le font déjà en gris sur gris. Vous devez faire ressortir plus clairement vos icônes activées par-dessus.
Vous pouvez le faire sans compromettre votre palette de couleurs avec un contour noir aux bords durs.
L'exemple ci-dessus est un peu merdique, car tout ce à quoi j'ai accès est mspaint pour le moment, mais vous pouvez voir comment l'ajout d'un contour montre clairement que cette icône est dans un état différent des autres.