Tanjas Usability Blog

Blog über meine Weiterbildung zum Thema Web Usability


Hinterlasse einen Kommentar

Wahrnehmung: Gesetz der Einfachheit

Das Gesetz der Einfachheit besagt, dass das menschliche Gehirn Formen so interpretiert, dass sie möglichst einfach erscheinen und leicht zu beschreiben sind. Es wird auch als das Gesetz der guten Gestalt oder Prägnanzgesetz bezeichnet.

Beispiel:

Figur zur Veranschaulichung des Gesetzes der Einfachheit

Abbildung 1

Figur zur Veranschaulichung des Gesetzes der Einfachheit

Abbildung 2

Beim Ansehen der Abbildung 1 erkennen wir automatisch zwei übereinandergelegte Quadrate, wie es in Abbildung 2 visualisiert ist. Die komplizierten Dreiecksstrukturen, die am Rand der Figur enthalten sind, erkennen wir nur mit Anstrengung.

Das Gesetz der Einfachheit als Meta-Gesetz

Das Gesetz der Einfachheit ist ein allgemeines Prinzip, das man als übergeordnetes Gesetz der Wahrnehmung verstehen kann. Die anderen Gestaltgesetze der Wahrnehmung wie das Gesetz der Nähe, das Gesetz der Ähnlichkeit usw. sorgen dafür, dass Einfachheit als übergeordnetes Prinzip wirken kann.

Unser Bewusstsein kann sich immer nur auf eine von mehreren möglichen Wahrnehmungsalternativen einstellen. Deshalb können wir Sinneseindrücke nicht gleichzeitig in verschiedenen Bedeutungen sehen. Im Bewusstsein ist also nur Raum für eine einzelne Bedeutung, weswegen die Wahrnehmung so unflexibel erscheint. Dieses Limit ist so grundlegend, dass es selbst bei vergleichsweise einfachen Dingen wirkt.

Die Gestaltgesetze bewirken, dass aus der Vielzahl an Interpretationen eines Reizes diejenigen ausgewählt werden, die der Verstand am leichtesten handhaben kann. Das Sehen nach den Gestaltgesetzen reduziert die kognitive (= das Denken und Entscheiden betreffende) Belastung und sorgt dadurch dafür, dass wir schnell reagieren können.

Bedeutung des Gesetzes der Einfachheit für das Webdesign

Aus dem Gesetz der Einfachheit ist eine wichtige Empfehlung fürs Webdesign abzuleiten: Gestalte die Dinge möglichst einfach und eindeutig. Dadurch erhält die Website ein  wahrnehmungsfreundliches Design. Elemente sollten symmetrisch und systematisch angeordnet sein. Eine klare visuelle Abgrenzung der Informationseinheiten ist sinnvoll. Außerdem sollte insgesamt eine nicht zu hohe Anzahl von Informationseinheiten präsentiert werden. Ein Layout, das diesen Kriterien entspricht, wird von den Nutzern als übersichtlich und häufig auch als ästhetisch ansprechend beurteilt.

Das Gebot der Einfachheit lässt sich im Layout bzw. dem Gestaltungsraster von Webseiten besonders schön veranschaulichen. Nutzerfreundliches Layout hat die Aufgabe, dem Leser eine schnelle, sichere Orientierung in den Inhalten zu ermöglichen, Blickbewegungen zu steuern, ihn Wichtiges erkennen sowie Grenzen und Gruppierungen verstehen zu lassen. Das gilt sowohl auf einer Bildschirmseite – also dem sichtbaren Ausschnitt – als auch auf einer Seite in ihrer Gesamtlänge, die ja auch mehrere Bildschirmseiten betragen kann.

Auf den folgenden Screenshots habe ich die Informationseinheiten, die das Gehirn nach dem Gesetz der Einfachheit bildet, durch grau eingefärbte Kästchen visualisiert.

Sportschau.de

