Google Ads Full Service: +49 30 920 38 34 466

11 Usability Tipps: So steigern Sie Ihre mobile Conversion Rate

Quelle: shutterstock.com

Häufig hören wir den Satz:

Unsere Conversion-Rate auf Mobilgeräten ist schlecht, weil die Nutzer nur gucken, aber nicht kaufen.

Dafür kann es verschiedene Gründe geben: zu kleine Bildschirmgrößen, lange Seitenladezeiten und natürlich die Usability der mobilen Webseite. Mobilgeräte werden bekanntermaßen immer größer. Während das erste iPhone noch eine Bildschirmdiagonale von 3,5 Zoll und eine Auflösung von 480 x 320 aufwies, haben moderne Smartphones wie das iPhone X mittlerweile eine Bildschirmgröße von 5,8 Zoll und eine Auflösung von 1.125 x 2.436 Pixel. Damit ergeben sich natürlich viel mehr Möglichkeiten zur Gestaltung der Webseite. Das kann also nicht mehr das primäre Argument für eine schlechte Conversion Rate sein. Heute möchte ich Ihnen 11 Tipps mitgeben, wie Sie Ihre Seite einfacher gestalten können und Ihren Nutzern den Einkauf in Ihrem Shop erleichtern.

Alles was ich Ihnen vorstellen werde, sollten Sie als Test verstehen, denn nicht immer gibt es die Lösung. Daher ist es ratsam, A/B Tests durchzuführen und die Ergebnisse zu vergleichen. Bedenken Sie, dass nur etwa 3 von 10 A/B Tests erfolgreich sind. Lassen Sie sich dennoch nicht entmutigen und testen Sie weiter. Abhängig von Ihrem Geschäft kann eine Conversion-Rate Steigerung von 1% auf 1,1% schon einen riesigen Unterschied machen. Los geht’s:

1. Testen Sie lange gegen kurze Homepages

Anders als bei Desktop Homepages neigen Nutzer auf mobilen Geräten eher dazu, sich die komplette Homepage anzusehen. 65% aller Interaktionen auf mobilen Homepages passieren below the fold, also in dem Bereich, den der Nutzer zunächst nicht sieht und für den er runterscrollen muss.

Abb. 1: Scroll verhalten auf mobilen Webseiten

Lange Homepages bergen die Gefahr, dass Nutzer auf Ihrer Homepage den Blick für das Wesentliche verlieren. Vermeiden Sie entsprechend zu lange Homepages.

Ein schönes Beispiel für eine kurze und auf das Wesentliche reduzierte Homepage ist die Startseite von asos.

  • Verwenden Sie Ihre Value Proposition

Was macht Ihren Shop besonders? Warum sollte ein Nutzer bei Ihnen einkaufen. Im Fall von asos ist die Aussage “Your fashion and style destination”, sowie “Free delivery & returns” gut sichtbar.

  • Verwenden Sie Call-to-action Buttons

Machen Sie dem Nutzer klar was er als nächstes tun soll. In diesem Fall soll er entweder zum Damen- oder zum Herren-Shop navigieren. Verwenden Sie zum Beispiel Ihre Top 5 Kategorien oder fordern Sie den Nutzer auf, sich anzumelden und den Newsletter zu abonnieren.

  • Verwenden Sie ein starkes Visual

Verwenden Sie ein Bild, das deutlich zu Ihrer Marke passt und klar zeigt, wer Sie sind und was Sie tun. Vermeiden Sie Slides, wie man sie von Desktop Seiten kennt. Diese verlangsamen Ihre Seite und lenken den Nutzer unter Umständen vom Wesentlichen ab.

Abb. 2: asos Homepage als Beispiel für eine gelungene mobile Homepage

2. Ermöglichen Sie horizontales Scrollen

Viele Nutzer sind es mittlerweile gewöhnt, auf dem Smartphone nach links und rechts zu wischen. Verwenden Sie diese Art der Navigation vor allem, wenn Sie viele Kategorien in Ihrem Shop haben. Wichtig ist, dass Sie ein aussagekräftiges Bild verwenden und die Kategorie zusätzlich beschriften.

Der Vorteil ist natürlich, dass Sie die Seitenlänge abermals verkürzen. Außerdem können Sie viele Kategorien zeigen, ohne dass der Nutzer sich durch komplizierte Menüs wühlen oder die Shopsuche nutzen muss. Falls Sie nur wenige Produkte anbieten, können Sie auch darüber nachdenken, Ihre Top Seller auf diese Weise zu präsentieren. Hier kann man der Fantasie freien Lauf lassen. Sie können so neue Produkte, stark reduzierte Artikel oder Produkte, die besonders interessant für die Neukundengewinnung sind, auf der Homepage präsentieren.

