Einkaufen im mobilen Web: Design und Usability von zehn der größten deutschen Online Shops

Auf der Gartenparty der Freunde spontan die Grillzange bestellen, die einem so gut gefällt?

Was vor wenigen Jahren noch eine extravagante Vorstellung war, ist heute für jeden Besitzer eines Smartphones umsetzbar – zumindest theoretisch. In der Praxis wird der Nutzer den Versuch schnell wieder einstellen, wenn die anfängliche Begeisterung für das Grillwerkzeug durch die schlechte Usability des mobilen Online Shops gedämpft wird. Dass immer mehr Kunden mit Smartphone und Tablet einkaufen wollen, belegen die aktuellen Zahlen der großen Online Shops.

Im Februar meldete zum Beispiel Zalando, dass bereits rund 35 % des gesamten Traffic der Website von mobilen Endgeräten stammt.

Mobiles Einkaufen ist ein Erlebnis zweiter Klasse

Wie praktikabel das Einkaufen im mobilen Web mit Smartphone und Tablet tatsächlich ist und welche Best Practices und Konventionen sich beim Design von mobil optimierten Online Shops herausbilden, haben wir von Anstrengungslos in Kooperation mit dem ECC Köln in unserer Studie „Mobile Web Commerce Benchmark“ untersucht.

Die Benchmarkstudie analysiert Design und Usability von zehn der reichweiten- und umsatzstärksten deutschen Online Shops auf Basis von Expertenevaluation, Testkauf und vergleichender Designanalyse. Die der Prüfung zugrunde gelegten Kriterien beschreiben ergonomische Grundanforderungen der mobilen Geräteklassen (z. B. für die Fingerbedienung) sowie zentrale Nutzungsanforderungen bei der Produktrecherche, der Abwicklung des Bestellprozesses etc.

Eine hohe Abdeckungsquote war daher aus unserer Sicht für alle untersuchten großen Online Shops zu erwarten, und wäre bei einem vergleichbaren Test auf PC und Notebook sicherlich auch erreicht worden.

Übersicht MWCB Studienergebnisse: Mobile Shopping ist bei vielen großen Anbietern noch optimierungsbedürftig

Übersicht MWCB Studienergebnisse: Mobile Shopping ist bei vielen großen Anbietern noch optimierungsbedürftig


Das Ergebnis der Untersuchung fiel jedoch – trotz der Auswahl an prominenten Online Händlern – ernüchternd aus: Bei den Smartphones schafften nur drei Anbieter (Baur, H&M und Zalando) eine weitgehend ordentliche Bewertung. Bei den Tablets fanden sich überhaupt nur zwei Anbieter im Test (Baur und H&M), die umfassende Optimierungen für die Tablet-Nutzung unternommen haben.

Die Online Shops von Esprit und Tchibo „mogelten“ sich ins Mittelfeld der Tablet-Usability, indem sie auf Sieben-Zöllern den Smartphone-Auftritt ausspielen. Das Layout wirkt dadurch zwar übertrieben groß, deutlich besser zu bedienen als die nicht-optimierten Desktop-Auftritte der Konkurrenz sind die Shops aber allemal.

Alle anderen Online Shops im Test beschränken sich auf bestenfalls marginale Optimierungen wie z. B. eine Bühne, die Wischgesten unterstützt. Gerade auf kleinen Tablets (wie iPad Mini oder Nexus 7) ist die Bedienung klassischer Desktop-Auftritte aber durch mangelnde Lesbarkeit und zu kleine Interaktionsflächen sehr mühselig und nur mit ausgiebigem Zoomen zu bewerkstelligen.

Shoppen auf kleinen Tablets (Nexus 7): Desktop ohne Anpassung bei Zalando, Smartphone-Auftritt bei Tchibo, für Tablets optimiert bei H&M

Shoppen auf kleinen Tablets (Nexus 7): Desktop ohne Anpassung bei Zalando, Smartphone-Auftritt bei Tchibo, für Tablets optimiert bei H&M


Das am häufigsten problematische Untersuchungsfeld bei der Smartphone-Usability war „Service und Support“. Sieben von zehn Online Shops bieten auf Smartphones nur stark eingeschränkte Service- und Hilfefunktionen. Immerhin noch bei vier von zehn Online Shops fiel die Bewertung des Untersuchungsfeldes „Zugang und Zuführung“ (geräteübergreifende Nutzung sowie Zugang über URL und Google Suche) mangelhaft aus. Weitere häufig problematische Themen waren Fingerfreundlichkeit, Navigation der Produktkategorien, Filterfunktionen und die Gestaltung von Eingabeformularen.

Die vergleichende Analyse brachte aber auch positives über den Stand mobilen Designs für Smartphones zutage. Bei einigen Aspekten mobiler Online Shops haben sich inzwischen deutliche Konventionen und Best Practices herausgebildet, u. a. ist dies zu beobachten bei dem Design von Startseite und persistentem Seitenrahmen, der Shop-Navigation sowie der Struktur der Produktseite. Als Beispiel für die positive Entwicklung kann stellvertretend der Smartphone-Auftritt von Otto stehen, dessen Redesign ausführlich im Artikel „Mobile OTTO 2.0“ besprochen wird.

Eingabeformulare auf Smartphones

Bei der Gestaltung von Eingabeformularen wird teilweise zugunsten der Übersicht auf zusätzliche Beschriftungen (technisch: Label) der Eingabefelder verzichtet. Stattdessen dienen nur in das Feld eingebettete Hinweise zur Orientierung des Nutzers (technisch: Placeholder). Am Beispiel der Eingabemaske für neue Versandadressen bei Amazon lässt sich leicht erkennen, dass ein solches Formulardesign schnell zu Verwirrung und Fehleingaben führen kann.

