Usability Diplomarbeit

Usability Tests von acht großen amerikanischen Shoppingseiten haben gezeigt, dass 43 % aller Einkäufe fehlschlagen. Größtes Problem ist hierbei der Checkout-Prozess: Der Kunde hat die gesuchte Ware gefunden, fügt diese in den Einkaufswagen und entscheidet die Bestellung abzuschicken. Unglücklicherweise sind viele solche Prozesse schwierig gestaltet und ermöglichen somit keine konsequente Bestellaufnahme. Die häufigsten Probleme dabei entstanden beim Anlegen eines neuen Accounts sowie schlecht markierte Fehlermeldungen. Dabei endete der Einkaufsbesuch in einer Sackgasse: Der potentielle Kunde verlässt die Seite und kommt selten ein zweites Mal zu Besuch.

Diese Schilderung zeigt, dass Webseiten nicht nur eine statische Architektur haben, sondern sie bestehen auch aus dynamischen und interaktiven Abläufen. Unter einem interaktiven Ablauf sollen in diesem Zusammenhang diejenigen Prozesse verstanden werden, bei denen der Besucher nicht nur klickt um zu navigieren, sondern eine komplexere Aufgabe erledigt. Typische Beispiele sind hierfür Onlineeinkäufe von Produkten, die Eingaben zur Personalisierung einer Nachrichtenseite oder das Heraufladen von Fotos zur Entwicklung auf Papier.
Obwohl dies meist relativ einfache Anwendungen mit linearen Abläufen sind, entstehen hier oftmals Probleme, die im schlimmsten Fall zum Abbruch des Vorgangs führen. Es ist daher notwendig, diese Abläufe so intuitiv und verständlich wie möglich zu gestalten.

Die Methoden, die zu einer Modellierung solcher Szenarien verwendet werden, kommen meist aus dem User-Interface-Design für Software, in der es vor allem um die Entwicklung von Interaktion und Abläufen geht. So auch die Methode des Cognitive Walkthrough. Diese Methode wird in Punkt 7.4.1.2 näher beschrieben.
Zu Beginn des Interaktionsdesigns sollte der Hauptzweck der Interaktion feststehen und das wichtigste Szenario gefunden sein. Beim Cognitive Walkthrough werden die vorher auf Papier skizzierten Abläufe geistig durchgearbeitet und auf Vollständigkeit und Bedienungsfreundlichkeit geprüft.

Welche Schwierigkeiten und Fehler bei einer solchen interaktiven Anwendung entstehen können, soll wie schon oben bei den Formularen anhand eines Beispiels gezeigt werden.
Auf den Internetseiten des Automobilkonzerns Volkswagen findet der interessierte Besucher einen sogenannten Konfigurator. Hier kann er sein Wunschauto zusammenstellen und sich anschließend ein Finanzierungsangebot unterbreiten lassen.
Die Abbildung auf der nächsten Seite soll auszugsweise diesen Prozess für das Modell Sharan darstellen.
Auf der jeweiligen Homepage des einzelnen Modells steht ein Link mit der Betitelung “Fünf Schritte zum Wunschauto.” bereit (Nr.1 in folgender Abbildung). Was genau unter diesem Konfigurator zu verstehen ist, wird dem Besucher nicht erklärt.
Nach einem Klick erscheint ein PopupFenster mit der Überschrift “Der Sharan. Im Konfigurator”. Darunter findet man eine Erklärung zu den Eigenschaften des Fahrzeugs anstatt einer Erklärung des Konfigurators. Der Benutzer wird hier weiterhin im Unklaren gelassen, wie nun dieses Tool bedient wird und welche Vorteile es hat (Nr.2).
Auf der nächsten Webseite wird der Nutzer mit der Auswahl der Ausstattungen konfrontiert. Zur Auswahl stehen Basis, Comfortline, Highline und Trendline. Damit der Nutzer sich über die einzelnen Vorzüge der Ausstattungsvarianten informieren kann, steht ein winziger Button “i” bereit (Nr.3). Es öffnet sich wiederum ein kleines Fenster mit näheren Informationen (Nr.4). Einfacher wäre hier eine kurze Information unter der jeweiligen Auswahlmöglichkeit – der Platz wäre vorhanden gewesen. Mit einem Klick auf die Checkbox der jeweiligen Auswahlmöglichkeit und einem Klick auf Weiter im rechten Navigationsmenü wird der Nutzer zur Motorisierung geführt (Nr.5).
Sieben Möglichkeiten stehen hier zur Verfügung, darunter zum Beispiel Sharan Comfortline 4motion 1,8 l 5V turbo 110kw (150PS) 5 Gang. Diese werden zeilenorientiert angeboten, lediglich der Preis ist abgesetzt. Übersichtlich erscheint dies nicht. Die Bezeichnung “Sharan Comfortline” kommt in jeder Zeile vor und würde lediglich als Überschrift ausreichen. Hier wird die Datenbankstruktur, die hinter dem System steht deutlich. Doch Datenbankkonzepte sind nicht notwendigerweise benutzerorientiert. So fehlt eine Erklärung des Ausdrucks “4motion”, was mit einem einfachen Link auf dieses Wort leicht zu bewerkstelligen wäre.
Im Falle des VW-Konfigurators würde sich eine farbliche Gestaltung anbieten, wie dies beim grafischen Link auf der Homepage angedeutet wird (Nr.1). Die farbigen Quadrate könnten hier einen einzelnen Schritt darstellen.
Fährt man nun im Verlauf des Zusammenstellens des Wunschautos weiter, so fallen Inkonsistenzen im Bezug der zusätzlichen Informationen auf. Bei der Auswahl der Innenausstattungen stehen vier Sitzbezüge zur Auswahl. Die einzelnen Einträge sind Links zu einem neuen Fenster mit einer Abbildung der jeweiligen Muster (Nr.6). Dies ist eine gute Unterstützung, die Links sind allerdings nicht als solche erkennbar. Klickt man die jeweilige Checkbox davor an, so öffnet sich ebenfalls das Fenster mit der Abbildung des Musters. Bei den vorangegangenen Auswahlschritten passierte dies nicht. Die Einträge waren keine Links und beim Anklicken der Checkboxen öffnete sich kein Fenster. An diesen Stellen fehlt die Konsistenz der Bedienungsoberfläche.

