Tipps und Tricks

Farbwahl für Usability und Corporate Design

15. April 2021 Lesezeit: 4 min

Illustration mit kreativer Fachkraft, die vor einem Bildschirm eine überdimensionierte Pipette hält zur Darstellung der Farbauswahl für digitale Anwendungen.

Für die Auswahl von Farben bei der Gestaltung digitaler Anwendungen gibt es einige wichtige Kriterien: Farbton, Sättigung, Helligkeit sowie Akzente und Kontraste schaffen eine optimale Wahrnehmung und müssen entsprechend sorgsam gewählt und aufeinander abgestimmt sein, damit keine visuellen Störfaktoren entstehen. Eine willkürliche Auswahl, etwa nach Lieblingsfarben, kann daher schnell zu Problemen führen. Worauf sollte man bei der Farbgestaltung also achten?

Richtige Farbwahl unterstützt die Usability

Möchte man nutzerzentriert gestalten, spielen vor allem Kriterien der Usability (Bedienbarkeit) eine Rolle bei der Auswahl und Komposition von Farben. Farben unterstützen beispielsweise die Hierarchisierung von Elementen: Wichtigere Informationen kann man mit einem stärker gesättigten Farbton hinterlegen – dadurch fallen sie besser auf. Auch Elemente wie Buttons mit ähnlichen Funktionen sollte man in der gleichen Farbe gestalten, um dem Nutzer die Orientierung zu erleichtern. Hier kommt es aber nicht nur auf die Farbe an, sondern auch auf andere Aspekte wie Gestaltgesetze und Designstile und -trends.

Der Kontrast zwischen Elementen ist oft entscheidend für die Les- und Erkennbarkeit. Ist er nicht optimal abgestimmt, besteht die Gefahr, dass dem Nutzer die Anwendung schnell zu anstrengend wird. Und auch die Größe eines Elements spielt eine wichtige Rolle. Denn je kleiner ein Element ist, desto höher muss dessen Kontrast zum Hintergrund sein, damit es erkennbar bleibt. Gleichzeitig muss man Kontraste bewusst und sparsam einsetzen, damit für den User keine visuellen Störungen und Ablenkungen entstehen.

Die Komplementärfarben Grün und Rot ergeben direkt nebeneinander einen flimmernden Effekt. — Ein Komplementärkontrast liegt dann vor, wenn Farben sich im Farbkreis direkt gegenüberliegen. Diese Farben können in Kombination visuell sehr störend sein; teilweise entsteht ein flimmernder Eindruck.

„Wir. Hier.“ ist das Portal der Chemieverbände Rheinland-Pfalz und ein Projekt der IW Medien, das für erfolgreiche Mitarbeiterkommunikation steht. Die Website wir-hier.de ist ein gutes Beispiel für eine gelungene Farbgebung im Sinne der Usability: Klickbare Themen und Artikel sind in einem auffallenden Orange gestaltet oder werden beim Hovern (Schweben mit der Maustaste) orange unterstrichen. Besondere Call-To-Action-Elemente werden in einem leuchtenden Blau noch einmal hervorgehoben und lassen sich somit leicht finden und klicken. Beide Farben stehen in einem harmonischen Kalt-Warm-Kontrast zueinander. Durch den sonst schlichten Farbeinsatz auf der Website stehen diese Elemente im Fokus, sodass der User sich gut zurechtfinden kann und ein positives Nutzererlebnis zurückbleibt.

Farben für Corporate Design finden

Minimalistische Darstellung einer blauen und magentafarbenen Kaugummiverpackung, die unterschiedliche Eigenschaften, Frische versus Süße, verkörpern. — Mit Farben assoziiert man oft Eigenschaften.

