Konsistenz, Nutzerkontrolle, Fehlervermeidung – Ein Online-Shop unter der „Heuristik-Lupe“

T-Shirt

In meinen letzten Beiträgen habe ich mich dem Thema Usability-Heuristiken gewidmet und regelmäßig eine Heuristik anhand verschiedener Beispiele von Websites erläutert. Im Vordergrund stand dabei die Vorstellung der einzelnen Heuristiken und weniger die einzelnen Websites. Im Normalfall dienen Heuristiken aber natürlich gerade dazu, einzelne Anwendungen zu beurteilen. Genau das möchte ich zum Abschuss meiner Beitragsreihe heute tun – als Beispiel hierfür habe ich den Shop spreadshirt.de mal in vor dem Hintergrund verschiedener Heuristiken unter die Lupe genommen.

Bei spreadshirt.de handelt es sich um einen Anbieter, bei dem der Kunde selbst Produkte (z. B. T-Shirts, Tassen, Mützen) individuell selbst gestalten kann. Ein solcher Konfigurator bietet eine Vielzahl von Möglichkeiten und Funktionalitäten zur individuellen Gestaltung eines Produktes – und diese sollten für die Nutzer bestmöglich zu handhaben sein, damit er auch zum Ziel kommt und die Bestellung abschickt und den Shop bestenfalls wieder aufsucht.

Die Nutzerfreundlichkeit der Seite lässt sich mit Hilfe von Usability-Heuristiken sehr gut beurteilen. Zu diesem Zweck habe ich mir bei der Betrachtung der Seite verschiedene Fragen gestellt, die jeweils eine oder mehrere zusammenhängende Heuristiken näher betrachten.

Macht es mir die Website einfach, Funktionen zu erkennen und zu erlernen? Sind die Funktionen konsistent gestaltet?

Im Grunde beinhalten diese Fragen gleich zwei Heuristiken – die der „Erlernbarkeit“ und der „Konsistenz“. Dass diese beiden Richtlinien oftmals zusammen wirken, wird sich im Folgenden zeigen.

Auf den ersten Blick erscheint die Gestaltung von Spreadshirt sehr übersichtlich und leicht zu erlernen. Oberhalb sind die einzelnen Konfigurationsmöglichkeiten sichtbar aufgeführt (Produkt auswählen, Motiv auswählen, Text hinzufügen und Foto hochladen). Der Nutzer (in diesem Fall: ich) kann sich also direkt beim Einstieg in die Seite einen Überblick über die Möglichkeiten verschaffen, die er hat, um ein Produkt zu gestalten.

Startscreen

Startscreen des T-Shirt-Konfigurators bei spreadshirt.de

Dennoch steckt der Teufel im Detail: Leider sind nicht alle Icons durchgehend mit einem Mouse-Over-Effekt ausgestattet. Da Icons nicht immer unbedingt selbsterklärend sind, bleibt mir also nur „Learning-by-Doing“ übrig – zudem muss ich mir merken, welche Funktion sich hinter welchem Icon verbirgt.

Weiterhin fällt auf, dass das Icon für „Rückgängig“ (linke Abb., oben rechts) fast genauso gestaltet ist wie das Icon, mit dem ich mein Motiv „drehen“ kann (rechte Abb. oben links). Diese Inkonsistenz kann schnell zu Fehlhandlungen des Nutzers führen und erschwert zugleich die Erlernbarkeit, ich mir für das fast gleiche Symbol unterschiedliche Aktionen merken muss, die mit diesem verbunden sind.

Icons

Leider fehlt bei den meisten Icons ein Mouse-Over mit entsprechendem Erläuterungstext. Die Nutzer müssen sich die Bedeutung der Symbole durch ausprobieren erschließen. Das Symbol für „drehen“ und „rückgängig“ ist nahezu identisch.

Hilft mir die Website dabei, Fehler zu vermeiden? Unterstützt sie mich bei der Behebung von Fehlern?

Beide Fragen können an dieser Stelle eindeutig mit „Ja“ beantwortet werden. So werde ich z. B. bei der Auswahl eines bestimmten T-Shirt-Typs sofort darauf hingewiesen, dass ich in der Platzierung meines Druckmotivs auf bestimmte Einschränkungen achten muss. So wird von vorne herein vermieden, dass ich das Motiv falsch positioniere.

Fehlermeldung 1

Hinweis bei Auswahl eines bestimmten T-Shirts: Hier muss ich bei der Positionierung des Motivs aufpassen!

Positioniere ich ein Motiv dennoch außerhalb des Druckbereichs, so erhalte ich unmittelbar eine eindeutige Fehlermeldung, mit der ich sofort eine Korrektur vornehmen kann.

Fehlermeldung 2

Die Fehlermeldung gibt mir unmittelbar Rückmeldung zu einer Fehleingabe

