Den Urpsrung der Gestaltpsychologie entstand in den 20er als Gegenbewegung zur Elementenpsychologie. Die Elementenpsychologie wandte sich gegen die Vorstellung das die Wahrnehmung aus additiven Eindrücken besteht.

Ein Objekt das aus mehreren Teilobjekten besteht, hat für uns im Ganzen einen andere Bedeutung als die Teilobjekte im Einzelnen.

Als die Begründer der Gestalpsychologie gelten:

Abbildung 1: Max Wetheimer

Abbildung 2: Wolfgang Köhler

Abbildung 3: Kurt Koffka

Max Wertheimer setzte sich der Elementenpsychologie entgegen und widerlegte die Ansichten der Elementenpsychologie durch das Scheinbewegungsexperiment:
Wenn in einer Versuchsanordnung auf der linken Seite eines Feldes ein Lichtstreifen kurz auftritt, dann eine Dunkelpause von ca. 50 Millisekunden erfolgt, bevor der Streifen auf der rechten Seite des Feldes wieder auftaucht, so nimmt unsere Wahrnehmung im gesamten Versuchsaufbau eine Bewegung von links nach rechts wahr , obwohl während der Dunkelpause keinerlei physikalische Lichtreize vorhanden waren. Ab ca. 60-200 ms nimmt der Mensch Scheinbewegung wahr.

Typische Fragen der Gestaltpsychologie sind:

• Wie entsteht der Eindruck einer Form?
• Was ist eine „gute“ Form?
• Wie sehen wir Zusammenhänge zwischen Elementen?
• Warum sehen wir Zusammenhänge zwischen Elementen?

Weiterführende Themen:

• Wahrnehmung
• Gestaltgesetze

Die Aufnahme unseres Kurzeitgedächtnis ist effizient geregelt. Sachverhalte die zu komplex sind, werden einfachheitshalber ausgeblendet und fehlende Objekte werden aufgrund von Erfahrungswerten hinzugefügt. Die Gesetze der Gestaltungspsychologie verdeutlichen die trivialen Regeln.

Das Gesetz der Nähe

Inhaltliche Zusammengehörigkeit wird von Menschen durch Nähe der Objekte zueinander empfunden. Abstände, besonders bei Textausrichtung, sind hier ein wichtiges Werkzeug. Deshalb wird die Überschrift dieses Textblockes zu diesem zugeordnet und nicht zu dem vorhergehenden.

Das Gesetz der Ähnlichkeit

Auch Objekte die ähnlich aussehen werden als zusammengehörig empfunden (s. Abbildung 1).

Abbildung 1 Geometrische Figur durch Ähnlichkeit

Wenn man die Abbildung 1 intensiver betrachtet, wird man schnell ein angedeutetes Quadrat feststellen. Das beruht auf Erfahrungswerten, die unser Gehirn abstrahiert und aus denen es uns eine Form erkennen lässt.
Bei der Webseitengestaltung können wir daraus lernen, dass wir unterschiedliche Dinge und Funktionen möglichst in Form und Farbe verschieden darstellen. Elemente die gruppiert werden sollen, können wir durch das Gesetz der Nähe und das Gesetz der Ähnlichkeit formieren.

Das Gesetz der Geschlossenheit

Das menschliche Gehirn erfasst geschlossene Objekte besser als offene. Des wegen versucht unser Geist zunächst, in Unbekannten eher so genannte geschlossene Objekte hineinzuinterpretieren bzw. ganze Formen zu sehen (s. Abbildung 2). Man nennt dies auch den Gestaltschluss oder Gestaltungszwang.

Abbildung 2 Imaginärer Würfel
Quelle: http://de.wikipedia.org/wiki/Gestaltpsychologie

