Figur-Grund-Prinzip

Websites, Apps und Interfaces präsentieren viele Informationen gleichzeitig. Die intuitive Annahme: Wenn alles sichtbar ist, nehmen Nutzer alles wahr. Doch in der Realität übersehen sie wichtige Elemente, klicken auf Falsches, sind verwirrt von unklaren Hierarchien. Die Frage ist: Wie entscheidet das visuelle System, was als wichtig erkannt wird und was als Hintergrund ignoriert – und welche Evidenz ist dazu bekannt?

Studien

Rubin's Vase – Das erste Figur-Grund-Experiment

Edgar Rubin führte 1915 an der Universität Kopenhagen wegweisende Experimente zur visuellen Wahrnehmung durch. Er zeigte Versuchspersonen ambige Bilder – am berühmtesten die Rubin-Vase, bei der eine weiße Vase auf schwarzem Grund gleichzeitig wie zwei schwarze Gesichtsprofile aussieht. Das Verblüffende: Die Versuchspersonen konnten NIE beide Interpretationen gleichzeitig sehen. Entweder sahen sie die Vase (weiß als Figur) oder die Gesichter (schwarz als Figur). Rubin dokumentierte: Was als Figur wahrgenommen wird, wirkt näher, konturiert und bedeutsam. Was als Grund kategorisiert wird, erscheint formlos, weiter entfernt und wird inhaltlich nicht verarbeitet. Diese Trennung ist binär und automatisch – das Gehirn kann nicht anders.

Objekt-basierte Aufmerksamkeit

Robert Egly und Jon Driver führten 1994 an der University of California eine Serie von Reaktionszeit-Experimenten durch. 48 Versuchspersonen sahen auf einem Bildschirm zwei Rechtecke. Ein kurzer Lichtblitz (Cue) erschien an einem Ende eines Rechtecks, dann folgte ein Ziel-Stimulus. Das Ziel konnte am selben Ort wie der Cue erscheinen, am anderen Ende desselben Rechtecks, oder im anderen Rechteck. Das überraschende Ergebnis: Die Reaktionszeit war schneller, wenn das Ziel im selben Objekt (Rechteck) erschien, selbst wenn die räumliche Distanz gleich war. Ein Ziel 10cm entfernt im SELBEN Rechteck wurde 25 Millisekunden schneller erkannt als ein Ziel 10cm entfernt im ANDEREN Rechteck. Die Konsequenz: Aufmerksamkeit folgt nicht nur Orten, sondern Objekten. Was als zusammengehörige Figur gruppiert wird, wird als Einheit verarbeitet.

Prinzip

Welches Prinzip für Customer Experience Design lässt sich daraus ableiten? Das Figure-Ground-Prinzip zeigt, dass Aufmerksamkeit nicht durch die Größe oder Anzahl von Elementen gesteuert wird, sondern durch deren Fähigkeit, sich als klar abgrenzbare Figur vom Hintergrund zu lösen. Kontrast in Form, Farbe oder Textur ist dabei der entscheidende Faktor – ein kleines, kontrastreiches Element kann mehr Aufmerksamkeit erhalten als ein großes, das mit dem Hintergrund verschmilzt. Dieses Prinzip funktioniert besonders gut bei fokussierten Aufgaben und klaren Zielhierarchien, kann jedoch bei komplexen Interfaces mit vielen gleichwertigen Elementen an seine Grenzen stoßen. Unternehmen sollten daher bewusst entscheiden, welche Elemente als Figur hervortreten sollen, und alle anderen visuell zurücknehmen, um kognitive Überlastung zu vermeiden. Die folgenden Guidelines zeigen, wie sich dieses Prinzip konkret umsetzen lässt.

Guidelines

Kontrast für kritische Actions

Nutze maximalen Farbkontrast für die eine Aktion, die der Nutzer ausführen soll. Der Primary CTA muss sich von allem anderen abheben – nicht nur etwas heller, sondern eine komplett andere Farbfamilie. Beispiel: Wenn die Seite blau ist, muss der CTA orange oder rot sein. Teste mit dem Graustufentest: Konvertiere die Seite zu Graustufen – hebt sich der CTA immer noch ab? Vermeide mehr als einen High-Contrast-Button pro Viewport.

Weißraum als Figur-Verstärker nutzen

Umgib wichtige Informationen mit großzügigem Weißraum. Das Gestaltgesetz der Geschlossenheit sorgt dafür, dass umrandete oder freistehende Elemente als eigenständige Figur wahrgenommen werden. Ein Produktbild mit viel Weißraum drum herum wird als Figur erkannt. Dasselbe Bild eingebettet in dichten Text verschwindet im Grund. Mindestens 50% mehr Abstand zu unwichtigen Elementen als zwischen den unwichtigen Elementen selbst.

Unerwünschte Gruppierungen verhindern

Achte darauf, dass wichtige Elemente nicht versehentlich mit unwichtigen gruppiert werden und im Hintergrund verschwinden. Ein roter Sale-Badge direkt neben rotem Fließtext wird als Teil des Texts (Grund) wahrgenommen. Derselbe Badge mit Abstand zum Text wird als separate Figur erkannt. Prüfe visuell: Welche Elemente könnten durch Nähe, ähnliche Farbe oder Form ungewollt als zusammengehörige Einheit wahrgenommen werden?

Visuelle Ebenen für Informationshierarchie

Nutze Schatten, Rahmen und Überlappungen, um verschiedene Informationsebenen zu schaffen. Das Gehirn interpretiert Elemente, die 'näher' wirken (durch Schatten, Überlappung), automatisch als Figur. Ein Modal-Dialog über dem Hauptinhalt wird sofort als primäre Figur erkannt. Content-Karten mit leichtem Schatten heben sich vom Hintergrund ab. Kritisch: Nicht alles kann Figur sein. Definiere maximal 3 Ebenen: primäre Figur (Hauptaktion), sekundäre Figuren (wichtiger Content), Grund (Kontext).