Webusability – Gestaltung einer einzelnen Webseite

Ein Kardinalfehler von Webdesigner ist die Überladung von einzelnen Webseiten mit zu vielen Elementen. Hier sollte man die kritische Zahl von sieben plus minus zwei Elementen bzw. Chunks nicht überschreiten, da dieses die kritische Zahl der Gedächtnisspanne des Kurzzeitgedächtnisses (Miller 1956) darstellt (vgl. auch Kapitel Gedächtnis)Thomas Wirth (2002) spricht sogar von einer Gedächtnisspanne von lediglich fünf Elementen.

Prinzipiell kann festgehalten werden, dass die Zahl der Elemente einer Webseite so gering wie möglich gehalten werden sollte. Jede größere Anzahl von Elementen führt zu einer Überforderung des Benutzers.

Im Sinne von Miller ist nicht jedes Element einer Webseite ein Chunk. Er fasst Elemente ganz im Sinne des Chunkings zusammen. Zum Beispiel ist das Navigationsmenü als ein Element zu sehen, welches aber noch aus Teilelementen, den einzelnen Hyperlinks, besteht. Die Zahl der Hyperlinks des Navigationsmenüs darf dementsprechend, also aus Gründen der Übersichtlichkeit der Entscheidungsalternativen, ebenfalls nicht die Zahl sieben plus minus zwei überschreiten.

Die Elemente, die nun auf einer Webseite vorhanden sind, müssen mit Hilfe des Gesetzes der Geschlossenheit geordnet und in einen Zusammenhang gebracht werden. Aufgrund dieser Funktionen spielt das Gesetz der Geschlossenheit im Webdesign eine sehr wichtige Rolle. Kästen, Buttons Tabellen und Tabellenzellen werden aufgrund des Gesetzes der Geschlossenheit als eine Einheit angesehen, während Elemente, die durch Trennlinien voneinander getrennt oder in verschiedenen Boxen dargestellt werden, nicht gleichzeitig betrachtet werden können, selbst, wenn sie sich in großer Nähe zueinander befinden.

Das Experiment von Behrmann, Zemel und Mozer (1998), zeigte, dass die Aufmerksamkeit objektorientiert ist. Die Ausbuchtungen, welche sich auf demselben Objekt befanden, konnten trotz der vorhandenen Distanz, die zwischen ihnen herrschte, besser miteinander verglichen werden (vgl. Kapitel „visuelle Aufmerksamkeit„)

Das Gesetz der Nähe kann also durch das Gesetz der Geschlossenheit ausgehebelt werden. Diese Tatsache macht das Gesetz der Nähe aber nicht unbrauchbar für die Praxis des Webdesigns. Verstößt ein Webdesign gegen dieses Gesetz, kann das Effekte zu Gunsten der Unübersichtlichkeit auslösen. In der folgenden Abbildung ist im linken Beispiel ein Navigationsmenü dargestellt, welches ungeachtet des Gestaltgesetzes der Nähe kreiert wurde.

Beachtet man das Gestaltgesetz der Nähe, wie rechts in der Abbildung geschehen, wird das Navigationsmenü deutlich übersichtlicher, da die Menüpunkte als jeweils eigene Objekte klar voneinander getrennt wahrgenommen werden.

 

Home Impressum Über uns Kontakt

 

 

Home      Impressum      Über uns      Kontakt

 

Das Navigationsmenü muss allerdings auch als ein Objekt erkennbar sein. Die Links dürfen nicht zu weit voneinander entfernt postiert werden, da sie sonst überhaupt nicht mehr in Zusammenhang gebracht werden können und es dem Benutzer erschwert, die vorhandenen Menüpunkte zu vergleichen. Dieses würde passieren, wenn ein Webdesigner aufgrund von designerischen Gesichtspunkten das Navigationsmenü dezentralisiert, um Abwechslung in die Standards normaler Websites zu schaffen. So könnte man sich eine Webseite wie ein Fenster vorstellen, auf dessen Fensterrahmen, der als Navigationsmenü fungieren würde, alle Menülinks verteilt wären. Diese Webseite würde aufgrund ihrer Einmaligkeit auffallen, aber würde nur mit Hilfe des Gestaltgesetzes der Ähnlichkeit übersichtlich bleiben.

Das Gesetz der Ähnlichkeit nimmt im Webdesign eine besondere Stellung in der Herstellung von Ordnung und Klassifizierung von Elementen ein. So bietet es sich an, Elemente, die sich in ihrer Funktion ähneln, in Farbe und anderen Eigenschaften gleich zu gestalten. Auf diese Weise ist gewährleistet, dass der Benutzer diese Elemente als eine Gruppe erkennt. So haben beispielsweise auf www.amazon.de alle Hyperlinks, die im Zusammenhang mit dem Warenkorb stehen und die eine Einkaufs-Funktion im Onlineshop darstellen, das gleiche Design. Es sind gelbe, rundliche Buttons mit einer schwarzen Schriftfarbe. Selbst wenn diese Buttons durch große Distanzen voneinander getrennt sind, werden sie aufgrund der Ähnlichkeit als zusammenhörig erkannt. Diese Tatsache ermöglicht es dem Webdesigner, eine Zusammengehörigkeit zu vermitteln, wenn das Gesetz der Nähe beispielsweise aus inhaltlichen oder designerischen Gründen nicht eingehalten werden kann oder soll.

Aufgrund der Eigenschaften muss nicht erkennbar sein, um was für eine Funktion es sich bei den so gestalteten Elementen genau handelt. Der Benutzer weiß lediglich, dass sich diese ähnlichen Elemente von den anderen Elementen in ihrer Funktion unterscheiden und inhaltlich eine ähnliche Funktion besitzen müssen.

Um die Zusammengehörigkeit von Elementen zu unterstreichen, setzt man auf Webseiten das Gestaltgesetz der guten Fortsetzung ein. Elemente, die sich demnach auf einer Linie oder Kurve – die nicht zwingend sichtbar sein muss – befinden, werden von unserem visuellen Wahrnehmungssystem zu einem Objekt organisiert. Für die Web-Usability bedeutet dies, dass zusammengehörige Website-Elemente auf einer Kurve, meistens auf einem Strich, angeordnet werden sollten. Im Umkehrschluss sollte man aber auch beachten, dass Website-Elemente, die weder funktionell noch inhaltlich zusammengehören, nicht auf einer gemeinsamen Linie oder Kurve angebracht werden.

Hyperlinks zum Blättern in Suchmaschinenergebnisseiten, wie in der folgenden Abbildung am Beispiel der Suchmaschine Google gezeigt wird, sind ein bekanntes Beispiel für eine Anwendung des Gestaltgesetzes der guten Fortsetzung.

Quelle: www.google.de

In der folgenden Abbildung ist auf der linken Seite ein Navigationsmenü zu sehen, das nicht nach dem Gestaltgesetz der guten Fortsetzung kreiert wurde, während rechts alle Hyperlinks auf einer gedachten Linie angeordnet sind, wodurch sie als eine Gruppe wahrgenommen werden und besser verglichen werden können.

Einfachheit im Layout

Die meisten Webdesigner versuchen, mit anstrengenden Verrenkungen aus einem einfachen, übersichtlichen Design, wie in der Abbildung (oben rechts), ein aus den Internetstandards herausragendes, auffälliges aber gleichzeitig unübersichtliches und meistens unruhiges Design zu entwerfen. Dabei ist es gerade das Prinzip Einfachheit (Norman 1989), das uns verstehen lässt, wie Dinge funktionieren. Kompliziert strukturierte Websites haben den Nachteil, dass sich Benutzer nicht so schnell orientieren können. Grenzen und Gruppierungen von Elementen müssen einfach angeordnet werden, damit die Blickbewegungen der Benutzer so verlaufen können, dass sie Wichtiges sofort wahrnehmen können.

Sofortiges Feedback gewährleisten

Ein Produkt muss nach Norman (1989) so gestaltet sein, dass der Benutzer unverzüglich nach seiner Handlung erfährt, ob diese Handlung zum Erfolg geführt hat. Auf diese Weise kann er, wenn es nötig sein sollte, Korrekturen an seiner Handlung durchführen und sie eventuell derart verändern, dass sie zum Erfolg führen.

Außerdem ist die Zeit, in der das Kurzzeitgedächtnis Informationen speichert, auf wenige Sekunden begrenzt, wenn sie nicht im Geiste wiederholt werden.

In einer Studie von Hewlett Packard (2000) konnte nachgewiesen werden, dass der Geduldsfaden der Internetbenutzer bezüglich der Wartezeit im Durchschnitt nach 8,57 Sekunden riss. Dieser Wert war in dieser Untersuchung der Mittelwert der Zeit, die verging, bis die User den Knopf drückten, der ihnen eine Website sofort ohne Ladezeit anzeigte.

Etwaige Funktionen oder Webseiten müssen also innerhalb dieser Zeit ablaufen oder geladen werden können, da der Internetbenutzer ansonsten die Lust verliert und die Website verlassen könnte. Darum sollte auf große Grafiken, die einer langen Ladezeit bedürfen, zu Gunsten eines zufriedenen Benutzers verzichtet werden.

Da es partiell aus inhaltlichen Gründen nötig sein könnte, eine große Grafik zu verwenden, sollte versucht werden, die Ladezeit mit Alternativtexten, welche schon während der Ladezeit angezeigt werden, zu überbrücken. Während des zu langen Ladevorgangs weiß der Benutzer dann immerhin, worauf er wartet und erhält somit ein sofortiges Feedback.

Funktionen sichtbar machen

