Display Binder Software

Farbgestaltung im UI / UX Design

Allgemein

Ein Teilbereich einer ganzheitlichen UI / UX Design Entwicklung ist die Farbgestaltung im Screen- und Icondesign. Doch wie wird entschieden welche Farben im User Interface eingesetzt werden? In der Regel hat die Corporate Identity eines Unternehmens, und seine Corporate Farben zunächst großen Einfluss auf die verwendeten Farben, um auch hier einen markanten Wiedererkennungswert und eine unverwechselbare Identität zu schaffen. Jedoch gibt es noch weitaus mehr Aspekte, die es für ein gutes UI/ UX Erlebnis zu beachten gilt. Ganz grundlegend sollten in einem User Interface redundante und konsistente Farbkodierungen verwendet werden, um eine gute Usability und User Experience zu gewährleisten. Im Folgenden haben wir in diesem Artikel 8 Aspekte übersichtlich erläutert mit denen wir uns tagtäglich befassen.

1. Corporate Identity, Corporate Design und das grundlegende Ziel der Farbgebung

Durch Beachtung der Corporate Design Farben, Formen, Proportionen usw. erzielt man zunächst ein prägnantes Markenerlebnis mit einem hohen Wiedererkennungswert und kann spezifische Unternehmenswerte und Gefühlswelten vermitteln und auch auf das User Interface Design übertragen. Daneben gibt es auch produktspezifische Merkmale, die sich über die Farbigkeit im User Interface kommunizieren lassen.

Ganz konkret bezieht sich das zum Beispiel auf die Stimmung die ich mit meinem Produkt beim Nutzer erzeugen möchte ggf. sogar unabhängig von der Corporate Identity eines Unternehmens. Ist es eine fröhliche, farbenfrohe Applikation, die Spaß vermitteln soll? Soll ein Produkt in der Medizintechnik besonders clean, präzise und akkurat wirken? Erscheinen die Farben im Maschineninterface robust, zuverlässig oder kraftvoll? Neben der Farbe spielt hier natürlich auch die übrige formale Gestaltung eine wichtige Rolle.

2. Beeinflussung der Farbwahrnehmung durch die äußere und direkte Umgebung

Eine wichtige Frage ist, in welcher Umgebung ein Produkt oder eine Applikation verwendet wird. Wie sind die Lichtverhältnisse? Ist die Umgebungsbeleuchtung hell oder dunkel, gibt es Tageslichteinstrahlung oder nicht. Je nach Umgebung können Farben auf Displays heller, dunkler, weniger oder stärker gesättigt wirken. Möglich ist es aus, dass sich eine Ablenkung des Nutzers aus der Umgebung ergibt, z. B. durch grelle Farben, Lichteinfall oder Blendeffekte. Neben der Umgebung des Displays gibt es auch noch die direkte Umgebung innerhalb eines Displays. So kann ein Icon mit der gleichen Farbigkeit auf verschiedenen Untergründen völlig unterschiedlich wirken, z. B. kann es passieren, dass das Icon oder vielleicht ein Logo dann plötzlich heller oder dunkler wirkt oder gar größer oder kleiner, Farben wirken je nach Hintergrund intensiver oder blasser.

Häufig hatten wir bereits die Aufgabe bei technischen Produkten möglichst viele verschiedene Farben (z. B. für Graphen) mit möglichst gutem Kontrast zum Hintergrund darzustellen und dabei einen guten Kontrast ohne grelle Farben zu erzielen. Oder wir wählen für Darstellungen bestimmte Farbkombinationen aus, um eine bestimmte Gesamtwirkung beim Nutzer zu erzielen. Die umliegenden Farben können auch die emotionale Farbwahrnehmung beeinflussen. Ein roter Farbton wirkt zunächst einmal alarmierend und wird daher z. B. bei Fehlermeldungen eingesetzt, könnte aber in Verbindung mit weiteren bunten Farben auch fröhlich wirken.

3. Subjektives Farbempfinden und Gefühle durch kulturellen und persönlichen Hintergrund

Wer sind denn die späteren Nutzer und was bringen diese mit? Auch unser kultureller Hintergrund, unser Bildungsstand, das Alter, das Geschlecht und unsere Persönlichkeit haben Einfluss darauf, wie wir unsere Umgebung wahrnehmen. Sicherlich würde man bereits intuitiv ein User Interface für einen Barttrimmer zumindest im westlichen Kulturkreis nicht in rosafarbenen und pinken Farbtönen gestalten. Entscheidend für die Gestaltung ist allerdings nicht nur ein objektiv messbarer Farbwert, sondern auch der subjektiv empfundene Farbton - also wie nimmt ein Nutzer einen Farbton wahr.