Neben der Usability sind die Wirkung und Assoziation von Farben mit bestimmten Eigenschaften und Zugehörigkeiten wichtige Auswahlkriterien. Verschiedene Produkte, Branchen und Unternehmen unterscheiden sich jeweils in ihrem Farbcode: Medizinische Designs sind oft in hellen Blau- und Grüntönen gehalten, Braun und Beige assoziiert man mit Kaffee-Marken und Versicherungen haben oft kräftige Blautöne in ihrem Auftritt. Es gibt also eine Reihe von Konventionen. Diese kann man einhalten, aber auch bewusst brechen, je nachdem, welches Ziel man verfolgt.

Beispiele für die Wirkung unterschiedlicher Farben von Gelb für warm bis Schwarz für elegant. — Auswahl und Beispiele für die Wirkung unterschiedlicher Farben. Diese unterscheiden sich jedoch durch weitere Faktoren wie etwa den kulturellen Hintergrund: Schwarz ist in christlich- geprägten Regionen eine Trauerfarbe, wohingegen man etwa im Buddhismus zur Trauer Weiß trägt und diese Farbe mit dem Tod assoziiert.

Fast-Food-Restaurants und Lebensmittelhersteller setzen häufig auf Gelb und Rot, weil diesen Farben eine (unbewusste) geschmacksanregende Wirkung nachgesagt wird. Große Technikanbieter setzen auf Schwarz, Silber und Weiß, um mit diesen Farben eine elegante, exklusive Wirkung zu erzeugen und das Produkt als der Konkurrenz überlegen zu positionieren. Mit Farben verbindet man also bestimmte Eigenschaften, Emotionen und Interpretationen. Zusätzlich beeinflussen Kultur, Alter, Geschlecht und persönliche Erfahrungen die Rezipienten. Diese Verbindungen sind zwar nicht in jedem Fall faktisch belegbar. Dennoch helfen diese Richtlinien bei der Auswahl von Farben im Sinne der Corporate Identity oder des Corporate Designs.

Tipps zur richtigen Farbwahl

Wählen Sie Farben aus, die aus Usability-Sicht gut funktionieren, gleichzeitig aber zu Ihrer Marke / Ihrer Corporate Identity passen. So stellen Sie sicher, dass die gewünschten Emotionen und Botschaften, die mit der Farbgestaltung konnotiert sind, transportiert werden. Dadurch erzeugen Sie eine gute User Experience.
Konventionen bewusst ausnutzen und bewusst brechen: Viele ähnliche Marken und Branchen bedienen sich ähnlicher Farben. Das kann nützlich sein, um Kunden und Nutzern schon beim ersten Eindruck ein bestimmtes Versprechen zu geben und Assoziationen zu erzeugen. Gleichzeitig werden so im Gesamteindruck aber auch Klischees verstärkt, die möglicherweise nicht zum eigenen Unternehmen passen.
Zu viele Farben machen eine Anwendung eher unübersichtlich. Begrenzen Sie sich nach Möglichkeit also auf bestimmte Farben. Ein guter Richtwert ist eine Primärfarbe plus zwei Sekundärfarben, die man kontrastierend oder ergänzend zur Primärfarbe einsetzt. Verschiedene Online-Tools sind hierbei hilfreich.
Kontrastreichtum unterstützt die Nutzerführung und erleichtert das Lesen. Besonders Menschen mit Sehschwäche haben es damit oft schwer, weshalb man Tools wie der Color Blindness Simulator zur Überprüfung heranziehen sollte. Doch Vorsicht bei zu starken Kontrasten und visuellen Störfaktoren – diese können schnell ablenken oder anstrengend sein.
Aesthetic Usability Effect: Nutzer tolerieren Usability-Probleme einer Anwendung eher, wenn das Interface ansprechend gestaltet ist. Sich über Design und Gestaltung bewusst Gedanken zu machen, lohnt sich also in jedem Fall.

Um zu testen, ob Farben den notwendigen Kriterien entsprechen, eignen sich beispielsweise A/B-Testings und andere Usability-Tests. Die IW Medien bietet außerdem umfangreiche UX-Checks an. Probieren Sie es aus!