1.2 Farbe und Funktion

Das Verwenden unterschiedlicher Farbkonzepte spielt im UI-Design eine bedeutungsvolle Rolle und wird für verschiedene Funktionalitäten eingesetzt. So können Farben die Individualität eines Produkts widerspiegeln und als Wiedererkennungsmerkmal fungieren. Weiterhin zählen Farben zu einer der wichtigsten Gestaltungselemente im UI, denn das das menschliche Auge visiert stets Harmonie und Ästhetik an. Doch abgesehen vom ästhetischen Erscheinungsbild, stellen Farben auch eine Informationseinheit dar, indem durch unterschiedliche Farbtöne mehrere Effekte signalisiert werden können. Das Anwenden der richtigen Farbe an der richtigen Stelle ist substanziell für das UI-Design.

Laut Britannica ist der wichtigste Aspekt der Farbe wahrscheinlich derjenige, der am wenigsten definiert und gleichzeitig am variabelsten ist - die psychologische Wahrnehmung auf Farben. Joe Hallock führte daraufhin eine umfangreiche Studie durch, in der amerikanische Teilnehmer bestimmte Begriffe mit Farben assoziieren sollten. Trotz dessen ist immer noch zu erwähnen, dass emotionale Empfindungen und Wahrnehmungen sehr subjektiv sind, wobei auch kulturelle Hintergründe eine entscheidende Rolle spielen. Anhand Hallocks Studie konnte jedoch herausgefunden werden, was die Mehrheit an positiven als auch negativen Assoziationen zu Farben empfinden, die dann im UI-Designprozess miteinberechnet werden können. Es wurde herausgefunden, dass der Begriff “Sicherheit” größtenteils mit der Farbe Blau (34%) verknüpft wird. Eine hohe Blau-Assoziation wurde ebenso bei den Begriffen “Zuverlässigkeit” mit 42% und “Hochtechnologie” mit 23% entdeckt.

Das beste Beispiel für das Anwenden von Blau im Design ist die endlose Liste an bekannten Corporate Designs (Unternehmensidentität oder Erscheinungbild eines Unternehmen) darunter Facebook, Twitter, Skype und viele mehr. Die Farbe strahlt nicht nur, wie bereits eben erwähnt, Sicherheit und Zuverlässigkeit aus, sondern ist darüber hinaus kaum aufdringlich. Somit kann Blau sehr gut als Grundlage für ganzheitliche Designs dienen. Darüber hinaus stellte Hallock in seiner Studie fest, dass die Farbe Blau unabhängig vom Geschlecht und Alter von allen Befragten als Lieblingsfarbe angegeben wurde.

Abgesehen von der Assoziation mit bestimmten Begriffen, senden Farben unterschiedliche Signale aus, die dem Nutzer bei der Anwendung weiterhelfen sollen. Farben sollten stets mit Bedacht ausgesucht werden, denn alle haben charakteristische Eigenschaften und sollten für einen bestimmten Zweck ausgewählt werden. Alle Interaktionsmöglichkeiten in Form von Buttons, Datenfeldern oder Listen können bei spezifischen Aktionen mit einer bestimmten Farbe untermalt werden, die ein Signal stärker hervorheben kann. Wie im vorherigen Unterkapitel berichtet wurde, ist Feedback eine wichtige Eigenschaft des Systems und dient zur besseren Bedienbarkeit für den Nutzer. So können ausgewählte Listeneinträge farbig oder leuchtend markiert werden, um diese Aktion nochmals hervorzuheben. Auch Buttons können unterschiedlich kommunizieren, indem beispielsweise der jeweilige Zustand (aktiv, deaktiviert, hover) mit spezifischen Farbakzenten angezeigt wird.

