Usability und Barrierefreiheit in Online-Shops

Begriffsabgrenzung

Obwohl die Begriffe auf den ersten Blick die gleiche Bedeutung haben, unterscheiden sie sich grundlegend. Bei Usability ist es das Ziel den Nutzer optimal durch die Website zu führen. Der Begriff kann mit Benutzerfreundlichkeit gleichgesetzt werden. Das Ziel der Barrierefreiheit ist es hingegen, die Website für möglichst viele Nutzer zugänglich zu machen.

Usability

Wichtig bei Usability ist das Web-Design. Dabei steht die Übersichtlichkeit der Seite, eine klare und selbsterklärende Navigation, sowie schnelles Laden der Seite im Fokus.

Was bringt Usability?
Diverse Studien belegen, dass Unternehmen, in denen die Usability ihrer Produkte einen hohen Stellenwert haben, überdurchschnittliche Unternehmenserfolge verzeichnen - sowohl bezüglich der Kundenzufriedenheit als auch auf die Umsatzentwicklung bezogen. Kunden äusserten in diversen Befragungen, dass die Benutzerfreundlichkeit ihren Kaufentscheid ebenso mitbeeinflusst wie beispielsweise der Preis. Daher lässt sich schlussfolgern, dass eine stete Usability-Optimierung sich auszahlt.

Besonderheiten im Onlineshop
Unterscheidung von Konsumenten-Typen
Lead-Forward: Kunden, welche sich gezielt durch den Shop bewegen und den Kauf schnellstmöglich abzuwickeln. Anspruch an Shop: strukturierte Produktlisten, einfache Navigation.
Lean-Backward: Kunden, welche sich von den Produkten und Schnäppchen inspirieren lassen. Anspruch an Shop: leicht auffindbare Schnäppchen, möglichst auf der Startseite platziert.

Es gilt beim Aufbau eines Onlineshops die Bedürfnisse beide Arten von Kunden zu berücksichtigen um möglichst viele Personen anzusprechen.

Usability-Regeln

Ein Übersichtliches und eindeutiges Design ist das Ziel einer benutzerfreundlichen Website. Der ganzen Webshop soll durch ein einheitliches Design verknüpft werden. Um ein solches Layout zu gestalten gibt es Richtlinien an die man sich wenden kann.

Startseite	klare Beschreibung des Zwecks der Website Von jeder Seite aus mit einem Klick zugänglich sein Firmenlogo für Wiedererkennungswert
Schrift / Text	eindeutiger Titel informative Überschriften genug grosse Schriftgrösse Kontrast zwischen Text und Hintergrund Zu viel Fliesstext vermeiden Verwendung von Fremdwörtern vermeiden
Design	Responsive Layout Passende Fotos und Grafiken zum Inhalt Verwenden von Komplementärfarben zu viele verschiedene Farben vermeiden Seite nicht überfüllen, “Weniger ist mehr”
Navigation und Verlinkungen	Verständliche, aussagekräftige Wörter verwenden Dem User anzeigen, wo er sich befindet Alle Infos zum Unternehmen am gleichen Ort besuchte Links markieren Bei wegführenden Links neues Browserfenster öffnen internen Links im selben Browserfenster öffnen
Servicefunktionen	Eine Übersicht zu “Was ist neu?” auf der Seite Suchfunktion Sprachwahl/Registration/Login rechts oben Warenkorb rechts oben und gut Sichtbar FAQ einfache Kaufabwicklung Möglichkeit von Direktkauf ohne sich zu registrieren möglichst wenige Schritte beim Bestellprozess

“Weniger ist mehr” ist ein guter Leitfaden für die Erstellung eines Website-Design.

Wie kann man Usability testen?

