Article original : How to increase user engagement with your app using Color Theory
Par Arnav Varyani
« La couleur est une puissance qui influence directement l'âme. » — Wassily Kandinsky
Les couleurs sont la propriété possédée par un objet de produire différentes sensations sur l'œil en fonction de la manière dont il réfléchit ou émet la lumière.
Les couleurs sont souvent attribuées à notre subconscient, à notre passé et à nos préférences personnelles. Choisir la bonne couleur peut être l'une des parties les plus cruciales de la conception de littéralement n'importe quoi, allant d'une affiche à une application. Plus important encore, la couleur a la capacité d'évoquer un certain type d'émotion chez une personne, ce qui peut varier en fonction de facteurs comme la culture et le genre.
Comment les couleurs peuvent-elles influencer la façon dont vous prenez des décisions ?
Nous avons tous été conditionnés socialement par le monde dans lequel nous vivons. Tout ce que nous voyons a une couleur qui est utilisée comme une technique pour stimuler un certain type d'émotion chez les gens.
Les couleurs primaires sont essentiellement les couleurs parentes de toutes les couleurs qui existent ; elles sont comme les racines de chaque couleur.
Rouge — Énergie, Puissance, Amour
Le rouge crée un sentiment d'urgence, ainsi vous remarquerez qu'il est utilisé dans des affiches telles que celles des soldes. De plus, le rouge a la capacité d'augmenter votre appétit, il est donc utilisé assez souvent dans l'industrie alimentaire. C'est une couleur très intense émotionnellement, donc l'utiliser comme couleur de fond peut ne pas être la meilleure idée.
Jaune — Optimisme, Intellect, Joie
Le jaune est une couleur associée au soleil, et tout comme le rouge, il est vraiment brillant. Ce serait un meilleur choix de l'utiliser dans le logo de votre application ou dans la conception de vos captures d'écran. Cette couleur peut devenir trop écrasante, alors utilisez-la moins que les autres.
Bleu — Stabilité, Tranquillité, Confiance
Le bleu indique généralement la fraîcheur et le calme et crée un sentiment de confiance, c'est pourquoi il est couramment utilisé dans les logos des compagnies aériennes et des hôpitaux. Vous remarquerez que de nombreux logos d'applications utilisent cette couleur, surtout ceux qui demandent beaucoup de vos détails privés.
Les couleurs secondaires sont les mélanges de deux des trois couleurs primaires. Elles sont vert, violet et orange.
Vert — Croissance, Santé, Fraîcheur
Le vert est la couleur de l'environnement et est fortement associé à l'argent. Il est généralement utilisé pour promouvoir des aliments sains et des produits frais. Vous remarquerez qu'il est célèbre dans les applications liées à la santé et au fitness.
Violet — Royauté, Noblesse, Richesse
Le violet a l'énergie du rouge et la stabilité du bleu ; traditionnellement, il est considéré comme une couleur féminine, donc vous le verrez souvent utilisé dans les industries du maquillage, de la mode et du luxe.
Orange — Enthousiasme, Encouragement, Bonheur
L'orange combine l'énergie du rouge et l'optimisme du jaune. C'est une couleur moins couramment utilisée mais typiquement utilisée dans les produits à base d'agrumes. Il a également la capacité d'augmenter le flux d'oxygène dans le cerveau.
Gris, blanc et noir
Ce sont communément appelés des couleurs fades mais qui donnent tout de même un look très classe et vous les verrez souvent utilisées dans les marques de voitures. Le gris est généralement considéré comme une couleur sans émotion et il se situe du côté neutre. Le noir est généralement associé à la puissance, à l'élégance, au mystère tandis que le blanc est associé à la sécurité, à la pureté et à la foi.
Maintenant que vous connaissez les couleurs de base, vous n'êtes pas limité à ces six couleurs. En utilisant le cercle chromatique, vous pouvez également créer de nombreux types de palettes de couleurs tant que vous maintenez une harmonie colorée dans votre application.
Comment créer des palettes de couleurs en utilisant le 'Cercle chromatique'
Un cercle chromatique est une organisation illustrative abstraite des teintes de couleurs autour d'un cercle, qui montre les relations entre les couleurs primaires, secondaires, tertiaires, etc. (Source)
Couleurs monochromatiques
Les couleurs monochromatiques sont créées en utilisant la même couleur et en les combinant avec diverses quantités de blanc ou de noir pour créer différents tons et nuances qui se démarquent les uns des autres.
Avantages :
- Tendance
- Utile pour le design numérique moderne
Couleurs analogues
Les couleurs analogues se forment lorsque vous combinez une couleur sur le cercle chromatique avec la couleur immédiatement voisine.
Avantages :
- Facile à regarder
Couleurs complémentaires
Les couleurs complémentaires sont l'exact opposé des couleurs analogues. Leur principal objectif est d'attirer l'attention de l'utilisateur, bien qu'il ne soit peut-être pas idéal de les utiliser pour l'interface principale de l'application.
Avantages :
- Utile pour créer des logos d'applications et des designs de captures d'écran.
Couleurs complémentaires divisées
Il s'agit d'une combinaison de couleurs analogues et complémentaires où vous prenez une couleur et choisissez deux couleurs qui sont juste à côté de la couleur opposée. Ce sont l'une de mes préférées.
Avantages :
- Attire l'attention
- Facile à regarder
Couleurs triadiques
Vous pouvez créer une palette de couleurs triadiques en prenant une couleur sur la palette de couleurs et en traçant un triangle équilatéral sur le cercle chromatique pour former une couleur triadique.
Avantages :
- Attire l'attention
- Bien équilibré
- A un sentiment vintage
Couleurs tétradiques (basées sur un carré)
Une tétrade basée sur un carré est utilisée lorsque les quatre couleurs sont uniformément espacées sur le cercle chromatique.
Avantages :
- Fonctionne mieux lorsque les couleurs doivent être équilibrées.
Couleurs tétradiques (basées sur un rectangle)
Une tétrade basée sur un rectangle utilise quatre couleurs qui sont des paires de deux couleurs complémentaires sur un cercle chromatique.
Avantages :
- Utile lorsqu'une seule couleur dominante est requise.
Facteurs à considérer avant d'utiliser une certaine couleur
Comme je l'ai mentionné précédemment, selon votre public cible, votre utilisation des couleurs devrait différer car elles peuvent ne pas toujours impliquer la même chose.
Culture
C'est l'un des facteurs vitaux à considérer avant d'utiliser une couleur ; selon la fonctionnalité de ce que fait votre application, vous devriez sélectionner une couleur dominante appropriée pour votre application.
Par exemple, si vous concevez une application de rencontre avec le rouge comme couleur dominante, elle obtiendra significativement plus de téléchargements en Asie qu'en Afrique. Voici une liste qui montre comment différentes couleurs sont perçues par différents pays.
Genre
Il a été scientifiquement démontré que les hommes et les femmes préfèrent certaines couleurs à d'autres. Les femmes tendent à préférer les couleurs primaires, et adorent le bleu, le violet et le vert, mais détestent l'orange, le marron et le gris. Si vous le souhaitez, vous pouvez vérifier presque n'importe quelle application/site web d'e-commerce dont le public cible est les femmes et vous trouverez ces couleurs affirmées. De même, les hommes adorent le bleu, le vert et le noir et détestent le marron, l'orange et le violet.
Daltonisme
Le daltonisme touche 1 homme sur 12 (8%) et 1 femme sur 200 dans le monde. Cela signifie que ~300 millions de personnes sont daltoniennes dans le monde et une masse que vous ne devriez pas négliger. La majorité de la population étant des hommes, en gardant à l'esprit les statistiques mentionnées ci-dessus, vous devriez décider de vos couleurs en conséquence. À la fin de l'article, j'ai mentionné un outil que vous pouvez utiliser pour voir comment une personne daltonienne verrait une image en fonction du type de daltonisme qu'elle a.
Nuances de la même couleur
Cela peut également avoir une influence assez importante en fonction de son intensité. Par exemple, le rouge vif peut signifier l'amour, mais une autre nuance de la couleur rouge, comme le cramoisi, ne signifierait probablement pas la même chose.
Quelques excellents outils pour la conception
Maintenant que nous avons couvert les principaux aspects de la théorie des couleurs, voici une liste qui montre certains des sites web que j'utilise pour créer mes propres palettes de couleurs.
- Colorhunt — une plateforme libre et ouverte pour l'inspiration des couleurs avec des milliers de palettes de couleurs tendance sélectionnées à la main
- Quelques autres palettes incluent Coolors, Material Design Palette et Flat UI Colors 2
- ColorZilla — une extension Chrome pour trouver le code couleur hexadécimal de n'importe quel site web.
- Toptal — un excellent outil pour voir comment une personne daltonienne verrait une image.
- Si vous souhaitez être inspiré par quelques sites web qui utilisent leur propre palette de couleurs unique, vous pouvez les voir ici.
Quelques dernières choses à garder à l'esprit
- Testez diverses palettes de couleurs — Essayez d'utiliser différents logos sur votre application pour voir lequel vous obtient plus de téléchargements. Google Play Store vous offre une option pour montrer différents logos aux gens afin que vous puissiez augmenter vos téléchargements.
- Évitez d'utiliser trop de couleurs — Les couleurs peuvent être très amusantes, et nous avons vu cela tout au long de cet article. Mais ne les utilisez pas plus que nécessaire, car cela pourrait simplement ennuyer votre utilisateur et il pourrait finir par supprimer votre application de votre téléphone.
- Utilisez des couleurs vives pour les CTA — Les couleurs vives tendent à être très attrayantes, alors utilisez-les dans les boutons et les logos, essentiellement chaque fois que vous avez besoin que l'utilisateur effectue une action.
- Utilisez des couleurs qui vendent le mieux votre marque — Bien que vous n'ayez pas toujours à suivre les règles, à la fin de la journée, vous vendez un produit et votre principal objectif est de le commercialiser pour le rendre réussi. Alors utilisez les couleurs qui conviennent le mieux à votre produit en gardant tous les facteurs à l'esprit.
En utilisant toutes les techniques et outils dont nous venons de parler dans cet article, j'espère que vous aboutirez à une bonne combinaison de couleurs pour votre propre site web/application. Bonne chance !
C'est mon premier article, donc j'apprécierais si vous laissiez quelques commentaires !