Gesetz_Einfachheit_Sportschau_Informationseinheiten

Screenshot Sportschau.de

Bei Sportschau.de sind die Informationseinheiten symmetrisch angeordnet. Die drei unteren Blöcke haben die gleiche Größe.

Sport.de

Screenshot Sport.de

Screenshot Sport.de

Sport.de hat eine höhere Anzahl an Informationseinheiten, die stark in der Größe variieren und weniger symmetrisch angeordnet sind. Dadurch wirkt das Layout unübersichtlicher als das von Sportschau.de.


Hinterlasse einen Kommentar

Wahrnehmung: Gesetz der guten Fortsetzung

Das Gesetz der guten Fortsetzung besagt, dass Elemente, die sich auf einer durchgehenden Linie oder Kurve befinden, als Einheit wahrgenommen oder als zusammengehörig aufgefasst werden. Das liegt daran, dass das Gehirn dazu neigt, einen einmal erhaltenen Richtungsimpuls fortzusetzen. Andere Bezeichnungen für das Gesetz der guten Fortsetzung sind auch das Gesetz der Kontinuität oder das Gesetz der durchgehenden Linie.

Beispiel:

Sich kreuzende Linien als Beispiel für das Gesetz der guten Fortsetzung

In der oberen Grafik nehmen wir zwei Linien wahr: Die eine verläuft von A nach B und die andere von C nach D.

Linien werden immer so gesehen, als folgten sie dem einfachsten Weg. Wenn sich zwei Linien kreuzen, gehen wir nicht davon aus, dass der Verlauf der Linien an dieser Stelle einen Knick macht, sondern wir sehen zwei durchgehende Linien. Eine Linie wird also immer als eine Linie gesehen, die ohne Richtungswechsel verläuft.

Elemente befinden sich in einer guten Fortsetzung, wenn Sie sich auf einer (gedachten) Linie befinden – also horizontal, vertikal oder auch auf Kurven. Die Linien müssen nicht geschlossen sein, sondern es reicht die Andeutung.

Das Gesetz der guten Fortsetzung ist wichtig bei der Ausrichtung von Elementen und spielt im Webdesign eine große Rolle. Alle Elemente sollten an Fluchtlinien ausgerichtet sein. Durch Alignierung lässt sich die Anzahl der Fluchtlinien verringern, was für eine übersichtlichere und geordnetere Darstellung sorgt.

Beispiel aus dem Webdesign: Navigation auf www.neckermann.de:

Navigation mit vertikalen Fluchtlinien als Beispiel für das Gesetz der guten Fortsetzung

Die Menüpunkte der Navigation sind entsprechend dem Gesetz der guten Fortsetzung auf  gedachten vertikalen Linien angeordnet. An den senkrechten Fluchtlinien entlang können die Menüpunkte sehr schnell gelesen werden. Durch die Anordnung wirkt die Navigation wesentlich übersichtlicher als wenn die Links nicht an Fluchtlinien ausgerichtet wären.


Hinterlasse einen Kommentar

Wahrnehmung: Gesetz der Geschlossenheit

Das Gesetz der Geschlossenheit besagt, dass Dinge mit geschlossenem Umriss oder Elemente, die von einer Linie umfasst sind, von unserer Wahrnehmung gruppiert, also als zusammengehörig aufgefasst werden. Dinge, die durch Linien getrennt sind, wirken nicht zusammengehörig.

Das Gesetz der Geschlossenheit ist ein sehr wichtiges Werkzeug zum Ordnen von Informationen, zum Hervorheben von Zusammenhängen und zum Erleichtern der Orientierung. Im Webdesign spielt es deshalb eine große Rolle. Jeder Button und jede Tabelle wird von unserer Wahrnehmung als visuelle Einheit erkannt. Umgekehrt gilt: Wenn Dinge, die zusammengehören, in unterschiedlichen Kästen platziert oder durch Trennlinien abgegrenzt sind, ist es den Benutzern fast unmöglich, sie gemeinsam zu beachten. Dies gilt auch dann, wenn die Distanz gering oder die Ähnlichkeit groß ist.