Zwei wichtige Faktoren zur Messung der Benutzerfreundlichkeit
Bounce Rate: Wie viele Kunden haben vor dem Abschliessend des Einkaufs die Seite wieder verlassen? Ziel: möglichst tiefe Rate.
Conversion Rate: Wie viele Kunden haben einen Kauf abgewickelt? Ziel: möglichst hohe Rate.
Die Raten können mit Hilfe von diversen Tools und Tests einfach eruiert werden.

Es gibt unzählige Möglichkeiten die Usability eines Online-Shops zu testen. Die Wahl der Methode ist abhängig von der Fragestellung (was soll getestet werden?), der Zielgruppe (wer soll den Shop nutzen?), etc. Folgende eine kleine Auswahl von Methoden:

1. Fokusgruppen
   Die Fokusgruppe besteht aus einem möglichst genauen Abbild der Zielgruppe. Im Rahmen einer geführten Gruppendiskussion werden Optimierungsvorschläge und Ideen zur Weiterentwicklung diskutiert. Dazu wird ein Moderator und verschiedene Techniken eingesetzt.
   
2. Onsite-Befragung
   Besucher von Webseiten werden während der Nutzung gebeten an einer Online-Befragung zur Nutzung des Shops teilzunehmen.
   
3. Synchroner Usability-Test
   Diese Art von Test wird von einem Leiter parallel mit mehreren Testpersonen gleichzeitig durchgeführt. Die Tests finden online statt, die Probanden sind dazu nicht physisch anwesend.
   
4. Asynchroner Usability-Test
   Probanden testen die Webseite in ihrer gewohnten Umgebung. Ausgewertet werden Mausklicks, Navigationspfade und die Auswertung der Testpersonen.
   
5. Expertenbasierte Evaluation
   Experten testen zunächst einzeln den Online-Shop anhand von Usability-Guidelines, indem er spezifische Aufgaben löst. Anschliessend werten die Experten gemeinsam ihre Erkenntnisse aus und erstellen einen Verbesserungskatalog.
   
6. Labor
   Anwender werden im Labor durch speziell gestellte Szenarien geführt und deren Verhalten zielgruppenspezifisch ausgewertet. Währenddessen werden die Probanden von Experten beobachtet und deren Reaktionen festgehalten (evtl. gefilmt). So können Verbesserungsmöglichkeiten festgestellt werden.
   
7. Blickverlaufsmessung
   Mit Hilfe von Eye-Tracking-Tools können die Augenbewegungen der Nutzer aufgezeichnet und anschliessend ausgewertet werden. Dadurch kann erschlossen werden, welche Elemente wie oft beachtet werden und welche gar nicht wahrgenommen werden.
   
8. Web-Controlling
   Ein webbasiertes Tracking-Tool zeichnet auf, woher welcher Benutzer auf welchen Bereich der Webseite zugreift, wie lange er dort verweilt und welche Kategorien er sich ansieht. Durch die permanente Messung können auch Abbrüche ausgewertet werden, beispielsweise weil ein Link nicht funktioniert oder eine Seite nicht sauber geladen wird.
   
9. Multivariate Tests
   Verschiedene Elemente der Webseite werden mehrfach verändert und verschieden kombiniert parallel getestet und anschliessend der Erfolg der Kombinationen ausgewertet. Dazu stehen spezielle Tools und Software zur Verfügung.
   

Barrierefreiheit

Ziel der Barrierefreiheit ist es das Internet für alle gleichermassen zugänglich zu machen. Das Erstellen einer solchen Seite ermöglicht es dem Webshop Betreiber eine möglichst Grosse Anzahl an Kunden anzusprechen und hilft bei der Optimierung der Google Platzierung, da die Barrierefreiheit auch Einwirkungen auf den Quellcode hat.

Im Zentrum der Barrierefreiheit stehen vor allem User mit einer physischen Einschränkung wie zum Beispiel Blindheit, Gehörlosigkeit oder motorischen Behinderungen. Auch ältere Menschen mit wenig Interneterfahrung profitieren von der Barrierefreiheit. Im Grundsatz gilt alle Konsumenten können von Einschränkungen betroffen sein, wodurch die Barrierefreiheit für alle von grosser Bedeutung ist.

