14.2.2 Die Bearbeitung des Warenkorbs und die dazu notwendigen Aktionen müssen intuitiv sein

Hintergrund

Wenn die Artikelauswahl im Warenkorb korrigiert werden muss, ist bei manchen Shops eine manuelle Aktualisierung nötig, also z.B. Änderung der Stückzahlangabe und zusätzlich das Drücken eines Aktualisierungsbuttons, um die Kaufsumme neu zu berechnen. Bei anderen Shops werden aktualisierte Formulardaten automatisch neu geladen.

Im ersten Beispiel ist eine klare Nutzerführung nötig – z.B. durch große, visuell auffällige Buttons. Der Fokus sollte nach dem Neuladen der Information wieder an die Stelle der Interaktion springen. Dies ist sowohl für blinde NutzerInnen als auch bei Tastaturbedienung wichtig.

Bei AJAX basierten Seitenaktualisierungen muss auch für Screenreader NutzerInnen klar sein, dass eine Aktualisierung erfolgt ist.

Maßnahmen

  • Benennen Sie Buttons / Links eindeutig, verwenden sie nicht gleichaussehende Buttons für verschiedene Aktionen.
  • Setzen Sie den Fokus nach dem Neuladen der Seite wieder an die Stelle der Interaktion.
  • Informieren Sie auch UserInnen ohne visuelle Oberfläche von der erfolgreichen Änderung von Daten.
  • Machen Sie deutlich, wenn noch eine Aktion, z.B. Klicken eines Buttons, nötig ist.
  • Halten Sie die logische Tabreihenfolge in Formularen ein, d.h. z.B. ein „Aktualisieren“-Button sollte nach dem Feld für die Artikelanzahl folgen und nicht davor stehen.

Wer profitiert davon

  • Blinde NutzerInnen
  • TastaturnutzerInnen
  • NutzerInnen mit wenig Kauferfahrung

Beispiele

Hausfreund Formularproblem zuviele Artikel wieder löschen statt Korrektur

hausfreund.at: Hier wird der gleiche Button verwendet, um Waren zum Einkaufskorb hinzuzufügen, und um den Einkaufskorb zu aktualisieren. Bei unseren User-Tests verstand eine Probandin nicht, dass sie die fälschlich zuviel gewählten Artikel (7 Stück Persil) im Warenkorb wieder korrigieren kann. Sie löschte diese daher aus dem Warenkorb und suchte diese danach neu.Der Button für den Warenkorb zeigt zwar einen erklärenden Tooltipp bei mouse-over, ist aber ohne diesen nicht klar als Aktualisierungsbutton erkennbar. Wenn man nur die Stückzahl ändert, wird die Berechnung nicht aktualisiert. Erst wenn man den gelben Button betätigt, ändert sich der Preis. Diese Art der Umsetzung hat sich in den User-Tests als zu unauffällig erwiesen.

Amazon Warenkorb Lesereihenfolge

amazon.de: Die Lesereihenfolge im Amazon Warenkorb ist nicht korrekt. Der Aktualisieren-Button befindet sich oberhalb von den Warenkorbdaten, nicht darunter. Wenn weiter unten die Stückzahl geändert wird, muss weiter oben der Aktualisieren-Button gedrückt werden. Auch die Buttons, um gespeicherte Einträge zu löschen oder zwischen Einkaufswagen und Merkliste zu verschieben, stehen in der Tabellenzellenreihenfolge vor dem Produkt statt danach. Die Tabelle ist außerdem semantisch nicht korrekt ausgezeichnet.