Abb. 3: Vertikales Scrollen auf mobilen Webseiten verkürzt die Seitenlänge

3. Priorisieren Sie Ihre Optimierung auf Basis von Daten

Werten Sie aus, welche Bildschirmgrößen, welche mobilen Browser und welche Geräte am häufigsten verwendet werden. Wenn Sie diese Daten haben, konzentrieren Sie all Ihre Optimierung auf die meist genutzten Bildschirmgrößen und Auflösungen. So können Sie am einfachsten die Mehrheit Ihrer Besucher abdecken.

4. Machen Sie die wichtigen Buttons für den Nutzer erreichbar

Abb. 4: Die Mehrheit der Nutzer hält Ihr Smartphone mit einer Hand und navigiert mit dem Daumen

In der oberen Grafik kann man das Problem von mobilen Webseiten gut erkennen. Zu häufig sind die wichtigsten Buttons wie Menü, Warenkorb oder die Suche ein Bereich, den der Nutzer schwer mit einer Hand erreichen kann. Der Menü-Button ist zum Beispiel oftmals oben links. Sie sollten sich fragen, ob Sie Buttons nicht lieber an den unteren Rand des Bildschirms bringen oder das Menü und den Warenkorb nach oben rechts verlegen.

5. Browsen vs. Suchen

Es gibt zwei Ansätze, wie man den Nutzer durch seine Kategorien leitet und ihm hilft, zu finden, was er sucht. Entweder man führt den Nutzer aktiv durch die Kategorien oder man animiert ihn die Suche zu nutzen. Beide Varianten sind richtig und wichtig, denn man kann nicht kaufen, was man nicht findet.

Abb. 5: Browse vs. Search

Machen Sie die Shopsuche am besten immer gut sichtbar und integrieren Sie die Shopsuche auch oben im Menü. Hilfreich für den Nutzer ist es außerdem, wenn er bereits Begriffs-Vorschläge bekommt, während er die ersten Buchstaben eintippt. Zusätzlich sollten Sie kürzliche Suchanfragen speichern und bei erneuter Suche wieder anzeigen. Denn Nutzer sind tendenziell schreibfaul und froh, wenn Ihnen Arbeit abgenommen wird.

Für den Menü-Button hat sich der sogenannte Burger-Menü-Button durchgesetzt . Beschriften Sie den Button unbedingt mit Menu, da vielen Nutzern der Button immer noch nicht geläufig ist und er gerne mal ein wenig unscheinbar wirkt.

Im Menü selbst sollten Sie die Top Kategorien möglichst stark zusammenfassen und dem Nutzer mittels Pfeilen oder Pluszeichen zeigen, dass er mit einem Klick auf die Hauptkategorie in die nächst tiefere Ebene gelangt. Außerdem kann man darüber nachdenken, Symbole für die einzelnen Kategorien hinzuzufügen. Punkte wie Kontakt, Impressum oder Anfahrt sollten Sie je nach Wichtigkeit für Ihr Unternehmen unter den Kategorien anhängen.

Abb. 6: Icons im Menü und eine flache Menüstruktur vereinfachen die Bedienung

6. Sortieren und Filtern

Generell sollten Sie Filter- und Sortierfunktionen immer als Sticky-Buttons sichtbar machen. Gerade bei vielen Produkten sollten die Buttons immer sichtbar sein. Zeigen Sie den Nutzern auch immer an, wie viele Ergebnisse es gibt.

Abb. 7: Filterfunktionen sollten für den User immer sichtbar sein

Stellen Sie sicher, dass alle Filter-Optionen stets gut sichtbar sind. Vermeiden Sie hier Drop-Down Menüs und zeigen Sie lieber alle verfügbaren Varianten. Wichtig ist auch, dass Sie dem Nutzer die Möglichkeit zur Mehrfachauswahl geben. Zeigen Sie dem Nutzer außerdem, wie viele Produkte auf seine Filter zutreffen.

Abb. 8: Filteroptionen sollten immer sichtbar sein und nicht als Dropdown dargestellt werden

7. Zeigen Sie dem Nutzer Ihre USPs

Erinnern Sie den Nutzer stets daran, warum es richtig ist bei Ihnen zu kaufen und bei niemand anderem. Sie können gar nicht oft genug betonen, warum Ihr Shop der beste und sicherste im gesamten Internet ist. Am Besten verwenden Sie Ihre Value Propositions auch auf Suchergebnis- und Kategorieseiten.

