Im Oktober hat Otto seine Desktop Website auf Basis der selbst entwickelten Plattform “Lohtse” neu gelauncht. Jetzt experimentieren die Hamburger auch mit einer neuen Version der m.otto.de, der smartphoneoptimierten Variante des Otto Online Shops. Bei der Arbeit an unserer Studie zur Usability von mobilen Online Shops, dem Mobile Web Commerce Benchmark, hatten wir Gelegenheit, das alte und neue Design zu vergleichen. Was hat Otto nach drei Jahren Erfahrung mit seinem mobilen Online Shop geändert? Welche Lehren können andere Online-Händler daraus ziehen?

Die Startseite der m.otto.de im alten Design

Die Startseite im alten Design

 
Die Startseite der m.otto.de im neuen Design

Die Startseite im neuen Design

Header und Startseite: Reduktion der Signale, klare visuelle Hierarchie

Die Startseite eines Online Shops ist Anker und Sprungbrett für Besucher. Dies gilt um so mehr für die Nutzung auf Smartphones. Schon die unmittelbare Ansicht (“above the fold”, also ohne Scrollen) sollte dem Nutzer eine klare Orientierung ermöglichen und ihm die wichtigsten Navigationsmöglichkeiten zur Erreichung seines eigentlichen Zieles vermitteln, ohne ihn dabei mit zu vielen Signalen zu überfordern.

Vergleicht man die beiden Startseitendesigns (siehe oben) fallen viele Optimierungen ins Auge, die Otto für die schnelle Auffassbarkeit und klare visuelle Strukturierung vorgenommen hat: Der persistente Header enthält nur noch vier visuell leicht voneinander abzugrenzende Elemente (Menü, Logo, Suche und Warenkorb) statt vormals fünf, von denen vier sich nur bei genauem Scannen und zusätzlichem Lesen der Unterschriften klar identifizieren ließen. Der wichtige Ankerpunkt Logo ist präsenter.

Die Position der Icons für Suche und Warenkorb folgt jetzt der Konvention, das Warenkorb-Icon ganz rechts und den Zugriff auf die Suche links daneben zu platzieren. Auf der Startseite ist die Suche bereits aufgeklappt, das Sucheingabefeld direkt nutzbar. Dass das Icon fürs Menü ganz links steht, noch vor dem Logo, ist der Tatsache geschuldet, dass es sich um ein Off-Canvas-Flyout-Menü handelt. Dieses Menüdesign hat ursprünglich Facebook populär gemacht. Inzwischen findet es sich in vielen Apps und mobilen Webseiten. Bei Betätigung des Menü-Icons schiebt es sich von links auf und verdrängt den Seitencontent. Gegenüber dem Header bietet das Menü u.a. zusätzlich den Zugriff auf die Navigation über die Produktkategorien, den Merkzettel sowie Servicethemen.

Das neue Menü der der m.otto.de

Das neue Off-Canvas-Flyout-Menü

Interessant ist, dass Otto dem “Hamburger”-Icon als Symbol fürs Menü kein intuitives Verständnis zutraut und es daher mit einer Beschriftung (“Menü”) versehen hat. Auf der anderen Seite weicht der gut konventionalisierte Einkaufswagen der Einkaufstasche als Warenkorbsymbol. Bei Online Shops für Mode scheinen stilisierte Einkaufstaschen auch im mobilen Bereich sehr verbreitet, insofern kann Otto zumindest bei dieser Klientel auf unmittelbares Verständnis hoffen. Allgemein priorisiert die Modebranche hier wohl Brand Experience höher als die sichere intuitive Auffassbarkeit (vergleiche z.B. Zalando, H&M, BonPrix oder Asos). Eine Positionierung am rechten Rand der Header-Navigation hilft dem erfahrenen Online-Shopper.

