Mobile Online-Shops: Tipps und Guidelines Teil 1/2 – Startseite, Navigation, Produktübersichtsseite

Immer häufiger wird darüber berichtet, die Nachfrage nach mobilen Online-Shops wachse stetig, insbesondere in der jüngeren Zielgruppe, den Digital Natives. Doch im Vergleich zur Desktop-Version gibt es für die Konzeption einer mobilen User Experience noch vergleichsweise wenig konkrete Guidelines.

Deshalb möchte ich die Gelegenheit nutzen, um weitere Tipps, Good Practices und Guidelines zur Konzeption von mobilen Online-Shops mit Ihnen zu teilen, die wir in unserer Grundlagenstudie zum Thema Mobile Shopping entwickelten – von der Startseite bis zum Bestellprozess.

Startseite als Einstieg in das Sortiment

Im mobilen Bereich ist es besonders wichtig, den Nutzer möglichst schnell zu einem Produkt zu führen, für das er sich interessiert. Wenn der Bus vorher kommt oder die Sprechstundenhilfe den wartenden Patienten aufruft, wird das mobile Shoppen vorerst unterbrochen. Wenn bis dahin kein interessantes Produkt gefunden wurde, sinkt die Wahrscheinlichkeit, dass der Nutzer später wieder in den Shop zurückkehrt.

Daher ist eine der zentralen Konzeptionsfragen für die Startseiten mobiler Online-Shops „Wie kann ich meine Nutzer möglichst schnell zu einem Produkt führen, das sie wirklich interessiert?“. Aufgrund des begrenzten Platzes auf den kleinen Displays folgt dann häufig die Frage: „Soll ich die Suchfunktion oder die Kategorienauswahl bei der Darstellung priorisieren?“

Abb. 1: Priorisierter Einstieg in das Sortiment über eine Suchfunktion (Otto). Gut bei großer Produktauswahl.

Abb. 1: Priorisierter Einstieg in das Sortiment über eine Suchfunktion (Otto). Gut bei großer Produktauswahl.

Abb. 2: Einstieg über eine Kategorienauswahl, gut geeignet zum Stöbern (H&M).

Abb. 2: Einstieg über eine Kategorienauswahl, gut geeignet zum Stöbern (H&M).

Für Produktsortimente, die vor allem durchstöbert und entdeckt werden wollen, bietet sich der Einstieg über eine Kategorienauswahl an (z. B. Kleidung). Für Vollsortimentler, die auf eine große Anzahl an unterschiedlichen Produktkategorien kommen (z. B. ein Kaufhaus), ist dagegen ein Einstieg über die Suchfunktion besser geeignet, den Nutzer schnell zum gewünschten Produkt zu führen.

Guideline: Je nach eigener Nutzergruppe und Produktsortiment sollte entweder der Einstieg über eine Kategorienauswahl oder eine Suchfunktion priorisiert werden.

Bühne sollte alle Nutzer ansprechen

Abb. 3: Gute Bühne: Durch den Inhalt wird ein breites Publikum angesprochen (Otto).

Abb. 3: Gute Bühne: Durch den Inhalt wird ein breites Publikum angesprochen (Otto).

Nicht immer gibt es einen konkreten Kaufwunsch, wenn ein Online-Shop mit dem Smartphone aufgerufen wird – nicht selten geschieht dies als Zeitvertreib, wie unsere Studie zeigt. Deshalb ist es wichtig – mit einem attraktiven Produkt oder Angebot auf der Startseite – solche Nutzer einzufangen und Anreize zu schaffen, den Shop zu durchstöbern.

Dass es selten von Vorteil ist, mehrere Produkte auf der Startseite eines mobilen Online-Shops anzuteasern, hatte ich bereits in einem vorherigen Beitrag zu diesem Thema geschrieben (Das wollen Smartphone-Nutzer: 18 Guidelines für Ihren mobilen Onlineshop (Teil 1)). Umso wertvoller ist eine Bühne, die mit ihrem Inhalt eine große Nutzergruppe anspricht: Etwa ein Sales-Angebot („10 % auf alles“) oder neue Produkte („Die neue Sommerkollektion ist da“). Durch das Bewerben eines speziellen Produktes (Rasierer XY -5 %) kann sich die Reichweite der durch den Teaser angesprochenen Nutzer mitunter deutlich reduzieren.

Guideline: Die Startseite sollte mit attraktiven Inhalten gefüllt sein und zum sofortigen Erkunden des Sortiments einladen. Entscheidend hierfür sind eine gute Bühne und ein einfacher und ansprechender Sortimentseinstieg.

Hauptnavigation: kompakt und trotzdem fingerfreundlich

Die Navigation auf einem Smartphone erfordert sowohl eine fingerfreundliche Bedienung, als auch eine kompakte Darstellung, um dem eigentlichen Seiteninhalt genügend Platz zu lassen – wer es schafft, diese beiden Gegensätze zu kombinieren, hat einen großen Schritt in Richtung mobiler Usability getan.

