Shopbetreiber-Blog Shop-Clinic über Otto.deDer Versandhändler Otto hat in den vergangenen Wochen nicht nur ein neues Logo präsentiert, dass besser auf die Bedürfnisse der modernen Medien angepasst ist. In der vergangenen Woche ist nun der im letzten Jahr angekündigte, neue Onlineshop der komplett responsive umgesetzt wurde, online gegangen. Für uns der Anlass einmal etwas genauer hinzuschauen und zu zeigen was Sie vom Relaunch lernen können.

Nachdem Otto bereits vor über eineinhalb Jahren sehr viel Zeit und Aufwand in die Entwicklung eines umfangreichen Prototypen für einen komplett neuen Onlineshop nach responsive Prinzipien investiert hat, ist es nun soweit. In einem eigenen Beitrag im Otto-Developer-Blog werden ausführlich Herangehensweise und Herausforderungen bei diesem massiven Projekt geschildert. Lesen lohnt sich für jeden Shopbetreiber. Die Idee hinter dem Prototypen war simpel: Man wollte eine Antwort auf die Frage ob responsive Design für einen großen Onlineshop mit besonderen Anforderungen überhaupt umsetzbar ist. Bereits im Beitrag wurde die Frage mit einem klaren “Ja” beantwortet. Nun, gut eineinhalb Jahre später, können Sie sich selbst davon überzeugen.

Das neue otto.de setzt die üblichen Techniken für responsive Design ein. Diese Umfassen Viewport-Tag, Media-Queries und relative Größen. Der Unterbau wird durch eine komplett eigens entwickelte Shopsoftware gehandelt. Diese stellt ebenfalls den Unterbau der Shopping-Apps von Otto.

Der erste Eindruck

Der erste Eindruck mit einem Desktoprechner: Unspektakulär aber irgendwie angenehm. Denn auf den ersten Blick – und das ist wichtig um Stammkunden nicht zu verschrecken – sieht die Startseite nach einem üblichen Onlineshop aus. Alle Elemente, die man erwarten würde sind vorhanden: Logo, prominente Suche, Warenkorb, Login, umfangreiche Navigation, Bühne, Empfehlungen, SEO-Texte, Footernavigation. Das Schöne: Wenn man die Seite mit dem Smartphone aufruft und den Desktop-Shop bereits kennt, erkennt man den Onlineshop ebenfalls sofort wieder. Einen Anteil daran hat mit Sicherheit die eigene Icon-Sprache die der Onlineshop verwendet. Die Raffinesse des Relaunchs begreift man allerdings erst, wenn man sich die Details und die Umsetzung für Smartphones anschaut.

Otto punktet mit Performance

Einer der Punkte, die man bei Otto während des Prototyps als besonders kritisch angesehen hat, war die Performacne. Besonders großflächige Bilder stellten hier eine Herausforderung dar. Das neue otto.de macht aber auch hier eine gute Figur: Auch über eine mobile Datenverbindung lädt die Startseite des Onlineshops innerhalb kürzester Zeit vollständig. Je nach verfügbarer Bildschirmauflösung werden speziell auf die Endgeräte optimierte Bilder vom Server zur Verfügung gestellt. Shopbetreiber können für eine solche Lösung zum Beispiel auf die adaptive Images-Technik zurückgreifen. Auch hat man beim Relaunch darauf geachtet, dass CSS- und Javascript-Dateien minifiziert, d.h. unnötige Zeilenumbrüche und Leerzeichen im Code entfernt, werden.

Auch komplexe Navigation gut gelöst

Der Onlineshop von Otto hat ein großes Angebot an Produkten, die alle möglichst schnell über die Navigation erreicht werden können. Otto nutzt dazu in der Desktop-Variante, wie unzählige andere Shops, ein Flyout-Menu. Je nach Navigationspunkt öffnet sich direkt eine großzügig angelegte Unternavigation. Die vielzähligen Unternavigationspunkte sind unter Überschriften zusammengefasst. Offenbar hat man sich bei Otto auf die Fahnen geschrieben auch Smartphone-User nicht weniger Auswahlmöglichkeiten anzubieten.

