Semantische Struktur
Klarere Überschriften, Inhaltsbereiche und semantische HTML-Elemente.
BACHELORARBEIT · DIGITAL BUSINESS
Der Einfluss WCAG-konformer Webgestaltung auf Konversionsrate und Nutzererlebnis im E-Commerce
Für meine Bachelorarbeit habe ich zwei funktionale E-Commerce-Testwebsites entwickelt und empirisch untersucht, wie sich eine WCAG-orientierte Gestaltung auf Nutzererlebnis und aufgabenbasierte Conversion auswirkt.
01
THE CHALLENGE
Kann Accessibility auch Business-Ziele unterstützen?
Barrieren in Produktsuche, Warenkorb oder Checkout können verhindern, dass Nutzer einen Kaufprozess erfolgreich abschließen.
Ziel meiner Arbeit war deshalb nicht nur zu untersuchen, ob eine barriereärmere Website Menschen mit Beeinträchtigungen unterstützt, sondern auch, ob daraus Nachteile für Menschen ohne Beeinträchtigungen entstehen.
“Inwiefern beeinflusst eine WCAG-konforme Webgestaltung im E-Commerce die Konversionsrate und das Nutzererlebnis von Menschen mit und ohne Beeinträchtigungen?
02
WHAT I BUILT
Zwei funktionale E-Commerce-Prototypen
Beide Websites wurden inhaltlich und strukturell parallel aufgebaut und simulieren einen Online-Shop für Smartphones und Smartphone-Zubehör.
✓
Startseite
✓
Produktübersichten
✓
Produktdetailseiten
✓
Filterfunktionen
✓
Warenkorb
✓
Simulierter Checkout
TECHNICAL SETUP
HTML
+
CSS
+
JavaScript
↓
E-Commerce Prototypes
↓
PHP Tracking
↓
Data
Hosting & Bereitstellung über IONOS
03
A VS. B
Was wurde in Website B verändert?
Website A diente als nur teilweise WCAG-konforme Vergleichsversion. Website B wurde gezielt anhand ausgewählter WCAG-2.2-Anforderungen optimiert.
WEBSITE A
WEBSITE B
Alternativtexte
Relevante Bilder und Icons wurden mit aussagekräftigen Alternativtexten versehen.
Kontraste
Kontraste von Texten, Buttons und wichtigen Interaktionselementen wurden verbessert.
Formulare
Formularfelder erhielten eindeutigere Labels und verständlichere Fehlermeldungen.
Tastatur
Zentrale Funktionen wurden auch ohne Maus bedienbar gemacht.
Focus States
Fokuszustände wurden sichtbar und nachvollziehbar gestaltet.
04
TEST → LEARN → IMPROVE
Vor der Hauptstudie: ein Pilottest
Fünf Personen mit Beeinträchtigungen testeten die optimierte Website B vor der eigentlichen Untersuchung.
Dadurch konnten konkrete Probleme identifiziert und vor dem Haupttest verbessert werden.
PROBLEM
Filterbedienung mit Screenreader
→
IMPROVEMENT
bessere Filterführung
PROBLEM
Fokuslogik
→
IMPROVEMENT
klarere Fokusführung
PROBLEM
Warenkorb-Overlay per Tastatur
→
IMPROVEMENT
bessere Tastaturbedienbarkeit
05
HOW I TESTED IT
Experimentelles 2×2-Design
Jede Person testete ausschließlich eine der beiden Website-Versionen.
WEBSITE A
WEBSITE B
Mit Beeinträchtigung
20
Teilnehmende
19
Teilnehmende
Ohne Beeinträchtigung
33
Teilnehmende
33
Teilnehmende
105
gültige Datensätze
06
USER JOURNEY
Ein realitätsnaher Kaufprozess
Smartphone finden
Smartphone zwischen 1.000 € und 1.500 € mit 256 GB finden.
Zubehör auswählen
Passende Schutzhülle unter 100 € finden.
Warenkorb
Beide Produkte in den Warenkorb legen.
Checkout
Simuliertes Formular ausfüllen und Bestätigungsseite erreichen.
07
DATA COLLECTION
Event Tracking
JavaScript-Tracking für Produktauswahl, Filter, Warenkorb, Checkout, Task-Erfolg und Abbruch.
Fragebogen
Usability, Orientierung, Vertrauen, wahrgenommene Barrierefreiheit und Ästhetik.
Offene Antworten
Wahrgenommene Barrieren, hilfreiche Elemente und Verbesserungsvorschläge.
08
KEY RESULTS
Was kam dabei heraus?
Das deutlichste Muster zeigte sich bei Menschen mit Beeinträchtigungen.
MIT BEEINTRÄCHTIGUNGEN
Website A
55%
→
Website B
89.5%
Die aufgabenbasierte Konversionsrate war auf Website B signifikant höher.
p = .031OHNE BEEINTRÄCHTIGUNGEN
81.8%
A
=
81.8%
B
Keine Verschlechterung der Conversion erkennbar.
SUS · MIT BEEINTRÄCHTIGUNGEN
57.50
A
→
85.92
B
Website B wurde deutlich positiver hinsichtlich Usability bewertet.
09
QUALITATIVE INSIGHTS
WEBSITE A
Häufig genannte Barrieren
- unklare Screenreader-Ausgaben
- Tastaturbedienung & Fokus
- Filter & Auswahlfelder
- Beschriftungen
WEBSITE B
Häufig genannte Stärken
- klare Struktur
- bessere Orientierung
- Übersichtlichkeit
- unterstützende Navigation
WHAT I LEARNED
Accessibility ist kein „Extra Feature“.
Das Projekt hat mir gezeigt, dass Accessibility Struktur, Interaktion, Usability und letztlich die gesamte User Experience beeinflusst.
Besonders spannend war für mich die Verbindung zwischen Webentwicklung, UX und wirtschaftlich relevanten Zielgrößen wie Conversion.
Good accessibility can improve the experience for those who need it — without making it worse for everyone else.