uxzentrisch erörtert:
Das muss ich auch haben!

Artikel 4 von 4: Produktstarke Seiten

Im vierten und letzten Artikel in der Reihe zur kontextsensitiven Navigation betrachte ich produktstarke Websites, also klassische E-Commerce-Sites.
Die Kernfunktion auf produktstarken Websites ist die Produktsuche. Das Anbieten von passenden weiteren Produkten ist die zweitwichtigste Funktion. Die Vorstellung von passenden Produktkategorien steht an dritter Stelle. Und angenehmes, exploratives und inspirierendes Stöbern durch Themenbereiche ist schließlich die viertwichtigste Funktion.

ill_009

Die Punkte in dieser Skizze repräsentieren die Inhalte einer Website. Auf einer produktstarken Website sind das hauptsächlich Produkte. Im Gegensatz zu inhaltsstarken sowie inhaltsschwachen Websites spielt hier die klassische Navigation eine geringere Rolle, weswegen keine Linien, die für die Navigation stehen, abgebildet werden. Der Nutzer navigiert von einem Produkt, oder einer Produktkategorie, zu einem anderen Produkt / einer anderen Produktkategorie. Ähnliche Farben symbolisieren die möglichen Wege.
ill_010

Der Nutzer sucht nach einem ganz bestimmten Produkt.

Szenarien – Was tun Nutzer auf produktstarken Seiten?

Eine E-Commerce-Website verkauft Produkte und Services. Folgende vier Szenarien sind wahrscheinlich:

1. Der Kunde hat vor, ein bestimmtes Produkt / Service zu erwerben – er weiß also, wonach er sucht.
● Suche nach „Babyschlafsack“
● Suche nach „Kinderbücher“
● Suche nach „Gartenmöbel“

2. Nachdem er sich ein bestimmtes Produkt angeschaut bzw. erworben hat, stöbert er weiter im Online-Shop, nicht unbedingt mit der Absicht, etwas zu kaufen.
● „Gut, Babyschlafsack erledigt, und was sehe ich gerade? – Ein wunderschönes Kinderbuch ist das!“

3. Der Kunde hat ein Bedürfnis, spürt eine Lücke, weiß aber noch nicht, welches Produkt diese Lücke füllen könnte. Er kann also das passende Produkt noch nicht benennen.
● „Das Kind wird schmutzig beim Essen.“
● „Ich brauche ein gutes Geschenk für die Cousine meines Mannes.“
● „Ich verliere ständig meinen Schlüssel.“

4. Der Kunde besucht gezielt den Online-Shop, um neueste Angebote zu sehen.
● „Heute ist Black Friday, ich schaue mal, ob ich etwas wirklich Preiswertes finde.“
Ein fünftes Szenario wäre möglich, wird aber heutzutage alleine durch klassische Bannerwerbung, also nicht in seinem vollen, potenziellen Ausmaß umgesetzt.

5. Der Kunde stöbert im Internet und sieht „im Vorbeigehen“ ein paar tolle Angebote des Onlineshops. Diese locken ihn an und er besucht die Seite.
● Ein entsprechendes Szenario aus der analogen Welt wäre der Stadtbummel, bei dem den Kunden ein Schaufenster eines Modegeschäfts anspricht.

Eine exemplarische Lösung am Beispiel von amazon.com

In diesem Beitrag nutze ich die Inhalte von amazon.com. Ich gestalte sie um und versehe sie mit anderen navigatorischen Elementen, um zu verdeutlichen, wie eine archetypische produktstarke, responsive Website die Nutzerziele erfüllt.

Das erste Szenario verursacht typischerweise den Seitenaufruf. Szenario 1 wird vollständig und Szenario 3 zum großen Teil durch die Suche abgedeckt.

1.

amazon_001

Der neue Header in der Smartphone-Ansicht: Rechts vom amazon-Logo findet der Nutzer die Suche, darunter den Zugang zu zwei Startseiten. Die erste, die standardmäßig sichtbar ist, präsentiert aktuelle Angebote und Aktionen. Die zweite unterstützt den Nutzer beim Finden von Geschenken und bei der Entdeckung von innovativen Lösungen, die er noch nicht kennt.

2.

amazon_009

Der neue Header in der Tablet-/Desktop-Ansicht.

3.

amazon_021

Eine Suchergebnisseite in der Smartphone-Ansicht.

Szenario 2. wird durch weitere Produktempfehlungen und die Anzeige von benachbarten Produktkategorien erfüllt.

4.

amazon_002

Hier am Beispiel eines Babyschlafsacks in der Smartphone-Ansicht: Der Nutzer interessiert sich für einen Eulen-Babyschlafsack. Unter diesem Artikel werden weitere Produkte angezeigt. Zuerst aus der Rubrik »What Other Items Do Customers Buy After Viewing This Item«, danach »Customers Who Bought This Item Also Bought«. Dann werden »Neighbouring Departments«, also benachbarte Produktkategorien, genannt. Darunter sieht der Nutzer »Your Recently Viewed Items and Featured Recommendations«.

