Farbe kreiert Verbindung. Und dass Farbe eine wichtige Komponente in der Gestaltung ist, dürfte jedem sonnenklar sein. Doch wie kann man mit (fast) nur einer einzigen Farbe ein erfolgreiches Design aufbauen und den Nutzer dabei zielführend durch das Interface lotsen? Diese Frage versuchen wir anhand des Beispiels Twitter heute zu erklären.
Ernsthaft? Für (fast) alles die gleiche Farbe?
Starten wir das erste Mal die Twitter-App, begrüßt uns ein Splash-Screen (siehe Beitragsbild oben), bestehend aus zwei Komponenten, wodurch sich die Identität in unser Gehirn auf Ewigkeiten einbrennen wird: eine markante Farbe und ein niedliches Gezwitscher. Je öfter wir es sehen, desto unvergesslicher wird es. Neben der Brand-Identity haben wir jedoch noch einen weiteren besonderen Effekt: Die Farbe sagt uns, wie die App benutzt wird und wir in Zukunft mit ihr umgehen sollen. Oh wow! Ein Farbleitsystem mit nur einer einzigen Farbe? Sehen wir uns das genauer an – und zwar anhand der Screenshots aus meinem Twitter-Account: Links das Original, Rechts präpariert, um auf die Highlights einzugehen.
Interessant ist nämlich hierbei, dass das markante Twitter-Blau umfassend durch alle Ebenen der App verwendet und auch übergreifend für alle Interaktionen eingesetzt wurde, selbst wenn damit unterschiedliche Dinge dargestellt wurden: Hashtags, Links, Badges um Home-Button und Notifications, Navigations-Hinweise, auch der Verfassen-Button rechts unten in der Ecke trägt den identischen Blauton (hierbei fällt die Wirkung einer gut gewählten Farbe besonders auf, wenn man sieht, wie sehr der Kreis aus seiner Umgebung hervortritt). Alles im Grunde überaus einheitlich, wodurch dem Anwender gelingt, instinktiv und zügig auf die Geschehnisse seiner App zu antworten (= quick response).
Hätten die App-Designer für alle Interaktionen unterschiedliche Farben eingesetzt, wäre das Design nicht nur unruhiger, sondern auch mühevoller in der Interpretation und womöglich bei der Menge an Möglichkeiten Durcheinander wirkend im Auftritt. Nutzer müssten im schlimmsten Fall jedes Mal darüber nachdenken, was zu tun ist, wenn sie eine Farbe sehen und die Bedeutung wäre nicht hinreichend klar. Beim Beispiel Twitter ist klar: Farbe = Hier passiert was, hier kannst du interagieren.
Farbe als Anomalie im User-Interface-Design
Doch was ist das? Wer sich das Bild oben aufmerksam angeschaut hat, wird erkennen: Moment! Da gibt es sehr wohl eine andere Farbe, nämlich am Like-Icon der Tweets. Richtig. Und das hat einen guten Grund:
Während bisher alle besprochenen Interaktionen (Links, Hashtags, etc.) den Nutzer vom aktuellen Bereich wegführen, sobald man mit ihnen arbeitet, handelt es sich beim Herz um etwas Besonders: es ist eine Status-Änderung, die exakt dort wirkt, wo man sich befindet. Deswegen ist sie nicht blau. Sondern rot.
Das rote Herz ist die Anomalie im Design – also die Abweichung von der Normalität. Und diese Unregelmäßigkeit fällt besonders auf, weil es auch etwas Besonderes ist, denn es existiert nur dort und kommuniziert: „Ich mag, was ich sehe!“ – gewürdigt durch ein knallrotes Herz-Icon (mit Animation). All das andere blaue Zeug trägt den Nutzer irgendwo anders hin, doch das Herz sagt nur: „Hey, wir haben den Status auf Like geändert“. Deswegen hat diese Unregelmäßigkeit auch eine andere Farbe. Gut gemacht.
Darum ist Farbe im Interface-Design ein essenzieller Bestandteil
Wir halten fest: Farbige Dinge erhalten grundlegend stets besondere Aufmerksamkeit. Und: Farbe sorgt für einen emotionalen Wiederhall, denn sie suggeriert in unserem Kopf Assoziationen, Bedeutungen und vor allem auch Reaktionen, weswegen sie stets angemessen gewählt werden sollte.
Um im Kopf der Nutzer chaotische Zustände und Verwirrung zu verhindern, sollte Farbe stets konsistent, also gleichbleibend und durchdacht eingesetzt werden. Andernfalls handelt man in seinen Überlegungen nicht als Designer, der Probleme löst, sondern eher als Dekorateur, der Dinge tut, weil sie einfach schick aussehen. Nur eine Farbe (wie im Beispiel von Twitter) zu nehmen ist ein spannender Ansatz, der einem weltweit etablierten und verständlichen Muster bei vielen Dienstleistungen dort draußen zu finden ist. Das darf gerne als Idee für das nächste eigene Projekt im Hinterkopf behalten werden. Besonders dann, wenn man mal wieder über eine fünfteilige Farbpalette grübelt …
Und dann hätten wir da natürlich noch die Anomalie – das schwarze, äh pardon, bunte Schaf, das alle Aufmerksamkeit auf sich zieht, wenn es gekonnt integriert wird. Chapeau!