Rechtliche Bedingungen
Bisher sind keine verpflichtenden Rechte für einen barrierefreien Webauftritt von kommerziellen Anbietern erlassen worden. Für Webseiten von Bund, Kantonen und Gemeinden ist jedoch die Sicherstellung von Barrierefreiheit Pflicht. Das internationale Gremium W3C hat dazu eine Checkliste ausgearbeitet, eine Zusammenfassung davon folgt im Kapitel Barrierefreiheit-Regeln. Diese Richtlinien hat der Bund ebenfalls übernommen. Die Umsetzung dieser Regeln wird vom Gremium und der Regierung empfohlen und bringt nachgewiesen wirtschaftliche Vorteile. Im UNO- und EU-Raum wird die gesetzliche Verpflichtung des Einhalt der Barrierefreiheit um die Inklusion von Menschen mit Beeinträchtigungen voran zu treiben.

Barrierefreiheit-Regeln

Die vier Prinzipien
Um eine Barrierefreie Website zu gestalten ist es von Vorteil sich an die Richtlinien von W3C zu halten. Dazu gehören diese vier Prinzipien.

1. Wahrnehmbar
   Die Inhalte müssen so dargestellt werden, das sie vom Nutzer wahrgenommen werden können.
   
2. Bedienbar
   Der Nutzer muss durch die Website navigieren können.
   
3. Verständlich
   Die Benutzung und Informationen der Website müssen verständlich sein.
   
4. Robust
   Die Website muss anpassungsfähig und mit verschiedenen Geräten zugänglich sein.
   

In der folgenden Tabelle wurde die Checkliste des W3C zusammengefasst. Auch das Einhalten der Usability-Regeln hilft die Barrierefreiheit zu gewährleisten.

Alternativtexte	Bei Bilder, Videos oder Audios sollten Alternativtexte zur Verfügung stehen verwendung von Html-Tags kurz und prägnant
Technische Massnahmen	eingeschränkte Verwendung von alten Technologien, wie z.b. Flash, um Software Fehler zu verhindern  Alle Geräte (Mobile, Tablet, PC) berücksichtigen
Bedienbarkeit	sollte ohne Maus auch möglich sein Videos und Audios sollten eine Play und Pause Option haben ankündigen von Pop-ups / öffnen von neuen Fenstern
Design	leserliche Schriftgrösse, auch Menschen mit Sehschwäche berücksichtigen genug grosse Kontraste zwischen Vordergrund und Hintergrund Farben verwenden, welche von Farbenblinden Menschen unterschieden werden können Grafiken müssen auch in textlicher Form zugänglich sein

Weiterführende Links

Weiterführende Links Online Marketing Praxis: Tipps & Trends zur Web-Usability. https://www.onlinemarketing-praxis.de/web-usability

Webspotting: Usability und Barrierefreiheit in Onlineshops. Paul Schädlich. https://www.webspotting.de/e-commerce/usability-und-barrierefreiheit-in-onlineshops/

Shoptreiber-Blog: 14 Kriterien für Ihren barrierefreien Online-Shop. Sabrina Wulff. https://shopbetreiber-blog.de/2008/07/15/14-kriterien-fuer-ihren-barrierefreien-online-shop/

Admin.ch: P028 - Richtlinien des Bundes für die Gestaltung von barrierefreien Internetangeboten. https://www.isb.admin.ch/isb/de/home/ikt-vorgaben/prozesse-methoden/p028-richtlinien_bund_gestaltung_barrierefreie_internetangebote.html

Webdesign Essentials: WCAG 2.0 PRINZIPIEN. https://www.webdesign-essentials.ch/topics/die-vier-prinzipien

Access for all: Die WCAG 2 sind der internationale Standard für barrierefreie Web-Inhalte. https://www.access-for-all.ch/ch/richtlinien-barrierefreiheit.html