Ein weiteres wichtiges Produktdesign-Prinzip, das Norman (1989) nennt, welches man ebenfalls auf das Internet anwenden kann, ist das Prinzip der Sichtbarkeit. Dementsprechend macht es wenig Sinn, sich an alle Prinzipien benutzerfreundlichen Webdesigns zu halten und gleichzeitig gegen das Prinzip der Sichtbarkeit zu verstoßen. In die Praxis umgesetzt bedeutet dies, dass die Hintergrundfarbe einer Website nicht dunkel oder gar schwarz sein darf, wenn die Schriftfarbe ebenfalls dunkel ist.

Das Navigationsmenü, welches vorbildlich mit übersichtlicher Zahl von Menüpunkten, die auf einer Kurve verlaufen, durch einen Kasten begrenzt, gestaltet ist, muss z. B. auch entsprechend groß und mit genügend Kontrast zum Rest der Website aufgebaut sein, wenn der Besucher darauf aufmerksam werden soll.

Eindeutigkeit bewahren

Es macht Sinn, sich im Layout vorzeitig auf bestimmte Formate für Schriften festzulegen. So darf jedes Format, welches aus Schriftart, -größe, -farbe etc. besteht, nur einmal vorkommen, damit es zu keinen Verwechslungen kommen kann. Überschriften, die sich hierarchisch auf verschiedenen Ebenen befinden, müssen auch entsprechend andere Formate erhalten, damit sich der Benutzer innerhalb eines Textes schnell zurechtfinden kann.

Wörter, die hervorgehoben werden sollen, dürfen keinesfalls – wie gewöhnlich in Printmedien praktiziert – unterstrichen werden. Im Internet ist ein unterstrichenes Wort eine Kennzeichnung für einen Hyperlink. Ein Benutzer könnte in die Versuchung geraten, das Wort anzuklicken, um mehr zum Thema des unterstrichenen Wortes zu erfahren. Er würde enttäuscht feststellen, dass es sich nicht um einen Hyperlink handelt. Ziel der Web-Usability ist es aber, Erwartungen zu erfüllen und nicht zu enttäuschen, da nur zufriedene Benutzer die Site wiederholt besuchen.

Das Prinzip Mapping

Genauso wie es wichtig ist, nicht mit falsch gewählten Formaten falsche Erwartungen zu wecken, macht es Sinn, die Erwartungen des Benutzer positiv zu nutzen.

Wie im Abschnitt zum allgemeinen Produkt-Design schon erläutert, ist der Warenkorb der meisten Online-Shops dem ordinären Einkaufswagen nachempfunden. Genauso befinden sich in den meistens Online-Shops des Internet auch Links mit der Beschriftung „Zur Kasse“. So weiß der Benutzer, dass er bisher keine Verpflichtungen eingegangen ist und er erst an der Kasse seine Waren bezahlen muss.

Es ist also von Vorteil, die richtige Symbolik für die dahinter stehende Webseite auszuwählen. Ein Rettungsring symbolisiert Hilfe bzw. Rettung in der Not. Ein Haus deutet auf die Startseite hin. Ein Fernglas vermittelt: „Hier kannst du suchen.“

Ein Füllfederhalter symbolisiert das Unterschreiben einer Vereinbarung oder Vertrag, also eine Anmeldung usw.

Bei fortgeschrittenen Benutzern gilt es, Erwartungen zu unterstützen, die aus den Normen des Internets entstanden sind. Ganz im Sinne von Raskin (2001) sollte man als Designer auf die Lern-Erfahrung des Benutzers vertrauen, die sich in Intuition zeigen kann oder aber auch bewusst vorhanden ist. Es gilt also, altbewährte Standards zu verwenden, damit der Benutzer die Erfahrungen, die er mit den Standards gemacht hat, nutzen kann. Hier liegt aber auch die Gefahr, da es zu einem Entwicklungsstopp führen könnte, wenn jeder Designer nur bewährte Standards einsetzt (Raskin 2001). Es gilt also, einen guten Mittelweg zwischen Innovation und Altbewährtem zu finden.

Ein Browser-Standard, der nicht zu Gunsten des Designs geändert werden sollte, ist die Farbgebung von Hyperlinks im Fließtext. Sie sind meistens blau und unterstrichen, während schon besuchte Links eher violett sind. So weiß der Benutzer, ob er einen Link schon besucht hat, oder ob er ihn noch besuchen muss. Besucht der Benutzer eine Webseite, weil er hofft einen interessanten neuen Inhalt zu finden, wird er enttäuscht sein, wenn er bemerkt, dass er diesen Inhalt schon gesehen hat.

Instone (1997) fügt den Usability-Prinzipien noch den Punkt Fehlermeldungen hinzu. Danach sollten diese Meldungen nicht aus kryptischen Codes oder Texten bestehen, die dem Designer normalerweise den genauen Fehler aufzeigen, sondern aus umgangssprachlichen, für den User leicht verständlichen Texten bestehen. So dass dieser beim Auftreten einer solchen Fehlermeldung weiß, warum er diese Meldung erhalten hat.

Weiter zur Hauptseite Web-Usability oder zum Thema Schriftarten, Farben etc..