Farbe und Funktion im User Interface Design

Infografik Userinterfacedesign Farbe und Funktion 01

Farbe und Funktion

Ein stimmiges Farbkonzept für User Interfaces steht immer im Dienste der Usability. Daher sollten Sie bei der Erstellung von Farbpaletten die wichtigsten Grundsätze beachten.

Farbe ist ein starkes Gestaltungsmittel. Die Verwendung von Farbcodes hilft uns, Dinge und Sachverhalte zu unterscheiden.
Jede Informationseinheit kann in einer eigenen Farbe gestaltet werden. Alles, was in einem inhaltlichen Zusammenhang steht, wird in derselben Farbe dargestellt, so dass die Nutzer die verschiedenen Informationen gut strukturiert aufnehmen können.

Was Farben alles leisten

Die Farbe ist eines der wichtigsten Elemente in der Markenidentität. Farben haben auch andere Funktionen:

  • Farben ordnen
  • Farben verbinden
  • Farben typisieren
  • Farben stellen Beziehungen her
  • Farben kennzeichnen
  • Farben signalisieren

Farbergonomie

Hier geht es um die Bedingungen, die Farben erfüllen müssen, damit Aufgaben beispielsweise mit Produkten oder am Arbeitsplatz optimal erfüllt werden.

Ergonomie ist die Wissenschaft von der Anpassung der Arbeitsbedingungen an den Menschen. Die Farbe spricht hierbei verstärkt das emotionale Empfinden des Betrachters an. Lange Zeit wurde Farbe als ergonomisches Gestaltungsmittel daher nur wenig beachtet.

Man unterscheidet zwischen funktionsbestimmten und emotionsbestimmten Prinzipien.

Funktionsbestimmte Prinzipien sind beispielsweise

  • keine Blendungsreflexe
  • keine Helligkeitssprünge
  • grosse Nachfarbenneutralität

Emotionsbestimmte Prinzipien sind beispielsweise

  • grosse Individualakzeptanz
  • grosse Kollektivakzeptanz
  • eher trendgerechte Töne
  • Farben mit Befreundungspotential

Farbwirkung

Vergleichende Untersuchungen haben ergeben, dass man von drei verschiedenen Symbolkategorien ausgehen kann:

  • physiologische Symbole
  • psychologische Symbole
  • metaphorische Symbole

Physiologische Symbole sind

  • Temperatursymbole der Farbe: kalt, warm usw.
  • Gehörsymbole der Farbe: laut, leise usw.
  • Geschmacksymbole der Farbe: süss, bitter usw.
  • Tastsymbole der Farbe: eckig, hart usw.
  • Geruchssymbole der Farbe aromatisch, frisch usw.
  • Flavorsymbole der Farbe knusprig, trocken usw.
  • Gravitationssymbole der Farbe leicht, schwer usw.

Einsatz von Farben im User Interface Design

Fürs Interface Design werden oft mehr Farben gebraucht, als die Corporate-Design-Vorgaben oder der Styleguides hergeben.
Abhängig davon, wie das Erscheinungsbild Basis-, Akzent-, Hintergrund- und Textfarben vorgibt, gilt es im Interface Design, passende Farben für die Interaktions- und Orientierungselemente zu finden – und das Farbklima im Sinne der Usability abzustimmen.

Machen Sie sich Gedanken, wie Sie die Vorgaben des Corporate Designs so nutzen können, dass diese eingehalten werden, aber auch dienlich für die Usability sind. Dabei gilt es, die physiologischen Eigenschaften der Farben zu beachten.

  • Hell/Dunkel-Kontrast: Nah- und Fernwirkung der Objekte
  • Sättigungs-Kontrast: Nah- und Fernwirkung, wichtig/weniger wichtig
  • Kalt/Warm-Kontrast: Nah- und Fernwirkung der Objekte, wichtig/weniger wichtig
Infografik Userinterfacedesign Farbe und Funktion 02 positiv

Legen Sie in einem ersten die vorgegebenen Farben analog der Grafik aus:

  • helle Farben vorne, dunkle Farben hinten,
  • Gesättigten Farben vorne, ungesättigte hinten
  • warme Farben vorne, kalte Farben hinten

Konzeptionelles Vorgehen

In einem nächsten Schritt sollten Sie definieren, wie Sie die einzelnen Interface Design Elemente kodieren. Grob unterteilt sind dies folgende Kategorien:

  • Navigation / Interaktion
  • Orientierung
  • Content (Inhalte)
  • Branding-Elemente

Abhängig von der jeweiligen Komplexität der Interfaces müssen Sie diese vier Gruppen nun stärker unterteilen.
Buttons, Formulare, Listen oder auch Felder für Datumseingaben müssen dem Nutzer signalisieren, was seine Aktion auf dem Interface auslöst.

  • Der ausgewählte Eintrag in einer Tabelle wird farbig markiert.
  • Ist der Regler aktiviert, bekommt er eine leuchtende Farbe.
  • Buttons müssen die jeweiligen Zustände mittels unterschiedlicher Farben kommunizieren (aktiviert, deaktiviert, hover …) .

In der Praxis sieht es meist so aus, dass Sie ausgehend von der Grundfarben eine oder mehrere Farbpaletten mit ergänzenden Farben zusammenstellen.

Infografik Userinterfacedesign Farbe und Funktion 01 positiv

Unterstützend dabei können die folgenden Kontraste sein:

  • Farbe-an-sich-Kontrast, z.B. für die Auszeichnung von ein/aus.
  • Komplementär-Kontrast, z.B. für die Hervorhebung von Fehlermeldungen (Farbfehlsichtigkeit beachten bei Rot-Grün).
  • Quantitäts-Kontrast, z.B. Navigation und Orientierung.

Accessibility

Farbenblindheit und Farbfehlsichtigkeit

Gemäss ISO Norm 9241-8 sind zwar nur 1 Person von 100‘000 der Bevölkerung farbenblind. Jedoch sind 8% der Männer und 0,5% der Frauen farbenfehlsichtig. Am meisten können die Farben Rot, Gelb und Grün nicht unterschieden werden. Auch Cyan und Weiss sowie Blau und Violett werden leicht verwechselt.

Infografik Userinterfacedesign Opencolor 02 positiv

Diese Abbildung oben zeigt rechts die Farbwahrnehmung bei Rot-Grün-Schwäche. Die Kombination beider Farben erschwert Betroffenen die Bedienung einer Anwendung. Vermeiden Sie die Rot-Grün-Kombi daher vor allem bei wichtigen Seitenelementen wie Warnhinweisen, Links oder der Navigation.

Mit so genannten Ishihara-Tafeln, die 1917 in Japan entwickelt wurden, lässt sich feststellen, ob bzw. welche Farbenfehlsichtigkeit vorliegt.

Infografik Userinterfacedesign Farbe und Funktion Farbfehlsichtigkeit positiv