Szenario 3. wird durch die zweite Startseite »Geschenke und Innovation« vervollständigt.

5.

amazon_003

Wenn der Nutzer in den »Gifts & Innovations«-Reiter wechselt, sieht er einen Empfehlungsgenerator, der ihm hilft, anhand der Problembeschreibung eine passende Lösung zu finden. Darunter werden aktuelle Trendprodukte und die Bestsellers aus der »Innovation«-Produktkategorie angezeigt.

Szenario 4., die gezielte Suche nach neuen Angeboten, wird durch die Default-Startseite »Angebote und Aktionen« abgedeckt.

6.

amazon_004

Der Kunde lässt sich immer inspirieren. Deswegen ist die Anzeige der Angebote bereits auf der Startseite sinnvoll. Zweifellos fällt diese Inspiration aber auf einen fruchtbareren Boden, wenn man einen engeren Interessenbereich des Kunden kennt.

Ziele und Funktionen

Die Aufgabe einer produktreichen Seite sollte es sein:

  1. Den Nutzer bei der Produktsuche bestmöglich zu unterstützen.
  2. Die angebotene Produktauflistung abhängig von seinen Entscheidungen (Interaktionspfad) immer weiter zu optimieren.
  3. Inspirierende Themenbereiche (Produktkategorien) abhängig von seinen Entscheidungen (Interaktionspfad) anzuzeigen.
  4. Wenn der Nutzer das Produkt nicht benennen kann – er weiß nicht, wonach er sucht, er kann nur das Problem beschreiben – ihn dabei zu unterstützen, das Produkt zu finden.
  5. Den Nutzer auf eine Entdeckungsreise durch ganz neue Shop-Bereiche mitzunehmen.

Die ersten zwei Themen – Suche sowie nutzersensitive Produktauflistung – beherrscht amazon.com in vollem Ausmaß. Jede produktstarke Website kann die hierfür verwendeten Interaction-Patterns als Standard verstehen. In diesem Beitrag präsentiere ich navigatorische Lösungen für die Produktkategorien sowie das freie Stöbern. amazon.com arbeitet aktuell mit festen Kategorien (»Shop by Department«). In meinem Vorschlag für eine produktstarke, responsive Website ist der Zugang zu Produktkategorien immer mitten im Content-Bereich platziert. Dadurch ist er kontext- und nutzersensitiv. Ein gutes Beispiel dafür ist die Produktauflistung unter dem Reiter »Gifts & Innovation«, die neben der Produktdarstellung ein paar Kategorien nennt, zu denen das Produkt gehört.

7.

amazon_012

Die Links zu Top-Kategorien, zu denen der Artikel gehört, werden neben dem Artikel aufgelistet.

Außerdem werden passende Produktkategorien auf der Detailseite eines Artikels angezeigt.

8.

amazon_013

Die »benachbarten« Produktkategorien erscheinen zwischen weiteren Produktempfehlungen auf der Produktdetailseite.

Vor hier aus kann der Nutzer zur Übersichtsseite einer Produktkategorie navigieren.

9.

amazon_020

Seiten wie diese bündeln Produkte und Funktionalitäten zu bestimmten Themen. In diesem Beispiel hat der Nutzer in der Produktdetailseite auf die Kategorie »Register«(Babygeschenke) geklickt und wird zur Übersichtsseite »Register« geführt.

Der Zugang zu alle Produktkategorien ist immer noch vorhanden, aber wie ich bereits anhand der Szenarien verdeutlicht habe, beantwortet die losgelöste Auflistung der Kategorien kein wesentliches Nutzerbedürfnis. Zusätzlich ist die Anzahl der möglichen Aspekte, anhand welcher die Artikel gruppiert werden können, sowie der Kategorien selbst gewaltig. Deswegen platziere ich den Link zu allen Produktkategorien auf der Startseite kurz vor dem Footer.

10.

amazon_016

»Browse Through All Shop Departments« wird als eine der letzten Optionen auf der Startseite angeboten.

11.

amazon_017

Der Link führt zu einer Übersichtsseite aller Produktkategorien.

12.

amazon_018

Eine Klappliste beinhaltet die Unterkategorien sowie ein paar beispielhafte Bestseller aus dem gewählten Bereich.

Die Aufforderung zum freien Stöbern bekräftige ich in der vorgeschlagenen Lösung durch die Aufteilung der Startseite in zwei Reiter. Standardmäßig ist der Reiter »Angebote und Aktionen« sichtbar, der dank seinen Inhalte zum emotionalen Einkauf einlädt. Gleichzeitig bietet der Reiter »Geschenke und Innovationen« eine Chance, Produkte zu entdecken, die der Kunde noch nicht kennt, nach denen er nicht sucht.

