Gestaltgesetze
Gutes Design ist so wenig Design wie möglich. Dieter Rams
Die Anwendung der Gestaltgesetze helfen bei der Strukturierung des Layouts und der Anordnung der einzelnen User Interface Elemente.
Warum brauchen wir Gestaltgesetze?
Die Gestaltgesetze spielen im Zusammenhang mit der Gestaltung digitaler Produkte eine wichtige Rolle. Ohne Beachtung dieser Regeln kann es leicht passieren, dass beispielsweise zusammengehöriger Inhalt nicht als solcher erkannt wird, und sich die Benutzenden nicht orientieren können.
Wir Menschen orientieren uns an unbekannten Orten indem wir nach Vertrautem suchen, um daraus weitere Informationen abzuleiten. Aus Erfahrung wissen wir beispielsweise, dass die Dorfkirche im Zentrum des Ortes steht. So können wir uns am Kirchturm orientieren, um das Zentrum zu finden. Auch in der virtuellen Welt orientieren wir uns an vertrauten Mustern und erwarten, dass bekannte User Interface Elemente an einer bestimmten Stelle im Layout positioniert sind.
Um die richtigen Entscheide fällen zu können, muss die Interface Designerin die Erwartungen der Benutzenden kennen und wissen, wie ihr Blickverhalten ist. Mit diesen Kenntnissen, und einem Set an Gestaltungsregeln ausgerüstet, kann die Struktur des digitalen Produkts entwickelt werden.
Die Gestaltgesetze basieren auf der Erkenntnis, dass die menschliche Wahrnehmung in ihrem Effizienzstreben bei der Verarbeitung von Informationen auf vorhandene Erfahrungen zurückgreift.
Dabei wählt unser Gehirn die Interpretationsmöglichkeit aus, welche die kleinste kognitive Anstrengung verursacht. Automatisch reduzieren wir die Anzahl der zu verarbeitenden Objekten, indem wir ähnliche Bildbestandteile zu Einheiten zusammenfassen. Ein gutes User Interface beachtet die Regeln der Gestaltgesetze und bricht diese bewusst, damit eine spannende und zugängliche Benutzeroberfläche entsteht.
Gesetz der Ähnlichkeit
Das Grundgesetz der Gestaltpsychologie ist das Gesetz der Ähnlichkeit. Dies besagt, dass die menschliche Wahrnehmung zusammengehörende Elemente durch Ähnlichkeiten erkennt. Somit werden einander ähnliche oder gleiche Elemente eher als zusammengehörig erlebt, als einander unähnliche. Umgekehrt nehmen wir Elemente, die sich in wichtigen Merkmalen unterscheiden, als voneinander unabhängig wahr.
Ähnlichkeit lässt sich mittels
- Form
- Farbe
- Textur
- Position
- Orientierung
- Grösse
ausdrücken.
Design Basics:
Gestalten Sie Interface Elemente mit ähnlichen oder gleichen Inhalten / Funktionen immer gleich
Gesetz der Nähe
Elemente mit geringen Abständen zueinander nehmen wir als zusammengehörig wahr. In digitalen Produkten kann das Gesetz der Nähe angewendet werden, um strukturelle Zusammenhänge (beispielsweise ein Bild mit dazugehörendem Text) abzubilden, und damit die Informationsdichte zu reduzieren.
Design Basics:
Stellen Sie zusammengehörende Interface Elemente immer möglichst nah beieinander dar
Gesetz der Prägnanz (guten Gestalt)
Ein zentrales User Interface Element, das sich deutlich vom Rest abheben soll, kann mittels prägnanter Gestaltung in den Fokus gerückt werden. Wesentliche Gestaltungsmittel sind Farbe, Grösse, Form. Die menschliche Wahrnehmung bevorzugt Gestalten, die sich von anderen durch ein bestimmtes Merkmal abheben.
Design Basics:
Priorisieren Sie die unterschiedlichen User Interface Elemente. Welches Element soll am prägnantesten sein? Tipp: Dieses erkennen Sie, wenn Sie mit zugekniffenen Augen «unscharf» das User Interface betrachten.
Gesetz der Geschlossenheit
Unsere Wahrnehmung ist bestrebt, mehrere Objekte möglichst als Einheit zu sehen. Dabei identifizieren wir einfache und bekannte Formen schneller als komplexe und unbekannte. Das Gesetz der Geschlossenheit wird sehr häufig angewendet (z.B. Umrandung der Schaltfläche mit Konturlinien, Gliederung des Bildschirms durch Farbflächen, um hier zwei zu nennen). Eine vollständige Geschlossenheit ist nicht immer notwendig. Unser Gehirn ergänzt bei bekannten Formen automatisch die fehlenden Linien durch erdachte Linien.
Design Basics:
Nutzen Sie das Gesetz der Geschlossenheit, um ähnlich gestaltete Informationen / Funktionen voneinander zu trennen, wenn diese nicht zusammen gehören. Fassen Sie mittels realen, oder kognitiv ergänzten Linien, zusammengehörende Informationen / Funktionen zu einer Einheit zusammen.
Gesetz der Kontinuität
Das Gesetz der Kontinuität beschreibt, dass wir Menschen dazu neigen, einzelne Elemente so zu gruppieren, dass sie die erdachte Linie oder Kurve in Sinne ihrer bisherigen Linienführung fortsetzen. Selbst wenn sich in einem Diagramm zwei Linien schneiden, führen wir im Kopf automatisch den «natürlichen» Verlauf fort, und nehmen nicht an, dass die Linien an dieser Stelle einen Knick machen.
Design Basics:
Wenden Sie die die Wirkung dieses Gesetztes zum Gliedern einzelner Hierarchiestufen an. Inhalte auf der gleichen (erdachten) Fluchtlinie gehören zur gleichen logischen Ebene. Dies ist zum Beispiel bei einer komplexen Navigation hilfreich.
Gesetz des gemeinsamen Schicksals
Auch sehr unterschiedliche Elemente, die sich in die gleiche Richtung oder im gleichen Rhythmus bewegen, werden als zusammengehörige Gruppe wahrgenommen. Die Ähnlichkeit im Verhalten kann mittels Bewegung und Animation erzeugt werden. Einblenden, ausklappen, verschieben und andere. Auch akustische Signale, wie Geräusche oder Klänge, helfen dem Benutzenden bestimmte Ereignisse oder Meldungen einordnen zu können.
Design Basics:
Wenden Sie das Gesetz an, um Grundelemente (ruhend) und Figuren (bewegt) zu verdeutlichen.
Gesetz der gemeinsamen Regionen
Elemente in abgegrenzten Gebieten werden als zusammengehörig wahrgenommen. Das Gesetz der gemeinsamen Region hat vor allem Bedeutung, wenn mehrere Elemente (Gruppen) gleichzeitig auf einem Screen vorhanden sind.
Design Basics:
Grenzen Sie Elemente, die zusammengehörig sind, mittels hinterlegter Farbfläche oder Konturline, von den anderen Elementen ab.
Gesetz der Verbundenheit
Miteinander verbundene Formen werden als Einheit wahrgenommen. Unter Umständen kann das Gesetz der Verbundenheit andere Gestaltgesetze, wie z.B. das Gesetz der Nähe oder das Gesetz der Ähnlichkeit, übersteuern.
Design Basics:
