Kaffee online kaufen – Websites im Usability-Check – Teil 1: Nespresso

Der Kaffeekonsum steigt in Deutschland von Jahr zu Jahr. 2010 lag der Pro-Kopf-Kaffeekonsum beispielsweise bei 6,8 Kilogramm. Es gibt sogar eine Kaffeetrinker-Typologie, welche die sechs Kaffee-Trinker-Typen Puristen, Pragmatiker, Anspruchsvolle, Schlemmer, Klassiker und Genügsame unterscheidet. Der Konsum von Filterkaffee ist allerdings rückläufig, da mehr und mehr Menschen auf Pads oder Kapseln umsteigen.

Da nicht nur die Kaffeezubereitung damit bequemer geworden ist, sollte man diesen auch einfach online bestellen können. In dieser Artikelserie habe ich die Kaffeekapsel-Anbieter Nespresso, Tassimo, Nescafé Dolce Gusto und Tchibo Cafissimo unter die Usability-Lupe genommen und dabei den Prozess von der Startseite bis zum Klick „in den Warenkorb“ untersucht. Der Bestellprozess ist ein sehr umfangreiches Thema, welches zu gegebener Zeit vielleicht eine zweite Artikelserie ausfüllen wird.

Teil 1: Nespresso

Nespresso hat seit Kurzem seine Website neu gestaltet. Grund genug, um zu überprüfen, ob sie auch eine optimale User Experience gewährleistet und usabilitytechnisch fit ist.

Da ich persönlich Tassimo-Kunde bin, kenne ich die alte Website von Nespresso nicht und habe damit optimale Voraussetzungen die neue Website neutral zu beleuchten.

Die Startseite

Auf der Startseite wird man mit einem rotierenden Banner bestehend aus 4 Bildelementen begrüßt. Dieser ist ansprechend gestaltet, jedoch werden die Call to Action-Buttons sehr klein dargestellt und könnten auf den ersten Blick nicht wahrgenommen werden. Hier könnte sowohl der Button selbst als auch die Beschriftung größer sein (auch wenn die umstehenden Texte ebenfalls klickbar sind).

Im 4. Element wird auf die neue Website hingewiesen und man wird zu einem 44-sekündigen Video geleitet. Die neue Website, so heißt es, soll nun mehr Inhalt, eine verbesserte Navigation und zusätzlichen Service bieten. Man könnte seinen bestehenden Login nutzen und es gibt einen Quick Order Bereich, der auf der deutschen Website übrigens mit „schnelle Bestellung“ betitelt ist. Insgesamt soll man auf der Seite mehr „entdecken“ können und die Anmeldung für den Club sei auch ganz einfach.

Dass die Website nun mehr Inhalt bietet, kann man von der Startseite aus erst einmal nicht erkennen. Diese ist sehr abgespeckt und enthält nur wenig Text. Die Farben sind stimmig und passend gewählt und eine Gewichtung einzelner Themen wurde durch die Positionierung und das Design vorgenommen. Die gewählte Schriftart ist meiner Meinung nach nicht optimal, denn die weiße Schrift verschwimmt teilweise auf dem nicht immer einfarbigen Hintergrund und ist besonders bei kleiner Schriftgröße schwer lesbar.

Im unteren Bereich der Startseite gibt es auf den ersten Blick 4 Teaser, deren Hervorhebung beim Überfahren mit der Maus nicht erwartungskonform ist. Man erwartet, dass die übrigen 3 Teaser sich ausblenden oder visuell schwächer werden. Jedoch blitzen diese kurz auf und verblassen danach wieder, was recht irritierend wirkt. Rechts und links gibt es auch Pfeile zum Weiterblättern, diese habe ich jedoch zunächst übersehen.

Homepage von Nespresso mit Slider und Teasern

Die Navigation ist in sich konsistent und die 4 visuell hervorgehobenen Hauptkategorien „Kaffee“, „Accessoires“, „Maschinen“ und „Der Club“ werden beim Überfahren durch je 4 Teaser unterstützt. In der Navigation ist dieses Aufblitzen der Teaser aber nicht vorhanden. Der Navigationspunkt „Ecolaboration“ öffnet sich in einem neuen Tab und die Seite ist automatisch auf Englisch eingestellt, obwohl doch in dieser phantastischen URL zweimal „de“ steht: http://www.nespresso.com/ecolaboration/de/en/home.html#/aaa/de Das ist erneut verwirrend für den Nutzer.

Auffällig ist, dass die Website über keine Suchfunktion verfügt. Nutzer, die bereits wissen, was sie möchten, müssen sich damit aufwändig durch die Seite klicken und kommen so langsamer an ihr Ziel.

Die Hauptkategorieseiten

Klickt man sich durch die 4 Hauptkategorien „Kaffee“, „Accessoires“, „Maschinen“ und „Der Club“ fällt auf, dass die Reihenfolge der Teaser in der Navigation sich von der Darstellung auf den Kategorieseiten bei „Kaffee“ unterscheidet:

Hauptkategorieseite „Kaffee“ von Nespresso

Zudem ist in der Kategorie „Accessoires“ das Design völlig anders. Jedoch habe ich die Möglichkeit, „Les Collections“, was übrigens jetzt die dritte Sprache ist, mit der ich auf nespresso.com konfrontiert werde, nach „Kollektion“, „Produktart“ und „Finish“ zu filtern. Aber die in der Navigation vorhandenen Inhalte zu „Aeroccino3“ und „U Collection“ finden sich dort auf den ersten Blick nicht wieder.  Erst durch längeres Suchen stellt man fest, dass man „Milchaufschäumer“ bzw. „Maschinenzubehör“ im Filter auswählen muss. Dieser Filter ist zunächst auch nicht intuitiv bedienbar, da:

• mir nicht deutlich genug gemacht wird, was ich ausgewählt habe, weil nur eine dezente schwarze Umrandung des angeklickten Elements erfolgt und
• mir suggeriert wird, man könne alle 3 Filterkriterien beliebig kombinieren und keine Ausblendung nicht möglicher Kombinationen erfolgt

Positiv hervorzuheben ist, dass sich nach jedem Klick die Liste der passenden Produkte aktualisiert und man somit schnell erkennen kann, wenn man zu tief gefiltert hat. Praktisch ist weiterhin, dass man mehrere Elemente eines Kriteriums auswählen kann. Warum es unter „Kollektion“ das Element „Maschinenzubehör“ gibt und unter „Produktart“ ein zweites Mal ist allerdings unverständlich. „Köstlichkeiten“ sind ebenfalls doppelt unter „Produktart“ und „Finish“ verankert. Lobenswert ist aber, dass nicht verfügbare Produkte verblasst dargestellt werden.

Insgesamt ist der Filter jedoch optimierungsbedürftig und das größte Problem ist die Nicht-Anzeige der ausgewählten Kriterien. Oder hättet ihr gewusst, dass ich hier nach Kapselaufbewahrungsmöglichkeiten aus Holz aus der Ritual Collection gesucht habe?

Hauptkategorieseite Accessoires mit Filter von Nespresso

Die Kategorieseiten

In der Kategorie „Kaffee“ gibt es „Die 16 Grands Crus“, welche wie ein Rad angeordnet sind und sich beim Überfahren mit der Maus hervorheben, entweder die Kapsel direkt oder die Art, wenn man sich im inneren Rand befindet, z.B. Lungos. Links kann man nach seiner Lieblings-Aromanote, Intensität und Tassengröße filtern. Der Filter ist hier besser gemacht wie der auf der Accessoiresseite, da man genau sieht, was ausgewählt wurde. Zudem passen sich die anderen zwei Kriterien automatisch an, wenn ich etwas anklicke.

Zu bemängeln ist hier allerdings, dass sich dem Nutzer nicht erschließt, warum unter dem Filter eine Kapsel alleinstehend zu sehen ist. Außerdem sind die Informationsfelder zu den Kapseln sehr dürftig und nur mit Name und „Details anzeigen“ ausgestattet. Da hätte man den Namen auch gleich neben die Kapsel schreiben und die Details per Klick auf Name und Kapsel anzeigen lassen können.