Ermöglicht die Website mir eine gute Nutzerkontrolle? Kann ich Schritte rückgängig machen oder Aktionen abbrechen?

Auch hier lautet die Antwort beide Male „Ja“.

Der Wechsel zwischen einzelnen Konfigurationsschritten ist jederzeit möglich, ich muss mich nicht an eine vorgegebene Reihenfolge halte und kann z. B. auch erst das Motiv und dann das T-Shirt auswählen. Die Kontrolle über das Vorgehen liegt also bei mir.

Und auch wenn mir ein Fehler unterläuft, ist mein Entwurf nicht verloren: Wie bereits dargestellt, kann ich alle Aktionen über ein Icon rückgängig machen. Und auch Fehleingaben werden gut abgefangen. So klickte ich zum Ausprobieren (es gibt ja kein Mouse-Over) auf ein Icon, dessen Funktion mir unklar war. Es zeigte sich: Dieses war dazu da, meinen bisherigen Entwurf zu löschen und die Konfiguration neu zu starten. Hier erfolgte jedoch vorab eine Abfrage, dank derer ich meinen Entwurf „retten“ konnte.

Hinweis

Glück gehabt: Durch eine Zwischenabfrage bleibt mir mein Entwurf enthalten.

Dieses Beispiel zeigt sehr deutlich, dass die Nicht-Einhaltung einer Heuristik (fehlende Erläuterungen von Icons per Mouse-Over) durchaus durch die Einhaltung einer anderen Heuristik (Bestätigung vor Ausführung einer Aktion) abgefangen oder zumindest abgemildert werden kann.

Kann ich bestimmte Prozesse auf der Seite individualisieren um die häufige Nutzung für mich einfacher zu gestalten?

Auch dies ist durchaus möglich – hierfür muss ich mir allerdings einen Account anlegen. In diesem kann ich meine konfigurierten Produkte speichern und bei Bedarf einfach erneut bestellen. Auch eigene Fotos kann ich hier hinterlegen, um sie beim nächsten Mal nicht noch einmal hochladen zu müssen.

Gesamturteil: Gut, doch nicht ohne Optimierungspotenzial

Die Gesamtbewertung zeigt, dass spreadshirt.de bereits viele der hier betrachteten Heuristiken erfüllt. Dennoch gibt es vor allem bei der Konsistenz und der Erlernbarkeit noch Verbesserungsmöglichkeiten, die die Nutzung der Seite noch einfacher und unkomplizierter machen könnten.

Heuristiken als wichtiger Anhaltspunkt für Bestandsaufnahme

Sicher müssen für eine umfassende Bewertung noch weitere Heuristiken und Richtlinien herangezogen werden. Dies würde jedoch den Rahmen dieses Beitrags sprengen. 🙂 Es zeigt sich jedoch, dass allein durch die Anwendung einiger wesentlicher Heuristiken schon eine gute Einschätzung der Stärken und Schwächen einer Anwendung getroffen werden kann. Diese Erkenntnisse können dann wiederum in einem nächsten Schritt anhand eines Nutzertests oder oder Expert Reviews noch weiter gewichtet und konkretisiert werden.

2 Gedanken zu „Konsistenz, Nutzerkontrolle, Fehlervermeidung – Ein Online-Shop unter der „Heuristik-Lupe“

  1. Pingback: Handelskraft – Das E-Commerce und Social-Commerce-Blog - Emotionen als wahre Kauftreiber – 5 Lesetipps der Woche

  2. tony

    Hallo Andrea,

    vielen Dank für die Einblicke aus Sicht eines Users und Usability-Experten.

    Als Mitglied des Entwicklerteams des T-Shirt-Designers bei Spreadshirt bin ich über konstruktives Feedback und solche Analysen sehr dankbar. Die Ähnlichkeit des „Rückgängig“-Symbols sowie des Icons für die Rotation einer Konfiguration sind bisher nicht aufgefallen — das werden wir ändern.

    Die Notwendigkeit der Tooltips haben wir in einem Usertest herausgefunden und bereits implementiert. Die Version wird Anfang des nächsten Jahres live gehen.

    Noch eine Ergänzung zu der Frage „Kann ich bestimmte Prozesse auf der Seite individualisieren um die häufige Nutzung für mich einfacher zu gestalten?“: Ein Account ist für das Speichern und Laden der Produkte nicht zwingend notwendig. Die Produkte für nicht angemeldete Benutzer werden in einem Cookie temporär gespeichert, und bei einem späteren Anmeldeprozess dem Benutzerkonto zugeordnet.

    Wie gesagt, vielen Dank für das positive Feedback — wir werden weiterhin versuchen, unsere Plattform so nutzerfreundlich wie möglich zu gestalten.

    Tony

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *