Digital
Product
Design.

Icon Digital Product Design white Designsensor AG

Gestaltgesetze für Digitale Produkte

Ziel der Wissenschaft ist es immer gewesen, die Komplexität der Welt auf simple Regeln zu reduzieren.

So hat es Benoît Mandelbrot formuliert. Aber nur wer die Regeln und Gesetze kennt, kann diese entweder befolgen oder ganz bewusst brechen. Wer ein ansprechendes, digitales Produkt gestalten will, muss die Gestaltgesetze kennen, sie befolgen, aber auch brechen können.

Teilen macht Freude

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 Benutzer 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 Interface Elemente an einer bestimmten Stelle im Layout positioniert sind. Um die richtigen Entscheide fällen zu können, muss der Interface Designer die Erwartungen der Benutzer 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.

Gestaltpsycholgie

Als Gestaltpsychologie wird eine Richtung innerhalb der Psychologie bezeichnet, die die menschliche Wahrnehmung als Fähigkeit beschreibt, Strukturen und Ordnungsprinzipien in Sinneseindrücken auszumachen.

Gestaltgesetze richtig anwenden und brechen

Die Anwendung der Gestaltgesetze helfen dem Designer bei der Strukturierung des Layouts und der Anordnung der einzelnen Interface Elemente. 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

Grafik 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.
Besipiel Gestaltgesetz – Gesetz der Ähnlichkeit 01

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 beeeinander dar.
Besipiel Gestaltgesetz – Gesetz der Nähe 01

Gesetz der Prägnanz (Guten Gestalt)

Ein zentrales 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. Wir Menschen haben die Tendenz, optische Reize in möglichst einfachen Gestalten abzubilden.

Design Basics:

  • Priorisieren Sie die unterschiedlichen Interface Elemente. Welches Element soll am prägnantesten sein? Tipp: Dieses erkennen Sie, wenn Sie mit zugekniffenen Augen «unscharf» das User Interface betrachten.
gestaltgesetz

Gesetz der Geschlossenheit

Unsere Wahrnehmung ist bestrebt, mehrere Objekte möglichst als Einheit zu sehen. Dabei identifizieren wir einfache und bekannte Formen schneller als komlexe 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 Gerhirn 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.
Beispiel Gestaltgesetzt – Gesetzt der Geschlossenheit 01

Gesetz der Kontinuität

Grafik Gesetzt der Kontinuität

Das Gesetz der Kontinuität beschreibt, dass wir Menschen dazu neigen, einzele 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.
gestaltgesetz gesetz der kontinuitaet
Besipiel Gestaltgesetz – Gesetz der Kontinuität 02

Gesetz des gemeinsamen Schicksals

Grafik Gesetzt 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 Benutzer bestimmte Ereignisse oder Meldungen einordnen zu können.

Design Basics:

  • Wenden Sie das Gesetz an, um Grundelemente (ruhend) und Figuren (bewegt) zu verdeutlichen.
Besipiel Gestaltgesetz – Gesetz des gemeinsamen Schicksals 01
Besipiel Gestaltgesetz – Gesetz des gemeinsamen Schicksals 02

Gesetz der gemeinsamen Regionen

Grafik Gesetzt 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.
Besipiel Gestaltgesetz – Gesetz des gemeinsamen Regionen 01
Besipiel Gestaltgesetz – Gesetz des gemeinsamen Regionen 02

Gesetz der Verbundenheit

Grafik Gesetzt 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:

  • Wenden Sie das Gesetz der Verbundenheit an, um Elemente, die zusammen eine Einheit bilden, miteinander zu verbinden.
Besipiel Gestaltgesetz – Gesetz der Verbundenheit 02
Besipiel Gestaltgesetz – Gesetz der Verbundenheit 01