Comment la couleur affecte l'UX et le comportement de l'utilisateur
Publié: 2016-12-24Couleur : lorsqu'un design est correct, vous ne le remarquerez probablement jamais - mais quand il ne va pas ? Peu importe s'il s'agit d'un arrière-plan trop lumineux et brûlant pour les yeux ou d'un texte noir sur un fond gris foncé, les choix de couleurs médiocres peuvent ruiner même l'application la plus fonctionnelle. Tout comme d'autres aspects du design, la couleur n'est pas seulement là pour pimenter une application. La couleur peut être un outil comme n'importe quelle autre caractéristique de l'expérience utilisateur.
La philosophie de conception graphique utilisée pour concevoir une application - de la taille de chaque élément à la façon dont il glisse sur l'interface utilisateur, en passant par la couleur - a un impact sur le comportement de l'utilisateur. Il y a une bonne raison pour laquelle les concepteurs passent souvent les premiers mois d'un projet à s'acharner sur les palettes de couleurs et non sur les wireframes, après tout.
Choisir la palette parfaite peut faire la différence entre la conception d'une application de méditation qui aide réellement les utilisateurs à se détendre et celle qui leur donne envie de jeter leur téléphone contre le mur. C'est la différence entre une application bancaire qui vous rend nerveux à l'idée de vérifier votre solde et une autre qui peut apaiser vos inquiétudes quant au moment où le prochain chèque de paie arrivera.
Alors, comment faire les choses correctement et que pouvez-vous faire pour maîtriser la couleur dans votre conception ?
Philosophie du design graphique : la théorie de la couleur
Avant d'entrer dans le vif du sujet de la philosophie du design graphique (et de la psychologie !), il est important de comprendre certains principes de base de la couleur et du design. Bien que la couleur ne semble pas être un sujet extrêmement complexe, il y a une bonne raison pour laquelle chaque cours d'art commence non seulement par une leçon sur la façon d'utiliser la couleur, mais aussi sur la façon de créer de la couleur.
Les bases - comme expliqué par la roue chromatique - sont simples : les couleurs primaires (rouge, jaune et bleu) peuvent être combinées pour créer des couleurs secondaires (vert, violet et orange). De même, diverses fractions de blanc peuvent être ajoutées à une couleur pour créer des teintes, et du noir peut être ajouté pour créer des nuances.
Les couleurs opposées les unes aux autres (comme le rouge et le vert, ou le bleu et l'orange) sont considérées comme complémentaires. Ces couleurs contrastent fortement, ce qui les fait ressortir lorsqu'elles sont côte à côte (ou superposées).
Les couleurs qui sont côte à côte sont considérées comme analogues. Ces couleurs ont un contraste beaucoup plus faible, ce qui signifie qu'elles ont tendance à ne pas se démarquer autant lorsqu'elles sont rapprochées.
Il n'y a rien d'intrinsèquement « bien » ou « mal » dans les couleurs à contraste élevé ou faible. Parfois, une application demandera des couleurs vives qui contrastent fortement les unes avec les autres. D'autres fois, vous voudrez quelque chose d'un peu plus doux. En règle générale, plus vous voulez que quelque chose se démarque, plus vous devez vous fier aux couleurs contrastées.
La meilleure façon d'avoir une idée de la façon dont les couleurs vont (et ne vont pas) ensemble est de jouer avec elles. Même si vous ne travaillez pas sur un projet en ce moment, un tour rapide de la roue chromatique d'Adobe peut amener votre esprit à penser à la couleur d'une nouvelle manière.
Échantillons d'émotion: couleur et psychologie
Lorsque vous consolidez la philosophie de conception graphique derrière votre application, vous ne pouvez pas simplement penser à l'apparence des choses, vous devez penser à ce qu'elles ressentent. Nous ne parlons pas non plus de retour haptique. Depuis que Johann Wolfgang Goethe a étudié les effets physiologiques de la couleur, nous sommes obsédés par l'utilisation de la couleur pour produire des effets physiques et émotionnels.
Aujourd'hui encore, la couleur occupe une place centrale dans la philosophie du design de nombreuses marques. Les soins de santé, les entreprises et le gouvernement ont tous tendance à utiliser le bleu, car il dégage un sentiment de confiance et de professionnalisme. Le vert est considéré comme une couleur jeune et pleine d'énergie - et, bien sûr, reflète un sens de l'environnementalisme et de la proximité avec la nature. Le rouge est énergique et impulsif, dégageant une impression de vitesse, d'efficacité et de puissance. Chaque couleur que nous voyons (et certainement chaque couleur que nous associons intrinsèquement à certaines marques) implique quelque chose, directement ou indirectement, qui contribue à orienter notre perception des marques individuelles.
Pensez aux marques et aux symboles que vous reconnaissez comme étant très centrés sur la couleur. Apple, Wikipedia et le New York Times présentent tous des couleurs en niveaux de gris, symbolisant une confiance calme. Ces marques sont considérées comme équilibrées et fiables. Whole Foods, John Deere et Starbucks présentent tous des nuances de vert dans leurs logos, reliant la nature et la salubrité à leur marque et à leurs produits.
Certaines couleurs vont même au-delà de leurs marques, définissant des industries entières. Pensez au nombre de chaînes de restauration rapide ou de restaurants qui utilisent des couleurs rouges ou jaunes, par exemple. Ces couleurs nous aident à nous déclencher mentalement, nous plaçant dans un certain endroit psychologique qui nous incite à acheter une sorte de produit.
Bien que ce soit quelque chose que les spécialistes du marketing ont compris il y a longtemps, la science justifie une grande partie de nos sentiments mutuels à propos de la couleur. Le rouge, par exemple, permet à certaines personnes de réagir plus rapidement et avec plus de force à certains stimuli. Cela peut aussi intimider : les chercheurs ont découvert que lorsque les candidats voyaient la couleur rouge, leurs scores étaient pires.
Encore plus étrange ? La couleur d'une pilule a un léger effet sur son fonctionnement. Les pilules bleues fonctionnent mieux comme sédatifs, le jaune fonctionne mieux comme antidépresseur et, dans tous les cas, les couleurs vives fonctionnent mieux. Bien qu'il ne s'agisse probablement que de l'effet placebo qui stimule nos réponses aux médicaments actifs, l'effet est suffisamment fort pour que les entreprises en tiennent compte lors de la production de nouveaux produits pharmaceutiques.
Maintenant, nous ne disons pas que l'utilisation d'un jeu de couleurs basé sur le jaune dans votre application de suivi de l'humeur va le rendre efficace en tant qu'antidépresseur, mais la palette de couleurs que vous choisissez pourrait raisonnablement avoir un impact sur l'humeur d'un utilisateur – alors choisissez judicieusement.
Recommandé pour vous:
Comment Metaverse va transformer l'industrie automobile indienne
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
Couleur et convivialité
Le design ne consiste pas seulement à être beau, il s'agit de fonctionnalité et de convivialité, les deux principes qui sont sans doute les plus importants pour tout concepteur UX. Si l'UX n'est pas fluide, peu importe la beauté de la palette de couleurs que vous avez choisie ou la beauté de votre interface utilisateur. Si un utilisateur ne peut pas le parcourir efficacement, il n'aura aucune autonomie.
Mais qu'est-ce que la couleur a à voir avec tout cela ?
Simple : la couleur est un outil qui peut aider à guider le regard . Si vous pouvez utiliser efficacement la couleur, vous pouvez guider un nouvel utilisateur dans votre application sans un long didacticiel, une série de vidéos complexes ou même un seul mot. Une interface utilisateur intuitive utilise la couleur pour diriger non seulement l'attention de l'utilisateur, mais également ses interactions avec l'ensemble de l'expérience.
Imaginez, pendant une seconde, que vous développez une application pour une entreprise de restauration qui aide les grandes organisations à personnaliser facilement les commandes de nourriture. Un client potentiel télécharge votre application pour la première fois et l'ouvre. Que voient-ils ?
Dans l'application, la plupart des éléments de menu, y compris l'arrière-plan et toutes les zones d'information, sont colorés dans une palette de couleurs en niveaux de gris en sourdine et terne. La seule exception est une boîte orange-rouge qui dit "commande". En tant que concepteur, vous savez que la première chose que les utilisateurs veulent faire lorsqu'ils utilisent votre application est de configurer sans peine leur commande de nourriture. Au lieu de cacher cette fonctionnalité profondément dans l'application, ou de les obliger à faire défiler page après page pour y accéder, vous la mettez au premier plan. Non seulement cela, mais vous attirez leur attention immédiatement. La couleur l'aide à se démarquer et montre aux nouveaux utilisateurs exactement où ils doivent aller.
De même, nous interagissons quotidiennement avec la couleur de différentes manières et construisons certaines associations sociales dans notre esprit. Prenez un feu rouge, par exemple : le vert signifie aller, le rouge signifie s'arrêter et le jaune signifie ralentir (ou il nous avertit de quelque chose devant nous). En mettant un avertissement important en jaune ou en utilisant du rouge pour mettre en évidence quelque chose, vous pouvez transmettre puissamment un message qui prépare un utilisateur à sa contribution.
Cependant, cette même logique peut être utilisée pour plus que de simples écrans d'avertissement. Changer la couleur d'un bouton de votre application qui mène à des achats intégrés peut avoir un impact significatif sur les taux de conversion.
Bien que ce ne soit pas à l'intérieur d'une application, HubSpot a découvert qu'il pouvait augmenter son taux de conversion de 21 % simplement en rendant un bouton rouge au lieu de vert. Maintenant, cela ne signifie pas que vous devriez changer chaque bouton d'achat intégré à un cramoisi brillant, mais il y a un argument à faire ici que la couleur ne peut pas seulement faire partie de votre philosophie de conception : elle doit être au centre de toute votre philosophie de développement d'applications.
Utiliser la couleur judicieusement : une philosophie du design et de l'accessibilité
Chez Proto.io, l'accessibilité est toujours au premier plan de notre philosophie de conception. Pour être franc, l'accessibilité est quelque chose qui doit être intégré dans une bonne conception. Si ce n'est pas là, alors la conception n'est tout simplement pas très bonne.
Environ 8% des hommes et 0,5% des femmes ont une forme de daltonisme. Contrairement à la pensée populaire, il n'y a pas un type singulier de daltonisme, mais le daltonisme rouge/vert a tendance à être le plus courant. Une personne souffrant de cette forme de daltonisme aura généralement du mal à voir les variations de rouge et de vert. Bien que la gravité de cette forme de daltonisme varie considérablement, même un léger daltonisme rouge / vert peut rendre l'utilisation de nombreuses applications pratiquement impossible.
En dehors du daltonisme, les utilisateurs myopes ont souvent du mal à lire du texte avec un faible contraste à moins qu'ils ne rapprochent l'écran de leur visage, ce qui peut potentiellement nuire à la convivialité de nombreuses applications.
La solution à ces deux problèmes est assez simple : évitez d'utiliser des couleurs non contrastées lorsque vous affichez du texte sur un arrière-plan . Bien que vous ne puissiez pas garantir que tout le monde pourra voir votre application comme vous le souhaitez, si vous utilisez des couleurs contrastées, vous donnerez au moins aux gens une application qu'ils pourront utiliser. De même, l'utilisation de couleurs à contraste élevé rendra le texte plus facile à lire pour tout le monde, même s'ils n'ont pas de problème de vision.
Une autre option pour augmenter l'accessibilité consiste à proposer des palettes de couleurs interchangeables dans votre application. Bien que ce ne soit pas une option pour tout le monde, cela peut grandement améliorer l'accessibilité de votre application. Vous pouvez également autoriser les utilisateurs à modifier la couleur de fonctionnalités spécifiques. Par exemple, vous pouvez avoir une option qui modifie la couleur d'accentuation de votre application ou la couleur du texte dans l'ensemble de l'application. Bien que ces deux options puissent vous enlever un certain contrôle, elles garantiront que votre application est accessible à un public plus large.
Si vous avez encore du mal à comprendre comment intégrer la couleur dans votre philosophie de conception sans nuire à l'accessibilité de votre application, nous vous suggérons de consulter la bibliothèque de conception de matériaux de Google.
Choisir la palette parfaite : solidifier votre philosophie de conception
Même s'il devrait être clair qu'il existe certaines règles à suivre en matière de couleur, ce n'est pas nécessairement une science non plus. La couleur concerne souvent des choses plus abstraites, comme la sensation. Même si votre application n'essaie pas de manifester une sorte d'émotion chez un utilisateur, cela ne signifie pas qu'elle ne le fera pas. Bien que trouver la palette parfaite ne soit pas une entreprise en noir et blanc, nous vous suggérons de commencer par quelque chose en niveaux de gris .
Créez un prototype plat de votre application dans un dégradé de gris et utilisez-le comme référence. Prenez note de son apparence et de sa convivialité : transmettez-le à votre équipe d'assurance qualité et voyez ce qu'ils ont à dire. Votre processus d'intégration est-il trouble sans couleur ? Attirez-vous l'attention sur les mauvaises parties de votre application ? Avec ces commentaires, concevez quelques prototypes supplémentaires, cette fois en apportant de la couleur. Ne comptez pas sur une palette singulière. Au lieu de cela, inspirez-vous du site Web de conception de matériaux de Google et jouez avec quelques-uns de leurs échantillons.
Envoyez également ces révisions au contrôle qualité. N'ayez pas peur de les tester A/B les uns contre les autres (et contre la version originale en niveaux de gris). Assurez-vous de poser des questions difficiles sur les couleurs que vous apportez dans la mêlée. Utilisez-vous la couleur pour guider l'œil de l'utilisateur dans l'application ? Est-ce que vous jetez simplement de la couleur sur l'écran pour ajouter une étincelle ? La couleur empêche-t-elle l'utilisateur d'aller là où il veut aller ?
N'oubliez pas la psychologie de l'utilisateur ou l'accessibilité. Si vous créez une application de voyage, voulez-vous vraiment que tout soit rouge vif ? Si vous créez une application de santé, votre arrière-plan doit-il vraiment être vert ? Vos couleurs contrastent-elles suffisamment pour que le texte soit lisible ?
Une bonne conception UX prend en compte toutes ces questions - après tout, la couleur a un impact définitif sur le comportement et le plaisir de l'utilisateur. Si votre philosophie de conception ne tient pas compte de cela, vous pourriez créer une application qui n'est pas aussi accessible ou utilisable que vous le pensez. Assurez-vous de prototyper votre conception à chaque étape du processus et ne vous attardez pas trop sur une ou deux couleurs.
Expérimentez, choisissez une autre couleur et continuez à réviser jusqu'à ce que vous arriviez à une palette qui vous convient parfaitement.