10.1.3 Machen Sie Interaktionsmöglichkeiten intuitiv bedienbar

Hintergrund

Eine klare Benutzerführung nützt älteren, weniger interneterfahrenen NutzerInnen und Menschen, die unter erschwerten Bedingungen, mit assistiven Technologien im Internet einkaufen, besonders. Je weniger Unsicherheitsfaktoren es gibt, desto zufriedenstellender und erfolgreicher ist das Einkaufserlebnis.

Risikofreudige, neugierige NutzerInnen klicken auch auf Links und Buttons, deren Bedeutung ihnen nicht eindeutig klar ist, wenig interneterfahrene UserInnen scheuen sich aber davor unklare Interaktionen durchzuführen. Insbesondere Menschen, die mit assistiven Technologien arbeiten, benötigen einen möglichst effizienten Ablauf. Der Einkaufsprozess wird einfacher, wenn Wahlmöglichkeiten eingeschränkt und die nächsten möglichen Schritte klar, eindeutig und logisch sind.

Aus Usabilitygründen werden Interaktionselemente manchmal nicht in der richtigen Lesereihenfolge platziert, z.B. ein “In den Warenkorb legen“ Button oberhalb vom auszuwählenden Produkt. Dies kann sinnvoll sein, damit das zentrale Element, das angeklickt werden soll, oberhalb vom Fold bleibt und nicht gescrollt werden muss, um es zu finden. Für blinde NutzerInnen und TastaturnutzerInnen muss die Lesereihenfolge jedoch gewährleistet bleiben.

Maßnahmen

  • Stellen Sie Interaktionsmöglichkeiten optisch und strukturell in Kontext zum Produkt.
  • Machen Sie Interaktionsmöglichkeiten selbsterklärend und ohne Vorüberlegungen bedienbar.
  • Benennen Sie Buttons / Links / Formularelemente den Erwartungen entsprechend.
  • Fügen Sie inhaltlich unwichtige grafische Elemente (Rundungen, Buttonhintergrund…) über CSS ein, um blinden NutzerInnen eine übersichtliche HTML-Struktur zu bieten.
  • Geben Sie grafischen Buttons einen klaren Alternativtext.
  • Machen Sie Interaktionselemente groß, ev. farbig und kontrastreich.
  • Platzieren Sie Interaktionselemente in der richtigen Lesereihenfolge (z.B. „Kaufen“ oder „In den Warenkorb“ rechts neben oder rechts knapp unterhalb eines Produktblocks). Ev. kann das Attribut TABINDEX verwendet werden, wenn die Lesereihenfolge nicht korrekt ist.

Wer profitiert davon

  • Ältere NutzerInnen
  • Wenig interneterfahrene NutzerInnen
  • alle NutzerInnen von assistiven Technologien

Beispiel

Quelle Produktvergleich ohne Produktauswahl

quelle.at: Der Produktvergleich war für die ProbandInnen der Usertests nicht sofort intuitiv benutzbar. Sie klickten auf den prominenten Button „Produkt vergleichen“ ohne vorher zu vergleichende Produkte via Checkbox auszuwählen. Die Checkboxen links auf dem blauen Rahmen haben ev. zu wenig Interaktionscharakter.

Quelle Intuitivität

quelle.at: Das Interface von Quelle ist grundsätzlich gut bedienbar und übersichtlich. Die Links sind klar, es gibt große, gut sichtbare Buttons. Es gibt auch eine visuelle Hierarchie. Der Button „In den Warenkorb“ ist durch Größe, Positionierung und die rote Farbe der auffälligste, auch der „Zurück zur Übersicht“ Button ist dominanter als andere Links. Weniger wichtige Links können einfach ignoriert werden. Es gibt genügend Weißraum zwischen den Elementen und eine sinnvolle Abfolge.Unklar war hier nur die Anzeige der Verfügbarkeit. Eine Testperson wusste nicht, was die Zahl 24 hier bedeuten sollte. Sie überlegte, dass wohl noch 24 Stück, also genug, verfügbar seien. Eine Testperson klickte sich, als sie eine Produktdetailseite erreicht hatte, über den Link „Nächstes Produkt“ weiter zu den Folgeprodukten, statt wieder zurück zur Produktübersicht zu gehen. Sie fand diesen linearen Ablauf sichtlich einfacher und wegen der Großansicht des Produktes sympathischer und informativer.