Die neue Navigationsstruktur responsive Shop von Otto.de

Ein Klick auf das Navigationsicon zeigt dann die erste Ebene der Navigation. Dort wählt man sich wie durch ein normales Smartphone-Menü immer tiefer in die Seite – ohne permanentes Neuladen des gesamten Onlineshops. Durch das verwenden des bekannten Musters aus dem normalen Smartphone-Menü müssen sich die Nutzer noch nichteinmal an eine neue Art der Navigation gewöhnen.

Immer den Status zeigen: Der Bestellprozess

Ein wichtiges Tool im Bestellprozess ist eine Fortschrittsanzeige. Zu jeder Zeit im Bestellprozess weiß der Kunde sofort wie weit er im Bestellvorgang gekommen ist. Eine solche Fortschrittsanzeige ist in vielen Desktopshops bereits seit langem Gang und Gäbe, aber in mobilen bzw. responsive Shops wurde auf diese Anzeige häufig verzichtet.

Der responsive Bestellprozess bei Otto

Bei Otto.de ist diese Statusanzeige immer oben für den User sichtbar.

Die Produktdetailseite

Während auf einer Übersichts- oder Suchergebnisseite die Anzahl der unterschiedlichen Elemente häufig noch übersichtlich ist, werden auf der Produktdetail-Seite häufig sehr viele unterschiedliche Informationen abgebildet. Das stellt einen responsive Shop schnell vor die Herausforderung: Wie kann man Desktop- und Smartphone-Variante gleichermaßen ansprechend gestalten. Um auch hier für Smartphone-Nutzer das Optimum rauszuholen hat man sich entschieden Marketingelemente des Onlineshops in der Smartphone-Version gar nicht erst anzuzeigen. Die Call-To-Action gewinnt dadurch, denn Sie steht weiterhin weitgehend frei in unmittelbarer Nähe zum Preis.

Desktop und mobile Ansicht des neuen otto.de

Gibt es zu einem Produkt mehere Bilder, so werden diese in der Desktop-Version mit Vorschau-Bildern angeteasert. Smartphone-Nutzern werden diese direkt in einem eintachen, touch-sensitiven Slider anzeigt. Mit einer Wischgeste bekommt man direkt das nächste Foto gezeigt. Der Einsatz dieser zwei unterschiedlichen Lösungen ist ein gutes Indiz dafür mit welcher Detailtiefe man am Relaunch des Webshops gearbeitet hat.

Die Learnings

  • Auch komplexe Navigationsstrukturen können auf intuitive Weise für Smartphones nutzbar gemacht werden.
  • Auch Bild- und Grafik-Intensive Shops können eine gute Performance haben, wenn Sie auf entsprechende Techniken zurückgreifen.
  • Zeigen Sie dem User zu jeder Zeit, wo er sich im Bestellprozess befindet.
  • Ein responsive Shop kann die gleiche gute User Experience wie eine rein mobile Website bzw. eine reine Desktop-Seite aufweisen.
  • Unterschiedliche Darstellungsformen für Produktabbildungen, je nach verwendetem Endgerät, einsetzen.

Jetzt sind Sie an der Reihe!

Sicherlich hat Otto.de das responsive Design nicht vollkommen neu erfunden. Man merkt aber, dass man sich bei dem Relaunch sehr viel Zeit genommen und an vielen Stellen immer weiter optimiert hat. Sicherlich ist Otto.de nun eines der besten Beispiele dafür, wie man responsive Design nutzt um einen zeitgemäßen Onlineshop zu launchen.

Welche Elemente im neuen Auftritt von Otto.de finden Sie besonders gelungen? Was gefällt Ihnen nicht und warum? Ist die Navigationsstruktur für Smartphones zu tiefgehend? Diskutieren Sie mit in unseren Kommentaren.

image_pdfPDFimage_printDrucken