Räumlichkeit

Prinzip // Gewichten

Was ist weiter weg?

Zeigen Sie es mit der Hand.

Was ist nah, was ist fern? Woran sehen Sie das?

Foto: Barbara Iandolo, Pixabay

Keine Figur hat sich bewegt.

Das Bild ist flach. Die Tiefe lesen wir aus Hinweisen hinein.

Was weiter weg ist, wirkt

kleiner

kontrastärmer und blasser

verdeckt von dem, was davor liegt

höher im Bild, näher am Horizont

dichter in seiner Struktur

Die Figuren haben sich nicht bewegt. Es ist dieselbe Aufnahme, nur bearbeitet: verkleinert, Kontrast und Sättigung zurückgenommen, hinter die andere Figur geschoben. Und auch Málaga ist eine flache Fläche aus Pixeln. Tiefe steht nicht im Bild, wir lesen sie hinein.

Das funktioniert so zuverlässig, dass wir es kaum abschalten können. Gestaltung nutzt genau das, auf jedem Screen.

Mechanismus: Die Netzhaut ist eine Fläche. Räumliches Sehen ist eine Leistung des Gehirns, und es nutzt dafür viele Hinweise gleichzeitig. Ein Teil braucht zwei Augen (Querdisparation), ein großer Teil funktioniert mit einem Auge und auf jedem flachen Bild: die monokularen oder bildhaften Tiefenhinweise. Genau die stehen uns auf dem Screen zur Verfügung.

Hintergrund

Relative Größe: Von zwei gleichen Dingen wirkt das kleinere weiter weg.
Luftperspektive: Die Luft streut Licht. Ferne Dinge werden heller, kontrastärmer, weniger gesättigt und bläulich. Leonardo da Vinci hat das in seinen Notizen zur Malerei beschrieben (»prospettiva aerea«, um 1500, später zusammengestellt im »Trattato della pittura«) und in seinen Bildhintergründen eingesetzt.
Verdeckung: Was etwas anderes verdeckt, liegt davor. Der stärkste und eindeutigste Hinweis.
Höhe im Bild: Was näher am Horizont liegt, wirkt weiter weg.
Texturgradient: Gleichmäßige Strukturen werden mit der Entfernung feiner und dichter. Beschrieben von James J. Gibson, »The Perception of the Visual World« (1950).

Zum Nachlesen: E. Bruce Goldstein, Wahrnehmungspsychologie (Kapitel Tiefenwahrnehmung).

Was näher wirkt, wirkt wichtiger.

Wir lesen Tiefe als Rangfolge.

Zwei gleiche Quadrate: gleich weit weg, gleich wichtig

Größe: Das kleinere rückt nach hinten

Kontrast: noch weiter

Sättigung: Das gesättigte kommt nach vorn

Überdeckung: Jetzt ist eindeutig, was vorn liegt

Schatten zeigen Höhe.

Ein kleiner Schatten: liegt knapp darüber. Ein großer: schwebt weit darüber.

Drei Flächen auf einer Ebene

Ein kleiner Schatten: Die mittlere hebt sich ab

Ein großer Schatten: Die rechte schwebt darüber

Auf dem Screen kommt ein Mittel dazu, das in der Natur selbstverständlich ist: Was über einer Fläche schwebt, wirft einen Schatten. Ein kleiner, scharfer Schatten heißt »liegt knapp darüber«, ein großer, weicher Schatten heißt »schwebt weit darüber«. Der Schatten fällt nach unten, weil wir Licht von oben erwarten.

In allen anderen Grafiken dieses Moduls gibt es keine Schatten. Hier ist es die Ausnahme, weil das Prinzip selbst davon handelt.

Hintergrund

Wathan & Schoger, Refactoring UI, Kapitel »Creating Depth«: Licht kommt von oben, Schatten zeigen die Höhe eines Elements, wenige feste Stufen statt beliebiger Werte. Material Design nennt das Elevation und arbeitet mit einer festen Skala von Höhenstufen. Dass wir Licht von oben annehmen, zeigen Studien zur Wahrnehmung von Form aus Schattierung (Ramachandran, 1988, aus dem Gedächtnis, bitte prüfen).

Eine Seite

Ein Dialog öffnet sich. Was liegt vorn?

