Seit gestern ist der neue Online-Shop der Marke Otto live. Hier die auffälligsten Änderungen. Statt Tastenoptik bilden nun freistehende Begriffe die weiterhin horizontal angelegte Hauptnavigation. Bei Rollover erscheinen jeweils großflächige Layer wie man sie bereits von Ebay oder Ikea kennt. Darin enthalten sind nicht nur die klassischen Begriffe der zweiten Navigationsebene, sondern es finden sich hier auch optionale Einstiegsmöglichkeiten wie z.B. über das Alter oder über Modestile. Bei mir (Mac/Firefox) dauert es jeweils eine Weile, bis die üppig befüllten Layer aufklappen, weshalb die Haptik im Vergleich zum Vorgänger nicht ganz so angenehm erscheint. Der Nutzen solch eines Direkteinstieges in tiefer gelegene Ebenen steht aber außer Frage. Optisch ist sie ebenfalls ansprechender. Einige Begriffe wie z.B. “Wohnen” haben eine eigene Farbwelt erhalten. Bei der Vielzahl der Hauptnavigationspunkte war es eine gute Entscheidung nicht zwanghaft jedem eine eigene Farbe zu spendieren. Im linken Bereich – etwas runtergerutscht – befindet sich weiterhin die Subnavigation.
Die Gesamtbreite ist um stattliche 190 Pixel auf 980 Pixel angewachsen. Dadurch wirkt der neue Auftritt sehr luftig und angenehm. Dominantes Stilelement sind flächige Rechtecke. Bei Rubriküberschriften, Produkt-Teasern und auch beim Aktivzustand der Hauptnavigation kommen Quadrate bzw. rechteckig hinterlegte Flächen zum Einsatz. Mitunter bewirkt der Kontrast zwischen “leichter” Hauptnavigation und “schwerem” Content eine gewisse Unausgewogenheit, was sich aber aufgrund der Vielzahl an Seiten kaum bei jeder Ansicht vermeiden lässt.
Als primäre Schrift kommt in Überschriften und in der Hauptnavigation die “Century Gothic” zum Einsatz. Das verleiht dem Gesamtaufbau durchaus Eleganz. Auch die Dropdowns der zahlreichen Filtermöglichkeiten bekommen per CSS einen eigenen Stil. Außerdem ist aufgefallen: Zoom-Ansichten der Bilder auf Detailseiten öffnen sich noch im alten Look. Hin und wieder werden Teaser-Bilder verzerrt dargestellt. Beim Durchgang der Seiten war die Performance noch eher mau. Vielleicht nur Anlaufschwierigkeiten. Ansonsten très chic.
Danke an Kim für den Hinweis in den Kommentaren
Also ich persönlich finde Layer-Navigationen, bei denen die erste Ebene 2 Zeilen einnimmt ziemlich problematisch. Versuch doch mal, von dem Punkt Damen (Hover) zum Baumarkt zu kommen… Ziemlich wenig durchdacht, finde ich. Schick ja, Usability: Keine.
Insgesamt ganz schick aber extrem viel Grafiktext – oft hätte man auch Systemtext verwenden können anstatt die Arial mit im JPG zu speichern.
Die Typo in der Navi und im Content ist übrigens die Avantgarde. Die Century kommt nur im Shopping-Erlebnis-Teaser vor.
Bei mir (Mac/Firefox) sind alle Layer der Hauptebene sofort da, auch die üppig befüllten.
Was mich auch eher stört, wie .chris bereits anmerkte, ist die Tatsache, dass durch diese Layer teile der Navigation überdeckt werden. Das hätte man anders lösen können.
Ansonsten erscheint mir der Auftritt auf den ersten Blick recht aufgeräumt.
Nicht schlecht!
Das Redesign ist von fork. Nur so als Randinfo ;)
Welche Layer? Ohne JavaScript sehe ich da keine Layer. Warum immer wieder davon ausgegangen wird, man habe JS aktiviert, ist mir ein Rätsel. Die Online-Welt besteht nicht nur aus DAUs.
Am besten ist der Link zu Bücher/CD/DVD (haben die nur eine CD und eine DVD im Angebot? Warum kein Plural?), die Seite bleibt bei mir nämlich abgesehen von der oberen Navigation weiß.
Als Zielgruppe peilt Otto wohl den eher kurzsichtigen Teil der Bevölkerung an…bei der Riesenschrift.
Und noch was. Auf dieser Seite werden diverse Auszeichnungen aufgelistet u.a. auch “Otto.de ist TÜV-geprüfter Online-Händler für mehr Sicherheit im Internet!” Funktioniert ohne JavaScript leider auch nicht. Ziemlich peinlich, wenn man mit “mehr Sicherheit” wirbt, aber JS voraussetzt.
@nojavascript: für leute wie dich, die ohne js, flash und co unterwegs sind, hat otto ja auch noch ne eigene seite aufgesetzt: https://www.einfach.otto.de/ finde ich vorbildlich.
CD und DVD sind ja nunmal Abkürzungen. Da darf man sich das Plural s dann gerne denken auch wenns meistens so gesprochen wird.
Die Zielgruppe der Seite dürfte tatsächlich jenseits der 40er Marke liegen.
Dementsprechend ist große Schrift nicht nur sinnvoll, sondern nötig.
Die Nutzer des Internets werden immer älter und die Denke dieser Tatsache gerecht zu werden hat scheinbar noch immer nicht alle Entwickler / Designer erreicht. Schade eigentlich.
Der Kommentar mit mehr Sicherheit zu werben aber Javascript einzusetzen ist wie Äpfel mit Bananen zu vergleichen. Für vertrauenswürdige Seiten (zu denen ich Otto mal einfach zähle.. von denen gehen zumindest sicher keine Crossdomain Scripting attacken aus) aktiviere ich auch ohne Bedenken Javascript.
Javascript kann durchaus zu einer guten und sinnvolle Erweiterung des Look & Feel einer Seite beitragen – ich gebe dir aber Recht, dass es wenn möglich nur unobstrusive eingesetzt werden sollte: Eine Navigation, die ohne Javascript nicht funktioniert ist konzeptionell und aus Usability-Gesichtspunkten ein katastrophaler Fehler.
Dennoch geht es bei dem Prädikat des TÜVs augenscheinlich um die Sicherheit des Servers. Was der Kunde aus eigener Unwissenheit/Unachtsamkeit auf seinem Computer zulässt ist sein eigenes Problem und kann sicher nicht TÜV geprüft werden :)
Oh Gott. die “einfach Seite” hatte ich nicht gesehen. Vielleicht sollten die Herren Fork entwickler / Konzepter mal folgendes lesen:
https://www.einfach-fuer-alle.de/artikel/textversion/
… und wenn Sie dabei sind das gleich mit:
https://www.vorsprungdurchwebstandards.de/theory/semantischer-code/
*indenbartnuschel*
Weiß jemand ob der Relaunch von hmmh kommt? Die haben die doch immer betreut. Steht zumindest hier: https://www.hmmh.de/de/customer
Schau doch mal hier Tobias
Ohweh, was für ein Schröffel. (Der Relaunch)
Ich kann dem Beitrag und in Teilen den Kommentaren hier nicht folgen, aber schön der Reihe nach:
Achim: Immer noch das Problem mit dem Lineal? Ich verwende schon ne Weile keinen Mac mehr, erinner mich aber blass, dass es da auch ein Bildschirmlineal gibt. Wo nimmst Du 980px her? Ich seh hier 1200 Pixel Breite, was mir schön dämlich einen Scrollbalken in den Browser zaubert.
Oder versteh ich Dich flasch?
Layer seh ich mit und ohne Javascript gar keine, wo sollen die konkret sein?
Marcel: einfach.otto ist ja wohl ein “vorbildlicher” Scherz, siehe Kommentar von Felix dazu
Felix: vertrauenswürdige Seiten? Mhh? So vertrauenswürdig, wie etwa ausgezeichnete Banking-webseiten. Dann is ja gut ;)
Ich kann dem Otto-Dingens rein garnix abgewinnen, (visuell) unstrukturiert hingeklatschter Krempel, Markup, dass einem schlecht wird, egal was man tut, ständig steht man vor einer Barriere (Javascript/ Alt-attribute usw.), aus meiner Sicht ist das ein klarer Fall von: “hätte man sich sparen können”, möchte nicht wissen, was der Dreck gekostet hat.
Mike, Dir ist nicht zu helfen. Soll sich jeder selbst eine Meinung bilden.
Otto gibt Gas – Relaunch von otto.de inkl. Medien / Start der Social Shopping Plattform für Mode, Lifestyle und Wohnen smatch.com …
Otto gibt Gas – Relaunch von otto.de inkl. Medien / Start der Social Shopping Plattform fuer Mode, Lifestyle und Wohnen smatch.com …
[…] Designtagebuch kann man eine sehr umfassende Nutzer-Analyse aus Sicht eines Computer-Visualisten verfolgen. Aber auch mir ist beim Klicken aufgefallen, […]
[…] Designtagebuch kann man eine sehr umfassende Nutzer-Analyse aus Sicht eines Computer-Visualisten verfolgen. Aber auch mir ist beim Klicken aufgefallen, […]
@Tobias: An der technischen Umsetzung waren unter anderem hmmh und neuland bfi beteiligt. (Und ich auch.)
das muss ne Welle sein es gibt ein Haufen Shops die sich verschlimmbessern (und das ist noch schön geredet), naja dann gibt es mal Arbeit für nen Designer….
salü
[…] Begriffe aufnehmen und stellt hinsichtlich der Größe der Aufklappnavigation sogar die Lösung bei Otto noch in den […]
Ich finds alles zu groß mit zu viel weißer Fläche. Das alte Design war viel praktischer, man muss jetzt mehr scrollen und hat weniger infos auf derselben Fläche.
[…] nicht nur in die zweite sondern auch direkt in die dritte Ebene. Da jedoch im Vergleich zum Mitbewerb nicht Produktkategorien, sondern übergeordnete Begriffe (Produkte, Aktionen) die erste Ebene […]
Das war allerdings die AvantGarde, nicht Century Gothic, die damals verwendet wurde.