Anzeige
Anzeige
UX & Design

Tipps zur Webshop-Optimierung für Smartphones: Shop in der Hosentasche

Webshops müssen heute auch für die mobile Nutzung optimiert sein. Doch das bringt so einige Herausforderungen in Sachen Usability und User-Experience mit sich. Wir beleuchten die wichtigsten Hürden, Fallstricke und Design-Tipps für die Mobile-Optimierung von Webshops.

7 Min.
Artikel merken
Anzeige
Anzeige

Wer nicht mit Scheuklappen durch die Welt läuft, kommt heute um eine wichtige Erkenntnis nicht mehr herum: Das mobile Internet ist mittlerweile Alltag. Aktuelle Zahlen der W3B-Studie „Mobile Commerce“ [1] belegen, dass sich die Zahl der Smartphone-Besitzer in nur drei Jahren auf 65 Prozent fast verdreifacht hat. Erstmals ist der Prozentsatz der Desktop-PC- und Smartphone-Besitzer unter den deutschen Internet-Nutzern ungefähr gleich groß. Der Anteil der Tablet-Nutzer hat sich binnen Jahresfrist auf 38 Prozent praktisch verdoppelt.

Anzeige
Anzeige

Für Web-Händler bedeutet das: Wer seinen Onlineshop nicht für mobile Endgeräte optimiert, wird es in Zukunft schwer haben. Doch das mobile Shop-Konzept ist alles andere als leicht. Als größte Herausforderung stellt sich oft der kleine Bildschirm der
mobilen Devices heraus – und das bei einem meist sehr großen Sortiment
der Händler. Onlinehändler müssen sich daher von dem Wunsch verabschieden, ihren Kunden mit Hilfe von Produktfotos auch im mobilen Webshop auf den ersten Blick das gesamte Sortiment zu präsentieren.

Der Einstieg entscheidet

Amazon möchte die Kunden seines mobilen Online-Shops mit persönlichen Empfehlungen im Slider abholen.
Amazon möchte die Kunden seines mobilen Online-Shops mit persönlichen Empfehlungen im Slider abholen.

Das gilt bereits für die Startseite eines mobilen Webshops. Hier lautet die wichtigste Devise: Weniger ist mehr. Im Idealfall gelingt es den Webshop-Betreibern, die unterschiedlichen Nutzungsszenarien der Kunden schon auf der Startseite abzubilden: Zielgruppen, die einen konkreten Bedarf decken wollen, sollten schnell auf die wichtige Suchfunktion des Shops stoßen.

Anzeige
Anzeige

Wer unterwegs oder auf dem Sofa gemütlich im Webshop stöbern möchte, sollte dagegen durch die Startseite den Eindruck bekommen: „Hier könnte ich für eine Weile unterhalten werden.“ Das wichtigste Kriterium für ein gutes mobiles Shop-Designkonzept ist jedoch die Ladezeit: Muss ein Kunde länger als vier Sekunden warten, um die Startseite zu sehen, ist er meist schon an die Konkurrenz verloren.

Anzeige
Anzeige

Die ideale mobile Startseite hat allerdings noch niemand gestaltet. Viele mobile Webshops wirken, zumindest auf einem Smartphone, so sexy wie das Inhaltsverzeichnis eines mittelprächtig gemachten Katalogs – Emotionalisierung Fehlanzeige. Kaum ein mobiler Webshop lädt tatsächlich dazu ein, durchs Sortiment zu stöbern und dabei Unterhaltung zu finden.

Best Practise: Startseiten

Zalando lenkt die volle Aufmerksamkeit auf den „Sale“-Button. Erst im Anschluss gibt es verschiedene Einstiegsmöglichkeiten in das Sortiment.
Zalando lenkt die volle Aufmerksamkeit auf den „Sale“-Button. Erst im Anschluss gibt es verschiedene Einstiegsmöglichkeiten in das Sortiment.

Der E-Commerce-Riese Amazon beschränkt sich beispielsweise auf drei Bereiche: In einem Slider können sich angemeldete Kunden durch persönliche Empfehlungen oder Vorschläge wischen, die auf deren Interessen basieren sollen, tatsächlich aber verhältnismäßig willkürlich und dadurch irrelevant erscheinen. Dazu gibt es einen direkten Kauftipp von Amazon und ein prominent platziertes Suchfeld, über das Nutzer gezielt nach ihren Interessen recherchieren können.

Anzeige
Anzeige