Ein Würfel besteht normalerweise aus 16 gleichlangen Kanten, wobei von jeder Ecke drei Kanten wegführen. Das wäre in Abbildung 2 nicht gegeben, trotzdem zeichnet unser Gehirn die imaginären weißen Linien und verbindet diese.
Jeder Webseiten-Besucher sucht unwillkürlich und unbewusst nach „geschlossen“ wirkenden Formen und Anordnungen.

Das Prägnanzgesetz

Das Gesetz der Prägnanz oder auch Gesetz der Einfachheit besagt, dass einfache und geschlossene Formen sich gegenüber komplexeren Objekten abheben. Menschen nehmen Objekte bevorzugt wahr, die einfacher zu erfassen sind (s. Abbildung 3).

Abbildung 3 Komplexe Formen weichen einfachen

In Abbildung 3 zeigt A eine zusammengesetzte Figur aus einer abgerundeten und einer eckigen Wellenlinie. Unser Gehirn erkennt beide Formen als nicht Zusammenhängend und trennt beide wie unter B. Unter C sieht man eine komplexere Alternative die das Gehirn außer Acht lässt, da die Formen unter C eher untypisch wären.
Fazit dieses Gesetzes für einen Webdesigner liegt in der einfachen Gestaltung von Elementen. Komplizierte Strukturen die das Gehirn herunterbricht auf einfachere wodurch der Sinn verschleiert wird, gilt es zu vermeiden.

Das Fortsetzungsgesetz

Das Fortsetzungsgesetz beruht auf intuitivem Zusammenschluss von ähnlich aussehenden Objekten zu einer Folge (s. Abbildung 4).

Abbildung 4 Das Auge setzt die vermeintliche Reihe fort

Die Abbildung 4 zeigt im wesentlichen nur schwarze Punkte. Intuitiv wird aber bei der Beschreibung der Abbildung zu einer Interpretation gegriffen: Eine Kurve oder eine einzelne Welle. Das Auge macht aus den einfachen Punkten eine Linie.
Dieser „Fortsetzungsdrang“ beschränkt sich nicht nur auf einfache Objekte wie in Abbildung 4, sondern wird auch auf Webseiten unbewusst angewandt, um Inhalte besser von einander zu trennen. Es handelt sich hierbei ebenfalls um ein Phänomen, das dem Gestaltschluss-Grundsatz entstammt.

Das Symmetriegesetz

Symmetrie wirkt auf das Auge des Betrachters automatisch zusammengehörig (s. Abbildung 5).

Abbildung 5 Symmetrische Formen dominieren

Umgekehrt werden Objekte die keiner Symmetrie angehören als unwichtig eingestuft und treten in den Hintergrund. Symmetrie dominiert unsere Wahrnehmung.
Auch dieses Gesetz sollte bei der Gestaltung einer Webseitenstruktur Beachtung finden. Insbesondere die Anordnung von Textblöcken bei einem mehrspaltigen Layout hat hier einen gestalterisch nutzbaren Einfluss.

Das Erfahrungsgesetz

Die Erfahrung der Menschen verhilft ihnen nicht vollständig Gezeigtes automatisch zu ergänzen. In der Webseitengestaltung werden oft stark abstrahierte Icons verwandt, welche den Kern der Bedeutung abbilden und so der Betrachter dessen Aussagekraft erkennt.
Abstraktion war und ist auch für Maler ein mächtiges Werkzeug (s. Abbildung 6).

Abbildung 6 Abstrahiertes Zebra

Die Erklärungskraft von Icons wird oft überschätzt. Grundsätzlich ist zu sagen, dass das Einsetzen von Icons nur eine Behelfslösung ist. Webseiten sollten selbsterklärend gestaltet sein.

Abbildung 7 Ergänzung fehlender Informationen durch Erfahrung

Das Lesen des Textes von Abbildung 7 wird niemandem schwer fallen, da die Buchstabenkombinationen der Wörter jedem vertraut sind und der Betrachter auch nur mit der Hälfte der Information auskommt um den Text zu erfassen.