Abb. 9: Value Propositions sollten immer gut sichtbar sein

8. Platzieren Sie die Warenkorb-Button “above the fold”

Platzieren Sie die Warenkorb-Button besonders gut sichtbar. Sie sollten zudem in Erwägung ziehen, diesen als Sticky-Button zu befestigen. So kann der Nutzer, egal wie weit er nach unten scrollt, den Artikel immer in den Warenkorb legen.

Abb. 10: Warenkorbbutton als Sticky Button unten rechts fixiert

9. Machen Sie Ihre Beschreibungstexte lesbar

Auf mobilen Geräten wird wenig gelesen. Die Nutzer scannen die Seite eher grob. Stellen Sie daher sicher, dass Sie die Nutzer nicht mit zu viel Text überfordern. Verwenden Sie lieber Stichpunkte oder Datenblätter, um dem Nutzer die wichtigen Informationen möglichst komprimiert zu präsentieren.

Legen Sie zudem Wert auf Ihre Produktbilder. Verwenden Sie viel Raum für das Produktbild und geben Sie dem Nutzer die Möglichkeit, in das Bild zu zoomen und weitere Bilder anzusehen.

Abb. 11: Description als Stichpunkte und nicht als Fließtext

Geben Sie dem Nutzer gleichzeitig mehr Informationen zum Produkt. Nutzer, die stark interessiert sind, werden sich über mehr Content zum Produkt freuen. Am besten lässt sich der Spagat zwischen zu vielen und zu wenigen Informationen mit expandable Text lösen. Nutzer, die sich näher interessieren, können somit wählen ob Sie noch mehr Informationen angezeigt bekommen wollen.

Abb. 12: Expandable Text auf Produktseiten

10. Geben Sie dem Nutzer die Möglichkeit, Produkte zu teilen und zu merken

Viele Nutzer wollen ihren Familienmitgliedern und Freunden den Artikel zeigen, den sie sich ausgesucht haben. Bei größeren Investitionen wie Einrichtungen oder dem nächsten Auto sind oft mehrere Personen am Entscheidungsprozess beteiligt. Geben Sie den Nutzern also die Möglichkeit, ihre Auswahl über die sozialen Medien und per Mail zu teilen.

Abb. 13: Teilen Button auf Produktseite

11. Vermeiden Sie Drop-Down-Menüs

Dieser Tipp ist allgemeingültig und zieht sich durch jeden Seitentyp. Egal ob Homepage, Filter, Sortierfunktionen, Größen- oder Farbauswahl. Vermeiden Sie sie einfach. Der Grund ist relativ einfach: Drop-Downs werden auf Mobilgeräten immer anders formatiert. Meistens öffnet sich eine Art Overlay, aus der der Nutzer auswählen kann. Das verwirrt und ist nicht nötig. Zeigen Sie dem Nutzer alle verfügbaren Optionen an. Das erleichtert nicht nur die Auswahl, sondern zeigt auch elegant alle verfügbaren Farben und Varianten.

Abb. 14: Drop Down Menüs vermeiden

Mit diesen Tipps an der Hand haben Sie nun einen Eindruck davon, was man alles an der mobilen Webseite verbessern und testen kann. Wenn Sie einige der Tipps erst als A/B Test prüfen möchten, machen Sie sich vorher immer Gedanken, was das Ziel des Tests ist. Wenn Sie zum Beispiel Sticky-Buttons einführen: Richten Sie den Test so ein, dass Sie feststellen können wie häufig der Button geklickt wird. Hier muss als Erfolgsmessung die Click-Through-Rate herangezogen werden. Wenn Sie aber kürzere Beschreibungen testen, sollten Sie einen besonderen Blick auf die Bouncerate und die Verweildauer werfen. Behalten Sie aber das übergeordnete Ziel im Blick, nämlich die Conversion-Rate Ihrer Webseite zu steigern.

Zum Schluss noch eine Empfehlung zum Thema Ladezeit von Websites:

Mit den wachsenden Möglichkeiten im mobilen Bereich, steigen auch die Ladezeiten der Webseiten. Tools wie Testmysite geben hilfreiche Tipps, wie Sie Ihre Seite in Hinsicht auf Ladezeiten optimieren können.

Jetzt wünsche ich Ihnen viel Spaß beim Optimieren, Testen und Wachsen.

In einem der nächsten Artikel erhalten Sie Tipps, wie Sie die Conversion-Rate im Checkout-Bereich Ihrer Website steigern können. Schauen Sie also gerne wieder vorbei.