Schritt für Schritt zum Mobile-optimierten Webshop

von Gastbeitrag

Ein mobiler Webshop funktioniert nach anderen Prinzipien als ein klassischer Webshop. E-Commerce-Expertin Nicole Rüdlin, Leiterin der E-Commerce-Messe Internet World, hat die wichtigsten Gestaltungstipps zusammengetragen.

[f1]Wer nicht mit technischen Scheuklappen durch die Welt läuft, kommt um eine Erkenntnis nicht mehr herum: Die mobile Internet-Nutzung ist Alltag geworden. Wie aktuelle Zahlen der W3b-Studie "Mobile Commerce" belegen, hat sich der Anteil der Smartphone-Besitzer innerhalb von drei Jahren auf 65 Prozent fast verdreifacht. Erstmals ist der Prozentsatz der PC- und Smartphone-Besitzer unter den deutschen Internet-Nutzern gleich groß. Und der Anteil von Tablet-Nutzern hat sich binnen Jahresfrist auf 38 Prozent praktisch verdoppelt.

Für Web-Händler bedeutet das: Wer seinen Online-Shop nicht endlich für mobile Endgeräte optimiert, verliert Kundschaft. Doch einen idealen mobilen Webshop zu konzipieren, ist alles andere als leicht. Als größte Herausforderung stellt sich oftmals heraus: Der Bildschirm eines mobilen Endgeräts ist in der Regel klein, das Sortiment des Händlers in der Regel groß. Vom Wunsch, dem Kunden mobil auf einen Blick mit hübschen Produktfotos einen umfassenden Einblick in das eigene Sortiment zu ermöglichen, müssen Händler sich bei der Konzeption eines mobilen Webshops daher gleich vom Start weg verabschieden. Das gilt schon für die Startseite eines Webshops. Statt sie mit Angeboten zu überfrachten, lautet die Devise: Weniger ist mehr.

[hl]Unterschiedliche Einstiege für unterschiedliche Nutzungsszenarien[/hl]Im Idealfall gelingt es Händlern, die unterschiedlichen Nutzungsszenarien, über die ein Kunde in den mobilen Webshop kommt, schon auf der Startseite abzufangen. Zielgruppen, die einen konkreten Bedarf decken wollen, sollten schnell auf die Suchfunktion im Shop stoßen, um das Produkt ihrer Begierde schnell zu finden. Wer sich hingegen unterwegs oder auf dem heimischen Sofa langweilt und deswegen den Webshop in Stöberlaune besucht, sollte auf der Startseite eines mobilen Shops den Eindruck haben: "Hey, hier könnte ich für eine Weile unterhalten werden". Absolute Hoheit bei sämtlichen Designkonzepten eines mobilen Web-Shops hat allerdings die Ladezeit: Muss ein mobiler Nutzer länger als vier Sekunden warten, bevor die Startseite auf seinem Screen erscheint, ist er in der Regel schon an die Konkurrenz verloren.

[f2]Den Stein der Weisen bei der Gestaltung der idealen mobilen Startseite hat allerdings noch kein Händler so richtig gefunden. Viele mobile Websites wirken - zumindest auf einem Smartphone - so sexy wie das Inhaltsverzeichnis eines mittelprächtig gemachten Katalogs. Emotionalisierung? Fehlanzeige. Den Wunsch, sich hier unterhalten zu lassen oder durchs Sortiment zu stöbern, lässt kaum ein mobiler Webshop aufkommen. So beschränkt sich beispielsweise der E-Commerce-Riese Amazon auf der mobilen Shop-Startseite auf drei Bereiche: In einem Slider können angemeldete Kunden sich durch - verhältnismäßig willkürlich und dadurch irrelevant erscheinende - persönliche Empfehlungen oder Vorschläge, die auf den eigenen Interessen basieren, wischen. Dazu gibt es einen direkten Kauftipp von Amazon und ein prominent platziertes Suchfeld, über das Nutzer gleich gezielt nach ihren eigenen Interessen recherchieren können.

