Praxisguide

Conversion-Grundlagen für mobile Online-Shops

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.

1. Einleitung

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:

  • Reduktion auf das Wesentliche (3. Kapitel)
  • Geringe Ladezeiten (4. Kapitel)
  • Passende Informationen anzeigen (5. Kapitel)
  • Besucher nicht ausloggen (6. Kapitel)
  • Synchronisation zwischen Geräten (7. Kapitel)
  • Inhalte erkenn- und lesbar machen (8. Kapitel)
  • Elemente „touchable“ machen (9. Kapitel)
  • Gelernte Gesten unterstützen (10. Kapitel)
  • Wenn gewünscht alle Informationen anbieten (11. Kapitel)

In weiteren Praxisguides beschreiben wir dann diese Elemente mobiler Shops:

2. Merkmale mobiler Nutzung

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:

2.1 Finger statt Maus

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.

2.2 Geringer Platz

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.

2.3 Langsamere Verbindung

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.

2.4 Nutzung nicht an einem Stück

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.

3. Reduktion auf das Wesentliche

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.

4. Geringe Ladezeiten durch mobile Grafiken

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:

  • CSS- und JavaScript-Dateien zusammenfassen
  • CSS- und JavaScript-Dateien minimieren (Leerzeichen, Umbrüche, Kommentare, lange Variablenbezeichnungen entfernen)
  • Schattierungen und Farbverläufe mit CSS statt als Grafiken umsetzen
  • Lazy Load einsetzen (Dateien erst laden, wenn sie sich im sichtbaren Bereich befinden)

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.

5 Besuchern passende Informationen anzeigen

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:

  • Wenn der letzte Besuch auf einer Produktdetailseite endete, leiten Sie ihn entweder direkt dorthin weiter oder spielen einen Hinweis darauf aus.
  • Wurde beim letzten Besuch der Checkout-Prozess nicht abgeschlossen, bieten Sie ihm analog an, den Prozess dort wieder aufzugreifen.
  • Bieten Sie ihm Produkte an, an denen er bereits beim letzten Besuch interessiert war.

6. Besucher nicht ausloggen

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:

  • Die Laufzeit einer Session so lange wie möglich einstellen.
  • Den Inhalt des Warenkorbs nicht leeren.
  • Besucher nicht aus dem Kundenkonto ausloggen.

7. Geräte- und Browser-Synchronisation

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

  • entweder eine Merkliste an, die auch auf der Desktop-Seite aufgerufen werden kann oder
  • stellen Sie sicher, dass der Warenkorb geräteübergreifend am Kundenkonto gespeichert wird [2]

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,

  • dass der Warenkorb für spätere Besuche gespeichert wird und
  • dass bei einer Registrierung der Checkout-Prozess komfortabel am Desktop geschehen kann.

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.

8. Inhalte und Texte erkennbar machen

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,

  • dass die Schriftgröße auf allen Displays gut lesbar ist.
  • dass die Schriftfarbe einen gut erkennbaren Kontrast zur Hintergrundfarbe aufweist. Bedenken Sie stets, dass Smartphones nicht immer unter perfekten Bedingungen genutzt werden, sondern die Displays je nach Lichtverhältnissen reflektieren.
  • dass genügend Weißraum bleibt, um Inhalte klar abzugrenzen.

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:

9. Machen Sie Ihre Elemente „touchable“

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.

10. Gelernte Gesten unterstützen

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:

  • Swipe: Das horizontale Wischen über das Display, um beispielsweise rotierende Teaser oder zwischen verschiedenen Ansichten auf der Produktdetailseite zu wechseln.
  • Flick: Der Nutzer „schubst“ die Seite, um schnell ans Seitenende oder -anfang zu gelangen.
  • Drag: Seiteninhalte können mit dem Finger in alle Richtung bewegt werden
  • Pinch-Geste: Das Zusammenziehen und -drücken der Finger, welches Bilder oder Inhalte verkleinert oder vergrößert.
  • Tap: Klicken von Elementen, um Navigationselemente aufzuklappen oder auf die nächste Seite zu gelangen.

11. Alle Informationen anbieten

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:

  • 1.Auf der mobilen Seite sind nicht alle Informationen verfügbar, der Besucher möchte diese aber einsehen.
  • 2.Das Gerät des Besuchers wurde nicht richtig erkannt.
  • 3.Der Besucher hat einen Link (zum Beispiel per E-Mail) zum mobilen Shop erhalten befindet sich aber auf einem Desktop-Gerät.

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.

ConversionBoosting