Einkaufen mit dem Smartphone - Was zeichnet einen guten mobilen Onlineshop aus?

Das Einkaufen mit dem Smartphone wird weltweit und auch bei den Deutschen immer beliebter. Doch was erwarten die Nutzer von einem mobilen Onlineshop? Wie sieht eine gute mobile User Experience aus? Mit diesen Fragen im Kopf gingen wir in unser Usability-Labor und befragten 10 Smartphone-Shopper zu dem Thema. Zudem kam der mobile Eyetracker zum Einsatz, um die Blickbewegungen auf dem Display zu messen.

Das Ergebnis: Viele Erkenntnisse, Good Practices und vor allem: 18 allgemeine Guidelines, die das mobile Shoppen für Ihre Nutzer zu einem Vergnügen machen.

In dem folgenden Auszug stellen wir Ihnen 6 Guidelines aus der Studie vor. Am Ende des Beitrags finden Sie einen Link zu unserer Download-Area, in der Sie die Studie mit allen Erkenntnissen und den 18 Guidelines kostenlos downloaden können.

Erwartungen & Anforderungen an mobile Onlineshops

Wer hätte es gedacht, die Nutzer sind anspruchsvoll. Um genau zu sein, haben sie dieselben hohen Erwartungen an mobile Onlineshops wie an deren Desktop Version. Sie erwarten keine abgespeckte Version mit weniger Funktionen und geringerem Informationsgehalt, sondern eine für das Smartphone optimierte Version mit vollem Funktions- und Informationsumfang. Die Herausforderung für mobile Onlineshops besteht also darin, dass volle Nutzererlebnis auf einem kleinen Bildschirm zu generieren.

Besonders häufig zücken die Nutzer ihr Smartphone um zu stöbern, z. B. um Wartezeiten zu überbrücken (Bus, Zahnarzt) oder aus Bequemlichkeit zu Hause vom Bett oder der Couch aus. Dabei wird das Smartphone einerseits direkt zum Bestellen oder als eine erste Info-Quelle benutzt, wobei das Shoppen dann zu einem späteren Zeitpunkt von einem anderen Gerät fortgeführt wird. Besonders wichtig hierfür: Merkzettel und Warenkorb sollten über mehrere Geräte persistent sein, so dass zurückgelegte Artikel später bequem wieder aufgerufen werden können.

Startseite - wie viel Werbung ist richtig?

Zu viele Banner: Der Nutzer wird mit Werbung und Navigationselementen überladen. Der Einstieg ins Sortiment per Suchfunktion ist nur schwer zu erkennen.

Im mobilen Bereich ist es von besonderer Bedeutung, den Nutzern einen möglichst schnellen Einstieg in das Sortiment zu ermöglichen, da die verfügbare Zeit häufig begrenzt ist (der Bus kommt, der Zahnarzt ruft). Wenn bis hierhin kein interessanter Artikel gefunden wurde, sinkt die Wahrscheinlichkeit, dass die Nutzer ihren virtuellen Einkaufsbummel später fortführen. Deshalb sollte der Einsatz von Bannern sparsam sein, um den begrenzten Platz auf dem Smartphone Bildschirm nicht zu vergeuden und somit den Einstieg in das Sortiment zu erschweren. Auf der anderen Seite wollen auch die Stöberer bedient werden, die sich inspirieren lassen wollen. Ein guter Banner kann in diesem Fall ein guter Einstieg sein und Stöberer zu interessanten Produkten leiten. Hier stellt sich die Frage: Wie viele Banner sind sinnvoll?

Guideline No. 1:
Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot, Produktempfehlung) platziert werden.


Navigation - Na logo ist das Logo wichtig!

Die Navigation im mobilen Einsatz stellt eine Herausforderung an jeden Interface-Designer: Einerseits erwarten die Nutzer den vollen Funktionsumfang inkl. Suchfunktion, Merkzettel, Warenkorb, Login, Kundenservice, Filialsuche, Versand- und Zahlungsinformationen, Sendungsverfolgung usw., auf der anderen Seite soll die Navigation möglichst wenig Platz einnehmen und dazu noch intuitiv bedienbar sein. Keine leichte Aufgabe.