[f3]Zalando fokussiert den Blick des Nutzers auf der Startseite aktuell auf ein großflächig rotes Feld mit der Aufschrift "Sale", darüber wurde das Suchfeld platziert, darunter gibt es verschiedene Einstiegsmöglichkeiten in das Sortiment, unterteilt in Neuheiten, Bekleidung, Schuhe, Sport, Accessoires und Premium, jeweils für Damen, Herren und Kinder. Anhand des Geschenkeshops Cedon sieht man, welche Gefahren sich ergeben, wenn man seinen Webshop responsiv umsetzt, also so, dass sich der Shop automatisch an die entsprechenden Screengrößen des jeweiligen Endgerätes anpasst: Die einzelnen Sortimentseinstiege, die auf dem großen Bildschirm eines stationären Desktop-PCs ausgesprochen einladend und inspirierend wirken, sind auf einem kleinen Smartphone-Bildschirm kaum mehr zu erkennen. Dasselbe gilt für den responsiven Webshop von Zara. Zwar hebt sich die Startseite wohltuend von dem Gestaltungseinheitsbrei großer deutscher Webshops ab. Doch de facto sind zumindest in der unteren Screenhälfte die Bilder so klein, dass sie den Nutzer eher verwirrt als inspiriert zurücklassen. Darüber hinaus ist auch die Navigation am linken Bildrand kaum zu erkennen und ohne Vergrößerung des Seitenausschnittes selbst mit schlanken Fingern nicht zu bedienen.

[hl]Sortimentsüberblicksseite: Form follows Function[/hl]Dasselbe Dilemma wie auf der Startseite ergibt sich für mobile Web-Shops auch auf der Sortimentsüberblickseite. In der Regel ist das Sortiment zu breit, um es schlüssig auf einem Handybildschirm darstellen zu können. Händler konzentrieren ihre geballte Kreativität daher üblicherweise darauf, intelligente Sortimentskategorien zu finden und zu texten. Ein Blick auf die mobile Überblicksseite von Otto in der Kategorie "Blazer" zeigt: Der größte deutsche Online-Händler hilft seinen Kunden dabei, aus 969 verfügbaren Blazern den richtigen auszuwählen, indem er die Ergebnisse nach Topsellern, Preis oder Neuheiten sortieren lässt und zudem nach Farbe, Marke, Preis, Normalgrößen, US-Größen, Kurzgrößen, Bewertung, Stil oder Material filtert. Will die Kundin sich einen Blazer beispielsweise nach dem Stil anzeigen lassen, hat sie erneut die Qual der Wahl zwischen Basic, Casual, Elegant, Feminin, Festlich, Klassisch, Modisch, Sexy oder Sportlich. Richtig Spaß macht die Bedienung auf diese Weise nicht. Auf der anderen Seite ist ein guter Produktüberblick anders kaum möglich. Wohl auch deshalb halten es viele Shops mit dem guten alten Design-Prinzip: Form follows Function.

Mehr Raum für Kreativität lassen mobilen Web-Händlern ihre Produktdetailseiten. Dass hier alle wichtigen Informationen wie Produktdetails, Lieferzeiten und Versandkosten abgebildet werden sollten, versteht sich von selbst. Die Kernentscheidung in der Konzeption dreht sich eher um die Frage, welchen Raum man den Produktdarstellungen geben will. Der britische Modeversender Asos beispielsweise hat das Produktbild komplett in den Vordergrund gerückt. Alle relevanten Informationen öffnen sich erst nach einem Touch auf den Produkt-Info-Button. Auch die Auswahlelemente für Farbe und Größe sind unter dem Produktbild platziert. Mytheresa und Lodenfrey indes teilen die Bildschirmfläche in der Mitte und verwenden die eine Hälfte für das Bild, die andere für den Text.

[hl]Keine Stolpersteine beim mobilen Checkout[/hl]Ist ein Produkt dann wirklich im Warenkorb gelandet, heißt es, den mobilen Kunden möglichst elegant durch den Bestellprozess zu geleiten. Spätestens hier gilt: Designen Sie alle Bedienelemente für dicke Wurstfinger, um die Usability so hoch wie möglich zu halten. Im Warenkorb selbst sollten Händler ihren Kunden die Möglichkeit geben, Produktdetails wie Größe oder Anzahl noch zu ändern. Darüber hinaus sollten Verfügbarkeiten und Versandkosten auch an dieser Stelle nochmals explizit dargestellt werden. Auch die Call-to-Action-Buttons sollten prominent und gut bedienbar platziert sein und den Kunden zwei Möglichkeiten bieten: Zur Kasse gehen oder weitershoppen.

Wer auf den Button "Zur Kasse gehen" geklickt hat, sollte diesen Schritt nicht nachträglich bereuen, wenn er bei der Adresseingabe mit unzähligen unnötigen Abfragen konfrontiert wird. Die Abfrage von Geburtsdaten oder Quellen, über die der Nutzer auf den Shop aufmerksam wurde, ist hier fehl am Platz. Bestandskunden freuen sich, wenn sie als solche erkannt und mit vorausgefüllten Formularen begrüßt werden. Ein Fortschrittsbalken hilft mobilen Nutzern dabei, zu sehen, wie viele Schritte sie noch gehen müssen, bis ihr Einkauf wirklich abgeschlossen ist. Beim Zahlungsportfolio bietet sich Dienste als Zahlungsmittel an, die Kunden das Eintippen von Kreditkarten- oder Kontoinformationen ersparen. Und ängstliche oder noch unsichere Kunden können durch die Angabe einer Telefonnummer beruhigt werden, die per Touch aktiviert wird.

Insgesamt gilt: Wer die Konversionsrate im mobilen Webshop optimieren will, kommt nicht daran vorbei, verschiedene Varianten gegeneinander zu testen. Denn das eigene Bauchgefühl oder die eigenen Designvorstellungen stimmen nicht immer notwendigerweise mit dem Verhalten der Nutzer überein. Über A/B- oder multivariate Testings können sich Händler an das Ideal aber immer weiter herantasten und so auch mobile Kunden zu glücklichen Kunden machen.

[b] Zehn Tipps für bessere mobile Webshops[/b]
1. Gestalten Sie Ihren Online-Shop so, dass er auf allen Geräten sofort wiedererkennbar ist!

2. Platzieren Sie Ihre Suchfunktion prominent, nutzen Sie Autovervollständigung und arbeiten Sie mit Filtern!

3. Stellen Sie Ihre Call-to-Action-Buttons in den Vordergrund, gestalten Sie sie wurstfingerfreundlich und rufen Sie immer wieder zu Aktivitäten auf!

4. Gestalten Sie die Menüstruktur kurz und knapp! Bieten Sie Nutzern an jeder Stelle im mobilen Shop die Möglichkeit, unkompliziert zur Startseite zurückzukehren!

5. Vermeiden Sie, dass Benutzer zoomen müssen und stellen Sie Fotos im Vollbild dar!

6. Informieren Sie den Nutzer darüber, ob ihr Shop für Quer- oder Hochformat optimiert ist!

7. Gestalten Sie Eingabemasken effizient und übersichtlich. Beziehen Sie Drittanbieter ein, um Datenfelder schneller auszufüllen! Fragen Sie mobil nur Daten ab, die unbedingt erforderlich sind und prüfen Sie Formulare in Echtzeit, um Benutzer sofort auf fehlende Informationen hinzuweisen.

8. Verzichten Sie auf eine Registrierungspflicht, damit Kunden einkaufen können!

9. Bieten Sie Click-to-Call-Services für komplexere Angebote!

10. Informieren Sie Benutzer verständlich darüber, warum Sie seinen Standort analysieren möchten!

Buchtipp: Gerrit Heinemann: Der neue Mobile Commerce: Erfolgsfaktoren und Best Practises, Springer Gabler 2012