Tipps für ein ausdrucksstarkes User Interface

Die Usability ist das Um und Auf in unserer digitalen Welt, daher muss auch bei der Auswahl der Farben darauf geachtet werden, dass es benutzerfreundlich bleibt.

Farbe ist ein sehr wichtiges Werkzeug bei der Gestaltung, durch ihre Verwendung hilft es dem User Inhalte bzw. Sachverhalte zu, unterscheiden. Zusammengehörigkeit kann leichter kommuniziert werden. So kann der User die angezeigten Informationen besser aufnehmen und verarbeiten.

Funktionen der Farben

  • ordnen
  • verbinden
  • typisieren
  • sind bezugnehmend
  • kennzeichnen
  • signalisieren

Im Web- und UI-Design werden hin und wieder mehr Farben benötigt, als es so manches Corporate Design vorsieht. Denn es empfiehlt sich, dass sämtliche Buttons, Formularfelder etc. dem User anzeigen, was durch sein Handeln auf der Website ausgelöst wird. Diese Interaktions- und Orientierungselemente können am einfachsten durch unterschiedliche Farbgebungen hervorgehoben werden.

Nun hat in der Praxis jeder Designer, seine eigene Herangehensweise, wie er eine entsprechende Farbpalette ergänzend zu den bestehenden CI-Farben definiert. Neben der Möglichkeit die einzelnen Farben frei zu wählen, gibt es auch die Option Tools zu nutzen, die diese Auswahl für einen treffen z.B. Adobe Color CC. Egal, welche Herangehensweise man sich zunutze macht, die folgenden Grundsätze sollte man bei der Erstellung eines farbharmonischen User Interfaces immer berücksichtigen.

 

  1. Weniger ist (bekanntlich) mehr
    Wie auch in anderen Designbereichen sollte man sich dieses Sprichwort ebenfalls beim Interfacedesign zu Herzen nehmen. Man sollte die Anzahl der Farben auf ein paar wenige begrenzen. In der Regel sind 3 bis 4 Farben vollkommen ausreichend. Damit fällt es leichter eine hohe Nutzerfreundlichkeit zu gewährleisten und der Webauftritt wirkt automatisch seriöser und hochwertiger.

  2. Bitte keinen Farbsalat
    Liegen im Corporate Design bereits verschiedene Farben vor, die der Website bereits ein farbenfrohes Aussehen verleihen, sollten hier höchstens Farbtöne wie Weiß oder Grau ergänzt werden (wenn nicht bereits vorhanden). Man sollte Abstand von der Idee nehmen, die Komplementärfarben zu den vorhandenen Farbwerten zu verwenden, dies garantiert zwar eine hohe Aufmerksamkeit, kann aber schnell nach hinten losgehen und zu überladen wirken. Das ist der Usability nicht dienlich.

  3. Farbnuancen statt neue Farbendefinitionen
    Anstatt zusätzliche Farben zu definieren, wirkt es immer harmonischer, wenn zu den vorhandenen Corporate Design Farben, die dazugehörigen Nuancen von hell bis dunkel ergänzt werden.

  4. Zeigt her eure Highlights
    Soll die Aufmerksamkeit des Users jedoch auf bestimmte Elemente gelenkt werden, wie auf den Call-to-Action-Button, sind starke Farbkontraste von Vorteil. Auch Warnhinweise sollten entsprechend farblich gekennzeichnet werden, hier empfiehlt es sich die Erwartungshaltung des Users zu befriedigen und diese in einem kräftigen Rot zu definieren.

  5. Was ist mit der Lesbarkeit?
    Neben der Wahl einer gut lesbaren Schriftart, ist auch der Kontrast zwischen Text und Hintergrund für die Lesbarkeit von Texten auf Websites enorm wichtig. Optimal ist ein dunkler Grauton auf weiß bzw. ein heller Grauton auf farbigen bzw. dunkeln Flächen.

  6. Beeinträchtigungen berücksichtigen
    Ein Teil unserer Bevölkerung leidet an der Rot-Grün-Schwäche bzw. an Farbfehlsichtigkeit, d.h. das oftmals die Farben Rot, Gelb und Grün nicht unterschieden werden können. Daher sollte darauf verzichtet werden, Rot und Grün in Kombination zu verwendet, vor allem bei Warnhinweisen, Links oder Navigationselementen.

  7. Neben Farben auch andere Effekte nutzen
    Nicht nur durch Farbe kann man Aufmerksamkeit generieren, sondern auch durch den gezielten Einsatz von entsprechenden Effekten, um die Usability noch zu verstärken. Die Verwendung von gut erkennbaren Icons, Nutzung von Fettung oder Unterstreichungen, oder kleine animierte CSS-Effekte, sind hier empfehlenswert.

Farbrad Farbschemata Adobe Color CC 2018 11 12 14.11.35

 

ourEPICblog