Im Beispiel wurde der Nachname in das Feld für den Firmennamen eingegeben. Im ausgefüllten Formular ist der Fehler nicht mehr ersichtlich. Auch die nur schwache visuelle Differenzierung zwischen leeren und gefüllten Formularfeldern (siehe rechts das Feld „Bundesland/Kanton“) ist problematisch.

Problematisches Formulardesign bei Amazon

Problematisches Formulardesign bei Amazon


Ein weiteres Problem ist die Behandlung von fehlerhaften Eingaben. Generische Fehlermeldungen am Anfang langer Formulare arten für Nutzer in Suchspiele aus. Ein Beispiel für eine positive Entwicklung ist Conrad: Zwar ist die Fehlermeldung noch immer generisch und wenig hilfreich. Conrad hat aber auf unseren getweeteten Tipp hin sehr schnell die fehlende Markierung der mandatorischen Anrede ausgebessert.

Optimierung bei Conrad: Die fehlende mandatorische Anrede wird jetzt markiert

Optimierung bei Conrad: Die fehlende mandatorische Anrede wird jetzt markiert


Mobiles Design von Filterfunktionen

Problematisch ist häufig auch noch die Eingrenzung der Produktauswahl. Lange Produktlisten müssen im kleinen „Guckkasten“ des Smartphones mühsam erscrollt werden. Der Suchbegriff „Grillzange“ liefert im mobilen Webauftritt von Amazon 4.865 „beste“ Ergebnisse. Das Beispiel zeigt, dass effiziente Möglichkeiten zum Einschränken des Angebotes auf relevante Produkte kritisch sind für die mobile Gebrauchstauglichkeit von Shops mit großen Sortimenten. Filter sind daher auch im mobilen Kontext eine wichtige Unterstützungsfunktion.

Beim Interaktionsdesign von mobilen Filtern werden aber zum Teil grundsätzliche Anforderungen missachtet. Beispiel Amazon: Der Link zum Aufruf dieser eigentlich zentralen Funktion ist zu unprominent geraten. Bereits gesetzte Filter werden nicht unmittelbar sichtbar ausgewiesen. Baurs Filterfunktionen dagegen sind so gestaltet, dass Funktion und aktuelle Konfiguration schnell aufgefasst werden können.

Filter für Preis und Farbe gesetzt bei Amazon und bei Baur

Filter für Preis und Farbe gesetzt bei Amazon und bei Baur


Beim Interaktionsdesign für die Filterkonfiguration machen es sich die Shops oft noch zu leicht. Ein Markenfilter mit mehreren hundert Einträgen ist als normale HTML Auswahlliste nicht praktikabel. Beim Beispiel Zalando hat der Nutzer auf einem iPhone nur 5 von 278 Einträgen im Überblick. Die restlichen Marken muss er sich durch viel Wischen „erarbeiten“. Die Darstellung von Amazon bringt schon mehr Überblick. Bei 400 Einträgen wären aber auch hier zusätzliche Navigationsfunktionen von Nöten.

Wischmarathon Markenfilter bei Baur, Zalando und Amazon

Wischmarathon Markenfilter bei Baur, Zalando und Amazon


Darstellung von Produktlisten

Ein ungelöstes Designproblem, bei dem ich persönlich besonders gespannt auf überzeugende Lösungsansätze bin, ist die übersichtliche Darstellung komplexer Produkte, deren wesentliche Charakteristika sich nicht allein über das Produktbild kommunizieren lassen (wie Unterhaltungselektronik oder Haushaltsgeräte). Ein Beispiel hierfür ist die Darstellung von Samsung TV-Geräten. Cyberport, Amazon und notebooksbilliger.de schaffen es nicht, eine Listendarstellung zu präsentieren, in der der Nutzer ohne Mühe das 46-Zoll-Modell herausfinden kann.

Suchbild mit Samsung TV: Wo ist der 46 Zöller? (Cyberport, Amazon, notebooksbilliger.de)

Suchbild mit Samsung TV: Wo ist der 46-Zöller? (Cyberport, Amazon, notebooksbilliger.de)


Mehr Details zum Studiendesign, zum Abschneiden der einzelnen Shops und zu Best Practices finden sich in der Executive Summary unserer Studie, die kosten- und registrierungsfrei heruntergeladen werden kann. Unter dem Hashtag „#mwcb_i“ twittern wir kleine Erkenntnisse aus der Studie und andere Infos zum Thema Mobile Shop Design.

5 Gedanken zu „Einkaufen im mobilen Web: Design und Usability von zehn der größten deutschen Online Shops

  1. Hans Albu Sanmiguel

    Hallo Zusammen,
    da befinden wir uns noch in der Steinzeit. Mobile Geräte erfordern zielgerichtete Konzeption und nicht den selben Bauchladen am Desktop. Es Bedarf an neue Erlebnis-Konzepte und eine neue Heransgehensweise die wirklich begeistert. Ein Gutes Besipiel: http://www.tsovet.com – Hier handelt sich um eine Responsive-Lösung aber zumindestens die Formulare sind kurz gehalten. Es kommt dazu dass die Gewichtung der Inhalte auf Tablets anders sein muss als die auf Smartphones was technisch “ pain in the ass“ ist. Danke für den Beitrag!

    Grüße
    hans

    Antworten
  2. Pingback: TapTalk, Telefónica, SinnerSchrader Mobile.

  3. Pingback: ANIMOD – So macht Reisen Spaß | Panajotas Newsticker vom 05.06.2014

  4. Pingback: Links der Woche: eBay-Studie hält Suchmaschinenwerbung für nutzlos, geklaute eBay-Passwörter gefährden andere Portale » Take-me-to-auction

  5. Pingback: Top-Themen der UX-Welt in den letzten 30 Tagen - Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.