Manche Farben haben in bestimmten Kulturkreisen eine besondere Bedeutung. So steht Rot in Indien z. B. für Feuer, Macht, Fruchtbarkeit, Liebe und Schönheit, in Südafrika dagegen auch für Trauer, Gewalt und Opfer. Die Flagge symbolisiert die Einheit nach der Apartheid und trägt die Farben der Kolonialmächte. Der rote Anteil wird aber auch als das vergossene Blut aus den Unabhängigkeitskämpfen gedeutet.

Der Gestalter muss sich also fragen, in welchen Ländern und Kulturkreisen ein Produkt später verwendet wird und wie eine bestimmte Farbe oder Farbkombination in einem Kulturkreis empfunden wird bzw. ob sich diese von unserer eigenen westlichen Wahrnehmung unterscheidet. Soll ein internationales Produkt entwickelt werden, müssen Farbcodierungen überprüft und so vereinfacht werden, dass sie in erster Linie gefahrlos kulturübergreifend verwendet werden können. Eine Möglichkeit ist es auch, Produkte länderspezifisch anzupassen oder dem Nutzer selbst die Möglichkeit zu geben aus verschiedenen Farbpaletten zu wählen.

4. Sehschwächen

Besonderes Augenmerk legen wir als Gestalter auch auf Sehschwächen, wie z. B. die Alterssichtigkeit und die Rot-Grün-Sehschwäche von der etwa 9% aller Männer, aber nur 0,8% aller Frauen betroffen sind. Seltener treten die Gelb-Blau-Sehschwäche oder die völlige Farbenblindheit, die Achromasie, auf. Die Rot-Grün-Sehschwäche lässt sich für Normalsichtige simulieren, indem der rote und grüne Farbkanal zu einem gelben Kanal zusammengefasst werden, bei dem Rot und Grün die gleiche Helligkeit aufweisen. Gerade die Rot-Grün-Sehschwäche könnte bedeuten, dass für einen Benutzer in einem User Interface die Unterscheidung von einer Warnung (rot) zu einem Hinweis OK (grün) bei reiner Farbcodierung nicht möglich ist. Daher dürfen wichtige Informationen nicht nur über ihre Farbigkeit kodiert werden. Denkbar sind weitere Kodierungsoptionen über die Form (z. B. Größe, Icons, Muster, Unterstreichung), Verhalten (z. B. blinken), Helligkeit oder textliche Hinweise (z. B. „Warnung").

5. Abhängigkeit der Farbe von der gegebenen Hardware

Auch die verwendete Hardware spielt für die Farbwahrnehmung eine entscheidende Rolle. Handelt es sich um ein Produkt mit fest verbautem / gleichbleibendem Display? Dann können im Gestaltungsprozess die Designs und natürlich auch die eingesetzten Farben direkt für das verwendete Display optimiert werden oder handelt es sich um eine Applikation die auf unterschiedlichsten Endgeräten betrachtet wird? Eigenheiten der Displays wie Auflösung, Helligkeit, Kontrast, Sättigung, aber natürlich auch die Oberflächenstruktur von matt bis glänzend haben einen großen Einfluss auf die Wirkung der verwendeten Farben.

6. Usability durch Farbgestaltung

Durch Farbe können Elemente hinsichtlich ihrer Funktionalität oder ihres Status kodiert werden (z. B. klickbar / nicht klickbar oder aktiv / inaktiv usw.). Verschiedene Farben und Farbabstufungen werden eingesetzt, um verschiedene Zustände von Objekten z. B. von Buttons wie „hover", „clicked", „selected", usw. darzustellen. Durch Farbigkeit oder Helligkeit lässt sich auch die Aufmerksamkeit des Benutzers ganz subtil auf bestimmte Screenbereiche oder Objekte lenken. Farbe und Farbabstufungen können dazu dienen die Relevanz von Elementen hervorzuheben oder Elemente auf dem Screen zu strukturieren. Farbverläufe lassen sich gezielt einsetzen, z. B um einem Design mehr Tiefe, Griffigkeit oder Fokus zu verleihen. Die Farbigkeit von Elementen ist elementarer Bestandteil einer guten Usability von Produkten.

7. User Experience durch Farbgestaltung

Farben, Verläufe und Farbkombinationen können beim Betrachter Empfindungen und Gefühle auslösen. Durch die Farbgestaltung kann der Gestalter daher auch die Stimmung und die Empfindungen von Nutzern beeinflussen und lenken. Dies nutzen wir, um die User Experience zu gestalten. Ist die Arbeitsumgebung beispielsweise heiß und schweißtreibend können kühlere Farben im UI den Nutzer subjektiv etwas abkühlen. Umgekehrt können bei sehr kalten Arbeitstemperaturen wärmere Farben auch ein Gefühl von Wärme vermitteln.

Durch Farben können wir dem Nutzer zeigen, worauf er seine Aufmerksamkeit richten soll, ob alles in Ordnung ist, oder ob er dringend eingreifen muss. Farben können den Benutzer auch in Stresssituationen beruhigen, oder den Fokus auf etwas Bestimmtes lenken. Farben können fröhliche oder positive Empfindungen aber natürlich auch negative Emotionen auslösen. Für das Erleben von User Interfaces ist die Farbgebung ein entscheidendes Element.

8. Normengerechte Farbgestaltung

Auch die DIN EN ISO 9241 Ergonomie der Mensch-System-Interaktion – Teil 125: Empfehlungen zur visuellen Informationsdarstellung, gibt konkrete Handlungsrichtlinien und -empfehlungen für die Farbgestaltung von User Interfaces: Bekannte Farbkodierungskonventionen müssen beachtet werden, wie z. B. kulturelle Konventionen (rot= schwerwiegende Warnung, Alarm, Stopp, Fehler, heiß; gelb = Warnung, Achtung; grün = OK, sicher, normal, weiter; blau = kalt, zu niedrig; grau = inaktiv), Aufgabenkonventionen (z. B. Kodierung von Widerständen z. B. schwarz=0, braun=1), konkrete Identifikationen, linguistische Konventionen und realistische Farben. Verweist man in der Software konkret auf eine z. B. blaue Hardwarekomponente ist es für den Benutzer hilfreich, wenn die Darstellung im User Interface dem Original entspricht. Farben und Graustufen müssen für den Benutzer gut unterscheidbar sein. Ändert sich mit dem Status auch die Farbe eines Objekts auf dem Display muss der Unterschied wahrnehmbar sein, auch wenn der Benutzer zwischenzeitlich den Blick vom System abgewandt hat.

Muss der Benutzer selbst Farben bestimmen und erkennen, empfiehlt sich die Verwendung von Fokalfarben (reine Farben ohne Mischungen) auf unbuntem Hintergrund. Wird vom Benutzer kontinuierliches Lesen erfordert, sollten keine spektral extremen Farben verwendet werden. Ebenso ist der Einsatz von spektral extremem Blau und Rot auf dunklen Hintergründen aufgrund unerwünschter Tiefeneffekte und die direkte nebeneinanderliegende Darstellung von spektral extremen Farbtönen zu vermeiden.

Bei der Gestaltung von User Interfaces machen wir uns unseren großen Erfahrungsschatz aus allen vorgenannten Aspekten zu Nutze. Oberste Priorität hat es immer ein intuitives und erfolgreiches User Interface zu entwickeln. Farben sind dabei ein grundlegendes Gestaltungselement und für uns ein wichtiges Tool. Denn „blau" ist eben nicht einfach nur „blau". Wir haben als Gestaltungsexperten ein feines Gespür für Farben und sorgen dafür, dass auch Ihre Produkte mithilfe der eingesetzten Farben zu vollem Erfolg werden. Gerne beraten wir auch Sie bezüglich der Verwendung von Farben in Ihren User Interfaces oder betrachten die Farbgestaltung im Rahmen einer ganzheitlichen UI/UX-Entwicklung.

Ihr Ansprechpartner
Maila Thon, Senior UI/UX Designer, Project Manager
Maila Thon, Senior UI/UX Designer, Project Manager
3D Render Farbkonzept Schleifmaschine
Grafik Designbeispiele richtig und falsch
Designbeispiele richtig und falsch
Beispiel Farbenblindheit

Unsere Kompetenz wird nicht nur durch 400+ Auszeichnungen belegt, sondern auch durch die Begeisterung unserer Kunden.

ProduktdesignEngineering

Ziegler

„Wie kann man Aufgaben und Herausforderungen erfolgreich lösen? Dazu benötigt man Partner, die eine Aufgabe in ihrer Komplexität richtig erfassen und darstellen können. Im zukunftsorientierten Spannungsfeld [...] die richtigen Schwerpunkte zu setzen und „down to Earth" umsetzen zu können, ist Teil der Erfolgs-DNA bei BUSSE Design+Engineering, die wir sehr schätzen.“

ProduktdesignEngineering

Thyssenkrupp

„BUSSE bietet als erfahrener Design-Partner alles aus einer Hand. Kreative Design-Lösungen, Prototyping bis hin zu Kleinserienfertigung und UX-Design für Software. Die Lösungsansätze und Methoden bis zur Umsetzung führen stets zu einem den Anforderungen perfekt entsprechenden Ergebnis.“

UI/UX Design

Prinoth

„BUSSE ist unser Design-Game-Changer für Pistenfahrzeuge! Ihr UI/UX Team hebt nicht nur Icons und Layout, sondern das gesamte Benutzererlebnis auf ein neues Level. Klare Bedienung macht jede Fahrt zum Vergnügen. Von der Entwicklung bis zur Serienproduktion zuverlässig an unserer Seite. Ihr Interface, basierend auf präziser Produktforschung, vereinfacht die Bedienung. Flexibel, vorausschauend und zuverlässig – BUSSE ist unser Zufriedenheitsgarant!"

ProduktdesignEngineeringPrototyping

Hammer

„BUSSE ist für uns seit über fünfzehn Jahren der perfekte Partner, um neue und innovative Ideen zu entwickeln. BUSSE bietet ein sehr hohes Maß an Professionalität und ein erstklassiges Markenverständnis. Das Team hat den hohen Anspruch unserer Projekte komplett verinnerlicht und mit außergewöhnlicher Kreativität, sowie voller Hingabe uns dabei geholfen, neue Trends zu setzen. Viele unserer Bestseller tragen BUSSE Handschrift.“

ProduktdesignEngineering

Britax Römer

„Kindersitze sind nicht nur äußerlich komplex, sondern auch technisch anspruchsvoll. Unsere langjährige Partnerschaft mit BUSSE macht die Entwicklung zu einem kreativen Erlebnis. Designsprints und eine vielseitige Auswahlmatrix entlasten Ingenieure, minimieren zeitaufwändige Iterationen. Wir schätzen BUSSE für ihre zeitnahe Umsetzungen trotz begrenzter Ressourcen. Die Zusammenarbeit ist nicht nur effektiv, sondern macht auch richtig Spaß!"

ProduktdesignEngineering

Calistair

„Besonders begeistert waren wir von der Spielfreude und der technischen Kreativität der Busse-Mitarbeiter. Die Atmosphäre im Projekt war geprägt von professioneller Lockerheit und großer Agilität. Wir haben in 4 Monaten aus einer Idee ein fertiges Produkt gemacht!“

ProduktdesignEngineeringPrototyping

Sked

„Durch Internetrecherche stießen wir auf BUSSE Design+Engineering. Nach Kontaktierung wegen eines Funktionsmusters schlossen wir einen Vertrag für ein technisches Redesign ab. Die Konzeptänderung führte zu Redesign II, einem Prototyp, der 2019 mit einem goldenen Award auf der Ambiente-Messe ausgezeichnet wurde. BUSSE realisierte das Projekt zielgerichtet, termintreu und handwerklich erstklassig. Eine zukünftige Zusammenarbeit ist sicher."

ProduktdesignEngineeringPrototyping

Sigel

„Die Zusammenarbeit mit dem gesamten Projektteam war stets zielgerichtet, konstruktiv und angenehm in der Kommunikation. Die Anforderungen an Funktion und Sicherheit stets im Blick, haben Herr Timm und sein Projektteam verstanden, worauf es uns in der Produktentwicklung ebenfalls ankommt: Can-Do-Mentalität, agiles Mindset sowie Flexibilität und Effizienz in allen Projektlagen."

Produktdesign

Mikron

„Mit der Firma BUSSE als Sparringspartner konnten wir erfolgreich für unsere neuesten Produkte ein markenprägendes und zielgruppengerechtes Design ausarbeiten. BUSSE hat dabei bestens unsere internen Unternehmensabläufe verstanden und konnte somit optimale Ergebnisse liefern. Termine wurden stets eingehalten, auf BUSSE ist Verlass. Jederzeit wieder!“

ProduktdesignEngineering

Keller

„Von der Zusammenarbeit mit BUSSE waren wir dahingehend positiv überrascht, dass nicht allein das Erscheinungsbild unseres Produktes im Vordergrund stand, sondern vielmehr das Zusammenspiel aus wirtschaftlichen Fertigungslösungen, optimierter Ergonomie und einem funktionalen Design. Das Ergebnis besticht nun mit einem stimmigen, nie dagewesenen Designkonzept.“

Logo des iF DESIGN AWARDReddot design award LogoLogo des Design Center StuttgartLogo des Good Design AwardsLogo des Design PlusLogo des UX Design Awards
Das moderne BUSSE DESIGN+ENGINEERING Headquarter mit großen Glasfenstern wird von innen beleuchtet und hebt sich vom dunkler werdenden Himmel während der Dämmerung ab. Das Bild zeigt architektonisches Design und natürliche Beleuchtungseffekte.