Farben richtig einsetzen: Wie ihr UX & Usability verbessert

In den ersten beiden Teilen der Artikelserie Tipps für erfolgreiches UX- und Usability-Design haben wir uns den allgemeinen Richtlinien und psychologischen Verhaltensmustern gewidmet, die es bei der Gestaltung einer Website oder eines Onlineshops zu berücksichtigen gilt.

Für ein positives Nutzererlebnis ist aber noch ein weiterer Faktor von großer Bedeutung. Und zwar der gewisse Farbfaktor! Wie ihr Farben bei der Gestaltung von Website und Onlineshops

richtig einsetzt
positive Nutzererlebnisse erzeugt
Traffic und Conversion erhöht

zeigen wir euch heute im dritten Teil der UXD-Serie.

Farben und ihre Wirkung

Was ist deine Lieblingsfarbe? Diese Frage ist für viele Menschen gar nicht so leicht zu beantworten. Selbst, wenn es die eine Lieblingsfarbe gibt, reagieren wir dennoch auf alle Farben, die uns umgeben. Und das immer ganz individuell. Farben können unsere Emotionen und damit auch unser Handeln beeinflussen. Sie spielen daher eine wichtige Rolle bei der Entwicklung von Produkten, der Corporate Identity (CI) und demzufolge auch im UX-Design.

Da Farben im direkten Zusammenhang mit Emotionen stehen, haben sie ähnlich wie Behavior Patterns, einen erheblichen Einfluss auf die Kaufentscheidung eines Nutzers. Für eben solche können sie den gewissen Anstupser geben. Daher sollte die Farbauswahl für Produkte, Websites oder die CI nicht zufällig getroffen werden. Geschäftsmodell und Zielgruppe sollten immer berücksichtigt werden. Zielführend ist dabei ein harmonisches Zusammenspiel, welches für den Wiedererkennungswert der Marke sorgt: Hintergründe, Bedien- und Textfelder sollten sich voneinander abheben, aber den Nutzer nicht durch übermäßige oder zu geringe Farbgebung verwirren.

Wie aber wählst du die richtigen Farben? Schließlich ist die Farbpalette sehr bunt. Aus Usability-Sicht gibt es fünf Grundregeln bei der Farbwahl zu beachten:

Wichtige Elemente der Benutzeroberfläche sollten durch auffälligere Farben gekennzeichnet sein, z.B. der »In den Warenkorb«-Button
Der Kontrast zwischen verschiedenen Elementen wie Text und Hintergrundfläche sollte hoch genug sein, um Abgrenzungen zu schaffen
Elemente gleicher Funktion sollten konsistent auf der Website mit gleicher Farbgebung markiert sein, z.B. Call-to-Actions
Die eingesetzten Farben sollten nicht ablenken, insbesondere bei Anwendungen, mit denen man länger arbeitet
Der Weißraum sollte nicht unterschätzt werden! Denn damit Farbe wirken kann, braucht es immer auch genug Raum bzw. Platz um sie herum

Wir haben für euch eine kleine Farbauswahl getroffen und ihre zentralen Eigenschaften sowie damit in Verbindung gebrachte Emotionen und Marken näher betrachtet. Im deutschen Kulturkreis kommen sie, auch kombiniert, am häufigsten zur Anwendung.

Farbpsychologie: Typische Fehler

Um im E-Commerce mit Farben zu punkten, braucht es – wie so oft – die richtige Strategie. Zu viele Farben auf einer Website wirken überladen, zu wenig Kontrast führt zu einer schlechten Lesbarkeit. Diese typischen Fehler lassen sich jedoch vermeiden.

Mangelnder Kontrast

Kontraste müssen richtig eingesetzt werden. Bei geringen Kontrasten wie zum Beispiel grauer Schrift auf hellem Hintergrund, entsteht zwar ein insgesamt harmonisches Bild, doch werden Texte dadurch für den Nutzer unleserlich.

Je nach Witterung haben dann aufgrund von Reflexionen oder schlechter Einstellungen auch Smartphone-Nutzer Probleme bei der Navigation auf der Website. Zu starke Kontraste hingegen können ablenken oder sorgen für Anstrengung beim Lesen und Navigieren.

Die Faustregel hier: Je kleiner das Element oder je feiner die Schrift, umso höher der Kontrast. Natürlich gibt es auch verschiedene Tools wie WebAIM, mit denen sich Grenzwerte zur Farbgebung errechnen lassen. Im Webdesign müssen sogenannte Contrast Ratio Grenzen für AA und AAA Barrierefreiheit beachtet werden.

Keine Unterscheidbarkeit der Farben

Farben zu nutzen ist gut, allerdings bedeutet ihr Einsatz allein nicht zwangsläufig, dass Nutzer die Website oder den Onlineshop dadurch besser verstehen oder sie navigieren können. Daher sollten Elemente nicht nur durch farbliche Akzente voneinander abgegrenzt werden. Es kann helfen, beispielsweise Buttons »Mico-Interactions« oder auch »Mico-Animationen« zuzuweisen, also eine Symbolik oder Reaktion bei Interaktion. So leuchtet das Warenkorb Symbol nicht nur bei Cursor-Kontakt, es vergrößert sich zudem leicht und wird extra als Warenkorb betitelt.

Farben für ein positives Nutzererlebnis

Farben sind vielfältig und beeinflussen uns stark in der Wahrnehmung einer Website, eines Onlineshops oder Produktes. Ihre Wahrnehmung ist jedoch abhängig vom jeweiligen Kulturkreis der Nutzer sowie deren persönlichen Vorlieben. Die Wahl der richtigen Farben bringt aber viele Vorteile: Sie kann die Usability verbessern, da sich Kunden besser auf einer Webseite zurechtfinden und somit schneller an ihr Ziel kommen können. Sie schaffen Orientierung für die Nutzer, fügen optisch zusammen, was zusammengehört oder grenzen ganze Bereiche voneinander ab.

Farben, Formen und Fakten: UXD als Schlüssel zum Commerce-Erfolg

Gekonnt eingesetzt sorgen Farben zudem für eine Wiedererkennung der Marke, auch wenn kein direktes Brand-Logo zu sehen ist. Grund genug also, um sich mit dem Thema Farbpsychologie und dem Einfluss von Farben auf Websites näher zu beschäftigen.

Im Whitepaper »User-Experience-Design« geben wir euch weitere hilfreiche Tipps von Planung und Analyse bis hin zur Umsetzung einer optimalen User Experience und Usability.

Hier geht’s zum kostenlosen Download.