Abbildung 8 Kontext beeinflussende Wahrnehmung

Abbildung 8 zeigt das der Kontext Einfluss auf die Bedeutung von Objekten hat. In der oberen Zeile erkennt man das mittlere Symbol deutlich als „B“ und in der unteren wird das gleiche Symbol zur „13“. Unser Gehirn versucht immer eine Logik mit hinein zu interpretieren, ein „B“ hätte nicht in die Folge der Zahlen gepasst.
Das Gesetz der Erfahrung zeigt offensichtlich, dass der Besucher jede ihm bekannt gemachte Symbolik auf einem anderen Kontext übertragen kann. D.h. wenn nötig, sollte man den kleinsten gemeinsamen Nenner an Icons und Abstraktionsgrad finden, so dass der „Standard“-Besucher den Sinn der visuellen Aussagen erfassen kann. Dennoch ist darauf zu achten, dass so wenig Icons und erklärende Elemente wie möglich eingesetzt werden, denn diese deuten nur auf die Versäumnisse im Usability-Engineering.

Hinweis

Diese Anleitung ist ein praktischer Leitfaden ohne Gewähr.

Unkompliziertes und schlichtes Webseiten-Design zu entwerfen, dass nicht von den eigentlichen Inhalten ablenkt, erweist sich als anspruchvolles Unterfangen. Vielen Webdesigner fällt es schwer, mit der Gestaltung nicht andere Webdesigner zu beeindrucken. Man muss sich bewusst machen, wer der Empfänger der optischen Aufmachung sein wird.

Bilder und Icons sind nur als Behelf zu sehen, um unterstützend auf eine ungenaue Beschreibung zu wirken. Sie sollten keinesfalls, weil Platz ist, als Lückenfüller Verwendung finden. Als Computer-Nutzer kennt man viele Symbole die zum größten Teil von Microsofts Standardprodukten (Windows, Office etc.) ins Leben gerufen wurden. Trotzdem gilt im Webdesign nicht wie der Volksmund meint „Bilder sagen mehr als 1000 Worte“, weil Symboliken sich stetig der Zeit anpassen. Überdies sind nur wenige Icons (Schere, Diskette, Drucker) von den PC-Nutzern verinnerlicht. Falls ein Symbol nicht bekannt sein sollte, muss es zwingend selbsterklärend sein. Was man bsp. von dem Lupen-Icon nicht sagen könnte, denn wer vermutet hinter einer Lupe eine Suchfunktion? Eine Lupe symbolisiert eine Vergrößerungsfunktion oder das Entdecken von Details. Ein anderes Beispiel wäre das Disketten-Symbol, welches allgemein als Speichern von Dokumenten Verwendung findet. Man darf aber nicht übersehen, dass das Medium Diskette so gut wie ausgestorben ist und in 10 Jahren Disketten nicht mehr erkannt werden.


Auch wenn Schrift immer gegenüber Icons und Bildern zu bevorzugen ist, wird der Charakter einer Webseite durch deren Gestaltung geprägt.

Der Webseiten-Besucher erkennt eine Webseite nicht an deren Text sondern an deren grafische Aufmachung wieder. Folglich sollte man Grafiken und Bilder überlegt integrieren. Icons sollten immer selbsterklärend sein und nicht aus Platzmangel Anwendung finden. Von 100 Webseiten-Besuchern sollten mindestens 75 ein eingesetztes Icon bzw. dessen Bedeutung sofort erkennen, wenn dies nicht der Fall sein sollte, muss auf einen Text ausgewichen werden. Im Web sind Worte immer eindeutiger als Icons. Bilder müssen zum Kontext, farblich sowie grafisch zum Webseiten-Charakter passen und nicht aus persönlichen Eigeninteresse, weil das Bild gerade gefällt, eingesetzt werden.

Hinweis

Diese Anleitung ist ein praktischer Leitfaden ohne Gewähr.