Abbildung 28: Der VW Konfigurator im Überblick. [AM 16]

In den folgenden Menüs bei der Auswahl der Sonderausstattungen kommt eine weitere Variante hinzu: Die Auswahlmöglichkeiten sind Links zu Fotos der Varianten, rechts daneben findet sich ein Koffersymbol, welches beim Klick eine Liste des Zubehörs öffnet (Nr.8). Die Fotos wirken teilweise unnötig, wie z.B. die Ansicht des Schlüssels (Nr.7).
Kommt im Verlauf der Zusammenstellung eine nicht bestellbare Kombination zustande, so wird eine Fehlermeldung angezeigt, die gut deutlich markiert ist (Nr.9) Allerdings ist die Erklärung unzureichend und schickt den Benutzer bei einer weiteren falschen Auswahl zurück an die jeweilige Stelle der Ausstattung ohne hier einen Fehler anzuzeigen oder die Auswahl aufzuheben.
Hat der Benutzer sich nun durch alle Einstellmöglichkeiten gehangelt, so wird er zu einem Endbildschirm weitergeleitet, der die rechte Navigation der Konfiguration auflöst und stattdessen neue Auswahlmöglichkeiten zur Finanzierung, der Händlersuche oder einer Neuwagenbörse anzeigt. An dieser Stelle ist der Besucher fertig mit der Konfiguration, was allerdings nicht mit einer Erklärung gewürdigt wird (Nr.10).
Während des gesamtem Prozesses ist eine Kontaktaufnahme zu einem Händler oder Firmenvertreter nicht möglich, spezielle Fragen muss der Benutzer sich notieren und später abklären.
Der Navigationsbereich (z.B. Nr. 5 in obiger Abbildung) liegt rechts von den Auswahlmöglichkeiten und zeigt an, an welcher Stelle der Benutzer sich gerade befindet. Allerdings weiß der Nutzer nicht, wie viel Schritte er bis zum Ende der Konfiguration hat. Da dieses Tool allerdings einen linearen Ablauf vorweist, ist es für den Benutzer einfacher auf jeder Seite angezeigt zu bekommen, in welchen Schritt dieser sich gerade aufhält und wie viele er noch vor sich hat. Amazon zeigt beim Bestellvorgang dem Benutzer eine grafisch gestaltete Leiste am oberen Rand der Seite.

Abbildung 29: Der lineare Bestellvorgang bei Amazon. [AM 17]

Zusammenfassend treten folgende Probleme beim VW-Konfigurator auf:

• eine unzureichende Erklärung des gesamten Vorgangs
• Marketingsprache ohne weiterführende Erklärung
• Datenbankstruktur ist nicht benutzerorientiert
• fehlendes Navigationskonzept: Wie viele Schritte bis zum Ziel?
• Inkonsistenz der Links für weiterführende Informationen
• unzureichende Fehlermeldung bzw. -erklärung
• fehlender Kontakt während der Konfiguration

Diese Anwendung zeigt stellvertretend für viele ähnliche Prozesse, dass augenscheinlich Kleinigkeiten zu Schwierigkeiten und somit zum Abbruch des Prozesses führen können.

Neben den Texten gehören auch Grafiken und Fotos zu den Informationselementen einer Website. Die Auswahl von Farben, Schriftgrößen, Schrifttypen, Grafiken, Fotos und Icons sollen dabei das inhaltliche Verständnis