Hintergrund abgedunkelt: Die Seite rückt nach hinten

Ebene 0: die Seite

Ebene 1: Ein Button schwebt darüber

Ebene 2: Ein Bottom Sheet schiebt sich nach vorn

Das Suchfeld schwebt, die Karten liegen flach airbnb.de, Screenshot 2026 — Das Suchfeld schwebt, die Karten liegen flach
airbnb.de, Screenshot 2026

Wie viele Ebenen sehen Sie? Woran erkennen Sie sie? booking.com, Screenshot 2026 — Wie viele Ebenen sehen Sie? Woran erkennen Sie sie?
booking.com, Screenshot 2026

Welche Ebenen hat Ihre meistgenutzte App?

Was liegt ganz hinten, was ganz vorn? Und woran erkennen Sie das?

Dialog: Ein Screen als Wireframe. Grau: Bild und Text, hellgraue Flächen: Karten, Schwarz: ein Button. Lila: die Hauptaktion im Dialog. Dann öffnet sich ein Dialog. Ohne weitere Hinweise liegt er auf derselben Ebene wie die Seite, man muss erst sortieren, was dazugehört. Mit abgedunkeltem Hintergrund ist sofort klar, was vorn ist: Die Seite verliert Kontrast und rückt optisch nach hinten, der Dialog wird zur einzigen Figur. Luftperspektive auf dem Screen. Frage: Was hat sich zwischen der zweiten und der dritten Folie geändert? Nur der Hintergrund. Im Interface heißt die abdunkelnde Fläche »Scrim« (Material Design) oder Backdrop (CSS: ::backdrop beim Element dialog).

Ebenen: Ein Screen mit drei Ebenen. Ganz hinten die Seite mit ihren Karten. Darüber ein schwebender Button (in Material Design: Floating Action Button) mit kleinem Schatten: Er bleibt beim Scrollen stehen und gehört nicht zum Inhalt. Ganz vorn ein Bottom Sheet mit großem Schatten nach oben: Es verdeckt die Seite und verlangt Aufmerksamkeit. Die Höhe sagt, wie wichtig und wie vorübergehend etwas ist. Je höher, desto eher erwartet man, dass es wieder verschwindet.

Echte Beispiele: Airbnb (2026): Das Suchfeld schwebt mit Schatten über der Seite, die Karten liegen flach. Booking.com (2026): Seite abgedunkelt, Suchleiste, darüber der Dialog. Fragen: Welche Ebenen erkennen Sie? Woran?

Wann trägt Räumlichkeit nicht?

Wenn alles schwebt: Dann gibt es keine Rangfolge mehr, nur Unruhe.

Wenn alles flach ist: Dann fehlt der Hinweis, was vorn liegt und was man bedienen kann.

Wenn nur der Schatten trennt: Auf dunklem Grund und bei schwachem Kontrast verschwindet er.

Zu viele Ebenen: Wenn jede Karte, jeder Button und jede Leiste einen eigenen Schatten hat, gibt es keine Rangfolge mehr, nur Unruhe. Wenige feste Stufen, die meisten Elemente flach.

Flat Design: Mit iOS 7 (2013) und Microsofts Metro-Stil wurden Schatten und Glanz fast vollständig entfernt. Das Ergebnis war ruhiger, aber es gingen Hinweise verloren, was man anklicken kann und was davor liegt. Die Nielsen Norman Group hat das später als Problem der Bedienbarkeit beschrieben (»Flat UI Elements Attract Less Attention and Cause Uncertainty«, 2017, aus dem Gedächtnis, bitte prüfen). Heute sind die meisten Systeme wieder »fast flach«: wenig Schatten, aber gezielt.

Schatten allein trägt nicht: Auf dunklem Grund oder bei schwachem Kontrast sind Schatten kaum zu sehen. Im Dark Mode arbeitet Material Design deshalb mit helleren Flächen statt mit Schatten: Was höher liegt, ist heller (tonal elevation, Material 3). Und wer schlecht sieht, sieht den Schatten nicht. Die Fläche selbst muss sich ausreichend abheben.

Verweise

Dahinter: Kippfiguren. Weiter: Hierarchie und Figur und Grund. Prüfen mit dem Unschärfe- und Graustufentest.

Danke für's Mitmachen

https://christiannoss.de