Wichtig ist, dass eine vollständige Geschlossenheit nicht erforderlich ist, damit das Gesetz wirkt. Es genügt bereits, wenn eine geschlossene Figur angedeutet wird. Das Gehirn ergänzt einfach die unvollständigen Formen.

Beispiel:

Kanizsa-Dreieck als Beispiel für das Gesetz der GeschlossenheitBeim links abgebildeten Kanizsa-Dreieck sieht man über drei schwarzen Kreisen und einem Dreieck ein weißes Dreieck „schweben“, obwohl die Abbildung als optische Reizgrundlage eigentlich nur durchbrochene Linien und Kreissektoren enthält. Das ist ein Beleg dafür, dass unsere Wahrnehmung aus unvollständigen Teilinformationen vorschnell auf vollständige Figuren schlussfolgert.

Beispiele für das Gesetz der Geschlossenheit:

Die folgenden Screenshots stammen aus den Einstellungsmenüs der Bowser Mozilla Firefox und Google Chrome.

Mozilla Firefox:
Gesetz_Geschlossenheit_Mozilla_Firefox
Die logisch zusammengehörigen Optionen werden gruppiert und durch Kästen voneinander getrennt. Dadurch kann man sehr schnell erkennen, was zusammengehört und was nicht.

Google Chrome:
Screenshot Google Chrome
Die Optionen sind ebenfalls auf mehrere logische Gruppen verteilt. In der Gestaltung wird jedoch wenig unternommen, um dies für den Benutzer sichtbar zu machen. Es gibt weder Kästen noch Trennlinien. Die Gestaltung ist dadurch nicht so prägnant und verständlich wie im Beispiel oben.

Beispiel aus dem Webdesign: www.t-online.deScreenshot www.t-online.de
Durch die Linien kann man die logischen Begrenzungen der Informationen unmittelbar erkennen und es bilden sich fünf deutlich erkennbare Einheiten heraus.


Hinterlasse einen Kommentar

Wahrnehmung: Gesetz der Ähnlichkeit

Das Gesetz der Ähnlichkeit besagt, dass Dinge, die ähnlich gestaltet sind, als zusammengehörig wahrgenommen werden. Dagegen werden Dinge, die sich in wichtigen Merkmalen unterscheiden, als voneinander getrennt oder unabhängig wahrgenommen.

Die Ähnlichkeit kann sich auf Merkmale wie Farbe, Form, Größe, Helligkeit oder Orientierung beziehen. Je mehr Gemeinsamkeiten die Dinge aufweisen, desto stärker ist die Gruppierungstendenz in unserer Wahrnehmung.

Das Gesetz der Ähnlichkeit kann direkt aufs Webdesign übertragen werden. Die Elemente einer Website, die gleich aussehen und sich eindeutig von den anderen unterscheiden, werden  zu einer Gruppe zusammengeschlossen.

Beispiel: Screenshot des Online-Shops www.computeruniverse.net:

Screenshot Computeruniverse zur Verdeutlichung des Gesetzes der Ähnlichkeit
 
Die Shopping-Buttons haben die gleiche orange Farbe und durch die Form unterscheiden sie sich deutlich von anderen Elementen der Seite. Trotz der großen Distanzen zwischen den Buttons erkennt unsere Wahrnehmung diese Ähnlichkeiten mühelos und fasst die Buttons zu einer Gruppe zusammen. Dadurch erkennt der Benutzer intuitiv, dass diese Elemente etwas gemeinsam haben müssen.

