Immer mehr Nutzer bewegen sich mit ihren Smartphones durch die Onlineshop-Landschaft. Die meisten Besucher zieht es dabei früher oder später auf die Startseite, die von vielen Marketingverantwortlichen noch zur Darstellung der Marke „missbraucht“
wird. Übergroße Imagebilder, die zwar irgendwie ins Sortiment ziehen sollen, aber in erster Linie vor allem nicht zu werblich sein dürfen. Videos, die die Marke repräsentieren, aber keinen verkaufsfördernden Nutzen haben und
eine scheinbare Phobie gegenüber dem Anschein, dass es sich um einen Onlineshop handeln könnte. Wie sonst ist es zu erklären, dass selten Produkte, Preise oder sonstige Indikatoren zu erkennen geben, dass man hier tatsächlich etwas
kaufen könnte.

Wer als Onlineshop-Betreiber nicht in Schönheit sterben will, sollte gerade auf mobilen Endgeräten eine Startseite anbieten, die die Besucher schnell, effizient und ohne Umwege in das Sortiment führt.

Aber wie genau sieht eine mobile optimierte Startseite aus?

Dafür muss man sich zuerst einmal mit der veränderten Zielgruppe beschäftigen und sich bewusst machen, dass Smartphone Nutzer in den meisten Fällen den Onlineshop mit einem bestimmten Ziel besuchen. In den seltensten Fällen kommen
sie, um einfach mal zu schauen, was es so Neues gibt, sondern haben ein direktes Anliegen und wollen schnell zum Ergebnis. Sie entern den Shop auf dem Weg von und zur Arbeit, während sie auf Bus oder Bahn warten oder auch während im Hintergrund
das abendliche Fernsehprogramm läuft.

Die Aufmerksamkeitsspanne ist also gering und somit auch die Zeit sie zum Abschluss ihrer Transaktion zu führen. Der User darf daher nicht zu sehr gefordert werden. „Don’t make me think“ gilt auf mobilen Endgeräten also umso mehr.

Grundsätzlich folgt eine mobile optimierte Startseite aber dem selben Raster, wie auf Desktop und besteht aus:

  • Header
  • Contentbereich
  • Footer

Der Header:

Im Header sollten sich die wichtigsten Elemente wie

  • Logo
  • Menü
  • Suche
  • Warenkorb

befinden. Nicht weniger, aber vor allem auch nicht mehr. Auf verwirrende Symbole wie Sterne oder Herzen (die wohl für Merklisten stehen sollen) oder Personen-Icons für das Kundenkonto sollte aus Platz- und Übersichtsgründen verzichtet
werden (letzteres lässt sich hervorragend im Menü selbst unterbringen).
b2ap3_thumbnail_mobile-optimierte-startseite-header-otto.jpg

Abhängig davon, wo man das Menü positioniert, wird das Logo entweder links oder mittig positioniert. Die meisten Shops entscheiden sich für Menü links und Logo mittig. Zalando und Amazon positionieren das Menü sogar unterhalb
des Logos, geben dafür aber gleichzeitig auch der Suche mehr Aufmerksamkeit, indem sie nicht nur eine Lupe anzeigen, sondern direkt das Eingabefeld dafür aufklappen.

b2ap3_thumbnail_mobile-optimierung-startseite-zalando.jpg

Die Entscheidung, ob Suchfeld direkt sichtbar und dafür einen höheren Header oder eingeklappt und kompakt, wird vor allem vom Sortiment und der Zielgruppe abhängen und im Zweifel nur ein A/B-Test entscheiden können. Persönliche
Tendenz: Bei Shops mit breitem Sortiment, wie Amazon, Zalando und Otto wird die direkte Suchmöglichkeit vermutlich stark frequentiert und gerne genutzt. Bei kleinerem Sortiment reicht sicher auch die Lupe, in der Annahme, dass die User den Einstieg
übers Menü oder die Teaser finden.

