• Martin Macheiner

      E-Commerce & E-Business
    • 29. Januar 2015 in Allgemein, Design

    UX-Design: Regel 1 – Lichteinsatz

    Regel 1: Licht kommt vom Himmel

    Schatten geben dem menschlichen Gehirn unersetzliche Hinweise darauf, auf welche Interface-Elemente wir schauen.

    Das ist vielleicht die wichtigste, aber nicht-offensichtliche Gesetzmäßigkeit, die man über UI- & UX-Design lernen kann: Licht kommt vom Himmel. Licht kommt so regelmäßig und beständig vom Himmel, dass es wirklich sehr seltsam aussieht, wenn es mal nicht von oben und wie hier am Beispiel mal von unten kommt.

    Das Licht von unten

    Wenn Licht vom Himmel kommt, dann beleuchtet es die Oberseite der Dinge und wirft Schatten darunter. Die Oberseiten der Elemente sind heller, die Unterseiten dunkler.

    Das untere Augenlid des Menschen sieht eigentlich nicht schattig aus, aber leuchte mal mit der Taschenlampe drauf, dann siehst du auf einmal Gespenster.

    Das gleiche gilt für Bedienoberflächen. Genauso wie es Schatten auf allen Unterseiten unserer Gesichtszüge gibt, so findet man sie auch auf den Unterseiten aller UX-Elemente, die es gibt. Unsere Bildschirme sind flach, aber wir haben eine Menge Aufwand darauf verwendet, alles 3D wirken zu lassen.

    Button Beispiel

    Beispiel Schaltflächen (Grafik: E. Kennedy)
    Sogar bei diesen „flachen“ Buttons findet man noch eine Handvoll lichtbezogene Details:

    1. Die nicht gedrückte Schaltfäche (oben) hat eine dunkle untere Ecke. Die Sonne scheint hier nicht hin.
    2. Die nicht gedrückte Schaltfläche ist oben ein wenig heller als unten. Das kommt daher, dass hier eine leicht gewölbte Oberfläche imitiert wird. Genauso wie du einen Spiegel, den du vor dir hältst, ankippen musst, um die Sonne darin zu sehen, reflektieren Oberflächen, die nach oben geneigt sind, ein bisschen mehr Sonnenlicht.
    3. Die nicht gedrückte Schaltfläche wirft einen leichten Schatten – vielleicht besser zu erkennen in der Vergrößerung.
    4. Die gedrückte Schaltfläche, die immer noch unten dunkler als oben ist, ist insgesamt dunkler – das kommt daher, dass sie sich auf einer Ebene mit dem Bildschirm befindet und die Sonne sie nicht so leicht treffen kann. Man könnte darüber streiten, ob alle gedrückten Knöpfe in der realen Welt auch dunkler sind, weil unsere Hände das Licht verdecken.

    Das war nur eine Schaltfläche, und dennoch sind dort vier kleine Lichteffekte zu sehen. Das ist meine Lektion.
    Wir übertragen das jetzt auf alles andere.

    iOS Design

    iOS6 ist ein bisschen aus der Mode gekommen, aber es ist ein gutes Studienobjekt in Sachen Licht. (Grafik: E. Kennedy)
    Hier sieht man ein paar iOS-Einstellungen – „Nicht stören“ und „Benachrichtigungen“. Keine große Sache, oder? Aber sieh mal, wie viele Lichteffekte es drumherum gibt.

    • Der obere Rand des eingebauten Kontrollfeldes wirft einen leichten Schatten.
    • Die Slider-Schiene ist ein bisschen vertieft.
    • Die Slider-Schiene ist konkav und der Boden reflektiert mehr Licht
    • Die Icons sind ein wenig erhaben. Siehst du den hellen Rand am oberen Ende? Er repräsentiert eine Oberfläche, die rechtwinklig zur Lichtquelle ist, und daher eine Menge Licht in deine Augen abstrahlt.
    • Die Trennlinie ist schattiert, wo sie von der Sonne abgewendet ist, und umgekehrt.

     

    Elemente, die immer vertieft sind:

    • Texteingabefelder
    • gedrückte Schaltflächen
    • Slider-Schienen
    • Radio-Buttons (nicht ausgewählt)
    • Checkboxen

    Elemente, die immer erhaben sind:

    • Schaltflächen (ungedrückt)
    • Slider-Knöpfe
    • Dropdown-Schaltfächen
    • Karten
    • Der Knopf eines ausgewählten Radio-Buttons
    • Popups

    Nachdem wir diese Details ordentlich zerpflückt haben, werden dir nun überall diese Feinheiten auffallen.

     

    Was ist nun mit Flat Design?

    iOS7 verursachte mit seinem „Flat Design“ große Aufregung in der Entwickler-Community. Flat bedeutet hier, dass es buchstäblich flach ist. Es gibt keine vorgetäuschten Wölbungen oder Vertiefungen – nur Linien, Formen und Farbflächen.

    Flat Design

    Das Interface im Flat-Design hat keinerlei 3D-Anmutungen – nur Linien, Formen und Farbflächen. (Grafik: E. Kennedy)

    Wie wir alle mag ich es klar und einfach. Es ist jedoch davon auszugehen, dass dieser Trend kein langanhaltender sein wird.
    Die subtile 3D-Simulation in unseren Bedienelementen wirkt zu natürlich, als dass man sie völlig aufgeben sollte.

    Viel wahrscheinlicher ist es, dass wir in Zukunft „pseudo-flache“ Bedienoberflächen sehen werden.
    Tipp: Bereite die UX-Designs auf diese Entwicklung vor. Das Look & Feel wird weiterhin klar und einfach sein, jedoch wird es ein paar Schatten und Hinweise geben, wo getippt/geschoben oder geklickt werden kann.

    New Flat Design

    OS X Yosemite, „Pseudo-Flat“. (Screenshot: E. Kennedy)

    Während du hier liest, verpasst Google seinen Produkten gerade eine „Material Design“-Sprache. Es ist eine einheitliche visuelle Sprache, die – in ihrem Grundanspruch – versucht, die reale Welt zu imitieren.

    Google Material Design Guide

    Googles Material-Design-Guide illustriert für jedes Element, wie sich mit wenig Aufwand räumliche Tiefe vortäuschen lässt. (Grafik: Google )

    Eine Illustration aus dem Material-Design-Guide zeigt, wie man verschiedene Tiefen mit verschiedenen Schattierungen erzeugt. UI-Experten sehen diesen Stil als die Zukunft, subtile Reale-Welt-Andeutungen zur Übermittlung von Informationen.

     

    << zurück Die 8 goldene Regeln im UX-Design  |  weiter zu Regel 2 – Graustufen >>