Gestaltprinzipien: 7 Gestaltgesetze in der Oberfläche

Kurz gesagt

Schauen Sie auf einen Bildschirm, zählen Sie die Elemente nicht einzeln. Das Auge sieht zuerst Gruppen: Diese drei Felder sind ein Formular, jene zwei Buttons gehören zur selben Aufgabe. Gestaltprinzipien beschreiben die Regeln dieser Gruppierung.

Die Idee stammt aus der Gestaltpsychologie. Laut Laws of UX vertraten diese Psychologen die Ansicht, dass der Geist von Natur aus dazu neigt, im Gesehenen nach bestimmten Regeln Muster zu suchen.

Laut Wikipedia wurden Max Wertheimers Gesetze mit der Zeit „Gestaltgesetze der Gruppierung“ genannt. Dem Artikel zufolge halten Irvin Rock und Steve Palmer den Namen „Gruppierungsprinzipien“ für passender. Auf dieser Seite nutze ich beide gleichbedeutend.

Die praktische Folge fürs Design: Nutzer lesen Beziehungen aus dem Bild, bevor sie den Text lesen. Ein falsch gruppierter Bildschirm wird trotz richtig geschriebener Labels falsch verstanden.

Herkunft: blinkende Lichter

Laws of UX führt die Geschichte auf eine Beobachtung des Psychologen Max Wertheimer aus dem Jahr 1910 zurück. Wertheimer beobachtete blinkende Lichter an einem Bahnübergang.

Die Lampen gingen nur nacheinander an und aus. Das Auge sah aber ein einziges Licht, das sich bewegte. Dasselbe passiert bei Kinoschildern mit Lichtern, die scheinbar um den Rahmen laufen.

Diese Beobachtung führte zu Prinzipien, die beschreiben, wie wir Objekte wahrnehmen. Laws of UX schreibt, dass diese Prinzipien im Zentrum von fast allem stehen, was Designer grafisch tun.

Für mich ist die Lehre dieser Geschichte einfach. Nutzer handeln nach dem, was sie auf dem Bildschirm wahrnehmen. Die Aufgabe des Designs ist, die wahrgenommene Struktur und die tatsächliche Struktur in Deckung zu bringen.

Live-Demo: Jedes Prinzip mit einer Einstellung ausprobieren

Wählen Sie ein Prinzip und ändern Sie dann die Einstellung darunter. Ziehen Sie bei der Nähe den Regler nach rechts und schauen Sie, zu welchem Feld das Label zu gehören scheint.

Gestalt-Spielfeld

Diese Demo funktioniert mit JavaScript. Ist es aus, sehen Sie sich die Beispiele zu den sieben Prinzipien unten an.

Für jedes der sieben Prinzipien gibt es eine Einstellung. Beispielbildschirme und Texte habe ich erstellt, sie sind kein Ergebnis einer Studie. Die Vorschau ist für Screenreader verborgen; jede Änderung wird im Kasten darunter in Worten beschrieben.

Überschreitet der Regler bei der Nähe 20 Pixel, rutscht das Label optisch zum Feld darüber. Genau diesen Fehler sehe ich in Formularen am häufigsten: Der Abstand unter dem Label ist größer als der Abstand zwischen den Feldern.

7 Gestaltprinzipien und Beispiele aus Oberflächen

Die Quellen zählen die Prinzipien unterschiedlich. Laws of UX fasst die Gruppierungsprinzipien in fünf Kategorien: Nähe, Ähnlichkeit, Kontinuität, Geschlossenheit und Verbundenheit. Ich habe die sieben gewählt, die mir beim Prüfen von Oberflächen am meisten helfen.

1. Nähe

Elemente, die nah beieinanderstehen, werden als Teil derselben Gruppe wahrgenommen. Beispiel: Setzen Sie das Formularlabel direkt über sein Feld und lassen Sie zum nächsten Label mehr Abstand.

2. Ähnlichkeit

Elemente, die ein visuelles Merkmal wie Farbe, Form oder Größe teilen, wirken verbundener als unähnliche. Beispiel: Nutzen Sie die Linkfarbe nur für klickbare Elemente und geben Sie dem Haupt-Button eine andere Farbe als den Nebenbuttons.

Laut Harley fällt eine gemeinsame Farbe stärker auf als andere Merkmale wie die Form. Deshalb bildet auch falsch eingesetzte Farbe eine Gruppe. In einem von Harleys Beispielen wirkt ein dekoratives Icon in derselben Farbe wie ein Button, als gehöre es zum Button, und kann für klickbar gehalten werden.

3. Gemeinsame Region

Elemente in einem Bereich, der durch einen Rahmen oder Hintergrund begrenzt ist, werden als Gruppe wahrgenommen. Beispiel: Fassen Sie in einer Produktliste Bild, Name und Bewertung in einer Karte zusammen.

Eines von Harleys Beispielen ist die alte Version einer Rezept-App. Wegen unregelmäßiger Abstände war schwer zu erkennen, welche Bewertung zu welchem Rezept gehörte. Als jedes Rezept in eine Karte kam, war die Verwirrung vorbei.

4. Geschlossenheit

Der Geist ergänzt eine unvollständige Form und übersieht Lücken an den Rändern. Beispiel: Lassen Sie in einer horizontal scrollbaren Liste die letzte Karte am Bildschirmrand angeschnitten, dann versteht die Person, dass es weitergeht.

Das Gegenteil sehe ich oft. Passen die Karten genau auf den Bildschirm, wirkt die Liste beendet, und man übersieht, dass sie sich scrollen lässt. Eine angeschnittene Karte ist für mich ein stärkerer Hinweis als Seitenpunkte.