In unserer Studie zeigt sich, dass hierbei das Logo von zentraler Bedeutung ist. Die Nutzer erwarten auf jeden Fall, dass sie hierüber wieder zur Startseite zurück gelangen können. Darüber hinaus kann das Logo sogar als Menü verwendet werden. Hierbei ist jedoch unbedingt darauf zu achten, dass der erste Link im Menü wieder zur Startseite führt und dass neben dem Logo ein kleiner Navigationspfeil eingeblendet ist, der die Funktionalität eines aufklappbaren Menüs illustriert. In unserem Test zeigt sich, dass die Nutzer die kleinen Pfeile bereits aus dem Desktop Bereich kennen und verstehen gelernt haben.

Guideline No. 2:
Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link zur Startseite fungieren (oder als Menü, gekennzeichnet durch einen Pfeil).


Gutes Beispiel für eine gelungene Startseite: Schneller Sortimentseinstieg, attraktiver Banner, Logo-Navigation und alles im sofort sichtbaren Bereich.

Blickverlauf: Von der Startseite bis zur Produktdetailseite

Als Beispiel für einen Blickverlauf - vom Aufruf der Startseite bis zur Produktdetailseite - haben wir ein Video aus der Studie ausgewählt:



Gleich zu Beginn ist schön zu sehen, wie schnell die Nutzerin auf der Startseite den Einstieg in das Sortiment findet und wählt. Während des Ladevorgangs schweift sie mit ihren Blicken über den Banner im oberen Bereich der Startseite.

Auf der Produktübersichtsseite ist es ihr möglich, viele Produkte schnell miteinander zu vergleichen und zu "scannen". Bereits 36 Sekunden nach Aufruf der Startseite ist sie auf einer Produktdetailseite. Ein sehr schönes Ergebnis!

Produktübersichtsseite - Punktlandung bei der Artikelbeschreibung

Eines vorweg: Werbung oder Banner sind für die Nutzer an dieser Stelle ein No-Go. Doch wie sieht es mit der Artikelbeschreibung aus? Welche Informationen wollen die Nutzer in der Übersicht erhalten, so dass sie flott zwischen den Produkten differenzieren können?

Entscheidend ist die Art der Artikel. Das Material von Kleidung ist z. B. ein wichtiges Merkmal für die Nutzer, allerdings erst auf der Produktdetailseite. Auf der Übersichtsseite sind hier Preis und Abbildung entscheidend. Bei elektronischen Geräten kann die Abbildung hingegen ruhig etwas kleiner sein, so dass Platz für die wichtigsten technischen Daten ist. Zu viele Informationen gehen jedoch zu Lasten der Übersichtlichkeit.

Als Faustregel gilt: Es sollten nur die wichtigsten Artikelmerkmale dargestellt werden, die nötig sind, um die Artikel schnell unterscheiden zu können. Bei den angezeigten Informationen ist gewissermaßen eine Punktlandung anzustreben. Preis und Produktabbildung sollten allerdings in jedem Fall angezeigt werden.
Fokussierte Darstellung: Preis,
Abbildung, Artikelname, Bewertungen
und das wichtigste technische
Unterscheidungsmerkmal (Prozessor)
erzeugen eine gute Vergleichbarkeit.


Guideline No. 3:
Es sollten nur die wesentlichsten Artikelmerkmale dargestellt werden, die nötig sind, um die Artikel differenzieren und sich für eines entscheiden zu können. Generell wichtige Artikelmerkmale sind: Preis(!), Produktabbildung, Artikelname, Verfügbarkeit, Bewertungen und sonstige wichtige Unterscheidungsmerkmale.


Produktdetailseite - alles auf einen Blick

Auch für die Produktdetailseite ist es wichtig zu wissen, welches die wesentlichen Artikelmerkmale sind, damit diese schnell kommuniziert werden können und möglichst im sofort sichtbaren Bereich der Produktdetailseite angezeigt werden.

Je besser die Nutzer auf einen Blick einschätzen können, ob sie ein Produkt kaufen möchten oder nicht, desto schneller können sie es in den Warenkorb legen und/oder sich auf die Suche nach einem anderen interessanten Artikel machen.