Zalando lenkt den Blick seiner Kunden auf der Startseite seines mobilen Webshops derzeit zunächst einmal auf ein großes rotes Feld mit der Aufschrift „Sale“. Darüber befindet sich das Suchfeld für eine gezielte Recherche. Und darunter gibt es verschiedene Einstiegsmöglichkeiten in das Sortiment – unterteilt in Neuheiten, Bekleidung, Schuhe, Sport, Accessoires und Premium für jeweils Damen, Herren und Kinder.

Risiko Responsive Shop-Design

Der mobile Shop von Zara zeigt die Schwierigkeiten eines responsiven Shop-Designs: Die Produktfotos, die am Desktop gut funktionieren, sind auf dem mobilen Device viel zu klein.
Der mobile Shop von Zara zeigt die Schwierigkeiten eines responsiven Shop-Designs: Die Produktfotos, die am Desktop gut funktionieren, sind auf dem mobilen Device viel zu klein.

So mancher Webshop-Betreiber spielt mit der Überlegung, seinen Shop mit Hilfe von Responsive Shop-Design auf die mobilen Herausforderungen vorzubereiten. Dabei passt sich die Frontend-Gestaltung automatisch an die Größe des Gerätebildschirms an, den ein Kunde gerade nutzt.

Doch der Geschenke-Webshop Cedon zeigt, welche Gefahren ein solches responsives Shop-Design mit sich bringen kann: Die unterschiedlichen Einstiege in das umfangreiche Sortiment wirken auf einem großen Bildschirm ausgesprochen einladend und inspirierend. Auf dem kleinen Screen eines Smartphones ist jedoch kaum noch etwas zu erkennen.

Anzeige
Anzeige

Dasselbe gilt für den responsiven Webshop von Zara. Zwar hebt sich die Startseite wohltuend von dem Einheitsbrei großer deutscher Webshops ab. De facto sind jedoch zumindest in der unteren Screenhälfte die Bilder so klein, dass sie den Nutzer eher verwirrt als inspiriert zurücklassen. Dazu kommt, dass die Navigation am linken Bildrand kaum zu erkennen ist und sich ohne Vergrößerung des Seitenausschnittes selbst mit schlanken Fingern nicht bedienen lässt.

Kreativität oder Struktur?

Otto liefert seinen Mobile-Usern umfangreiche Filtermöglichkeiten. Gestalterisch opulent ist das nicht, aber pragmatisch.
Otto liefert seinen Mobile-Usern umfangreiche Filtermöglichkeiten. Gestalterisch opulent ist das nicht, aber pragmatisch.

Das gleiche Dilemma von Kreativität versus Struktur ergibt sich für die Sortimentsübersichtsseiten eines mobilen Webshops. Meist ist das Sortiment zu breit, um es schlüssig auf einem Handy-Bildschirm darzustellen. Onlinehändler versuchen daher oft, intelligente Sortimentskategorien zu finden und zu texten.

Der größte deutsche Onlinehändler Otto hilft seinen Kunden beispielsweise unter 969 Blazern den richtigen zu finden, indem er die Ergebnisse nach Topsellern, Preis oder Neuheiten sortiert sowie nach Farbe, Marke, Normal-, US- oder Kurzgrößen, Bewertungen, Stil (basic, casual, elegant, feminin, festlich, klassisch, modisch, sexy oder sportlich) oder Material. Richtig Spaß
macht die Bedienung so zwar nicht, doch ein guter Produktüberblick ist anders kaum möglich. Das gute alte Design-Prinzip „Form follows
Function“ gilt hier eben einmal mehr.

Anzeige
Anzeige

Mehr Raum für Kreativität lassen da die Produktdetailseiten. Selbstverständlich sollten hier alle wichtigen Informationen wie Produktdetails, Lieferzeiten und Versandkosten abgebildet sein. Eine Frage der Konzeption ist jedoch, welchen Raum diese im Vergleich zu den Produktdarstellungen einnehmen. Der britische Modeversender Asos rückt die Abbildungen zum Beispiel stark in den Vordergrund. Die Produktinformationen öffnen sich erst nach einem Touch auf den Info-Button, die Auswahlelemente für Farbe und Größe findet man unter dem Produktbild.

Die Produktdetailseiten ermöglichen kreativen Spielraum. Bei Mytheresa stehen Produktfoto und -informationen gleichberechtigt nebeneinander.
Die Produktdetailseiten ermöglichen kreativen Spielraum. Bei Mytheresa stehen Produktfoto und -informationen gleichberechtigt nebeneinander.

Die Onlinehändler Mytheresa und Lodenfrey teilen hingegen die Bildschirmfläche in der Mitte und verwenden die eine Hälfte für das Bild, die andere für den Text.

