Das Gesetz des gemeinsamen Schicksals und Webdesign

Das „Gesetz des gemeinsamen Schicksals“ findet man auch unter der Bezeichnung „Gesetz der Gleichartigkeit des Verhaltens“. Dieses Gesetz aus der Gestaltpsychologie sagt aus, dass Elemente als zusammengehörig wahrgenommen werden, die ein gleichartiges Verhalten aufweisen.

Das übliche Beispiel ist, dass sich Punkte in gleicher Geschwindigkeit in eine Richtung bewegen. Das sieht zwar hübsch aus, wird aber meiner Meinung nach im Webdesign nicht so oft vorkommen. Und es greift zu kurz. Im Folgenden ein Beispiel mit einem animierten Kuchendiagramm. Hier sieht man, dass sowohl die einzelnen Kuchenstücke sich beim Anklicken bewegen, wie auch die Beschriftung in der zugehörigen Legende gleichzeitig hervorgehoben wird. Diese Umsetzung eines Kuchendiagramms stellt die ideale Art dar, um sofort zu sehen, welche Information zu welchem Teil der Grafik gehört.

Man sieht also bei diesem Beispiel, dass für die Zusammengehörigkeit es bereits ausreichen kann, dass Elemente gleichzeitig animiert werden, wenn eine Besucheraktion stattfindet. Diese müssen sich dabei nicht zwangsläufig in die gleiche Richtung bewegen. Das klappt umso besser, je weniger (am besten keine) andere Bewegung auf der Website es gerade gibt.

Wer es selber ausprobieren möchte: das Beispieldiagramm zum selber testen ist Online unter https://www.html-seminar.de/beispielcode/webdesign-gesetz-des-gemeinsamen-schicksals.htm

Wir reagieren auf Bewegung sehr stark, da evolutionsbedingt es für den Menschen extrem wichtig war zu erkennen, ob hinter einer Bewegung im Busch ein Tiger lauert und man schnell rennen sollte oder der Sonntagsbraten für die Familie. Die Bedeutsamkeit sieht man auch im Aufbau des Auges. Die Randbereiche des Auges sind primär auf Bewegung ausgelegt. Hier sieht man unscharf, aber dafür „schneller“. Es kommt daher schnell Stress (Adrenalinausschüttung) auf, um für den Extremfall schneller laufen zu können. Natürlich gibt es heutzutage sehr selten Raubkatzen, die uns noch fressen könnten – trotz alledem steht dies in unserem entwicklungstechnischen Programm festgeschrieben und wir reagieren auf Bewegung. Bewegung kann auch blinkende bzw. sich bewegende Werbung am Rande sein – die Reaktion ist Stress.

Daher ist es wichtig, Bewegung sehr dosiert und mit Sinn und Verstand einzusetzen!

Steuerung und Feedback an Benutzer

Ein anderes Beispiel (im weitesten Sinne Bewegung, wenn wir eine Änderung von Elemente dazuzählen) ist die Reaktion in der Steuerung auf Nutzerinteraktionen. Dieses visuelle Feedback an den Besucher bestätigt seine Annahme, dass er hier etwas auswählen kann. Wir müssen in der Steuerung die Standardanzeige für Links (blaue unterstrichene Schrift) nicht unbedingt nutzen, da dieses Element meistens durch das Gesetz der Geschlossenheit, dem Gesetz der Nähe und dem Gesetz der Ähnlichkeit für den Benutzer als Steuerung erkennbar ist. Hier sieht man schön, wie mehrere Gesetze aus der Gestaltpsychologie zusammenwirken.

Fährt der Besucher nun mit der Maus über einen Link, ändert sich der Mauszeiger. Das ist die erste „Bewegung“ (wie gesagt, wenn wir das „Gesetz der Gleichartigkeit des Verhaltens“ auslegen und Änderung der Form dazu genommen wird, aus der auch Bewegung entsteht), die wahrgenommen werden kann. Um das Feedback für die Besucheraktion zu verstärken, können wir über CSS bei Mausberührung die Anzeige in der Steuerung noch verändern. Beispielsweise wird in der Steuerung beim HTML-Seminar sowohl die Hintergrundfarbe wie auch mit der Unterstreichung gearbeitet. Die CSS-Anweisungen bauen auf :hover auf:

nav a:hover {
  text-decoration: underline;
  background-color: yellow; 
}

Fazit zum „Gesetz des gemeinsamen Schicksals“

Das Gesetz des gemeinsamen Schicksals ist sehr stark in seiner Wirkung. Daher bitte in Maßen und sinnig einsetzen. Ein Zuviel verwirrt und verursacht Stress.