Praxisguide
In diesem Praxisguide stellen wir grundlegende Anforderungen an mobile Shops aus Conversion-Sicht vor. In diesem ersten Dokument thematisieren wir allgemeine Anforderungen, die für alle Seitentypen gelten.
Autor
Julian Kleinknecht
War der Anteil an mobilen Nutzern vor zwei Jahren noch unter 5 %, nutzen heute immer mehr Kunden ihr Smartphone, um sich von unterwegs über Produkte oder Dienstleistungen zu informieren oder Preisvergleiche anzustellen. Ein Trend, der in den nächsten Jahren weiter zunehmen wird. [1] Seit April 2015 trägt auch Google diesem Trend Rechnung. Websites, die nicht für Mobilgeräte optimiert sind, müssen Einbußen in Rankings hinnehmen.
Ist Ihr Online-Shop darauf schon vorbereitet und über mobile Endgeräte schnell und einfach zugänglich? Oder müssen Ihre Kunden lange Ladezeiten hinnehmen und zum Lesen der Informationen jedes Mal heran zoomen?
In diesem ersten Praxisguide thematisieren wir allgemeine Anforderungen, die für alle Seitentypen gelten. Im nächsten Kapitel zeigen wir, wie sich die Nutzung von Online-Shops auf mobilen Geräten vom Desktop unterscheidet. Daraus leiten wir diesen Anforderungen ab:
In weiteren Praxisguides beschreiben wir dann diese Elemente mobiler Shops:
Wer heute einen Online-Shop über mobile Endgeräte betritt, hat grundsätzlich dieselben hohen Erwartungen, wie an die Desktop-Version. Smartphone-Nutzer erwarten, die gleichen Funktionen und Informationen vorzufinden wie auf dem Desktop.
Die Rahmenbedingungen bei der mobilen Nutzung sind jedoch andere als beim Desktop:
Während Desktop-Nutzer mit der Maus navigieren, benutzen mobile Nutzer dafür das Touchscreen ihres Smartphones. Da die Bedienung mit dem Fingern erfolgt, müssen alle Elemente ausreichend groß und mit genügend Abstand zueinander angelegt sein.
Gleichzeitig steht aber aufgrund der kleineren Displays deutlich weniger Platz für die Präsentation der Inhalte zur Verfügung als im Desktop-Bereich. Eine ziemliche Herausforderung an jedes Design.
Weiterbildung per eLearning.
Keine Anmeldung notwendig
Der Großteil der mobilen Nutzer eines Online-Shop besucht diesen von unterwegs. Trotz immer größer werdender Verbreitung von 4G ist die Verbindungsgeschwindigkeit mitunter wesentlich langsamer, als im gewohnten WLAN. Auch dieser Tatsache muss Rechnung getragen werden.
Shopping am Smartphone findet oft in nur kurzen Zeitabschnitten statt: Während Wartezeiten, in der U-Bahn oder bei einer kurzen Arbeitspause. Diese Abschnitte werden gerne dazu verwendet, sich in Online-Shops umzusehen. Ihr Online-Shop muss auch in kurzen Zeiträumen sinnvoll verwendet werden können.
Im Vergleich zur Desktop-Version steht auf mobilen Endgeräten aufgrund der kleineren Displays deutlich weniger Platz zur Verfügung. Reduzieren Sie Inhalte daher auf das Wesentliche und zeigen Sie nur die wichtigsten: die Inhalte, die Nutzern dabei helfen, das richtige Produkt zu finden.
Nutzer, die über ihr Smartphone einen Shop betreten, besuchen diesen wahrscheinlich während sie gerade unterwegs sind. Die Aufmerksamkeitsspanne und Verweildauer in Ihren Shop ist also begrenzt. Umso wichtiger, dass Sie Besucher nicht mit Informationen oder gar Werbung überfluten, sondern sie gezielt und mit wenigen Klicks zum Ziel führen.
Das primäre Ziel für die mobile Version sollte sein, Nutzer zum Produkt zu führen und von dort später in und durch den Checkout. Auf umfangreiche Landingpages mit Teasern und erklärenden Texten zu einzelnen Produkten oder Produktgruppen sollten Sie daher verzichten und Besucher stattdessen immer nur in eine Richtung (zum Produkt) lenken. Erst, wenn sich der Nutzer für ein Produkt entschieden hat, können Sie ihm weitere Produkte anbieten.
Als Beispiel dient die Umsetzung bei adidas.de/tennis. Bevor dem Nutzer in der Desktopversion (links) das erste Produkt angezeigt wird, muss er über vier Reihen Teaser hinweg scrollen. In der mobilen Version wird lediglich eine Zeile Teaser angezeigt und deutlich mehr Produkte gelistet.
Solange 4G für das mobile Internet noch nicht flächendeckend verfügbar ist, entscheidet mitunter die Ladezeit zwischen Abbruch und Weiterstöbern in Ihrem Shop. Halten Sie deshalb die Ladezeiten gering.
Für mobile Shops treffen die gleichen Empfehlungen zu wie für Desktop-Websites. Dazu gehören unter anderem:
Angenommen diese und weitere Empfehlungen sind umgesetzt. Dann bietet die Optimierung von Grafiken großes Potenzial für mobile Shops. Grundsätzlich sollten alle Bilder, Teaser, usw. mobile-optimiert sein. Einer der größten Hebel sind dabei Farbtiefe und Auflösung. Mit Bildbearbeitungsprogrammen lassen sich Grafiken als „für Web und Geräte optimiert“ abspeichern. Zudem gibt es Online-Tools wie tinypng.com, die ohne Qualitätsverlust die Dateigröße mehrerer Dateien reduzieren.
Damit Ihre Ausgangsdatei schon die kleinstmögliche Größe hat, sollten Sie die mobile Version immer eigene Bildformate anbieten, anstatt die Grafiken der Desktop-Version zu laden und diese runter zu skalieren.
Fassen Sie zusätzlich alle kleinen Bilder in einer sogenannten Sprite-Datei zusammen. Dabei werden alle kleinen Grafiken in einer Datei gespeichert und über CSS-Angaben ausgesteuert. Das hat den Vorteil, dass nicht mehrere kleinere Grafiken geladen werden müssen, sondern eine größere Datei, die dann im weiteren Verlauf im Cache des Benutzers gespeichert ist und somit keine erneute Ladezeit verursacht.
Eine individuelle Analyse der Ladezeit und Verbesserungsvorschläge speziell für Mobile bietet Googles PageSpeed Insights.
Wer einen mobilen Shop betritt, wird sich innerhalb weniger Millisekunden entscheiden, ob er auf diesem bleiben oder wieder verlassen wird. Besucher müssen daher sofort erkennen, wo sie Informationen finden und wo es weiter geht. Wer nicht den Eindruck hat, schnell und mit wenigen Taps zum Ziel zu kommen, wird den Shop wieder verlassen.
Überlegen Sie deshalb, was den Nutzer zum Shop geführt haben könnte und zeigen Sie ihm die passenden Informationen an. Wichtigste Maßnahme hierfür sind passende Zielseiten für Kampagnen. Investieren Sie noch mehr Zeit als für Desktop-Kampagnen, um Bounce-Rates zu analysieren und mit verschiedenen Zielseiten für Anzeigen zu experimentieren.
Erleichtern Sie den Zugang zum Sortiment außerdem dadurch, dass sie die prominentesten Artikel und Kategorien bei Einstiegen ohne Hinweis auf die Intention des Besuchers darstellen.
Wenn Sie den Nutzer bereits kennen, weil er ein wiederkehrender Besucher oder eingeloggt ist, individualisieren Sie seine Einstiegsseite – insbesondere wenn er über die Startseite einsteigt.
Hierfür gibt es mehrere Möglichkeiten:
Wer von unterwegs in Ihrem Shop stöbert, wird oft unterbrochen, sei es, weil man am Zielort angekommen ist oder die Verabredung erschienen ist. Stellen Sie deshalb sicher, dass der Einkauf auch nach der Unterbrechung wieder aufgenommen werden kann.
Hierzu sollten diese Maßnahmen implementiert werden:
Viele Besucher werden in Ihren Shop kommen, um sich über Produkte zu informieren und den eigentlichen Kauf später auf dem Desktop tätigen.
Bieten Sie daher
Auch eine Liste der auf dem Smartphone angesehenen Produkte ist hilfreich, um es Kunden einfach zu machen, mobil angesehene Produkte auf dem Desktop zu kaufen.
Die Option der „Geräte- und Browser-Synchronisation“ hat zum Beispiel OTTO standardmäßig für jeden Kunden aktiviert:
Diese Vorgehensweise ist natürlich nur sinnvoll, wenn Besucher auch über ein Kundenkonto verfügen und eingeloggt sind (siehe 6. Kapitel). Sofern ein nicht eingeloggter Nutzer den Shop auf der Warenkorbseite verlassen möchte, können Sie ihm einen Hinweis anzeigen, der ihm erklärt,
Stellen Sie sicher, dass beim Anlegen eines solches Kontos nicht alle Informationen wie die Adresse oder Zahlungsinformationen abgefragt werden. Ermöglichen Sie stattdessen eine abgespeckte Registrierung, die nur E-Mail und ggf. ein zu wählendes Passwort verlangt. Alle anderen Informationen werden dann am Desktop nachgetragen.
Bei kleineren Display-Auflösungen, wie sie Smartphones aufweisen, ist es besonders wichtig, dass Texte und vor allem Buttons gut lesbar sind.
Achten Sie bei der Gestaltung darauf,
Mithilfe der Chrome Web Developer Tools können Sie eine Vielzahl an Auflösungen simulieren:
Sie erreichen diese Ansicht über die Taste F12 oder über das Menü Weitere Tools > Entwicklertools. Dann klicken Sie auf das Handysymbol:
Im Unterschied zu Desktop-Nutzern navigieren Smartphone-Nutzer lediglich mit dem Finger durch Ihren Shop. Achten Sie deshalb auf diese Punkte.
Navigationselemente
Alle Elemente (egal ob Buttons oder Textlinks), die den Besucher zum Weiternavigieren auffordern, müssen daher so gestaltet sein, dass sie auf den kleinsten Displays mit den größten Fingern problemlos getroffen werden. 44×44 Pixel sollte nicht unterschritten werden
Zwischen den Elementen sollte außerdem immer so viel Platz sein, dass man nicht aus Versehen das Falsche drückt.
Auswahl-Elemente
Für Auswahl-Elemente wie Dropdowns oder Radiobuttons empfiehlt es sich die Standard-Bedienelemente der Geräte zu verwenden. Einerseits sind diese vom Nutzer gelernt, andererseits sind sie schon für alle Geräte und Auflösungen optimiert. Wollen Sie hier selbst kreativ werden, verlieren Sie mit unter Ihre Nutzer. Nichts ist schlimmer, als wenn die Nutzer eine Auswahl treffen sollen und die Auswahl erschwert wird, weil die Elemente nicht mehr im sicht- oder gar klickbaren Bereich liegen.
Hover oder MouseOver nicht verfügbar
Während sich auf Desktop-Shops weitere Informationen oder Layer (zum Beispiel für die Navigation) per MouseOver öffnen können, gibt es diese Möglichkeit bei mobilen Shops nicht. Achten Sie deshalb darauf, dass diese Informationen auch auf anderem Wege erreichbar sind.
Da Smartphones im Vergleich zum Desktop mit den Fingern und nicht mit der Maus bedient werden, sollten Sie darauf achten, dass Sie gelernte Gesten unterstützen. Viele Besucher sind daran gewöhnt und entsprechend genervt, wenn diese nicht funktionieren.
Im Folgenden sind das:
Falls Sie einen eigenen Shop unter m.domain.de betreiben, bieten Sie Besuchern die Möglichkeit auch den normalen Shop anzusehen. Hierfür gibt es mindestens drei Gründe:
Die Möglichkeit, die Version zu wechseln, geschieht am besten im Footer der mobilen Website. Für responsive Websites ist dies nicht nötig, da hier alle Besucher die gleiche Website sehen.
[1] In Google Analytics können Sie den Anteil mobiler Nutzer im Bericht „Zielgruppe > Mobil > Übersicht“.
[2] Da der Kauf ggf. später auf dem Desktop erfolgt, sollte für die Bewertung der mobilen Website auch das Hinzufügen zum Warenkorb oder der Merkliste als KPI herangezogen werden – und nicht nur mobil abgeschlossene Transaktionen verwendet werden.