Hürdenloser Mobile Checkout

Spätestens wenn es darum geht, den Kunden möglichst elegant durch den Bestellprozess zu leiten, gilt für mobile Webshops: Alle Bedienelemente müssen auch bei dicken Wurstfingern funktionieren. Außerdem sollten die Kunden noch im Warenkorb Produktdetails wie Größe oder Anzahl ändern sowie die Verfügbarkeiten und Versandkosten gut erkennen können. Call-to-Action-Buttons sollten prominent platziert sein und sich gut bedienen lassen, um den Kunden den Gang zur Kasse oder zum Weitershoppen so einfach und bequem wie möglich zu gestalten.

Anzeige
Anzeige

Formulare ausfüllen einfach machen

Auffällige Call-to-Action-Buttons erleichtern die Orientierung und Nutzung mobiler Shops, so wie der mobile Shop von Sister Surprise dies zeigt.
Auffällige Call-to-Action-Buttons erleichtern die Orientierung und Nutzung mobiler Shops, so wie der mobile Shop von Sister Surprise dies zeigt.

Den Klick auf den Button „Zur Kasse gehen“ sollten Onlinehändler dann auch nicht durch unnötig viele Abfragen bei der Adressangabe bestrafen. Fragen zum Geburtstag oder die Einstiegsseite sind hier fehl am Platz. Bestandskunden freuen sich, wenn sie als solche erkannt und von bereits ausgefüllten Formularen begrüßt werden.

Ein Fortschrittsbalken zeigt den Nutzern, wie viele Schritte sie bis zum Abschluss ihres Einkaufs noch gehen müssen. Als Zahlungsmittel bietet sich PayPal an, da dieses den Kunden das mühsame Eintippen von Kreditkarten- oder Kontoinformationen erspart. Ängstliche oder unsichere Kunden lassen sich in der Regel durch eine Telefonnummer beruhigen, die sie per Touch aktivieren können.

Test-Szenarien

Wer seine mobile Konversionsrate optimieren will, sollte unterschiedliche Mobile-Varianten testen. Denn Bauchgefühl oder individuelle Designvorstellungen stimmen nicht immer notwendigerweise mit dem Verhalten der Nutzer überein. Über A/B- oder multivariate Testings können sich Händler an die ideale Gestaltung ihres mobilen Onlineshops immer weiter herantasten.

Anzeige
Anzeige
Zehn Tipps für bessere mobile Webshops
  1. Onlineshops sollten so gestaltet sein, dass sie auf allen Geräten sofort wiedererkennbar sind.
  2. Die Suchfunktion sollte prominent platziert sein, Autovervollständigungen und Filter die Suche erleichtern.
  3. Call-to-Action-Buttons sollten im Vordergrund stehen und wurstfingerfreundlich gestaltet sein, um zu Aktivitäten einzuladen.
  4. Die Menüstruktur sollte kurz und knapp sein und überall im mobilen Shop unkompliziert zur Startseite zurückführen.
  5. Benutzer sollten Fotos im Vollbild sehen können und nicht zoomen müssen.
  6. User sollten sofort erkennen können, ob der Shop für Quer- oder Hochformat optimiert ist.
  7. Eingabemasken sollten effizient und übersichtlich sein. Nutzer sollten nur die unbedingt erforderlichen Daten eingeben müssen, Formulare in Echtzeit auf fehlende Informationen hinweisen und Drittanbieter-Dienste zur Auto-Ausfüllung von Feldern bereitstehen.
  8. Kunden sollten sich nicht registrieren müssen, um einkaufen zu können.
  9. Click-to-Call-Services sollten vor allem bei komplexeren Angeboten zur Verfügung stehen.
  10. User sollten sofort verstehen, warum der Shop ihren Standort analysiert.

Fazit: Zur richtigen Zeit am richtigen Ort

Generell sollten Onlinehändler ihre Zielgruppen gut kennen, um attraktive und damit erfolgreiche mobile Webshops konzipieren zu können. Mobile Shopping wird in Zukunft immer vielschichtiger und komplexer – 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 Trendprognosen zufolge mittelfristig vor dem Durchbruch und versprechen eine vollkommen neue Form des Online-Einkaufens.

Im Jahr 2018 sollen Wearable Devices bereits ein Einkaufsvolumen von 19 Milliarden Dollar bedienen, so die Analysten von Juniper Research: Ein weiterer Schritt in das Multiscreen-Zeitalter, das Webshops vor die Herausforderung stellt, die Kunden stets zur richtigen Zeit am richtigen Ort, über das richtige Gerät mit dem richtigen Angebot zu bedienen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige