5. Gestaltungsaspekte
Die Platzierung von Elementen, der Ausgestaltung sowie Farbe und Rahmen können zu ganz unterschiedlichem Empfinden beim Benutzer führen. Diesen Aspekten ist bei der Anordnung und Gruppierung von Graphikelementen Rechnung zu tragen.
5.1 Kulturdenken
Abb. 1-18: Gleichmässige Platzierung von Flächen
Werden mehrere gleiche Flächen in regelmässigen Abständen angeordnet, so wird sich unser Auge – aus Sicht unserer Lernhistorie bedingt – von oben links nach unten rechts orientieren, d.h. dass uns die beiden Flächen im oberen linken bzw. unteren rechten Eck am stärksten auffallen.
Dieses „Sehen“ ergibt sich aus der Art, wie westlich geschulte Menschen Texte lesen.
(In der arabischen Kultur würde dieses Bild „anders“ gesehen!)
5.2 Räumliche nähe
Abb. 1-19: Wirkung bei räumlicher Nähe
Platzieren wir die Flächen nicht mehr regelmässig, sondern führen einen vergrösserten Abstand ein, so nimmt unser Auge primär zwei Gruppen von Flächen wahr.
Die jeweils näher beieinander liegenden Flächen bilden dabei eine Einheit.
5.3 Formgebung
Abb. 1-20: Auswirkung der Formgebung
Durch die Formgebung der Fläche kann ein ganz anderer Eindruck erweckt werden. So ist im nebenan gezeigten Bild die Diagonale von unten links nach oben rechts viel stärker, als das uns „angewohnte Sehen“ von oben links nach unten rechts.
Die geometrisch andere Gestaltung der Fläche bewirkt hier diesen Effekt.
5.4 Farbliche Ausprägung
Abb 1-21: Wirkung von Farben bzw. Schattierungen
Weit stärker als Formen oder räumliche Nähe wirken aber Farben (oder Schattierungen) auf unser Auge. Im Bild werden klar drei Gruppen von zusammengehörenden Flächen ausgemacht, obwohl diese in Form und Platzierung unterschiedlich sind.
5.5 Rahmen
Abb. 1-22: Wirkung von Rahmen
Die stärkste Wirkung wird durch den Einsatz von Rahmen oder Linien hervorgerufen.
Die umrahmten Flächen werden als zusammengehörend erfasst, auch wenn sie unterschiedliche Farben aufweisen.
5.6 Ein Beispiel
Bei der Gestaltung von graphischen Oberflächen sind nebst der Auswahl der korrekten Graphikelemente und der Berücksichtigung der Regeln der SW-Ergonomie auch die oben erwähnten Gestaöltungsaspekte zu beachten. Mit diesen Stilelementen kann das Erscheinungsbild eines GUI massiv beeinflusst werden.
Als Beispiel wird hier (bewusst) ein alter Dialog aus einer Word-Version gezeigt, wie er im Original ausgebildet wurde und wie eine verbesserte Version aussehen könnte.
Abb 1-23: Original Dialog
Die Anordnung der Elemente wirkt etwas zufällig. Das fällt z.B. beim Radio-Button 'Seiten' auf. Hier ist das Eingabefeld unterhalb des Button platziert und verliert sich räumlich in der Gestaltung. Gleiches gilt für die Check-Box 'in Datei umleiten'.
Durch die unterschiedliche Wahl der Grösse bei den Schaltflächen 'Abbrechen' und 'OK' wirkt 'Abbrechen' als wichtigeres Element, was natürlich nicht der Fall ist.
Abb. 1-24: Angepasster Dialog
Durch das Zusammenfassen sinnverwandter Elemente und der Hervorhebung mit einem (beschrifteten) Rahmen, ist hier viel klarer gezeigt, was gemacht werden kann.
Auch die Auswahl des Bereichs für die Ausgabe ist mit einer vertikalen - statt horizontalen - Ausrichtung viel besser zu interpretieren. Wir sind es uns ja gewohnt, Aufzählungen zeilenweise darzustellen.
© René Probst