13.

amazon_019

Der Empfehlungsgenerator unter dem Reiter »Gifts & Innovation« nimmt den Kunden auf eine Entdeckungsreise mit.

Nutzerprofil

Auf einer produktstarken Website ist der Unterschied zwischen dem angemeldeten und nicht angemeldeten Zustand erheblich. Die Zustände ergeben komplett unterschiedliche Seiten, nicht nur im Sinne von Inhalten, inklusive verfügbare Navigationspunkte, sondern auch im Sinne von Interaktionen. In meinem Vorschlag sehe ich in dem angemeldeten Zustand eine klassische Hamburger-Navigation vor, die dem Nutzer einen sicheren Hafen bietet. Hier findet er immer den Zugang zu Konto-Einstellungen, gespeicherten Medien und personalisierten Funktionalitäten.

14.

amazon_006

Ein Ausschnitt der Startseite in der Smartphone-Ansicht: Der Nutzer ist angemeldet. Dort, wo vorher der »Anmelden«-Link stand, findet der Nutzer den Zugang zu seinem persönlichen Bereich.

15.

amazon_010

Die Startseite mit ausgeklapptem Hamburger-Menü.

16.

amazon_008

Die Desktop-/Tablet-Ansicht der Startseite, wenn der Nutzer angemeldet ist.

16.

amazon_011

Die Startseite mit ausgeklapptem Hamburger-Menü.

Fazit

Zusammengefasst erfordert eine erfolgreiche Navigation auf einer produktstarken Website folgende Punkte:

  1. eine ausgezeichnete Suche, die sowohl Produkte (»Die Vermessung der Welt«) als auch Produktgruppen (»Abenteuerbücher«) auffindet
  2. kontext- und nutzersensitive Produkt- sowie Produktkategorie-Auflistungen, sobald die Information über Kundeninteressen vorhanden ist
  3. frei definierbare, am liebsten automatisch generierte Übersichtsseiten pro Produktkategorie
  4. einen eindeutigen »Zurück«-Link
  5. einen immer an der gleichen Stelle auffindbaren Zugang zum Warenkorb
  6. eine klar gekennzeichnete, einfach zugängliche Kategorie »Angebote«
    - in dem oben beschriebenen Vorschlag ist es der Default-Zustand der Startseite
  7. einen einfach strukturierten und immer an der gleichen Stelle auffindbaren Zugang zum persönlichen Bereich – im gesamten produktstarken Auftritt ist dies das einzige klassische, navigatorische Interaction-Pattern – ein Hamburger-Menü. Nur die sich häufig wiederholende Aktivitäten, wie »Meine Aufträge«, »Sendung verfolgen« oder »Wunschzettel« werden immer am gleichen Ort verankert.
  8. ein navigatorisches Element, das die Suche nach Problemlösungen ermöglicht;
    hierbei handelt es sich um keine Produktsuche, sondern um eine Unterstützung, wenn der Nutzer nur das Problem, die Ausgangssituation benennen kann, aber noch nicht weiß, welches Produkt sein Problem löst.
  9. die zusätzliche Möglichkeit, über Produktgruppen ein Produkt zu finden.
    Der Zugang zur möglichst vollständigen Auflistung aller Produktkategorien spielt eine geringe Rolle auf produktstarten Websites und wird als ein am Ende der Startseite platzierter Link zur einer Übersichtsseite umgesetzt.

Die Reihenfolge der navigatorischen Elemente verdichtet am genausten die konzeptionelle Antwort auf die Anforderungen einer produktstarken Website. Der rote Faden sind die Produkte und die Produktgruppen, deswegen verläuft die Navigation von einem Produkt zum nächsten. Die Schritt-für-Schritt-Navigation findet mitten im Inhalt, oder besser gesagt durch den Inhalt statt. Die Anzahl der navigatorischen Elemente deutet darauf hin, dass eine produktstarke Website deutlich komplexere Ziele als eine inhaltsstarke sowie natürlich eine inhaltsschwache Website erfüllt.

Mit diesem Beitrag beende ich die Reihe über die Lösung der Navigationsproblematik im responsive Design. Für drei unterschiedliche Website-Arten – inhaltsschwache, inhaltsstarke und produktstarke Seiten – habe ich drei unterschiedliche responsive Navigationssysteme gebaut und beschrieben. Jedes System besteht aus mehreren Interaction-Pattern, ist in sich abgeschlossen und konsistent. Jedes Navigationssystem ist auf den Bedarf der bestimmten Website-Art perfekt abgestimmt. Ich freue mich, wenn diese drei Lösungen Verwendung finden und als Vorlage für die Gestaltung responsiven Websites der drei genannten Typen dienen.