Hierzu ein paar Praxistipps:

  • Darstellung: Das Hauptmenü sollte entweder über das Logo oder ein Symbol mit drei horizontalen Strichen erreichbar sein. Achten Sie darauf, dass der Button groß genug ist, damit er mit dem Finger bedient werden kann (Minimum sind 7x7mm).
  • Platzierung: Auch wenn die Bedienung mit dem Daumen etwas darunter leidet – die Nutzer erwarten die Hauptnavigation oben und nicht unten.
  • Inhalt: Alle wichtigen Funktionen müssen über die Hauptnavigation schnell erreichbar sein (Startseite, Suchfunktion, Kategorienauswahl, Warenkorb, Merkzettel, Login…).

 

Abb. 4: Die Navigation am Ende der Seite ist zwar daumenfreundlich erreichbar – aber nicht erwartungskonform platziert (redcoon).

Abb. 4: Die Navigation am Ende der Seite ist zwar daumenfreundlich erreichbar – aber nicht erwartungskonform platziert (redcoon).

Abb. 5: Die großen Buttons sind auch mit großen Fingern noch gut zu treffen (Tchibo).

Abb. 5: Die großen Buttons sind auch mit großen Fingern noch gut zu treffen (Tchibo).

 

Produktübersichtsseite: Attraktive Produktpräsentation statt Ablenkung

Abb. 6: Die attraktive Produktübersicht lädt zum Stöbern ein (Tchibo).

Abb. 6: Die attraktive Produktübersicht lädt zum Stöbern ein (Tchibo).

In unserer Grundlagenstudie zeigte sich klar, dass Ablenkungen auf der Produktübersichtsseite – insbesondere Werbehinweise –von den Nutzern als störend empfunden werden. Sie möchten an dieser Stelle in Ruhe im Sortiment stöbern und ein Produkt auswählen und reagieren deshalb empfindlich auf Ablenkungen.

Guideline: Sowohl in der Kategorienauswahl als auch in der Produktübersicht sollten keine Werbehinweise (z. B. „Unsere Empfehlung“, „Topseller“) angezeigt werden.

Stattdessen empfiehlt es sich, die Nutzer mit einer attraktiven und übersichtlichen Produktpräsentation zu überzeugen. Ein tolles Beispiel für eine gelungene Produktpräsentation ist Tchibo: Die Artikel der Themenwelten werden in einer ansprechenden, katalogartigen Übersicht dargestellt und verlocken geradezu zum Stöbern nach Artikeln, von denen man vorher noch nicht wusste, dass man sie haben will (Abb. 6). Ideal um sich unterwegs die Zeit zu vertreiben!

Den Nutzer schnell zu einem Produkt führen, das ihn wirklich interessiert

Ein Ziel bei der Konzeption eines mobilen Online-Shops sollte sein, den Nutzer möglichst schnell zu einem für ihn interessanten Produkt zu führen. Dadurch erhöht sich nicht bloß die Wahrscheinlichkeit, dass der Nutzer etwas kauft, sondern auch, dass er wiederkehrt, falls er unterwegs unterbrochen wurde. Ausschlaggebend hierfür ist eine fokussierte, intuitive und attraktive Nutzerführung.

Im zweiten Teil des Blogbeitrags (erscheint kommende Woche) werde ich darauf eingehen, worauf bei der Konzeption der Produktdetailseite, des Warenkorbs und dem Bestellprozess zu achten ist, damit das geweckte Interesse an einem Artikel in einen Kauf verwandelt wird.

Kompaktes Know-How zur professionellen Konzeption von mobilen Websites, Online-Shops und responsive Websites

Gerne möchte ich Sie in diesem Zusammenhang auch noch auf den Workshop Mobile-Clinic @ eResult auf der diesjährigen Informationsarchitektur Konferenz in Berlin (22.-24. Mai) aufmerksam machen. Gemeinsam mit meiner Kollegin Anja Weitemeyer (Managing Partner und Senior UX-Consultant bei eResult) stellen wir spannende Erkenntnisse der User Experience Forschung – eingesetzt zur Optimierung mobiler Anwendungen und von Responsive Webdesigns – vor. Ich würde mich freuen, wenn auch Sie dabei wären! Als spezielles Angebot haben wir noch 50€-Rabatt-Codes für den Workshop zu vergeben, bitte schreiben Sie mich bei Interesse einfach an.

…und falls Sie neugierig auf weitere Ergebnisse der Grundlagenstudie geworden sind: Den vollständigen Studienband mit allen Guidelines, Erkenntnissen sowie vielen Good Practice-Beispielen können Sie kostenlos in der eResult Download-Area herunterladen: Studienband: Shoppen mit dem Smartphone – Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops

Portraitfoto: Ole Kleinert

Ole Kleinert

User Experience Consultant

Alumni-eresult GmbH

Bisher veröffentlichte Beiträge: 10

Schreibe einen Kommentar

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