Kategorieseite „Die 16 Grands Crus“ von Nespresso

Die Seiten unter der Kaffee-Kategorie, welche sich mit der Herkunft des Kaffees bis zum Weg in die Tasse und den Geheimnissen der Kapseln beschäftigen, sind insgesamt dürftig gestaltet. Die Texte, welche aufgrund der Schriftart bereits schwerer lesbar sind, weisen teilweise eine zu kleine Schriftgröße auf.

Weiterhin gibt es kaum Absätze, meist keine Hervorhebungen oder interne Verlinkung. Sogar Schreibfehler findet man, welche den professionellen Auftritt von nespresso.com negativ beeinträchtigen. Denn gerade sie sollten wissen, wie man Kaffee schreibt:

Kategorieseite „Die Geheimnisse der Kapsel“ von Nespresso

Auf den Seiten der anderen Kategorien („Maschinen“ und „Club“) und damit meine ich auch alle untergeordneten Contentseiten, findet man immer wieder die gleichen Probleme: kaum Visualisierung, unterschiedliche und teilweise zu kleine Schriftgrößen, kaum Absätze und Hervorhebungen.

Seite mit FAQs von Nespresso

Lobenswert ist allerdings, dass das Konzept der Kapsel kontinuierlich angewendet wird und die Kapseln mit Symboliken versehen werden:

Kategorieseite „Club Services“ von Nespresso

Die Produktdetailseiten

Auf den Produktdetailseiten stehen die Produkte durch große Bilder im Fokus. Der Preis und alles Andere rücken in den Hintergrund. Es werden keine Social Signals eingesetzt, sodass kein Sharing möglich ist. Außerdem gibt es keine Informationen zu Zahlungsmöglichkeiten.

Trotz der Tatsache, dass die Produktinformationen oft sehr knapp gehalten sind, gibt es 2 Reiter: neben dem übersichtlichen Überblick werden Produkte aus der dazugehörigen Kollektion angezeigt und man hat die Möglichkeit, die gesamte Kollektion anzusehen. Unter dem Überblick findet man Zubehör, passende oder ähnliche Produkte. Jedoch wird hier Potential verschenkt, da Hin und Wieder Produkte angeboten werden, die der aufgerufenen Produktdetailseite gleich sind:

Produktdetailseite „Pixie Wall Espresso Blends“ von Nespresso

Fazit

Die neue Nespresso Website wirkt ansprechend und ist sehr schlank gehalten. Jedoch gibt es verschiedene Optimierungsansätze: Beispielsweise ist die gewählte Schriftart nicht optimal und die Schriftgrößen sind teilweise zu klein. Die Texte enthalten kaum Absätze und Hervorhebungen, sodass der Content insgesamt schwer lesbar wird.

Filter sind teilweise nicht intuitiv bedienbar und die Zuordnung von Produkten zu einzelnen Kategorien wird durch unterschiedliches Wording erschwert. Zudem werden die Nutzer in den Sprachen Deutsch, Englisch und Französisch angesprochen, worin die Konsistenz leidet, beispielsweise beim Accessoirefilter oder bei der Farbauswahl der Maschinen: rot – weiss – brown – blau etc.

Weiterhin verfügt die Seite weder über eine Suchfunktion noch über eine Breadcrumb, welche die User beim Navigieren unterstützen würde. Zudem könnte die Seitenperformance verbessert werden. Schließlich fehlt auch noch ein ganz wichtiges Element: Trackingcode! Denn ohne ein Webanalysetool wird es Nespresso schwer haben, gezielt seine Seiten und das Nutzerverhalten zu analysieren und zu optimieren.

Mein Fazit von der neuen Internetpräsenz ist insgesamt ernüchternd. Mit dem Design kann Nespresso zwar punkten, aber das ist nun mal nicht alles. Es gibt viele kleine Baustellen, an denen seitens Nespresso noch dringend nachgearbeitet werden sollte.