Mitten in der Wirtschaftskrise launchte Quelle seinen neuen Shop. Dieser Tage wurde ein weiteres Schwergewicht unter den Onlineshops auf ein neues Design und einen neuen Aufbau umgestellt. Überraschend ist dabei: Wir sehen die Rückkehr zur linken Hauptnavigation.
Nicht alles war früher schlecht
Gerade die drei großen Onlineshops Quelle, Otto und Neckermann haben sich von je her wechselfreudig gezeigt. Aktions- und Angebotsflächen sorgen ständig für Veränderungen, wie auch an der Struktur und der Aufbereitung der Artikel und Produkte kontinuierlich gearbeitet wird. So sind diese drei Shops generell schon sehr weit vorne, wenn es um Nutzerfreundlichkeit geht. Eine gewisse Strahlkraft auf die Branche kann man ihnen nicht absprechen. Wer viel ausprobiert, macht viele Erfahrungen und kommt irgendwann möglicherweise zu der Erkenntnis, dass nicht alles schlecht war. So zumindest könnte man die Entscheidung deuten, die Hauptnavigation (Produkte) ausschließlich in den linken Bereich zu verorten. Die zweite Produktebene war schon vor dem Relaunch links angesiedelt, nun wurde auch die erste Ebene auf die linke Seite gezogen, womit sie sich einem Trend entzieht, der seit mehreren Jahren das Webdesign geprägt hat.
Navi links – warum nicht?
dt-Leser balabushka warf in den Kommentaren zum ftd Relaunch die Frage auf, weshalb eigentlich so viele Hauptnavigationen in den letzten Jahren aus dem linken Bereich nach oben gewandert sind, wo sie in Form einer horizontalen Leiste aufgehängt sind. Gute Frage. Anders als eine vertikal angelegte Navigation, stößt ein horizontaler Aufbau schnell an seine Grenzen. 960-980 Bildpunkte sind nach wie vor das Maß aller Dinge, wenn es um die Breite geht. Für Websites mit nur wenigen Hierarchieebenen und nur 5-6 Hauptnavigationspunkten stellt diese Begrenzung kein Problem dar. Nachrichtenportale wie Stern oder Spiegel Online beschränken sich auf die Abbildung von drei bzw. vier Hierarchieebenen. Wenn es, wie bei n-tv in die fünfte Ebene geht, darf ein Brotkrumenpfad nicht fehlen, ansonsten verlöre man die Übersicht. Bei noch komplexeren Strukturen hingegen, etwa wie bei Ebay (6 Ebenen) oder innerhalb von Intranet-Umgebungen großer Unternehmen, ist eine linke Menüleiste unverzichtbar. Nichts scheint also bei großen Onlineshops näher zu liegen, als auf eine linke Navigationsspalte zu setzen.
Der starke Trend hin zu einer horizontalen Navigationsleiste wurde nicht zuletzt auch durch uns Designer befeuert. Eine zentriert sitzende, zweizeilige Leiste sieht einfach schicker aus, als eine L-Lösung. Wenn die Struktur flach ist, wird das ansprechendere Design umgesetzt. Das gedrehte L zog dabei meist den kürzeren, obwohl es im Vergleich zur horizontalen Navigationsleiste flexibler befüllbar und erweiterbar ist.
Detailansicht
Es ist immer spannend sich anzuschauen, wie die großen Shops mit Fotomaterial umgehen, vor allem bei der Detailansicht. Neben Superzoom-Ansichten, in denen man jede Naht und die Beschaffenheit eines Stoffes erkennt, stechen auch 360-Grad-Module jeden Printkatalog aus, in dem man pro Produkt meist nur eine Ansicht gereicht bekommt. Das Anfassen des Artikels im Kaufhaus, können die immer umfangreicher bestückten Bildgalerien zwar nicht ersetzen, aber sie sind der maßgebliche Impuls für den Start eines Einkaufsprozesses, weshalb in diesem Sektor immer sehr viel Energie aufgebracht wird.
Detailansichten in den drei großen Shops lassen kaum noch Wünsche offen. Sie sind aufgeräumt, beinhalten ein Bewertungssystem und der wichtigsten Link auf der Seite – in den Warenkorb – ist dementsprechend hervorgehoben.
Übersichtsseiten
Neckermann bietet auf Übersichtsseiten die Möglichkeit den Inhalt als Liste oder als Galerie anzuzeigen. Das unterschiedet den Auftritt von Quelle und Otto. Während sich alle Shops in Bezug auf die Filterfunktionalität ähneln, stellt die Eingrenzung der Produkte nach Angabe einer Preisspanne ein weiteres Unterscheidungsmerkmal dar. Während Neckermann und auch Quelle auf modische Karussell-Module setzt, verzichtet Otto auf deren Implementierung.
Fazit
Ein geglückter und interessanter Relaunch, der mit einer rein links angedockten Produktnavigation überrascht und einige praktische Erweiterungen bereit hält. Dank Wegnahme der zweizeilig und horizontal angelegten Schaltflächen, erscheint der Auftritt aufgeräumter und auch ansprechender.
Nachrichtenseite Shop. Auf Nachrichtenseiten wird üblicherweise über den Content navigiert. Eine deutlich sichtbare linke Navigationsleiste ist hier nicht nötig, die Navi-Leiste kann in einer horizontalen Leiste eingeklappt werden. Auf Nachrichtenseiten wird üblicherweise viel gescrollt. Eine linke Spalte nur für die Navi wäre hier ungünstig für die Raumaufteilung.
Bei Shops, die von großen Katalogen abgeleitet sind, ist die Einteilung in Kategorien geübter und zu diesen Kategorien passt üblicherweise eine linke Navi besser.
Momentan springt die Navigation noch insbesondere bei Menüpunkten mit Umbruch.
[…] Designtagebuch wird heute der Neuanstrich von Neckermann vorgestellt. Ein Absatz ist besonders […]
Die beiden großen Referenzen (schon rein nach Nutzerzahlen – also das, was eben diese kennen) hatten und haben immer links navigiert oder dies sogar ausgebaut: Amazon und eBay.
Smile! Gerrit – Wir sprechen Online.
Ich stimme Constantin da zu. Bei Nachrichtenportalen kann man drauf verzichten. In Shops ist man das Ganze geübt und gewohnt. Kategorien/Unterkategorien werden hier links ausgespielt. Sie Suchfunktionen werden so übersichtlich dargestellt und man hat die Möglichkeit zusätzliche Einschränkungen in der Kategorie zu machen und die Suche zu verfeinern.
Ich denke hier steht die Navigationsfreundlichkeit ganz oben… was ja auch gut so ist.
Im Einstieg der einzelnen Seiten funktioniert die linke Navigation noch sehr gut. Problematisch finde ich aber den weiteren Umgang damit. Schon nach dem ersten Klick wird die Haupt-Kategorie-Navigation von weiteren Filter/Kategorie-Optionen abgelöst. Soweit so gut! Aber wo sind die Haupt-Kategorien hin? Nach einigem irritierten Suchen finde ich Sie als Möglichkeit am BreadCrumb wieder… Sehr ungewohnt! Ansonten aber vieles besser als vorher.
Nur Internetauftritte mit wenig Content können sich den Platz der Navigation vom Design diktieren lassen.
Die Entscheidung welchen Platz die Navigation einnehmen soll/muss/kann, kann meiner Meinung nach nur inhaltlich entschieden werden.
Spannend ist hier zu sehen wie die Argumente für die jeweilige Platzierung sich über die Jahre hinweg sich verändert haben.
Meiner Erfahrung nach hatte die Navigation vor einigen Jahre noch einen viel höheren Stellenwert als die Darstellung des Inhaltes.
Aktuell sehe ich es so, das der Content (und damit auch alles was PIs schafft oder zum Kauf einläd) einen höheren Stellenwert als eine rechte oder linke Navigation.
Es gibt die Regel daß das menschliche Auge nur 5-6 horizontale Navigationspunkte auf Anhieb erfassen kann, was ein Grund für eine Linksnavigation sein kann. Aber auch eine umfangreiche Navigationstiefe kann ein Grund für eine Linksnavigation sein.
Das steht im Gegensatz zu dem Wunsch im Content so viel Informationen unterbringen zu wollen wie möglich. (Das ist auch im eCommercebereich so)
Da die Konzeption und die Usability von Internetseiten mit einer hohen Navigationstiefe mit den Jahren immer mehr an Erfahrung dazu gewonnen hat, kann man diese auch als horizontale Navigation realisieren.
Oder auch der Wunsch nach einer horizontalen Navigation aus Platzgründen kann die Entscheidung hin zur horizontalen Navigation begründen.
(Als Beispiel nutzt Amazon die Linke Spalte unter anderem zum Filtern.)
Als ideal empfinde ich wenn das navigation- und das inhaltliche Konzept mit dem Designkonzept der Seite Hand in Hand geht.
Und was ich mir gut vorstellen kann ist, das durch die immer größeren/breiteren Bildschirme der Trend wieder zur Linksnavigation geht oder aber wir stehen vor einer Schwelle zu einer neuen revolutionären Darstellung von Content. Und dabei meine ich nicht immer mehr Spalten…
@ mell:
und was siehst du als “revolutionär” an? wäre mal interessant zu erfahren, was jemand zur neuen darstellung von content so denkt…
@ Dennis
Wenn ich so die letzten 10 Jahren zurückdenke ist die “Erfindung” von Flash doch als revolutionär zu bezeichnen. Endlich war man nicht mehr von den Unzulänglichkeiten einer HTML-Seite abhängig um Inhalte darzustellen. Das ist wohl auch der Grund warum es Flash noch gibt.
Daher würde ich auch sagen, das die “Erfindung” von CSS die Darstellung von Content beeinflusst hat wie nie zuvor.
Aus Designsicht ist für mich die Darstellung von grafischem Text als Reintext eine Revolution. Kann ich doch endlich die CI-Schrift des Kunden auf seiner Website zeigen ohne diese grafisch produzieren zu müssen. Darüber hinaus lässt es eine Website viel mehr mit dem CD verschmelzen.
Würdest Du die drei Beispiele denn als Revolution bezeichnen?
Wer es nicht hinkriegt, seine Seiten valide und für alle Browser lesbar umzusetzen, hat in der Branche nichts zu suchen. Noch ein Beispiel für einen großen Kunden, der bei der Umsetzung katastrophal schlampen lässt.
Valide entscheidet aber nicht über den Erfolg oder Mißerfolg eines Shops. Da gibt es andere, gewichtigere Zahnrädchen für die monetisierung. Insofern ist Valide stets nur ein Mosaiksteinchen eines stimmigen Gesamtkonzepts, eine sture, einseitige Fixierung auf das alleinige Merkmal “valides HTML” nützt aber niemanden.
@Florian Schmitt
Da kann ich Dennis nur zustimmen. Validität ist nicht alles. Gerade bei so großen Projekten bei denen viele Systeme (CMS/Shop/usw.) in eine bestehenden Umgebung integriert werden müssen, ist es oft alles andere als einfach validen und semantischen Code zu erhalten. Ein Shop soll in erster Linie verkaufen. Da sind Fehler im W3C Validator banales Beiwerk auch wenn viele etwas anders behaupten.
Es geht leider oft nicht anders. Und das nicht zuletzt aufgrund der Tatsache das (Shop)Systeme, wie in diesem Fall Intershop viele über die Jahre gewachsenen Strukturen besitzen die nicht den Code generieren -können- der im HTMLl/CSS Template zu Verfügung gestellt wurde.
@Dennis, Steffen: Ich kann den Shop nicht nutzen, weil er nicht valide programmiert wurde. Das ist kein “Mosaiksteinchen”.
Wenn ich als potentieller Kunde den Shop so sehe wie im Screenshot oben, dann ist alles Design, jede Navigation nutzlos und verschwendet.
@Florian: Hans Mustermann mit seinem Firefox/IE/Opera kann den Shop aber nutzen, damit dürften im ersten Schritt 98% aller potentiellen Kunden schon angedeckt sein. Das bedeutet nicht, daß man nicht weiter optimieren kann, aber exotische Browser/Einstellungen/Systemkonfigurationen gibt es immer, die Frage ist, wie weit treibt man diesen Perfektionismus, was kostet er und was bringt er letzlich an Mehrwert für das Unternehmen in Form von Umsatz.
1. Der Screenshot stammt vom von dir angesprochenen Opera. Aktuelle Version 10. Bei valider Umsetzung fallen Browserunterschiede nach IE6 kaum noch auf.
2. Tut mir leid, aber es gibt einen himmelweiten Unterschied zwischen übertriebenem Perfektionismus und einer derart vermurksten und fehlerhaften Ausführung mit Hunderten von Errors.
3. Budget kann niemals Grund sein, zu schlampen. Ich programmiere in meiner Agentur seit Jahren Webshops für wahrscheinlich 5-10% das Budget, das Neckermann investiert.
Die hunderten Fehler liegen mit Sicherheit an der Intershop Enfinity Suite. Da kann man in vielen Fällen als Agentur nichts machen. Ich muss dazu aber sagen das viele Fehler durch fehlende “Alt” Attribute und nicht geschlossenen, selbst schliessende, Elemente (br, img, usw) verursacht werden. Ich will damit keine Lanze brechen aber ich denke das dass nicht wirklich Kriegsentscheidend ist.
Wir liefern zum Beispiel immer zu 100% Valides HTML aber nach der Implementierung sieht das ganze dann immer etwas ähm… trostlos aus.
Ich finde das genau so lächerlich wie du aber weder hat man die Zeit noch hat Neckermann das Geld übrig das System so umzubauen das alles Valide ist. Ich kenne dich nicht und weiß nicht ob du schon einmal mit so großen Shops und Systemen zu tun hattest aber manchmal muss man als Webentwickler einfach mal die Augen zu machen und das System so nehmen wie es ist. Denn Hybris hat zum Beispiel arge Probleme mit IDs.
Man muss halt versuchen sein Werk um das System herum zu bauen. Denn technische Restriktionen auszumerzen ist meist viel aufwendiger und somit teurer als Fehler zu akzeptieren. Leider!
Davon abgesehen habe ich mit Opera 10 unter OSX 10.5.7 keine Probleme. Und ich denke zudem das Opera zwar unbedingt nicht zu vernachlässigen ist aber auch nicht das Hauptaugenmerk benötigt. Das allerdings nur aus kommerzieller Sicht.
Bei einem unserer großen Kunden hat Opera einen Anteil von unter 0.9%. Wohin der IE in all seinen Ausprägungen auf fast 88% kommt. Muss man halt immer im Verhältnis sehen…
Kleine Ergänzung…
Ich bin mir gerade auch gar nicht mehr so sicher ob das die Intershop Enfinity Suite ist aber aufgrund der Kommentare
<!-- Start: pagecomponents/optiomostscript.isml -->ist das sehr wahrscheinlch. isml Steht imho für InterShop Markup Language.Bei Quelle ist Sie sie es auf jeden Fall. Das ändert allerdings auch nichts an meiner Aussage.
Es muss natürlich jemand dafür sorgen, dass der Code den Besucher auch anständig erreicht sonst ist deine valide Umsetzung natürlich für die Katz. Wir entwickeln auch die größten Shops selbst, da ist das selbstverständlich.
Natürlich ist der Anteil der Operanutzer für keinen Kunden erfolgsentscheidend, aber wie oben unter 1) bemerkt: bei valider Umsetzung schließt man selbst die kleinen Besuchergruppen nicht aus.
Zum Thema der Opera-Nutzer:
In meinem Opera 10 läuft der Shop ohne Probleme…? Darstellung wunderbar und ohne einen einzigen Fehler (visuelle Darstellung)…
@Steffen: Neckermann.de läuft nicht bei Intershop, sondern auf der Demandware Platform.
@Hans
Ja du hast recht. Aber wenn mich nicht alles täuscht ist doch (einer) der Gründer von Demandware einer der Vorstände von Intershop gewesen?!
Gearbeit habe ich damit allerdings noch nicht. Wir nutzen in den allermeisten Fällen Intershop oder seit geraumer Zeit verstärkt Hybris. Demandware ist nicht unsere Baustelle ;)
Richtig, das ist Stephan Schambach. Er war der Gründer von Intershop und ich glaube auch Gründer von Demandware. Und die Platform von Demanware ist auch aus der Enfinity Suite enstanden, was man noch an den isml Endungen sieht ;-)
@ Dennis
ich bin gespannt auf die Antwort meiner Frage an Dich :-)
@mell:
Ich kann dir zustimmen: Deine Beispiele finde ich schon revolutionär und einschneidend. Aber meine Frage zielte eher darauf ab, kommende Technologien zu erfahren. Nicht das, was war, sonder das, was kommt. Das interessiert mich viel mehr :-)
Du hast ja geschrieben “oder aber wir stehen vor einer Schwelle zu einer neuen revolutionären Darstellung von Content. Und dabei meine ich nicht immer mehr Spalten…” –> Und mich hätte interessiert, was du damit eben meinst?
Was könnte der nächste “Trend” sein, nachdem sich bald viele richten werden? Irgendwie habe ich gerade Lust darüber nachzudenken… Ich versuche bei jedem neuen Projekt auch nicht immer altes und bewährtes nutzen, ohne nachzudenken. Klar: Altes ist nicht schlecht, aber es wird auch mit der Zeit für mich als Gestalter langweilig (auch wenn’s dem Kunden gefällt).
Begriffe wie “Glossy”, “Shinieeeeeee” und Schatten hier und Spiegelung da – Das möchte ich nicht mehr hören. Ich möchte dem Kunden gerne zeigen, dass das Web auch anders funktionieren kann. Ich finde, man muss dem Benutzer viel mehr die Möglichkeit geben, Webseiten auch “erleben” zu können. Nicht alles in Schubladen stecken, und eine “Wurtsbudenmentalität” anbieten (Ich habe Wurst 1, Wurst 2 und Wurst 3 für dich und noch Unterkategorien)… Das ist zwar formell und sauber und jeder findet sich zurecht…
Ich aber frage mich: Kann man Websites nicht erheblich komprimieren und die Benutzer noch intuitiver lenken? Mir geht es immer um die Fokussierung auf DAS Produkt oder DIE Besonderheit meiner Kunden. Und nicht darum, dass der Kunde alle seine kleinen Unwichtigkeiten irgendwie veröffentlicht bekommt… Das kommt dann, wenn man den Benutzer sofort am Anfang richtig abholt, ganz von alleine…
Achherrje: Jetzt schweife ich ab, aber ich wollte mal meine Gedanken mitteilen, dass ich Schubladen-Web zwar informativ, aber langweilig finde. Ich tüftle gerne an Lösungen, die beides sind… Gleichgesinnte können sich gerne melden :-)
Gruß Dennis
@Dennis
mir war total klar auf was Deine Frage abzielte :-)
Vieles was wir im Internet sehen ist absolut Nutzergetrieben und richtet sich nach dem wie Nutzer sich Aktuell und in der Vergangenheit verhalten.
Nicht umsonst gibt es unzählige Usabilitytestsysteme. Ist klar das nicht viel Neues entstehen kann, denn alle Projektteilnehmer, auch der Kunde berufen sich darauf, das “es” so aussehen und funktionieren soll, weil das ja schon bewiesen wurde und der Konkurrent das auch so gemacht hat.
Ich selbst habe nicht immer, aber oft gute Erfahrungen mit Kunden gemacht wenn es um Fokussierung auf das Alleinstellungsmerkmal eines Kundenproduktes geht. Doch das ist keine Innovation und selbst wenn wir diese Idee bis zum äussersten Treiben wird es das nicht.
Ich erlebe in letzter Zeit, das sich viele Kunden in einem starken Nutzerumschwung-und-Weiterentwicklungsverhalten befinden und wenn absehbar ist, in welche Richtung das geht, dann werden wir wieder eine erleben. Ein Innovation.