Um nochmals die 8. Heuristik nach Nielsen aufzugreifen, zählt auch bei der Farbgestaltung die Regel weniger ist mehr. Ein zu buntes und willkürliches Design lenkt nur zu sehr ab, auch mit einer geringen Anzahl an Farben gibt es genügend Gestaltungsmöglichkeiten. In der Regel reichen bereits 3 bis 4 Farben aus. Durch die Anwendung von wenigen unterschiedlichen Farben, werden Nutzer nicht überfordert und es gibt noch genügend Spielraum für ein ansprechendes Design. Bei der Farbaufteilung sollte man das Verhältnis 6:3:1 (Goldener Schnitt) anstreben um eine angenehme Balance zu erreichen. Es erleichtert dem Auge sich bequem von einem Punkt zum anderen zu bewegen.

Während Primär- und Sekundärfarben die Mehrheit des Designs ausmachen und sich gegenseitig ergänzen, sollte die Signalfarbe im UI am wenigsten verwendet werden und stark im Kontrast zu den restlichen Farben stehen. Wie der Name schon sagt, hat sie eine signalisierende Funktion für die wichtigsten Bereiche des Systems. Das sind meistens Buttons oder wichtige Datenfelder mit essentiellen Befehlen und Inhalten. Durch die seltene Anwendung der Farbe, verstärkt sich die Wirkung und aktiviert automatisch die Aufmerksamkeit des Nutzers. Das Paradebeispiel ist die Farbe Rot, die als signalisierende Farbe für alle wichtigen Funktionen fungiert. Rot ist intensiv und warnend zugleich. Es wirkt alarmierend und wird in den meisten Fällen bei Fehlermeldungen oder anderen wichtigen Aktionen benutzt.

Eine weitere wichtige Funktion von Farben im UI, ist die eindeutige visuelle Unterscheidung zwischen verschiedenen Elementen. Dabei ist es wichtig kontrastreiche und gesättigte Farben einzubauen, die den Nutzer unterstützen und schneller Informationen erfassen lassen (Heuristik 10), beispielsweise bei der Auswahl der Hintergrundfarbe von Textelementen. So lassen sich dunkle Grautöne auf hellem Hintergrund gut lesen und andersherum genauso (auf dunklem Hintergrund ein heller Grauton).

Kontrastreiche Unterschiede helfen außerdem auch Farbblinden bei der Bedienbarkeit, die geringere Helligkeitsstufen nur schlecht unterscheiden können. Weitere Maßnahmen wären auch das Vermeiden von Rot-Grün-Kombinationen bei wichtigen Aktionen, wie beispielsweise Warnhinweisen, da Menschen mit einer Rot-Grün-Schwäche diese nur schlecht erkennen können. Die folgende Abbildung zeigt auf der rechten Seite die unterschiedliche Farbwahrnehmung bei solch einer Schwäche.

Wie aus Heuristik 7 erklärt wurde, sollte ein System für jede Benutzergruppe flexibel sein, weshalb beim Farbdesign auch auf Farbblindheit oder -fehlsichtigkeit geachtet werden sollte. So kann für diese Benutzergruppe auch eine zusätzliche Option der Darstellung angeboten werden, z.B. ein Button “kontrastreiche Ansicht” welcher Schrift, Farbe und Formen in einem stärkeren Kontrast wiedergibt.

Abschließend kann gesagt werden, dass Farben bei ihrer Anwendung nicht willkürlich angewendet und unterschätzt werden sollten. Sie dienen nicht nur als visuelle Gestaltungsmittel, sondern fungieren auch als Symbolträger, die durch die unterschiedliche Verwendung verschiedene Kommunikationswege und Emotionen bereitstellen. Zu erkennen war auch, dass die Heuristiken nach Nielsen auch beim Farbdesign auftauchen und in vielen Bereichen transferabel war. So bleibt beispielsweise Minimalismus als einer der Kernpunkte im gesamten UI-Design. Beachtet man stets das Gesamtbild eines Systems und das Zusammenwirken aller Elemente, sei es bei der Kontrastierung und Farbwahl oder deren Funktionsabläufe, so erhält man ein ausgewogenes und harmonisches UI mit einer verständlichen Bedienbarkeit und einem attraktiven Nutzererlebnis.