Warum sollten Sie vibrierende Farbkombinationen vermeiden?

In diesem kurzen Artikel erfahren Sie, wie die Farbvibration die Lesbarkeit der Benutzeroberfläche im Zusammenhang mit dem Web- und Interface-Design beeinflusst.

Fett oder Garish?

Unter Interface-Designern zeichnet sich eine Tendenz ab, die grellen Farbschemata im Druckdesign nachzuahmen. Dieser Impuls ist zwar teilweise auf ideologische Trends zurückzuführen, er geht jedoch auch aus dem neuartigen typografischen Bereich hervor, der dem modernen Webdesigner zur Verfügung steht, was druckartige Layouts und große Schriftarten fördert. Es ist wichtig, auf die Unterschiede zwischen den einzelnen Medien hinzuweisen, die dazu führen, dass vibrierende Farben beim Drucken etwas mehr zulässig sind, und weniger bei der Bahn.

Vibrierende Farben auf der Website von Frooti

Im Druck bedeutet die Verwendung eines kräftigen Farbschemas oft den Unterschied zwischen einer Ignorierung auf einem Zeitschriftenständer und einem Verkauf. Auf der anderen Seite haben wir in der Benutzeroberfläche andere Überlegungen, die Vorrang vor der zwingenden Aufmerksamkeit des Benutzers, insbesondere der Lesbarkeit von Text, haben.

Was ist Vibration??

Eines der Hauptphänomene, das aus kräftigen und hoch gesättigten Farbschemata hervorgeht, ist eine scheinbar "vibrierende" Farbe, ein Ereignis, bei dem die Ränder zweier direkt benachbarter Farben zu verschmelzen, zu verwischen und zu leuchten scheinen, wodurch die Illusion von Bewegung entsteht.

Die beiden äußeren Muster haben Text mit vibrierender Farbe, während das mittlere Muster Text mit gleichwertigem Wert aufweist.

Josef Albers, der bekannte Farbtheoretiker, warnte in seinem Klassiker Interactions of Color vor der Verwendung von vibrierenden Farben:

„Dieser zunächst aufregende Effekt fühlt sich auch aggressiv an und ist für unsere Augen oft unangenehm. Man findet es selten außer einem schreienden Effekt in der Werbung, und daher ist es unangenehm, nicht beliebt und wird vermieden. “

Damit ein Farbenpaar gegenüber einander eine geringe Sichtbarkeit hat, ist es notwendig, dass sie ein gleiches Leuchtmittel mit einem ähnlichen Helligkeitswert sind. Um jedoch merklich zu vibrieren, weisen die Farben im Allgemeinen eine hohe Sättigung auf und sind komplementär zueinander, um ungefähr 180º auf dem Farbrad verschoben.

Blau (HSB 210, 99, 100) auf Rot (HSB 12, 99, 100)

Im obigen Beispiel befinden sich die roten und blauen Farbtöne auf gegenüberliegenden Seiten des Farbkreises (nicht jedoch direkt gegenüber) und beide haben eine Helligkeit von 100.

Spotify EDM

Spotify ist ein Synonym für mutige Farbschemata, die mit großer Wirkung eingesetzt werden, um Aufmerksamkeit zu erregen. Manchmal können diese Kombinationen abschreckend wirken, auch wenn sie nicht im wahrsten Sinne schwingen. wie der Button vor dem violetten Hintergrund im obigen Beispiel. Die Augen der Benutzer werden erkennen, worum es sich handelt, aber einige können nur schwer die äußeren Kanten der Form bestimmen. 

Lesbarkeit

Schnittstellentext wird erheblich beeinträchtigt, wenn er in gleichfarbiger, vibrierender Farbe eingesetzt wird. Ich habe diese vibrierenden Farben ausgewählt:

Wenn Farbschwingungen auftreten, ist das Element, das am stärksten vom Glühverzerrungseffekt betroffen ist, die Kante zwischen den beiden Farben. Aus diesem Grund sind Vibrationen besonders gefährlich im Zusammenhang mit UI-Schriftarten, kleinen Symbolen und anderen Detailelementen, die nicht groß genug sind, um ihre verschwommenen Vibrationskanten zu kompensieren.

Hier sind die gleichen Farbfelder, diesmal für jemanden mit Vollfarbenblindheit:

Zusätzlich zu den oft störenden, vibrierenden und verschwommenen Farben für diejenigen, die bei gleichfarbiger Farbe in voller Farbe sehen, können Farbblindheit am Ende überhaupt nichts sehen. Es gibt zwar unterschiedliche Farbenblindheitsgrade, aber es ist am besten, wenn es um die Zugänglichkeit geht.

Hier ist beispielsweise das Papierkorbsymbol der Apple Watch für Menschen mit Farbblindheit nicht sichtbar:

Farbsicht (links) versus Farbenblindheit (rechts)

Fazit

Vibrierende Farben können gut eingesetzt werden, sie stellen jedoch echte Gefahren für die Benutzerfreundlichkeit von Benutzeroberflächen dar und können schwerfällig sein, wenn sie nicht vor ihrer Verwendung absichtlich berücksichtigt werden. Denken Sie beim Design daran!