14.2.1 Bestätigen Sie Benutzeraktionen klar ersichtlich und nachvollziehbar

Hintergrund

Benutzeraktionen die insbesondere Änderungen am Warenkorb zur Folge haben (neue Waren hinzufügen, Anzahl einzelner Waren ändern, Waren aus dem Warenkorb löschen) sollten für den User transparent ablaufen. Nach erfolgreicher Aktion sollte für den User klar ersichtlich sein, dass

  • die Aktion erfolgreich durchgeführt wurde und
  • welche Aktion durchgeführt wurde.

Wichtig ist, dass die Aktionsbestätigungen visuell und strukturell (d.h. auch für Nicht-Sehende) klar ersichtlich sind, auch wenn die Aktion keinen Seiten-Reload oder nur ein Neuladen der selben Seite zur Folge hat.

Vielfach ist es für User nicht nachvollziehbar, dass z.B. Artikel in einen Warenkorb gelegt wurden, weil

  • keine Erfolgsbestätigung erfolgt (wenn die Aktion kein offensichtliches Neuladen der Seite nach sich zieht, z.B. durch Einsatz von AJAX), oder
  • die Erfolgsbestätigung auf der Seite untergeht, da sie weder prominent genug noch an einer passenden Stelle ersichtlich ist, oder
  • die Erfolgsbestätigungen nicht barrierefrei umgesetzt sind.

Maßnahmen

Aktionen am Warenkorb sollten durch eine oder mehrere der folgenden Maßnahmen bestätigt werden:

  • Visuell prominent platzierte Bestätigungen:
    • direkt beim Button über den die Aktion ausgelöst wurde, insbesondere wenn AJAX eingesetzt wird und der Fokus sich nicht verändert, da die Seite nicht neu geladen wird,
    • am Seitenbeginn im Headerbereich oder am Beginn des Contentbereichs, jedenfalls sollte der gewählte Ort immer konstant sein.
    • hervorgehoben z.B. durch farbliche Betonung in Verbindung mit Text oder einem von der Form her eindeutig verständlichen Icon oder durch auffällige Typografie. Farbe alleine als Informationsträger ist nicht ausreichend, da diese Information bei Farbfehlsichtigkeit unter Umständen verloren geht.
    • Zusammenfassung des Warenkorbinhalts prominent auf jeder Seite, sobald dieser Waren enthält.
  • Strukturelle Maßnahmen die Bestätigungen auch mit Screenreader und Braillezeile nachvollziehbar machen:
    • Einsatz von WAI-ARIA Live-Regions bei Änderungen, ohne dass die Seite neu geladen wird (AJAX, Javascript). WAI-ARIA ist eine neue Accessibility Technik, die Änderungen innerhalb einer Seite auch für Screenreader und Braillezeile erkennbar und auffindbar macht. Wird noch nicht von allen Browsern und Screenreadern unterstützt. Weitere Informationen unter: www.w3.org/WAI/intro/aria
    • Platzierung der Bestätigungsmeldung am Beginn des HTML-Codes der Seite (BODY) oder am Beginn des HTML-Codes im Contentbereich (beim Neuladen der Seite),
    • Bestätigungsmeldung im TITEL-Element der Seite (beim Neuladen der Seite),
    • Laden einer eigenen Bestätigungsseite oder Umleitung auf die Warenkorb-Seite,
    • Positionierung von Meldungen in einer Alert-Box oder einer Lightbox (modales Fenster). Diese Maßnahme erfordert Bestätigung durch die NutzerInnen, kann also nicht übersehen werden.

Anmerkung:

Die hier beschriebenen Maßnahmen betreffen nicht nur den Warenkorb, sondern alle wesentlichen Interaktionen – insbesondere wenn diese in einem anderen Interaktionsprozess (z.B. Durchstöbern des Online-Shops) eingebettet sind.

Wer profitiert davon

  • Blinde und stark sehbehinderte Menschen, die Bestätigungsmeldungen auf einer Seite leicht übersehen können.
  • Alle User – es ist eine Grundregel der Usability, dass jede wesentliche Aktion in adäquater Form bestätigt wird.

Beispiel

Amazon Warenkorb Fehlermeldung

amazon.de: Fehlermeldungen bei Amazon werden am Anfang des Contentteils eingeblendet, ohne zusätzlichen Hinweis beim Formularteil, den sie betreffen. Es gelang bei einem Test z.B. nicht, einen gespeicherten Artikel dem Einkaufswagen hinzuzufügen, weil er nicht mehr verfügbar war. Die dementsprechende Fehlermeldung wurde nicht wahrgenommen, weil sie außerhalb des fokussierten Formularbereichs lag.