In diesem Zusammenhang zeigt sich, dass die Nutzer den Link zum Hinzufügen eines Artikels in den Warenkorb relativ weit oben erwarten. Ist der Warenkorb-Link zu weit unten platziert, müssen die Nutzer danach suchen und es geht Zeit verloren, die für die Suche nach weiteren Artikeln fehlt.

Guideline No. 4:
Der Bestellbutton sollte möglichst weit oben platziert werden, idealerweise in der Nähe des Preises und den Versandinformationen. In jedem Fall sollte er nach kurzem Scrollen sofort sichtbar sein.


Alles auf einen Blick: Produktabbildung, Preis, Lieferstatus, Artikelname, Bewertungen, Warenkorb-Link... nur die Info zu den Versandkosten fehlt.

Warenkorb - auch als Zwischenspeicher wichtig

Dem Warenkorb kommt im mobilen Bereich eine doppelte Bedeutung zu: Einerseits können über ihn Produkte bestellt werden (wer hätte das gedacht?), andererseits wird er bei der mobilen Nutzung auch gerne als eine Art Merkzettel eingesetzt.


Ärgerlich: Der Warenkorb wurde
zwischenzeitlich gelöscht, der
Nutzer muss die Artikel aufs
Neue suchen.


Auf diese Weise werden interessante Produkte zurückgelegt, die zu einem späteren Zeitpunkt wieder aufgerufen werden: z. B. um die Bluse und die Jeans einer Freundin zu zeigen. Oder um den Einkauf später von einem anderen Gerät aus fortzusetzen. Merkzettel und Warenkorb sollten deshalb möglichst lange zwischengespeichert werden und idealerweise über mehrere Geräte nutzbar sein.

Guideline No. 5:
Der Warenkorb darf auf keinen Fall bei Vorgängen wie Login, Registrierung, Auswahl weiterer Artikel etc. gelöscht werden. Außerdem sollten Merkzettel und Warenkorb persistent über mehrere Geräte sein.


Bestellprozess - Wer ist der schnellste?

Die wichtigste Regel lautet: Je schneller, desto besser!

Gerade im mobilen Bereich kann der Check-out nicht schnell genug gehen: Die Nutzer sind unterwegs und haben wenig Zeit oder empfinden die geforderten Eingaben auf dem kleinen Display als lästig.

Die Devise lautet: Machen Sie es Ihren Kunden so einfach und unkompliziert wie möglich! Payment-Provider wie PayPal, Amazon Payments oder Click&Buy können den Bestellprozess gerade für Gelegenheitskäufer enorm beschleunigen. Nicht jeder hat seine Login-Daten unterwegs dabei oder möchte sein 100. Benutzerkonto eröffnen. In unserem Test zeigte sich, dass die Nutzer teilweise sogar bereit wären einen kleinen Aufpreis zu bezahlen, wenn sie dafür mit einem vorhandenen Konto bezahlen könnten.

Guideline No. 6:
Payment-Provider bieten eine gute Möglichkeit, den Bestellprozess zu beschleunigen.


Studie zum kostenlosen Download

Wir hoffen Ihnen hat der kleine Auszug aus unserer "Mobile Shopping"-Studie gefallen.

Falls Sie neugierig auf die weiteren Ergebnisse sein sollten: Den vollständigen Studienband mit allen Guidelines, Erkenntnissen sowie vielen Good Practice-Beispielen können Sie jetzt kostenlos in der eResult Download-Area herunterladen: Studienband: Shoppen mit dem Smartphone - Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops

Sie wollen den Forschungsbeitrag zitieren? Gerne können Sie folgende Quellenangabe nutzen:


Kleinert, Ole (2014): Einkaufen mit dem Smartphone - Was zeichnet einen guten mobilen Onlineshop aus? In: Forschungsbeiträge der eResult GmbH, URL: http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/einkaufen-mit-dem-smartphone-was-zeichnet-einen-guten-mobilen-onlineshop-aus/

Sind Sie anderer Meinung?

Ihre Rückmeldung zu diesen Überlegungen und Thesen interessiert uns sehr.
Schreiben Sie uns!