Je mehr Smartphones im Einsatz sind, desto wichtiger wird es für die Anbieter von Online-Shops, diese auch als mobile Version, als sogenannten M-Shop, anzubieten. Denn mittlerweile kauft jeder Dritte Smartphone-Nutzer mit seinem Handy ein. Worauf etwa kleine und mittelständische Unternehmen bei der Entwicklung eines benutzerfreundlichen mobilen Shops achten sollten, möchte ich ganz konkret am Beispiel des M-Shops von OTTO Office veranschaulichen, der unter m.otto-office.com zu erreichen ist. Wir haben ihn im Juni 2011 veröffentlicht, seitdem ständig verbessert und konnten dabei viele Erfahrungen sammeln, die wir gern weitergeben.
Der mobile Begleiter für´s Büro
Der OTTO Office M-Shop wurde von unserem Webdesigner Oliver Thiele konzipiert, der unser Experte für die mobile Nutzung von Webseiten ist. Unser M-Shop ist für Smartphones mit Touchscreen optimiert. Alle User mit iPhone und anderen Smartphones werden bei Aufrufen unseres Online-Shops gefragt, ob sie auf den M-Shop wechseln möchten. iPads und Tablets werden automatisch auf den Online-Shop geleitet, da diese Geräte Browser mit normalen Bildschirmgrößen (1024 x 768 Pixel) haben.
Wir haben alle Buttons und Links mit großen Schaltflächen ausgestattet, so dass sie – unabhängig von der Fingerbreite – für alle Nutzer leicht bedienbar sind. Auf sogenannte Fly-Out-Menüs (Zusatz- oder Untersymbolleisten) haben wir komplett verzichtet, um eine bessere Übersicht zu gewährleisten. Der Shop enthält das gesamte Sortiment des „Muttershops“, konzentriert sich aber auf das Wesentliche: So sind zum Beispiel der Code und die Grafiken soweit reduziert, dass minimalste Ladezeiten gewährleistet werden können und es auch im UMTS-Netz Spaß macht, durch den Shop zu surfen. Auf der Startseite zeigen wir unser jeweiliges Topangebot.
Durch eindeutige und große Icons für alle Shop-Bereiche (Sortimente, Suche, Warenkorb…) findet sich der User sehr schnell zurecht. Auf den Produktdetailseiten werden alle wichtigen Informationen angezeigt, sämtliche Bilder lassen sich vergrößern und zoomen. Der „In den Warenkorb“-Button ist deutlich gekennzeichnet. Auch die Service- und Hilfeseiten sind an das mobile Layout angepasst. Bei Nutzung der Eingabefelder geht automatisch die richtige Smartphone-Tastatur auf; so öffnet sich etwa beim Mengenfeld in der Produktdetailansicht die numerische Tastatur. Der User spart sich dadurch das Umschalten zur richtigen Tastaturversion.
Mit schnellen Ladezeiten und einem durchdachten User Interface Design ist der OTTO Office M-Shop ein Begleiter für unterwegs, ohne dass der User Apps installieren muss. Und er läuft sogar auf Nokia Handys, die das Betriebssystem Symbian verwenden.
In drei Sekunden ist der Käufer weg
Wer seinen Online-Shop einfach 1:1 oder als eine abgespeckte Version ins mobile Web überträgt, verliert schnell seine Besucher. Gründe dafür, warum längst nicht jeder M-Shop bei den Kunden gut ankommt, sind zum Beispiel eine schlechte Darstellung der Seiten auf mobilen Endgeräten, eine mangelnde Benutzerfreundlichkeit oder zu lange Ladezeiten. So warten laut dem aktuellen Report „What Users want from mobile“ 68 Prozent der befragten deutschen Anwender nicht länger als drei Sekunden darauf, dass eine Seite auf dem Display ihres Smartphones erscheint. Rund die Hälfte der Befragten gab an, nicht mehr zu einer Seite zurückzukehren, die zu langsam oder gar nicht geladen hat. Passend dazu habe ich auf userfeedback eine interessante Zusammenstellung von „Gründen für Kaufabbrüche“ gefunden.
Grundsätzlich sollte beachtet werden, dass Smartphones ganz anders genutzt werden als ein Desktop-PC. Der Ort der Nutzung variiert zum Beispiel, so dass der User je nach Situation abgelenkt sein kann, etwa in öffentlichen Verkehrsmitteln. Mobile Shopping kann dadurch unterbrochen werden. Wichtig ist deshalb, dass sich der Nutzer auch bei kleinsten Ablenkungen schnell wieder auf dem Bildschirm orientieren kann.
Zum Schluss habe ich noch einige weiterführenden Linktipps für Sie: Der Marketing Shop Blog gibt „Sieben Tipps, wie Online-Händler den Einstieg in den Mobile Commerce finden“. Im Usabilityblog werden die „Bestellprozesse mobiler Online-Shops“ beleuchtet und Tipps zur Mobile Usability gegeben.
Sind Sie bereits mit einem M-Shop unterwegs oder stecken mitten in der Planung? Dann freue ich mich, wenn auch Sie Tipps weitergeben oder von Ihren Erfahrungen berichten möchten.
Urheber des Bildes: © kmiragaya – Fotolia.com