5. Kontinuität

Das Auge folgt lieber Linien, die einer Richtung folgen, als Linien mit scharfen, plötzlichen Richtungswechseln. Beispiel: Setzen Sie die Schrittanzeige im Checkout auf eine einzige Linie.

Dasselbe Prinzip nutze ich bei der Ausrichtung. Labels und Felder mit derselben linken Kante wirken wie eine Spalte. Rückt ein einziges Feld ein oder aus, bleibt das Auge dort hängen.

6. Figur und Grund

Das Auge trennt eine Figur von ihrem Hintergrund. Im Beispiel von Wikipedia sind die schwarzen Buchstaben auf bedrucktem Papier die Figur, das weiße Papier der Grund. Beispiel in der Oberfläche: Dunkeln Sie die Seite hinter einem geöffneten Fenster ab, dann ist das Fenster die Figur, die Seite der Grund.

Ein weiteres Beispiel des Artikels ist die Vase des dänischen Psychologen Edgar Rubin. In derselben Zeichnung sehen Sie entweder eine weiße Vase vor schwarzem Grund oder zwei dunkle Gesichter, die sich anschauen.

7. Gemeinsames Schicksal

Elemente, die sich in dieselbe Richtung und gleich schnell bewegen, werden als eine Einheit wahrgenommen. Das Beispiel bei Wikipedia ist ein Vogelschwarm. Beispiel in der Oberfläche: Werden mehrere Dateien gewählt und gezogen, sollen sich die gewählten gemeinsam bewegen.

Zwei weitere Gesetze stehen nicht in meiner Siebenerliste, Laws of UX widmet beiden aber eine eigene Seite. Das Prägnanzgesetz besagt, dass Menschen ein unklares oder komplexes Bild in der einfachsten möglichen Form deuten. Das Gesetz der einheitlichen Verbundenheit beschreibt, dass visuell verbundene Elemente verbundener wirken als unverbundene.

Welches Prinzip gewinnt, wenn sie sich widersprechen?

Auf einem Bildschirm wirken mehrere Prinzipien gleichzeitig und widersprechen sich manchmal. Laut den Artikeln von Aurora Harley von der Nielsen Norman Group kann Nähe die Ähnlichkeit von Farbe oder Form übertrumpfen.

Die gemeinsame Region ist noch stärker. In Harleys Beispiel werden zwei Punkte, die die Nähe gruppiert, durch dazwischenliegende Rahmen getrennt. Auch die Karten mit den Gerichten in der Demo zeigen das.

Trotzdem empfiehlt Harley als ersten Schritt den Abstand. Unnötige Rahmen machen das Design unruhig. Unnötige farbige Bänder über die ganze Breite können außerdem den Eindruck erwecken, die Seite sei zu Ende, und das Scrollen stoppen.

Meine Reihenfolge ist dieselbe. Zuerst gruppiere ich mit Abstand. Reicht der Abstand nicht oder fehlt der Platz, ergänze ich Rahmen oder Hintergrund.

Gestaltprinzipien in Formularen

Den größten Unterschied machen Gestaltprinzipien nach meiner Erfahrung in Formularen. Laut Harley wirkt ein Formular mit zwölf Feldern in einem Block abschreckend, dieselben Felder in drei sinnvollen Gruppen wirken überschaubar. Das ist die visuelle Entsprechung des Chunking aus dem Miller'schen Gesetz.

Bei Buttons gilt dieselbe Regel. In einem von Harleys Formularbeispielen steht der Button Hinzufügen zwischen Weiter, Als Entwurf speichern und Abbrechen. Verwandte Buttons wie Zurück und Weiter sollen nebeneinanderstehen. Trennen Sie die nicht verwandten.

Zur Ähnlichkeit warnt Harley: Haben alle Buttons dieselbe Farbe, erkennt die Person nicht, welcher die Hauptaktion ist. Sieht Senden aus wie Abbrechen, geht es unter.

Im responsiven Design können sich Gruppen mit der Bildschirmgröße ändern. Zwei Links, die auf dem Desktop nebeneinanderstehen, rücken mobil untereinander womöglich auseinander. Prüfen Sie die Gruppen an jedem Breakpoint neu. Details im Muster Formulardesign.

Meine Notiz

Beim Prüfen eines Bildschirms kneife ich die Augen zusammen, bevor ich den Text lese. Im unscharfen Bild schaue ich, welche Gruppen ich sehe. Decken sich diese Gruppen nicht mit der tatsächlichen Struktur des Produkts, liegt dort das Problem.

Die meisten Probleme, die ich finde, kommen von Abstand oder Farbe. Den Abstand, der das Label zum falschen Feld schiebt, haben Sie in der Demo gesehen. Bei der Farbe ist der häufigste Fall, dass die Linkfarbe auch für nicht klickbare Überschriften genutzt wird.

Dauerhaft lösen lässt sich das, indem man Abstände und Farben im Designsystem als Regeln festlegt. Wollen Sie diese Prüfung für Ihr eigenes Produkt machen lassen, sehen Sie sich das UX Audit an.

Verwandte Seiten

Gestaltprinzipien beschreiben, was zusammenzugehören scheint. Wie lange die Person zu einem Ziel braucht, beschreibt das Fitts'sche Gesetz. Wie viel Information sie im Kopf behalten kann, ist Thema des oben erwähnten Miller'schen Gesetzes.

Ob ein Element klickbar aussieht, ist Thema von Affordance und Signifier. Es liegt nah an der Ähnlichkeit, denn auch die Linkfarbe ist ein Signifier. Die übrigen Gesetze stehen in der Liste der UX-Gesetze.