Wie sich Farbe auf UX und das Benutzerverhalten auswirkt
Veröffentlicht: 2016-12-24Farbe: Wenn ein Design richtig ist, fällt es Ihnen wahrscheinlich nie auf – aber wenn es falsch ist? Es spielt keine Rolle, ob es sich um einen übermäßig hellen, ins Auge stechenden Hintergrund oder schwarzen Text auf einem dunkelgrauen Hintergrund handelt, eine unterdurchschnittliche Farbauswahl kann selbst die funktionellste App ruinieren . Ähnlich wie andere Aspekte des Designs ist Farbe nicht nur dazu da, eine App aufzupeppen. Farbe kann ein Werkzeug sein, genau wie jedes andere Merkmal der Benutzererfahrung.
Die Grafikdesign-Philosophie, die zum Entwerfen einer App verwendet wird – von der Größe jedes Elements über die Art und Weise, wie es über die Benutzeroberfläche gleitet, bis hin zur Farbe – wirkt sich auf das Benutzerverhalten aus. Es gibt einen guten Grund, warum Designer häufig die ersten Monate eines Projekts damit verbringen, sich über Farbpaletten und nicht über Drahtmodelle zu quälen.
Die Auswahl der perfekten Palette kann den Unterschied zwischen der Entwicklung einer Meditations-App ausmachen, die den Benutzern tatsächlich hilft, sich zu entspannen, und einer, die dazu führt, dass sie ihr Telefon gegen die Wand werfen wollen. Es ist der Unterschied zwischen einer Banking-App, die Sie nervös macht, wenn Sie Ihren Kontostand überprüfen, und einer, die Ihre Ängste darüber, wann der nächste Gehaltsscheck eingeht, lindern kann.
Wie machen Sie es also richtig – und was können Sie tun, um Farbe in Ihrem Design zu beherrschen?
Grafikdesign-Philosophie: Die Farbtheorie
Bevor Sie sich mit der Philosophie des Grafikdesigns (und der Psychologie!) befassen, ist es wichtig, einige Grundprinzipien von Farbe und Design zu verstehen. Obwohl Farbe nicht wie ein übermäßig komplexes Thema erscheint, gibt es einen guten Grund, warum jeder Kunstunterricht nicht nur mit einer Lektion darüber beginnt, wie man Farbe verwendet, sondern wie man Farbe herstellt.
Die Grundlagen – wie durch das Farbrad erklärt – sind einfach: Primärfarben (Rot, Gelb und Blau) können kombiniert werden, um Sekundärfarben (Grün, Lila und Orange) zu erzeugen. Ebenso können verschiedene Anteile von Weiß zu einer Farbe hinzugefügt werden, um Farbtöne zu erzeugen, und Schwarz kann hinzugefügt werden, um Schattierungen zu erzeugen.
Gegensätzliche Farben (wie Rot und Grün oder Blau und Orange) gelten als komplementär. Diese Farben kontrastieren stark und heben sich dadurch hervor, wenn sie nebeneinander (oder übereinander) liegen.
Nebeneinander liegende Farben gelten als analog. Diese Farben haben einen viel geringeren Kontrast, was bedeutet, dass sie in der Regel nicht so stark auffallen, wenn sie nahe beieinander liegen.
An Farben mit hohem oder niedrigem Kontrast ist grundsätzlich nichts „richtig“ oder „falsch“ . Manchmal erfordert eine Anwendung leuchtende Farben, die sich stark voneinander abheben. In anderen Fällen möchten Sie etwas sanfteres. Generell gilt: Je mehr Sie etwas hervorheben möchten, desto mehr sollten Sie auf kontrastierende Farben setzen.
Der beste Weg, ein Gefühl dafür zu bekommen, wie Farben zusammenpassen (und nicht zusammenpassen), ist, mit ihnen herumzuspielen. Selbst wenn Sie gerade nicht an einem Projekt arbeiten, kann ein kurzer Dreh am Farbrad von Adobe Ihre Gedanken dazu bringen, auf neue Weise über Farbe nachzudenken.
Emotionsmuster: Farbe und Psychologie
Wenn Sie die Grafikdesign-Philosophie hinter Ihrer App festigen, können Sie nicht nur darüber nachdenken, wie die Dinge aussehen – Sie müssen darüber nachdenken, wie sie sich anfühlen. Wir sprechen auch nicht über haptisches Feedback. Seit Johann Wolfgang Goethe die physiologischen Wirkungen von Farbe untersucht hat, sind wir besessen davon, mit Farbe körperliche und emotionale Wirkungen zu erzielen.
Auch heute noch steht Farbe im Mittelpunkt der Designphilosophie vieler Marken. Das Gesundheitswesen, die Wirtschaft und die Regierung verwenden alle tendenziell Blau, da es ein Gefühl von Vertrauen und Professionalität vermittelt. Grün gilt als jugendliche Farbe voller Energie – und spiegelt natürlich Umweltbewusstsein und Naturverbundenheit wider. Rot ist energisch und impulsiv und vermittelt den Eindruck von Geschwindigkeit, Effizienz und Kraft. Jede Farbe, die wir sehen (und sicherlich jede Farbe, die wir untrennbar mit bestimmten Marken verbinden), impliziert direkt oder indirekt etwas, das unsere Wahrnehmung einzelner Marken beeinflusst.
Denken Sie an die Marken und Symbole, die Sie als sehr farbzentriert erkennen. Apple, Wikipedia und die New York Times verwenden alle Graustufenfarben, die eine ruhige Vertrauenswürdigkeit symbolisieren. Diese Marken gelten als ausgewogen und zuverlässig. Whole Foods, John Deere und Starbucks haben alle grüne Farbtöne in ihren Logos und verbinden Natur und Bekömmlichkeit mit ihrer Marke und ihren Produkten.
Einige Farben gehen sogar über ihre Marken hinaus und definieren ganze Branchen. Denken Sie zum Beispiel daran, wie viele Fast-Food- oder Restaurantketten rote oder gelbe Farbschemata verwenden. Diese Farben helfen uns, mental zu triggern, indem sie uns an einen bestimmten psychologischen Ort versetzen, der uns dazu veranlasst, eine Art Produkt zu kaufen.
Marketingfachleute haben dies zwar schon vor langer Zeit herausgefunden, aber die Wissenschaft rechtfertigt viele unserer gemeinsamen Gefühle in Bezug auf Farbe. Es wurde beispielsweise festgestellt, dass Rot manche Menschen schneller und stärker auf bestimmte Reize reagieren lässt. Es kann auch einschüchtern: Forscher fanden heraus, dass ihre Ergebnisse schlechter waren, wenn die Testteilnehmer die Farbe Rot sahen.
Noch fremder? Die Farbe einer Pille hat einen milden Einfluss auf ihre Wirkung. Blaue Pillen wirken am besten als Beruhigungsmittel, Gelb am besten als Antidepressivum und in allen Fällen wirken helle Farben am besten. Während dies wahrscheinlich nur der Placebo-Effekt ist, der unsere Reaktionen auf aktive Medikamente verstärkt, ist der Effekt stark genug, dass Unternehmen ihn bei der Herstellung neuer Arzneimittel berücksichtigen sollten.
Nun, wir sagen nicht, dass die Verwendung eines auf Gelb basierenden Farbschemas in Ihrer Mood-Tracking-App sie als Antidepressivum wirksam macht, aber die von Ihnen gewählte Farbpalette könnte sich vernünftigerweise auf die Stimmung eines Benutzers auswirken – also wählen Sie mit Bedacht.
Für dich empfohlen:
Wie Metaverse die indische Automobilindustrie verändern wird
Was bedeutet die Anti-Profiteering-Bestimmung für indische Startups?
Wie Edtech-Startups Indiens Arbeitskräften helfen, sich weiterzubilden und zukunftsfähig zu werden ...
New-Age-Tech-Aktien in dieser Woche: Zomatos Probleme gehen weiter, EaseMyTrip-Posts steigen...
Indische Startups nehmen Abkürzungen bei der Jagd nach Finanzierung
Digitale Marketingplattform Logicserve Bags INR 80 Cr-Finanzierung, Umbenennung in LS Dig...
Farbe und Benutzerfreundlichkeit
Beim Design geht es nicht nur darum, hübsch auszusehen – es geht um Funktionalität und Benutzerfreundlichkeit, die beiden Prinzipien, die für jeden UX-Designer wohl am wichtigsten sind. Wenn die UX nicht flüssig ist, spielt es keine Rolle, wie schön Ihre gewählte Farbpalette ist oder wie atemberaubend Ihre Benutzeroberfläche ist. Wenn ein Benutzer es nicht effizient durchwischen kann, wird es kein Durchhaltevermögen haben.
Aber was hat Farbe mit all dem zu tun?
Ganz einfach: Farbe ist ein Hilfsmittel, das das Auge lenken kann . Wenn Sie Farbe effizient einsetzen können, können Sie einen neuen Benutzer ohne langwieriges Tutorial, eine Reihe komplexer Videos oder sogar ein einziges Wort durch Ihre App führen. Eine intuitive Benutzeroberfläche verwendet Farbe, um nicht nur die Aufmerksamkeit des Benutzers zu lenken, sondern auch seine Interaktionen mit dem gesamten Erlebnis.
Stellen Sie sich für eine Sekunde vor, dass Sie eine App für ein Catering-Unternehmen entwickeln, die großen Organisationen dabei hilft, Essensbestellungen einfach anzupassen. Ein potenzieller Kunde lädt Ihre App zum ersten Mal herunter und öffnet sie. Was sehen sie?
In der App sind die meisten Menüpunkte – einschließlich des Hintergrunds und aller Informationsfelder – in einer gedämpften, matten Palette von Graustufenfarben gefärbt. Die einzige Ausnahme ist ein orangerotes Kästchen mit der Aufschrift „Bestellung“. Als Designer wissen Sie, dass die wichtigste Sache, die Benutzer tun möchten, wenn sie Ihre App verwenden, darin besteht, ihre Essensbestellung schmerzlos einzurichten. Anstatt diese Funktion tief in der App zu verstecken oder von ihnen zu verlangen, Seite für Seite nach unten zu scrollen, um sie zu erreichen, stellen Sie sie in den Vordergrund. Nicht nur das, Sie ziehen sofort ihre Aufmerksamkeit darauf. Farbe hebt es hervor und zeigt neuen Benutzern genau, wohin sie gehen müssen.
Ebenso interagieren wir täglich auf vielfältige Weise mit Farbe und bauen bestimmte soziale Assoziationen in unseren Köpfen auf. Nehmen Sie zum Beispiel eine Ampel: Grün bedeutet Los, Rot bedeutet Stopp und Gelb bedeutet langsamer (oder es macht uns auf etwas voraus). Indem Sie eine wichtige Warnung in Gelb setzen oder indem Sie etwas Rot verwenden, um etwas hervorzuheben, können Sie eine Botschaft wirkungsvoll übermitteln, die einen Benutzer auf seine Eingabe vorbereitet.
Dieselbe Logik kann jedoch für mehr als nur Warnbildschirme verwendet werden. Das Ändern der Farbe einer Schaltfläche in Ihrer App, die zu In-App-Käufen führt, kann sich erheblich auf die Conversion-Raten auswirken.
Obwohl es sich nicht um eine App handelte, fand HubSpot heraus, dass sie ihre Konversionsrate um 21 % steigern konnten, indem sie einfach eine Schaltfläche rot statt grün machten. Das bedeutet jetzt nicht, dass Sie jeden In-App-Kauf-Button in ein leuchtendes Purpurrot umwandeln sollten, aber hier muss argumentiert werden, dass Farbe nicht nur Teil Ihrer Designphilosophie sein kann: Sie muss von zentraler Bedeutung sein Ihre gesamte App-Entwicklungsphilosophie.
Farbe klug einsetzen: Eine Philosophie des Designs und der Zugänglichkeit
Bei Proto.io steht Barrierefreiheit immer im Vordergrund unserer Designphilosophie. Um ehrlich zu sein, Barrierefreiheit ist etwas, das in gutes Design integriert werden muss. Wenn es nicht da ist, dann ist das Design einfach nicht sehr gut.
Etwa 8 % der Männer und 0,5 % der Frauen leiden unter irgendeiner Form von Farbenblindheit. Entgegen der landläufigen Meinung gibt es keine einzelne Art von Farbenblindheit, aber die Rot/Grün-Farbenblindheit ist tendenziell die häufigste. Jemand, der an dieser Form der Farbenblindheit leidet, wird im Allgemeinen Schwierigkeiten haben, Variationen von Rot und Grün zu sehen. Während der Schweregrad dieser Form der Farbenblindheit sehr unterschiedlich ist, kann selbst eine leichte Rot/Grün-Farbenblindheit die Nutzung vieler Apps praktisch unmöglich machen.
Abgesehen von Farbenblindheit haben kurzsichtige Benutzer oft Schwierigkeiten, Text mit geringem Kontrast zu lesen, es sei denn, sie bewegen den Bildschirm nahe an ihr Gesicht – etwas, das möglicherweise die Benutzerfreundlichkeit vieler Apps beeinträchtigen kann.
Die Lösung für diese beiden Probleme ist ziemlich einfach: Vermeiden Sie die Verwendung von nicht kontrastierenden Farben, wenn Sie Text auf einem Hintergrund anzeigen . Sie können zwar nicht garantieren, dass jeder Ihre App so sehen kann, wie Sie es beabsichtigen, aber wenn Sie kontrastierende Farben verwenden, geben Sie den Leuten zumindest eine App, die sie verwenden können. Ebenso wird die Verwendung von kontrastreichen Farben den Text für alle leichter lesbar machen – selbst wenn sie kein Sehproblem haben.
Eine weitere Möglichkeit, die Zugänglichkeit zu verbessern, besteht darin, austauschbare Farbpaletten in Ihrer App anzubieten. Obwohl dies nicht für jeden eine Option ist, kann es die Zugänglichkeit Ihrer App erheblich verbessern. Sie können Benutzern auch erlauben, die Farbe bestimmter Funktionen zu ändern. Beispielsweise könnten Sie eine Option haben, die die Akzentfarbe Ihrer App oder die Farbe des Textes in der gesamten App ändert. Diese beiden Optionen können Ihnen zwar etwas Kontrolle entziehen, stellen aber sicher, dass Ihre App einem breiteren Publikum zugänglich ist.
Wenn Sie immer noch Schwierigkeiten haben, herauszufinden, wie Sie Farbe so in Ihre Designphilosophie integrieren können, dass die Zugänglichkeit Ihrer App nicht beeinträchtigt wird, empfehlen wir Ihnen, sich die Materialdesign-Bibliothek von Google anzusehen.
Auswahl der perfekten Palette: Festigung Ihrer Designphilosophie
Auch wenn klar sein sollte, dass es beim Thema Farbe einige Regeln zu beachten gilt, ist es auch nicht unbedingt eine Wissenschaft. Bei Farbe geht es oft um abstraktere Dinge wie das Gefühl. Selbst wenn Ihre App nicht versucht, irgendeine Art von Emotion bei einem Benutzer zu manifestieren, bedeutet das nicht, dass dies nicht der Fall ist. Auch wenn das Finden der perfekten Palette kein Schwarz-Weiß-Unterfangen ist, empfehlen wir, mit etwas Graustufen zu beginnen .
Erstellen Sie einen flachen Prototyp Ihrer App in einem Graustufenverlauf und verwenden Sie diesen als Ausgangsbasis. Beachten Sie, wie es aussieht und sich anfühlt: Geben Sie es an Ihr QA-Team weiter und sehen Sie, was es zu sagen hat. Ist Ihr Onboarding-Prozess ohne Farbe trübe? Lenken Sie die Aufmerksamkeit auf die falschen Teile Ihrer App? Entwerfen Sie mit diesem Feedback ein paar weitere Prototypen, diesmal mit Farbe. Verlassen Sie sich nicht auf eine einzelne Palette. Orientieren Sie sich stattdessen an der Materialdesign-Website von Google und spielen Sie mit ein paar Mustern.
Senden Sie diese Überarbeitungen auch an QA. Haben Sie keine Angst, sie gegeneinander (und gegen die ursprüngliche Graustufenversion) zu testen. Stellen Sie sicher, dass Sie einige schwierige Fragen zu den Farben stellen, die Sie in den Kampf einbringen. Verwenden Sie Farbe, um das Auge des Benutzers in der App zu führen? Wirfst du nur Farbe auf den Bildschirm, um einen Funken hinzuzufügen? Lenkt die Farbe den Benutzer davon ab, dorthin zu gelangen, wo er hin möchte?
Vergessen Sie nicht die Benutzerpsychologie oder Zugänglichkeit. Wenn Sie eine Reise-App erstellen, möchten Sie wirklich, dass alles leuchtend rot ist? Wenn Sie eine Gesundheits-App erstellen, sollte Ihr Hintergrund wirklich grün sein? Haben Ihre Farben einen ausreichenden Kontrast, damit der Text lesbar ist?
Gutes UX-Design berücksichtigt all diese Fragen – schließlich hat Farbe einen entscheidenden Einfluss auf das Nutzerverhalten und die Freude daran. Wenn Ihre Designphilosophie dies nicht berücksichtigt, erstellen Sie möglicherweise eine App, die nicht so zugänglich oder benutzerfreundlich ist, wie Sie denken. Stellen Sie sicher, dass Sie Ihr Design bei jedem Schritt prototypisieren, und hängen Sie nicht zu sehr an einer oder zwei Farben.
Experimentieren Sie, wählen Sie eine andere Farbe aus und überarbeiten Sie weiter, bis Sie bei einer Palette landen, die perfekt für Sie ist.