Da der Header auf jeder Seite erscheint, sollte generell darauf geachtet werden, dass er nicht zu viel Höhe einnimmt, um noch ausreichend Platz für den eigentlichen Inhalt zu lassen. Gerade beim initialen Aufruf der Seite wird aber im Headbereich
auch noch über die Verwendung von Cookies aufgeklärt und Werbung für die eigene App untergebracht (Zalando müsste eigentlich mittlerweile gelernt haben, dass ich daran kein Interesse habe), was recht schnell das eigentliche Angebot
aus dem Sichtfeld verschwinden lässt.
b2ap3_thumbnail_mobile-optimierung-startseite-header-zalando.jpg

Warum Globetrotter so komplett vom Standard abweicht und alles rechts ausrichtet, wage ich mal nicht zu erraten, aber rechts oben gehört der Warenkorb hin. Das ist auf Desktop so, auf Tablet und sollte auch so auf mobilen Endgeräten bleiben.
Und in dem Fall tatsächlich, weil es alle machen und es somit gelernt ist. Innovativ kann man gerne an anderer Stelle werden.

b2ap3_thumbnail_mobile-optimierung-startseite-globetrotter.JPGDer eigentliche Content:

Unterhalb des Headers sollen dann Teaserelemente in die Sortimente ziehen. Wahlweise können hier 3 bis 6 Teaser durchrotieren. Wie viele man wählt, sollte man je nach Zielgruppe und Sortimentsumfang entscheiden. Ab Teaser 3
fällt die Nutzungsrate recht gering aus, so dass sich der Aufwand für die Erstellung oftmals nicht mehr lohnt.

Wichtiger als die Frage, wie viele Teaser gespielt werden, ist die Frage nach dem „Was“. Oftmals werden ja gerne „die Farben der Saison“ oder aktuelle Trends gezeigt. Im Unterschied zu den Desktop-Usern kommen die mobile User aber
nicht, um sich inspirieren zu lassen, sondern wollen schnell weiter. Daher sollte man sich bei der Teasergestaltung auf den Genderswitch oder falls es Aktionen wie Sale gibt, auf diese konzentrieren (ich weiß gerade letzteres wollen Markenverantwortliche
am wenigsten sehen, aber es zieht und in dem Fall zieht es die User wortwörtlich weiter in den Shop).

b2ap3_thumbnail_mobile-optimierung-startseite-hm.jpg

Unterhalb der Teaser können dann gerne nochmal die wichtigsten Kategorien gezeigt werden.
b2ap3_thumbnail_mobile-optimierte-startseite-kategorien-adidas.JPG

Auf Produktdarstellungen würde ich persönlich verzichten können, es sei denn man kennt den Besucher bereits von seinem letzten Besuch. Topseller oder sonstige Empfehlungen ohne irgendeine Kenntnis über die Nutzer werden wohl eher gering
genutzt, so dass man sie für eine bessere Übersicht einfach weglassen sollte.

Für Nicht-Mono-Brandshops (heißt es denn Poli-Brandshops?!) kann unterhalb der Kategorien auch ein Markenband durchlaufen, um den direkten Einstieg auf eine bestimmte Marke zu ermöglichen.

Und was soll bei mobile optimierten Webseiten in den Footer?

Da man davon ausgehen kann, dass mobile User unterwegs den Onlineshop entern, kann im Footer ein Filialfinder integriert werden. Auch sollten dort Alleinstellungsmerkmal wie besondere Rückgabefristen, Lieferkonditionen etc. aufgeführt werden.
Wer einen telefonischen Kundenservice hat, sollte diesen direkt mit „Click-to-call“ im Footer anzeigen.

Wer diese Tipps beachtet, hat eine einfach zu navigierende Startseite, die für mobile Besucher optimiert ist. Einen sehr cleanen und interessanten Ansatz verfolgt asos.com, die die Startseite lediglich mit vier Buttons ausstatten: Anmelden, Registrieren,
Damenmode shoppen, Herrenmode shoppen. Ob eine solch „einfache“ Seite funktioniert, wird sich nur über die Bounce Rate herausfinden lassen. Einen Test wäre es aber auf jeden Fall wert.

b2ap3_thumbnail_mobile-optimierung-startseite-asos.jpg

Artikel hat gefallen? Gerne weiterempfehlen:
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone