“Form follows function” – Schritt für Schritt zum mobil optimierten Webshop
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 zusammengefasst.
Das Nutzungsverhalten hat sich durch die mobilen Endgeräte stark verändert. Wer seinen Online-Shop nicht endlich für mobile Endgeräte optimiert, verliert Kundschaft. Doch ein mobiler Webshop funktioniert nach anderen Prinzipien als ein klassischer Webshop. Als größte Herausforderung stellt sich oftmals der Bildschirm heraus: Der Screen eines mobilen Endgeräts ist in der Regel klein, das Sortiment des Händlers oftmals groß. Welche Konsequenzen hat dies für einen mobil optimierten Webshop? Welche Stolpersteine gibt es und was gilt es dabei zu beachten?
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.
Kaufentscheidung »to go«
Obwohl die ersten Smartphones bereits viele Jahre vor den ersten Tablet-PCs verkauft wurden und ihre Verbreitung heute deutlich größer ist, werden Tablets von ihren Besitzern zumeist aktiver, intensiver und vielseitiger eingesetzt – das gilt auch und insbesondere für den Bereich der Kaufvorbereitung. So informiert sich mehr als jeder zweite Tablet-User auf seinem Gerät regelmäßig über Produkte und Preise. Unter den Smartphone-Besitzern beträgt dieser Anteil mit 32 Prozent nur knapp ein Drittel.
Auch Produktbewertungen anderer User werden wesentlich häufiger per Tablet abgerufen, nämlich von ca. jedem dritten Tablet-Besitzer. Bei den Smartphone-Usern sind dies nur halb so viele (ca. jeder sechste Smartphone-Besitzer). »Echte« mobile Anwendungen, die vorzugsweise auf Smartphones genutzt werden (wie das Scannen von Barcodes oder der direkte Preisvergleich beim Einkaufen), weisen dagegen eine vergleichsweise geringe Nutzungsintensität auf: Rund jeder zehnte Smartphone-Besitzer bedient sich regelmäßig dieser Möglichkeiten.
Für Webhändler bedeutet das: Wer seinen Online-Shop nicht endlich für mobile Endgeräte optimiert, tut sich in Zukunft schwer. Doch einen idealen mobilen Webshop zu konzipieren, ist alles andere als leicht. 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 von Beginn an verabschieden. Das gilt schon für die Startseite eines Webshops. Statt sie mit Angeboten zu überfrachten, lautet die Devise: Weniger ist mehr.
Der Einstieg entscheidet
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 Webshops 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.
Den Stein der Weisen bei der Gestaltung der idealen mobilen Startseite hat allerdings noch kein Händler so richtig gefunden. Viele mobile Webseiten 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.
Musterlösungen aus der Praxis
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.
Sortimentsüberblickseite: Kreativ oder strukturiert?
Dasselbe Dilemma wie auf der Startseite ergibt sich für mobile Webshops 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 Webhä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.
Keine Stolpersteine beim mobilen Checkout
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 PayPal als Zahlungsmittel an, da Kunden sich somit das Eintippen von Kreditkarten- oder Kontoinformationen sparen. Und ängstliche oder noch unsichere Kunden können durch die Angabe einer Telefonnummer beruhigt werden, die per Touch aktiviert wird.
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 aber immer weiter an das Ideal herantasten und so auch mobile Kunden zu glücklichen Kunden machen.
Angebote zur richtigen Zeit am richtigen Ort
Generell sollte man seine Zielgruppen gut kennen, um für seine Smartphone- und Tablet-Nutzergruppen attraktive und damit erfolgreiche mobile Webshops zu konzipieren. Shopping im Mobile Web wird immer vielschichtiger, nicht allein durch die zunehmende Verbreitung von Smartphones und Tablets. Der nächste Trend zeichnet sich bereits am Horizont ab. „Wearables“ in Form von Datenbrillen, Smartwatches und Fitnessarmbändern stehen Prognosen zufolge mittelfristig vor dem Durchbruch. Analysten von CCS Insights sagen einen Anstieg der Wearables-Verkaufszahlen auf bis zu 135 Millionen Geräte im Jahre 2018 voraus. Zum Vergleich: Im vergangenen Jahr sollen es gerade einmal 9,7 Millionen gewesen sein. Mittelfristig stellt das Multiscreen-Zeitalter Webshops vor die Herausforderung, die Kunden stets zur richtigen Zeit am richtigen Ort und am richtigen Gerät mit passenden Angeboten zu bedienen.
Info-Kasten:
Zehn Tipps für bessere mobile Webshops
Online-Shopper sind längst mobil geworden: Smartphone raus, Produkt suchen, Preise vergleichen und auch gleich mobil kaufen. Jedoch herrscht dabei oft Käufer-Frust statt Einkaufs-Lust, denn viele Online-Shops sind auf dem Smartphone alles andere als angenehm zu bedienen. Wo Onlinehändler ansetzen können, um den eigenen Onlineshop für mobile Endgeräte und den M-Commerce zu optimieren, zeigt der Zehn-Punkte-Überblick der Internet World Messe:
- Gestalten Sie Ihren Online-Shop so, dass er auf allen Geräten sofort wiedererkennbar ist!
- Platzieren Sie Ihre Suchfunktion prominent, nutzen Sie Autovervollständigung und arbeiten Sie mit Filtern!
- Stellen Sie Ihre Call-to-Action-Buttons in den Vordergrund, gestalten Sie sie wurstfingerfreundlich und rufen Sie immer wieder zu Aktivitäten auf!
- 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!
- Vermeiden Sie, dass Benutzer zoomen müssen und stellen Sie Fotos im Vollbild dar!
- Informieren Sie den Nutzer darüber, ob ihr Shop für Quer- oder Hochformat optimiert ist!
- 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.
- Verzichten Sie auf eine Registrierungspflicht, damit Kunden einkaufen können!
- Bieten Sie Click-to-Call-Services für komplexere Angebote!
- Informieren Sie Benutzer verständlich darüber, warum Sie seinen Standort analysieren möchten!
Der vorliegende Text entstammt der dritten Ausgabe des kostenlosen Online-Händlermagazins shopanbieter to go.
Die vollständige Ausgabe mit allen Artikeln, kann hier kostenlos als PDF-Datei heruntergeladen werden.
Bitte beachten: Der Original-Artikel im Magazin, enthält möglicherweise hilfreiche Grafiken, Abbildungen oder Charts, die hier nicht dargestellt werden.
![]() |
Nicole Rüdlin, Leiterin der E-Commerce Messe Internet World, ist im ständigen Austausch mit Branchenexperten und kundschaftet nach Trendthemen in den Bereichen Online-Marketing, E-Commerce, Mobile Business und Social Media. Seit sechs Jahren ist die Diplom-Betriebswirtin (FH) als Themenscout für die Veranstaltungen der Neuen Mediengesellschaft Ulm mbH tätig, seit 2011 leitet sie den Bereich.
Webseite: http://www.internetworld.de |