Mobile Websites: User Experience bei Mobile-Shops

Das Internet ist mittlerweile mit Hilfe von Smartphones von nahezu überall erreichbar. Dies ist ein entscheidender Vorteil von mCommerce im Gegensatz zum klassischen eCommerce. Kundenwünsche können durch die ständige Erreichbarkeit jederzeit und sofort befriedigt werden. Der Kunde hat keine längere Pause, in der der Wunsch wieder abnehmen könnte. Doch zugleich hat mobile Commerce durch die mobilen Geräte auch starke Einschränkungen, denen man entgegenwirken muss. So ist die Darstellung auf dem kleinen Display ein gewaltiger Nachteil und die Bedienung über das Touchdisplay eine neue Komponente, die berücksichtigt werden muss, damit diese sich nicht negativ auswirkt.

Usability und User Experience muss für mobile Geräte neu überdacht werden

Zwar ist der Großteil der normalen Webseiten theoretisch mit modernen Smartphones komplett nutzbar, aber die Handhabung lässt zu wünschen übrig. Nach einer kurzen Zeit dürfte die Geduld der Besucher einer Seite, die nicht für mobile Geräte optimiert ist, vorbei sein, weil die Bedienung zu umständlich ist.
Keine optimierte Darstellung für den Mobile-Shop von Zara
Der Onlineshop von Zara zum Beispiel ist nicht für mobile Geräte optimiert. Der Shop sieht zwar auch auf mobilen Geräten ansprechend aus, aber angenehm bedienen lässt sich dieser nicht. Um die Navigationspunkte mit dem Finger treffen zu können, muss der Nutzer zunächst hineinzoomen. Auf Kategorieseiten muss der Nutzer auch wieder hineinzoomen um die Übersicht besser sehen zu können. Wenn man ein bestimmtes Produkt sucht ist diese Bedienung noch verschmerzbar, möchte der Nutzer allerdings sich über mehrere Produkte informieren, ist der Aufwand höchstwahrscheinlich zu hoch.
Tobias Jordans von uxzentrisch hat in einer Zeichnung gut skizziert, wie sich die User Experience auf mobilen Seiten verhält.

User Experience Mobile

Quelle: http://uxzentrisch.de/mobile-user-experience/

Die Standard-Webseite

Eine Standard-Webseite kann negative Nutzererfahrungen hervorrufen, wenn bestimmte Funktionen nicht nutzbar sind oder die Bedienung zu kompliziert ist. Höchst positive Erfahrungen können mit der Standard-Webseite nicht erreicht werden.

Mango Mobile-Shop

Mango bietet zwar eine optimierte Darstellung, allerdings nur für den Hinweis auf die iPhone-App; der normale Shop ist nicht einsehbar – definitiv ein Konversionskiller

Mobile Templates

Mobile Templates, die Inhalte passend für die Displaygröße der Smartphones anzeigen, können die Nutzererfahrungen schon enorm steigern. Der Nutzer bekommt die Inhalte in der passenden Größe angezeigt und wird nicht mehr dazu genötigt zu zoomen. Die klickbaren Flächen sollten genügend Fläche haben, so dass sie problemlos mit dem Finger bedient werden können. So kann der Nutzer schneller durch den Shop navigieren und komfortabel passende Produkte finden.

Besondere mobile Usecases

Mobile Geräte bringen Funktionen mit, die so auf einem PC oder Laptop nicht vorhanden sind, wie z.B. die Ortung über GPS oder die Steuerung über Gesten. Werden solche Funktionen in die Webseite mit eingebaut, kann dies die User Experience noch mal steigern. Allerdings ist dies nicht zwangsläufig so. Man sollte schon darauf achten, dass der Einsatz solcher Funktionen auch Sinn macht. Auf der Produktseite kann es so zum Beispiel Sinn machen die Bilder per Wischen wechseln zu lassen. Die Ortung kann zum Beispiel genutzt werden, um den stationären Shop in aktueller Reichweite anzuzeigen oder um eine ortsbezogene Serviceleistung anzubieten.

Achten Sie darauf, was der Nutzer machen möchte

Wichtig ist natürlich auch wie für die normale Webseite die Bedürfnisse des Nutzers zu kennen und auf diese einzugehen. Grundlegende Elemente für mobile Webseiten, die besondere Aufmerksamkeit erfordern sind:

Suche

Die Suche sollte prominent oben platziert werden, da in den meisten Fällen von einer konkreten Anfrage ausgegangen werden kann. Die Suche liefert wahrscheinlich auch schon ein eingeschränktes Ergebnis, so dass der Nutzer nicht so viele Produkte anschauen muss.

Conrad Mobile-Shop

Prominente Suche direkt am Anfang bei Conrad

Einstieg über Kategorien

Auch ein Stöbern im Shop sollte für den Nutzer einfach gestaltet werden. Es sollte ein schnelles Vor- und Zurückspringen in den Kategorien möglich sein. Je nach Anzahl der Haupt- und Unterkategorien kann man hier auch mit Drop-Downs arbeiten.

Amazon Mobile-Shop

Drop-Down Menü bei amazon

Produktbilder

Auch im mobilen Web ist ein visueller Eindruck des Produktes wichtig. Mehrere Produktbilder zu liefern ist genauso wie im Standard-Shop notwendig. Hier sollte man auch die Ladezeiten berücksichtigen. Die Bilder sollten in der passenden Größe ausgeliefert werden, so dass nicht unnötig große Bilder geladen werden und alternative Bilder sollten vorgeladen werden, damit der Bildwechsel schneller verfügbar ist.

Görtz Mobile-Shop

Bei Görtz kann man bequem per Wisch-Gestik die verschiedenen Produktbilder anschauen

Warenkorb

Das Erkennungsmerkmal eines Shops sollte natürlich auch immer auf jeder Seite mitgeführt werden und auch schon auf der Startseite präsent darauf hinweisen, dass hier eingekauft werden kann.

Filter

Um die Produktliste so gering wie möglich zu halten, sollten dem Nutzer auch Filter angeboten werden, damit er die Auswahl einschränken kann. Bei einer zu großen Produktliste verliert der Nutzer ansonsten schnell den Überblick bzw. verliert die Geduld, da das Laden von neuen Seiten durch langsamere Ladezeiten lange dauert. Für den Nutzer ist es auf dem Smartphone auch komfortabler mehr Produkte auf einer Seite zu haben, da das Scrollen relativ leicht und schnell per Geste funktioniert. Das Laden einer neuen Seite beim Seitenwechsel hingegen dauert sehr lange.

Filter Görtz Mobile-Shop

Filtermöglichkeiten bei Görtz

Direkte Seitenwahl

Wie schon erwähnt kann das Laden einer neuen Seite beim Seitenwechsel relativ lange dauern. Deshalb sollte dem Nutzer neben dem Vor- und Zurückblättern der Seiten auch die direkte Seitenwahl angeboten werden. Will der Nutzer nämlich gezielt einige Seiten wieder zurückspringen und kann diese nicht direkt ansteuern, kann dies wiederum sehr lange dauern und den Nutzer frustrieren.

Asos Mobile-Shop

Direkte Seitenwahl bei Asos

Formularbeschriftung

Bei den Formularen haben sich zwei Beschriftungsanzeigen etabliert, die beide ihre Vor- und Nachteile haben. Eine Variante ist es die Feldbeschriftung oberhalb des Formularfeldes anzuzeigen. Diese Variante benötigt mehr vertikalen Platz und lässt somit die Formulare länger erscheinen, allerdings behält der Nutzer den Überblick, um welches Feld es sich handelt.
Die zweite Variante setzt die Feldbeschriftung in das Feld hinein. Diese Variante spart einiges an Platz und ist sehr übersichtlich. Füllt der Nutzer die Felder allerdings aus, kann er nicht mehr kontrollieren, ob er die Daten in das richtige Feld eingetragen hat.

Daten Görtz Mobile-Shop

Feldbeschriftung oberhalb des Feldes bei Görtz

Otto Mobile-Shop

Feldbeschriftung im Feld bei Otto

Anmeldung

So unbeliebt zumindest die Pflichtanmeldung bei Onlineshops auch ist, macht sie unterwegs schon viel mehr Sinn. Denn durch die Speicherung der persönlichen Daten in einem Nutzerkonto erspart sich der Nutzer einige Eingabefelder. Natürlich sollte die Anmeldung nach wie vor freiwillig sein und neben dem Login in das Nutzerkonto auch der Checkout als Gast angeboten werden.

Checkout Görtz Mobile-Shop

Übersichtlich: Anmeldung bei Görtz für Bestands- und Neukunde

 Sportscheck Mobile-Shop

Unübersichtlich: Neukundenanmeldung, Login und Anmeldung mit Kundennummer oder Clubcardnummer (die man unterwegs wahrscheinlich eh nicht dabei hat) sind einfach zu viel

Emotionen

Obwohl die Oberfläche für mobile Webseiten natürlich ziemlich reduziert werden sollte, darf man die emotionale Ansprache nicht vergessen. Der Nutzer sollte immer wissen, im welchem Shop er sich gerade befindet. Oben das Logo mitzuführen und die CI-Farben sinnvoll im Template einzusetzen, hilft einen persönlichen Charakter beizubehalten.
Auch mit Bildern kann gearbeitet werden, wenn diese bewusst und gezielt eingesetzt werden.

Asos Mobile-Shop Start

Bildsprache bei Asos steigert Emotionen und unterstützt die visuelle Führung in die Hauptkategorien \“Women\“ und \“Men\“

Heine Mobile-Shop

Auch Heine arbeitet mit Bildern für die Kategorieeinstiege

Fazit

Die Möglichkeiten mobile Webseiten und Onlineshops nutzerfreundlich zu gestalten und eine relativ hohe User Experience zu erreichen, sind da. Genutzt werden sie zur Zeit zumindest in Deutschland noch relativ wenig, aber eine Verbesserung zum Vorjahr ist schon erkennbar. So haben einige Onlineshops schon mit einer mobilen Variante aufgerüstet und sind auf einem guten Weg, während andere noch abwarten und das Potential für sich und ihre Zielgruppe noch nicht erkennen. Behalten Sie Ihre Zahlen im Auge, wie sich die Nutzung von mobilen Geräten entwickelt, denn das Bedürfnis Waren online zu kaufen ist bei den Nutzern vorhanden.

  • Send to Kindle
  • https://www.konversionskraft.de/?p=8279
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

, , , , ,

1 Reaktion auf  “Mobile Websites: User Experience bei Mobile-Shops”

Trackbacks/Pingbacks

  1. […] ECOM-Vortrag: “Tablet-Perspektiven für den Online-Handel” – Mobile Websites: User Experience bei Mobile-Shops – SEO: On-Page und Linkaufbau 1×1 für Online Shops – Social Media. Der Erfolg wächst […]

Hinterlassen Sie einen Kommentar