Den Einsatz von Farben hat Otto merklich reduziert und Texte auf das absolute Notwendige beschränkt, was der visuellen Hierarchie gut tut. Die beiden Haupteinstiegsmöglichkeiten für eine Produktrecherche, Eingabe eines Suchbegriffes und Navigation über die Produktkategorien, sind leicht erkennbar und im unmittelbaren Zugriff. Der Willkommensgruß samt redundantem Menü (siehe blauen Balken mit Text “Wilkommen - Was möchten Sie tun?”) ist der Vereinfachung zum Opfer gefallen.

Die Bühne vermittelt durch die neuen Pfeilelemente nun deutlich prominenter, dass sie mehrere rollierende Inhalte bereitstellt. Außerdem lässt sie sich erwartungskonform per Swipe-Geste weiterblättern. Der alte Auftritt verzichtete unverständlicherweise vollständig auf Gestenunterstützung bei Bühnen und Produktkarussells.

Der Footer-Bereich der m.otto.de im alten Design

Der Footer-Bereich im alten Design

 
Der Footer-Bereich der m.otto.de im neuen Design

Der Footer-Bereich im neuen Design

Schon im alten mobilen Design hatte Otto einen der fingerfreundlichsten Footer-Bereiche der von uns untersuchten Online Händler. Oft sind gerade die Verweise auf Impressum, AGB etc. so dicht gepackt, dass eine mühelose und fehlerfreie Bedienung nicht mehr gewährleistet ist. Auch der Abschluss der Seite mit dem Claim der Marke (“Otto … find ich gut”) war für uns ein clever gemachtes Stück Markenbildung.

Mit dem neuen Design erweitert Otto den Seitenfuß um zentrale Themen, die im Seitenkopf keinen Platz gefunden haben, so dass auch “Menüverächter” diese Funktionen finden können. Die neuen prominenten Kontaktangebote kann man nur als mutigen Schritt zur Erhöhung der Kundenfreundlichkeit betrachten. - Hat hier jemand “Kontaktvermeidung” geflüstert?

Dem Claim hat Otto zusätzlich eine Checkliste mit Leistungsversprechen beigestellt. Das ist sicherlich auch als vertrauensbildendes Signal (neudeutsch: “Trust Symbol”) gedacht und ersetzt Gütesiegel, auf die Otto im mobilen Auftritt weiterhin konsequent verzichtet.

Die Produktliste

Die Produktliste der m.otto.de im alten Design

Die Produktliste im alten Design

 
Die Produktliste der m.otto.de im neuen Design

Die Produktliste im neuen Design

Die neuen Listendarstellungen der Produktkategorien setzen auf sehr große Bilder, die einen guten ersten Eindruck von den angebotenen Produkten ermöglichen. Hier scheint Otto Zalando nachzueifern, die in Produktlisten ebenfalls auf große gekachelte Produktbilder setzen. Im Gegensatz dazu waren in Ottos altem Design die Bilder vielfach zu klein, um eine befriedigende erste Bewertung zu ermöglichen, die bestenfalls den erwünschten “Haben wollen”-Impuls auslöst.

Nutzer, die beim Stöbern gern zunächst Produkte vormerken, unterstützt Otto auch weiterhin sehr gut durch eine Merkfunktion in der Produktliste. In der neuen Kacheldarstellung geht diese Funktion nicht mehr zu Lasten der Ausmaße der Produktbilder.

Warum Otto in Suchergebnislisten eine andere Darstellung mit kleineren Bildern wählt ist uns nicht verständlich. Vielleicht wird hier noch experimentiert?

Die neue Suchergebnisliste der der m.otto.de

Suchergebnisse für “Blazer” im neuen Design:
Viel Weißraum, wenig Inhalt

Ebenfalls wie Zalando nützt Otto im neuen Design den zusätzlichen Raum der Landscape-Orientierung für eine 3-Spalten-Darstellung.

Die Produktliste der m.otto.de im Querformat

Die Produktliste im Querformat (Landscape)

Wie Zalando gibt Otto in der Listendarstellung keinerlei Hinweise zu Produktvarianten (wichtig u.a. für Farbvarianten bei Textilien). Im Gegensatz zu Zalando scheint Otto aber in der Liste nicht alle relevanten Varianten einzeln darzustellen. So werden vom Kunden möglicherweise attraktive Produktvarianten übersehen, oder müssen mühselig durch Öffnen der jeweiligen Produktseiten von ihm recherchiert werden.

Die Filterfunktionen der Produktliste scheinen noch “Work in Progress” zu sein. Zwar sind die neuen dedizierten Seiten für die Auswahl der Filterwerte deutlich komfortabler als die vormaligen (insbesondere auf Apples Smartphones umständlichen) Dropdown-Menüs. Allerdings lassen der Interaktionsaufwand für das Setzen eines Filters, die zum Teil unbenutzbare Aufbereitung der Filterwerte (z.B. Markenfilter mit 247 Einträgen) und die unglücklich in den Filtermechanismus integrierte Subkategorienavigation Raum für erhebliche Optimierungen.

Die Produktseite

Auch die Produktseite profitiert vom neuen Design: Tap-Flächen und Texte sind größer, die Gestaltung übersichtlicher.

Die Produktseite der m.otto.de im alten Design

Die Produktseite im alten Design

 
Die Produktseite der m.otto.de im neuen Design

Die Produktseite im neuen Design

Der bisher angebotene kollabierte Breadcrumb (“Wo bin ich?”) scheint sich nicht bewährt zu haben und weicht einer einfachen Navigation zur Oberkategorie bzw. zur Suchergebnisliste.

Die verschiedenen Produktbilder sind nun auch außerhalb der Zoom-Ansicht im Zugriff und erwartungskonform per Swipe-Geste navigierbar. Die orientierenden Angaben zum Produkt, die im alten Design durch ihre Platzierung das Produktbild beeinträchtigten, stehen jetzt etwas strukturlos oberhalb des Bildes. Die Darstellung könnte man sicherlich noch übersichtlicher gestalten.

Wir konnten uns nicht erklären, weshalb Otto im neuen Design gänzlich auf die Zoom-Darstellung verzichtet. Gerade bei den eher kleinen Abbildungen auf der Produktseite, lassen sich viele Artikel nicht mehr gebührend durch den Nutzer begutachten. Vielleicht ist das Ottos agilem Vorgehen geschuldet und die verbesserte Produktdarstellung befindet sich noch im Product Backlog?

Eine weitere interessante Unterlassung: Sowohl der mobile als auch der Desktop-Auftritt bieten auf den Produktseiten keine Social Sharing Funktionen mehr an.

Bei der Farbvariantenauswahl wurde lediglich die Darstellung leicht optimiert. Die ausgewählte Farbe wird durch das aufgesetzte Häkchen nun deutlich prägnanter signalisiert als durch den alten Auswahlrahmen.

Bei der Größenauswahl setzt Otto jetzt auf ein Dropdown-Element (alt: Toggle-Element mit Liste), auch wenn insbesondere auf Apples iPhone Dropdown-Elemente alles andere als komfortabel zu bedienen sind.

Fazit

Im direkten Vergleich von altem und neuem Design fällt Vieles auf, das Otto jetzt offensichtlich besser löst. Man darf gespannt sein, was in den nächsten Monaten noch an Optimierungen in den neuen Auftritt einfließt.

In unserer Studie “Mobile Web Commerce Benchmark” gehen wir auf weitere Aspekte der mobilen Verkausfläche von Otto ein und belegen, in welchen Bereichen für den Hamburger Versandhändler noch großer Nachholbedarf besteht.

Anmerkung: Zurzeit erhalten Besucher der Website m.otto.de noch zufällig die alte oder die neue Version. Wer beide besuchen möchte, muss (ggf. mehrfach) seine Cookies löschen und die Site neu ansurfen.

blog comments powered by Disqus