Weiterführende Literatur

empfehlenswert sind folgende Bücher:

• Web Usability von Jakob Nielsen und Hoa Loranger
• Don’t Make Me Think! A Common Sense Approach to Web Usability von Steve Krug
• Integrierte Informationsarchitektur – Die erfolgreiche Konzeption professioneller Websites von Henrik Arndt
• Usability Engineering kompakt. Benutzbare Software gezielt entwickeln von Michael Richter, Markus D. Flückiger

Wenn es aufgrund der Anzahl an Eingabefeldern nötig wird das Formular auf mehrere Seiten zu verteilen, ist es ratsam ein Konzept (engl. „Style-Guide“) zu entwerfen. Bei der Planung sind Abstände zu den Elementen, Eingabelängen der zu erwartenden Informationen, Vorgaben (engl. „Defaults“), Design und Anordnung, Datentypen und reguläre Ausdrücke für die Datenprüfung zu überlegen. Anzumerken ist, dass mehr Informationen zu Formularelementen besser sind als zu wenig. Für den Besucher kann es ärgerlich sein, wenn erst nach Abschicken des Formulars Hinweise zu den Datenfeldern erscheinen.

Abbildung 1 Beispielentwurf für ein stimmiges Formularkonzept

Der Benutzer muss vor dem Ausfüllen eines Eingabefeldes wissen, was er einzugeben hat. Es bietet sich an, unter jeder Feldbeschriftung (engl. „Label“) einen kleinen Hinweistext abzubilden (s. Abbildung 1). Bei einem mehrseitigen Layout ist zu berücksichtigen, dass der Auszufüllende vor-und zurückblättern kann und das ihm angezeigt wird auf welcher Seite er sich befindet (s. Abbildung 1). Des weiteren ist ein einleitender Text und wichtige Hinweise in den Kopfbereich des Formulars zu integrieren, auch wenn die meisten Benutzer diese Texte nicht lesen, spätestens, wenn mehr Informationen nötig werden, wird der Auszufüllende auf diese Informationsquelle zurückgreifen.
Man sollte dem Benutzer so viele Eingaben wie möglich ersparen (bsp. Ortsbestimmung über PLZ) um das Formular benutzerfreundlicher zu gestalten. Durch geschicktes Einsetzen von Abständen und Gruppierung kann dem Benutzer Zugehörigkeit von Label mit Eingabefeld signalisiert werden.
Um auf Plausibilität zu prüfen, haben sich reguläre Ausdrücke bewährt. Die Ausgabe der Fehler sollte mit einem Haupthinweis im Formularkopf und lokal an dem entsprechenden Feld angezeigt werden (s. Abbildung 1). Ein Fehlerhinweis kann relativ genau über den fehlgeschlagenen regulären Ausdruck angegeben werden. Der Benutzer sollte keinesfalls bei der Fehlersuche im Dunkeln tappen, um so präziser die Hinweise sind, desto benutzerfreundlicher ist das Formular.

Abschließend ist zu sagen, dass Formulare eine Hürde für einen Benutzer darstellen können, ausgedehnte Tests mit unabhängigen Personen gehören zur Pflicht eines Web-Entwicklers. Nur ein stimmiges Formular benötigt keine Unterstützung. Unstimmiges Fromulardesign kann Kosten verursachen (Anwender-Support).

Hinweis

Diese Anleitung ist ein praktischer Leitfaden ohne Gewähr.

Weiterführende Literatur

empfehlenswert sind folgende Bücher:

• Web Usability von Jakob Nielsen und Hoa Loranger
• Don’t Make Me Think! A Common Sense Approach to Web Usability von Steve Krug
• Integrierte Informationsarchitektur – Die erfolgreiche Konzeption professioneller Websites von Henrik Arndt
• Usability Engineering kompakt. Benutzbare Software gezielt entwickeln von Michael Richter, Markus D. Flückiger