Usability-Tipps - Kapitel "Inhaltsgestaltung"

Die richtigen Farben für die Website finden

Mit der Auswahl der Farbe – oder besser: Farben – für den eigenen Webauftritt hält man sich in der Regel nicht lange auf. Entweder gibt es eine bestehende Farbwelt oder man sucht aus einer Auswahl bestehender Vorlagen ein Design aus, das auf den ersten Blick zusagt, weil es professionell aussieht, den eigenen Vorstellungen möglichst nahe kommt oder einfach „schick“ ist. Das dabei nicht immer optimale Farbkombinationen herauskommen, ist wohl selbstverständlich. Der Herausforderung, alle notwendigen Informationen zur Farbenlehre und über die möglichen Grundlayouts einer Website in zwei kurze Abschnitte zusammenzufassen, wird sich dieser Beitrag nicht stellen. Einige grundsätzliche Hinweise ohne Anspruch auf vollständige Abdeckung aller relevanten Informationen sind aber dennoch zweifelsfrei hilfreich, wenn es um die Optimierung bestehender Designs geht… oder der Findung eines neuen und möglichst benutzerfreundlichen Aussehens geht.

Die Farbwelt einer Website wird oft durch ein bestehendes Corporate Design „CD“ (ab zwei Mitarbeitern dürfen Sie sich auch eine Corporate Identity „CI“ zulegen ;)) bestimmt. In diesem Fall bleibt dem Webdesigner oft nur noch die Möglichkeit, die bestehende(n) Farbe(n) zu nutzen und höchstens Abstufungen vorzunehmen. Der „Vorteil“ hierbei ist, dass so oft monochromatische Designs entstehen, in denen es viel weniger Potential zur Verwirrung des Betrachters gibt, wenn die Abstufungen dabei nicht so sehr in´s Kontrastlose abrutschen, dass es hinsichtlich der Darstellung und Lesbarkeit kritisch wird. Unabhängig davon, ob ein Satz von Farben bereits vorgegeben ist oder Sie freie Wahl haben, gilt es einige Regeln zu beachten:

Wirkung von Farben

Schon Goethe hat sich mit der Wirkung von Farben beschäftigt und einen Farbkreis definiert, der heute noch Anwendung findet. Alle Farben, die Sie auf einer Website einsetzen, sollten einzeln und im Zusammenspiel auf ihre psychologische Wirkung betrachtet werden, um nur dort, wo es gewollt ist, bestimmte Effekte, Kontraste und Störungen zu erzielen. Ohne detaillierte Kenntnisse der Farblehre ist dies aber nur sehr oberflächlich möglich; die Auswahl wird zudem durch persönliche Vorlieben und Abneigungen sowie kulturelle, biologische und weitere individuelle Einflüsse mehr oder weniger stark beeinflusst. Wenn Sie das Design also keinem ausgebildeten Webgrafiker überlassen können (bzw. konnten), ist bei Veränderungen als erstes anzustreben, eine überschaubare Anzahl von Farben einzusetzen.

  • Beginnen Sie mit der Hintergrundfarbe, da hiervon die Wirkung aller anderen Farben abhängt. Schaffen Sie bei Layouts fester breite gleich einen brauchbaren Kontrast zwischen Hintergrund und Inhaltsbereich.
  • Nutzen Sie auch sonst starke Kontraste und Farbunterschiede, um ein klares Bild zu erzeugen, das auch (siehe dort) der Barrierefreiheit entgegen kommt. Dies gilt vor allem bei Wahl von genereller Hintergrund- und Textfarbe im Inhaltsbereich.
  • Setzen Sie beim Layout lieber auf einen monochromen Aufbau, wenn Sie nicht sicher sind, wie die eingesetzten Farben wirken.
  • Bei mehrfarbigen Designs sind sechs Farben das absolute Maximum! Wenn Farben unterschiedliche Kategorien darstellen sollen, halten Sie sich unbedingt an den eigenen Farbcode und weichen Sie nie davon ab, da ansonsten Verwirrung vorprogrammiert ist. Auch bei Farbcodierung für Funktionen oder nach anderen Kriterien ist Konsistenz unbedingt erforderlich.
  • Bei der Farbgestaltung des Inhalts setzen Sie Farbe (außerhalb von Abbildungen) sparsam ein, da sonst die Betonung von Details mit Farben schwerfällt. Nur wenn eine (eine!) Farbe als Signal für Hervorhebungen erkannt werden kann, werden Informationen für die Nutzer leichter erfassbar, ansonsten schafft Farbe Verwirrung statt zu helfen.
  • Setzen Sie Farben im Inhalt und der Navigation ebenso sparsam ein, damit sie auch wirklich der besseren Orientierung und nicht nur der optischen Gestaltung dienen.

Farbwahl

Die Wahl der Farbe wird von der Aufgabe bestimmt, die sie übernehmen soll und vom Umfeld stark beeinflusst. Ein paar hilfreiche Merkregeln:

  • Rot, Grün und Blau als Primärfarben und Grundfarben wie Gelb, Braun, Gold und Rosa haben einen hohen Wiedererkennungswert.
  • Isolierte Verwendung gesättigter Farben schafft Aufmerksamkeit. Aber Vorsicht: Starke Gelb- und Rottöne sowie alle Zwischenfarben wie z. B. Orange können dabei schnell aggressiv wirken.
  • Warme Farben wirken aus Sicht des Betrachters näher als kalte Farben. Mehr Aufmerksamkeit wird demnach mit warmen Farben erzielt, die möglichst im Kontext „kälterer“ Hintergründe eingesetzt werden, die durch die wahrgenommene Distanz den Kontrast zum Vordergrund noch verstärken.
  • Grelle warme Farben sollten nur sparsam eingesetzt werden, um einzelne Aspekte („Highlights“) auszuzeichnen. Dies wirkt nur dann, wenn der Rest (z, B. Fließtext) in einer unauffälligeren Kontrastfarbe gestaltet ist.
  • Dunklere Farben schaffen Ruhe und können im helleren Umfeld einen Verkleinerungseffekt haben. Soll ein Abschnitt demnach größer erscheinen, müssen hellere Farben im dunkleren Kontext verwendet werden.
  • Die Wirkung aller Farben ändert sich, wenn sich deren Hintergrund ändert, da jede Farbe von der Farbgebung umgebender Elemente beeinflusst wird.

Fazit: Wird Farbe für funktionelle Zwecke eingesetzt, so muss subtil und vor allem sparsam damit umgegangen werden. Wenn Sie zu viele Effekte durch unterschiedliche Farben, Schriftgestaltung etc. erreichen wollen, bedeutet dies eine enorme (Über-) Anstrengung für den Betrachter, dessen Aufmerksamkeit dann dramatisch sinkt. Im Web, wo niemand gezwungen ist, eine Seite länger als gewünscht zu betrachten, bedeutet dies den (dauerhaften) Verlust des Besuchers. Stellen Sie sich folgende Frage und geben Sie sich selbst die einzig richtige Antwort:

Warum sich die Mühe machen, Besucher in Suchmaschinen mittels Optimierung gezielt abzuholen und dann durch das Design zu überfordern und damit schließlich zu vertreiben?