Nach dem Gesetz der Ähnlichkeit sollten Seitenelemente mit gleicher Funktion gleich oder ähnlich gestaltet sein. Das Gesetz der Ähnlichkeit ist eine gute Ergänzung zum Gesetz der Nähe, weil man durch Ähnlichkeit Elemente auch über mehrere Seiten hinweg verbinden kann. Wenn es nicht möglich ist, Gemeinsamkeiten durch die Nähe der Elemente auszudrücken, kann man dem Benutzer durch Ähnlichkeit verdeutlichen, was zusammengehört. Im Umkehrschluss bedeutet das Gesetz der Ähnlichkeit auch, dass sich Seitenelemente mit unterschiedlicher Funktion deutlich voneinander unterscheiden sollten.


Hinterlasse einen Kommentar

Wahrnehmung: Gesetz der Nähe

Das Gesetz der Nähe besagt, dass Elemente mit geringen Abständen zueinander als zusammengehörig wahrgenommen werden. Das liegt daran, dass Dinge, die räumlich nahe beieinander liegen, von unserer Wahrnehmung gruppiert werden. Dagegen werden Dinge, die weit voneinander entfernt liegen, als getrennt und unabhängig wahrgenommen.

Beispiel: Screenshot des Webkatalogs www.dmoz.org:Screenshot des Webkatalogs DMOZ zur Verdeutlichung des Gesetzes der Nähe
Die Links innerhalb der verschiedenen Gruppen bzw. Kategorien sind nach dem Gesetz der Nähe gruppiert. Die vertikalen Abstände zwischen den Kategorien sind größer als die Abstände innerhalb einer Kategorie.

Die Logik, die hinter dem Gesetz der Nähe steckt, und das Beispiel machen deutlich, dass Leere von der menschlichen Wahrnehmung als Information verwertet wird. Leerräume, die mit Überlegung eingesetzt werden, sind keine Platzverschwendung, sondern ein Gestaltungsmittel, das dabei hilft, Informationen sinnvoll zu ordnen und verständlich zu machen.

Das Gesetz der Nähe ist das einfachste Gestaltgesetz. Verstöße gegen das Gesetz der Nähe können verheerende Auswirkungen auf die Benutzerfreundlichkeit einer Website oder Benutzeroberfläche haben.


Hinterlasse einen Kommentar

Die Gesetze der Wahrnehmung

Während eines Website-Besuchs werden Informationen nicht nur aufgenommen, sondern auch verarbeitet. Im Gehirn des Benutzers findet ein aktiver Prozess statt, bei dem Informationen strukturiert, interpretiert und bewertet werden. Die Gestaltpsychologie hat einige Gesetzmäßigkeiten formuliert, die dabei helfen, diese Vorgänge zu verstehen. Werden die Gesetze der Wahrnehmung beim Webdesign beachtet, ergibt sich daraus eine hohe Benutzerfreundlichkeit.

Mit welchen Fragen beschäftigt sich die Gestaltpsychologie?

Bei der Gestaltpsychologie geht es vor allem darum, wie komplexe Szenerien oder Reize wahrgenommen werden. Wichtige Fragen der Gestaltpsychologie sind:

  • Warum sehen wir das eine als Vordergrund und das andere als Hintergrund?
  • Wie entsteht der Eindruck einer Form?
  • Wovon hängt es ab, wie leicht oder wie schnell wir eine Figur oder Form erkennen?
  • Was ist eine „gute“ Form?
  • Wie und warum sehen wir Zusammenhänge zwischen Dingen?
  • Wodurch wird das Erkennen von Zusammenhängen (und Unterschieden) erleichtert oder erschwert?

Die Gestaltpsychologen haben Erklärungen dafür geliefert, warum wir von vielen verschiedenen Interpretationen einer Szene oder eines Bildes immer nur bestimmte wahrnehmen, während uns andere Möglichkeiten „irgendwie unlogisch“ vorkommen.

Eine sehr gute Einführung in die Gesetze der Wahrnehmung bietet das Video „Wahrnehmung und Gestaltgesetze“ von der Hochschule Ravensburg-Weingarten.