Farben im Kontext von User Interface Design

Christoph Müller

von Christoph Müller am 30.09.2020

5 Minuten Lesezeit

Farben wecken Emotionen und nehmen auf verschiedene Weise Einfluss auf unsere Psyche. Sie können entscheiden, ob wir etwas als wichtig oder unwichtig empfinden, ob wir etwas als bedrohlich einstufen oder ob wir etwas als kalt oder warm empfinden. Unter dem Einsatz von Farben lassen sich verschiedene Atmosphären schaffen und gezielt Assoziationen herstellen. Entsprechend hoch ist die Bedeutung der Farbwahl, bei der Gestaltung von Benutzeroberflächen. Welche Emotionen und Gefühle sollen beim User geweckt werden? Welche Bereiche und Informationen bedürfen Aufmerksamkeit? Welche Atmosphäre soll erschaffen werden?

Damit ein Farbschema abhängig von Produkt, Unternemen und Zielgruppe richtig definiert werden kann, ist es notwendig, die menschlichen Assoziationen mit ihnen zu kennen und bestimmte Regeln aus der Farblehre anzuwenden. 

Psychologie

In einer Umfrage aus dem Jahr 2003 untersuchte Joe Hallock die Wirkung und Assoziation von Farben auf die menschliche Psyche. Dabei wurden 232 Menschen aus 22 Ländern und unterschiedlichen Altersgruppen befragt.

Assoziation

Menschen assoziieren Farben mit bestimmen Situationen, Bereichen und Emotionen. In dem Survey von Joe Hallock wurde unter anderem untersucht, mit welcher Farbe die befragten Personen Vertrauen, Sicherheit, Geschwindigkeit, Qualität, Angst und Spaß assoziieren.

Associations - Colour Assignment Survey von Joe Hallock

Associations - Colour Assignment Survey von Joe Hallock

Farbtheorie

Die Grundlage der heutigen Farblehre bildet der Farbkreis. Der erste Farbkreis wurde 1666 von dem Naturwissenschafter und Philosoph Isaac Newton entwickelt. Er besteht aus den Primärfarben Rot, Gelb und Blau, den drei Sekundärfarben Grün, Orange und Lila, die aus den primären Farben erzeugt werden und sechs tertiären Farben wie Blau-Grün oder Rot-Violett.

Farbkreis

Farbkreis

Teilt man nun den Farbkreis in der Mitte, lassen sich Farben in warme (z.B. Gelb, Orange) und kalte Farben (z.B. Blau, Lila) einordnen. Dies hat einen unmittelbaren Einfluss auf unsere Wahrnehmung. Während wärme Farben im Allgemeinen mit Energie, Helligkeit und Aktivität assoziiert werden, stehen kalte Farben häufig für Ruhe, Frieden und Klarheit. Es lassen sich also unterschiedliche Atmosphären erzeugen. Das nachfolgende Beispiel zeigt den deutlichen Unterschied im Kontext einer Schlafanalyse-App. Während die rechte Seite (blau) Ruhe vermittelt, ist die Wahl eines warmen Farbtons auf der linken Seite für diesen Anwendungszweck eher unpassend.

Farbtöne im Kontext einer Schlafanalyse-App

Farbtöne im Kontext einer Schlafanalyse-App

Kombination (Farbschemata)

Benutzeroberflächen und Werbeflächen bestehen selten aus einer einzigen Farbe. Inhalte lassen sich durch den Einsatz verschiedener Farben strukturieren, wichtige Kernbotschaften lassen sich hervorheben und Nutzer können gezielt durch komplexe Bereiche und Funktionen geführt werden. Damit ein ästhetischer und stimmiger Gesamteindruck entsteht, müssen Farbkombinationen allerdings sorgfältig gewählt werden. Es gilt ein stimmiges Farbschemata zu entwickeln. Dabei lassen sich Farbkombinationen im westlichen auf drei Ansätze reduzieren: 

Mögliche Farbkombinationen (Farbschemata)

Mögliche Farbkombinationen (Farbschemata)

Komplementärfarben befinden sich im Farbkreis exakt auf der gegenüberliegenden Seite - z.B. Orange und Blau. Hierbei wird einer starker Kontrast erzielt, der die betroffenen Bereich hervorstechen lässt.

Analoge Farben liegen im Farbkreis unmittelbar nebeneinander. In der Regel wird eine dominierende Farbe gewählt, während eine andere Farbe unterstützend und eine weitere akzentuierend agiert. Analoge Farben werden häufig eingesetzt, da sie besonders im Kontext von Benutzeroberflächen sehr effektiv für die Benutzerführung eingesetzt werden können.

