Codage couleur vs couleurs des boutons par défaut
Contexte: projet web autour de la recherche sociale avec gamification.
Nous avons 7 modules de projet majeurs (sondages, analyses, jeux, etc.) chacun avec la couleur correspondante. Cette couleur utilisée dans les arrière-plans, les widgets, les icônes, etc. Et dans les boutons aussi.
Problème soulevé au milieu du développement. Nous découvrons la collision dans le codage des couleurs: nos couleurs de boutons d'action par rapport aux modules par défaut (rouge pour supprimer, vert ou bleu pour enregistrer).
Ainsi, nous voyons quelques options (toutes en quelque sorte faibles):
Ignorez la coloration des boutons d'action par défaut et utilisez nos couleurs.
Point faible: l'utilisateur pourrait être confondu avec les boutons jaunes "enregistrer".Utilisez un codage couleur mixte: excluez le vert, le rouge et peut être bleu du codage basé sur module.
Point faible: trop de couleurs significatives.Utilisez une seule couleur neutre pour tous les boutons. Par exemple blanc ou gris.
Point faible: les boutons d'action primaire ne se distingueraient pas visuellement des boutons secondaires.Réduisez considérablement l'utilisation du codage couleur des modules. Par exemple, à l'arrière-plan de l'en-tête uniquement.
Points faibles: codage couleur mélangé, reconnaissance de module affaiblie, perte d'une bonne option pour mettre en évidence les liens vers le module ou la fonctionnalité correspondante avec sa couleur.
Alors, y a-t-il une autre option qui nous manque et laquelle semble être la meilleure et pourquoi?
Vous avez raison de dire que chaque conception a des points faibles. Je ne sais pas s'il existe une solution unique pour cela. L'essentiel est que plus vous incorporez de couleurs à votre thème, moins elles ont de sens .
Cependant, si vous devez avoir une abondance de couleurs, je vois cela comme une solution possible:
- Arrière-plan - Version claire et pâle de la couleur de la section
- Boutons principaux - Version vibrante et complète de la couleur de la section avec du texte blanc
- Boutons secondaires - Bouton gris clair avec une version vibrante de la couleur de la section
Par exemple, si vous aviez une section sur le thème orange, vous pouvez utiliser les éléments suivants pour communiquer les boutons principal et secondaire:
Avec ce modèle, vous perdriez l'idée "le vert est primordial partout", mais vous pourriez créer un thème de section plus fort et plus distinctif. Je pense qu'il serait possible de modifier les couleurs de chacun de vos boutons principaux jusqu'à ce qu'ils aient tous approximativement le même poids visuel.
Tout d'abord, je dois souligner que le codage couleur sans prise en charge du texte/iconographie est extrêmement mauvais pour l'accessibilité.
Je vous suggère de générer une palette secondaire de version en sourdine de vos couleurs d'origine - utilisez la version en sourdine pour les arrière-plans et la version forte pour vos points d'interaction.
Comme vous avez beaucoup d'actions, utilisez la couleur pour indiquer l'importance d'une action , pas pour différencier toutes les actions.
- Utilisez la couleur principale pour désigner l'élément d'interaction principal auquel une action est affectée. Ou pour mettre l'accent sur l'état de l'élément interactif.
- Utilisez une couleur secondaire pour une action secondaire ou pour désigner une section du site, par exemple l'en-tête.
Donc dans votre cas, une solution similaire à 4. Utilisez la couleur principale pour le bouton d'action principale, la couleur secondaire pour les autres actions.
Quelques sources:
Il serait préférable de repenser les palettes de couleurs pour tous les modules afin de maintenir la cohérence visuelle dans toute l'interface utilisateur au lieu de le faire pour chaque module. Maintenir la cohérence visuelle revient à définir des règles tacites, et c'est pourquoi les codes de couleurs par défaut des boutons sont respectivement Rouge et Vert pour Supprimer et Enregistrer.
"Prenons un exemple plus près de chez nous: vous ne passeriez pas des heures à chercher une fourchette ou une cuillère dans votre cuisine, n'est-ce pas? Pourquoi pas? Parce qu'ils sont au même endroit qu'ils étaient la semaine dernière… et la semaine précédente. C’est logique. Vous ne pensez pas, vous le faites. D'une certaine manière, la cohérence rend nos tâches de routine subconscientes. " --- (UX Booth )
Les utilisateurs doivent ressentir la même chose lorsqu'ils reviennent sur votre application/site Web, comme retourner chez eux. L'harmonie dans les codes de couleur minimisera la courbe d'apprentissage parmi vos utilisateurs, ce qui se traduira par une meilleure expérience utilisateur.