Triadische Farben sind gleichmäßig im Farbkreis verteilt. Es wird ein kontrastreiches aber zu gleich harmonisches Gesamtbild erzeugt. Der Einsatz triadischer Farben kann für ein sehr leuchtendes und dynamisches Ergebnis sorgen.

Farben im Kontext von User Interface Design

Unabhängig von Kombinationsart (z.B. Triadische Farben) gilt es Farben im Kontext von User Interface Design in dem richtigen Verhältnis zu verwenden.  Eine Aufteilung von 60% + 30% + 10% (6:3:1) sorgt für eine stimmige Farbbalance und gilt als Best Practice. Dabei wird eine dominierende Farbe definiert, während die anderen Farben unterstützend und akzentuierend agieren.

Best Practice - Farbverhältnis 6:3:1

Best Practice - Farbverhältnis 6:3:1

Schatten

Ein Schatten in der realen Welt ist niemals Schwarz. Schatten ergeben Sie durch den Farbwert des schattierten Objekts sowie dessen Untergrund. Damit ein virtueller Schatten authentisch wirkt, müssen diese beiden Faktoren berücksichtigt werden. Einen Schatten mit Schwarz und Reduktion der Deckkraft (Opacity) zu erzeugen ist ein häufig gemachter Fehler im Kontext von UI-Design.

Schatten in der realen Welt

Schatten in der realen Welt

Farbverlauf (Gradient)

Farbverläufe sind heute ein beliebtes Stilmittel. Wir selbst setzen Farbverläufe für unser Corporate Design ein. Damit ein Farbverlauf natürlich wirkt, gilt es bestimmte Regeln bei der Auswahl der Farben zu beachten. Zentrale Orientierungshilfe schafft hier wieder der Farbkreis. Natürliche Farbverläufe werden grundsätzlich mit analogen Farben gebildet. Ein Blick in die Natur bestätigt diese Regel.

Farbverlauf in der Natur

Farbverlauf in der Natur

Sollten doch Komplementärfarben in einem Farbverlauf zum Einsatz kommen, sollte zwingend eine weitere Zwischenfarbe ergänzt werden. Aber Achtung: Zu viele Farben wirken unruhig und erzielen nicht den gewünschten Effekt.

Best Practice - Farbverläufe

Best Practice - Farbverläufe

Typographie

Die meisten Webseiten und Anwendungen versuchen heute minimalistisch Informationen darzustellen. Klare Aussagen werden in Form von kurzen Überschriften formuliert; Button-Aktionen werden eindeutig mit 1-2 Worten beschrieben. Neben unterschiedlichen Formatierungsoptionen kann eine Schrift aber vor allem durch den Einsatz von unterschiedlichen Farben starken Einfluss auf unsere Wahrnehmung nehmen. Texte, die beispielsweise mit einer starken Deckkraft versehen sind, signalisieren uns Relevanz. Texte, die weniger von Bedeutung sind (z.B.  Beschreibungstexte) könnten gezielt mit einer Reduktion der Deckkraft als unwichtig bzw. optional visualisiert werden. Mit dem Einsatz von unterschiedlichen Farben können wir dem Auge helfen wichtiges von unwichtigen Informationen zu trennen. Das nachfolgende Beispiel zeigt den direkten Unterschied.

Fazit

Das nachfolgende Beispiel von einem Warenkorb-Checkout zeigt alles im Zusammenspiel: Das Farbschemata wurde stimmig mit einem 6:3:1 Verhältnis gewählt. Der Bereich rechts in Dunkelgrau erfordert in diesem Schritt die Aufmerksamkeit des Nutzers. Das Ziel dieses Screens besteht darin den User zu einem Kaufabschluss zu bewegen. Aus diesem Grund wurde der Checkout-Button präsent mit einem Gelb hervorheben. Produktdetails (Kurzbeschreibung) gelten in diesem Schritt als nebensächlich und wurden hingegen dezent mit einem grau versehen. Ebenso verhält es sich mit der Aktion "Zurück zum Shop". Der eingesetzte Schatten wirkt natürlich und agiert als Abgrenzung zum Warenkorb-Inhalt.

Die Entwicklung eines stimmigen Farbkonzepts und die Auswahl der richtigen Farben spielt eine zentrale Rolle bei der Gestaltung von Benutzeroberflächen. Assoziationen können hergestellt werden, Atmosphären können geschaffen werden und Nutzer lassen sich gezielt durch komplexe Funktionen führen. Es ist wichtig, abhängig von Projekt, Produkt oder Unternehmen, von Beginn ein geeignetes Farbschemata zu entwicklen und dieses konsequent anzuwenden.


Christoph Müller
Christoph Müller

Frontend Ninja

Veröffentlicht am 30.09.2020 um 12:52 Uhr