Kaffee online kaufen – Websites im Usability-Check – Teil 4: Cafissimo

Mit dem vierten Teil neigt sich die Artikelserie über Kapselkaffee-Onlineshops dem Ende. Für die Websites von Nespresso, Tassimo und Dolce Gusto wurden schon viele Usability-Schwächen und Verbesserungspotentiale entdeckt. Im letzten Teil wird nun die User Experience von Tchibos Cafissimo untersucht und es gibt einen Gesamtvergleich aller 4 Onlineshops.

Die Startseite

Im Gegensatz zu den drei anderen Anbietern ist Cafissimo direkt auf der Tchibo-Website integriert. Es existiert zwar auch die Domain cafissimo.de, aber deren Inhalte sind quasi doppelt und verweisen entweder per Direktlink oder per Canonical-Tag auf tchibo.de. Daher habe ich mir diese Seiten angesehen.

Die Startseite der Rubrik „Cafissimo“ ist auf den ersten Blick sehr lang. Zu Beginn wird ein bildschirmfüllender Slider gezeigt, welcher sogar über den sichtbaren Bereich hinausgeht. Darunter folgen weitere Thementeaser, beispielsweise zu den Maschinen. Die Modelle laufen fortwährend durch das Bild und können durch Überfahren mit der Maus vergrößert und angehalten werden. Verwirrend ist dabei die Beschriftung, denn gerade Neukunden wissen in dem Moment noch nicht, welches Modell wie heißt und aussieht und man könnte an der Stelle vermuten, dass es sich um die Beschriftung der Modelle handelt, was aber nicht der Fall ist:

Startseitenslider Cafissimo auf Tchibo.de

Zudem fällt auf, dass zwei Handlungsaufforderungen verwendet werden. Auch bei den darunter folgenden Inhalten kommt es hin und wieder vor, dass die Nutzer mit mehreren Call-to-Action-Buttons angesprochen werden, welche auch verschieden positioniert sind: mal links, mal rechts, mal mittig. Dies beeinträchtigt jedoch die User Experience nicht stark negativ, weil die Teaser inhaltlich gut aufbereitet, übersichtlich sowie interaktiv gestaltet sind (z.B. durch eingebundene Videos). Inhaltlich wäre es m.E. aber vorteilhafter gewesen, die Modelle weiter oben, möglichst vor den durchlaufenden Maschinen zu positionieren, und nicht erst am Seitenende.

Es gibt für den Bereich Cafissimo, der bei Tchibo als dritter Hauptnavigationspunkt angesiedelt ist, auch eine Unternavigation. Diese ist übersichtlich gehalten, in Maschinen und Kapseln weiter unterteilt und um 2 Teaser zu den jeweiligen ersten Unterpunkten ergänzt:

Navigation mit Kategorieseiten

Die Hauptkategorieseiten

Die Hauptkategorieseiten „Cafissimo Maschinen“ und „Cafissimo Kapseln“ sind ebenso die ersten verlinkten Unterpunkte der Navigation mit den dazugehörigen Teasern. In diesem Sinne existieren also keine Hauptkategorieseiten.

Die Kategorieseiten

Unter Cafissimo Maschinen werden die unterschiedlichen Modelle durch Elemente wie Videos oder andere Themenbilder voneinander abgegrenzt. Das ist eine eher unübliche Idee und daher liegt die Vermutung nahe, dass die Nutzer dies nicht auf Anhieb verstehen. Es weicht von der klassischen Onlineshop-Optik ab und könnte damit die User Experience negativ beeinträchtigen:

Kategorieseite Cafissimo Maschinen

Reduzierte Modelle haben als Eyecatcher einen extra Hinweis, wie viel man durch den Rabatt spart. Allerdings ist es eher unvorteilhaft, wenn potentielle Neukunden diese Gestaltung als Erstes sehen, da dann der Effekt verloren bzw. missverstanden werden kann. Der eigentliche Warenkorbbutton tritt dadurch zu stark in den Hintergrund und die Nutzer könnten beim ersten Betrachten vermuten, dass das Element „Sie sparen X Euro“ der Call-to-Action-Button ist.

Der Maschinenberater führt den Nutzer in 3 Schritten zum geeigneten Modell. Dabei muss man nichts anderes machen, als 3 einfache Fragen zu beantworten und am Ende werden das passende Modell hervorgehoben und die anderen Modelle ausgegraut angezeigt. Dieser Prozess ist sehr verständlich dargestellt und gut gelöst. Hier sollten keine Usabilityprobleme auftreten.

Die Kategorieseiten für die Maschinentypen DUO, COMPACT und CLASSIC sind übersichtlich aufgebaut und gefallen mir von der Gestaltung sehr gut. Sie sind mit Videos und wichtigen Informationen in Stichpunktform versehen, verweisen auf den Maschinenberater und die anderen Modelle sowie eine Auswahl von Kaffeekapseln. Bei DUO wirkt der kleine Warenkorbbutton neben dem Call-to-Action Button etwas verloren und ist eigentlich redundant, da beide zur gleichen Zielseite führen:

Kategorieseite Cafissimo DUO

Schade ist, dass man trotz der Warenkorbbuttons und –symbole zweimal klicken muss, um eine Maschine in den Warenkorb zu legen. Selbst wenn man auf der Seite schon eine Farbe ausgewählt hat und auf „Jetzt bestellen“ klickt, kommt man zuerst auf die Produktdetailseite. Im schlimmsten Fall stimmen die Farben auf den Seiten auch nicht überein. Bei COMPACT gibt es beispielsweise ein schönes Grün:

Kategorieseite Cafissimo COMPACT

Auf der Produktdetailseite jedoch scheint diese Farbe nicht verfügbar zu sein. Man findet das Grün auch nicht einmal bei den durchgestrichenen Farben wieder. Zudem fehlt bei den Farben ein MouseOver-Effekt mit Benennung der Farbe, um sie besser unterscheiden zu können:

Produktdetailseite Cafissimo COMPACT

Bei DUO sind alle Farben aktuell und man landet auf der korrekten Produktdetailseite. Bei COMPACT wird bei jeder ausgewählten Farbe, egal ob verfügbar oder nicht, die limitierte braune Variante angezeigt. Bei CLASSIC sind 2 Farben aktuell nicht vorhanden, aber auf der Produktdetailseite gibt es eine zusätzliche Farbe, die es auf der Kategorieseite nicht gibt: Mandarine.

Außerdem auffällig ist, dass es bei der Kategorieseite DUO kein Intro am Anfang gibt, bei COMPACT  und CLASSIC hingegen schon. Beide Intros unterscheiden sich außerdem voneinander, denn das bei COMPACT ist deutlich länger und man kann es nur anhalten, indem man zuerst auf „360° Ansicht“ klickt (siehe Bild Kategorieseite Cafissimo COMPACT) und dann auf das Pausensymbol, welches nun sichtbar wird. Das ist sehr verwirrend für die Nutzer und nicht jeder wird auf die Idee kommen, das Intro auf diese Weise zu stoppen. Es besteht die Gefahr des Absprungs, weil die User diese Funktionalität nicht finden. Bei CLASSIC wird nur die 360° Ansicht angezeigt.

Bei der Kategorieseite im Bereich „Cafissimo Kapseln“ werden bei den Kapselsorten zu jeder Sorte 10 bzw. 80 Kapseln angeboten. Dieses Schema zieht sich konsequent durch die Seite. Da der Aufbau mit der Maschinenseite identisch ist und sich somit Vorteile und weitere hilfreiche Informationen in einer Leiste rechts befinden, bleibt nur Platz für max. 3 Sorten pro Zeile. Das bedeutet, dass nicht immer die 10er- und 80er-Packung in einer Zeile stehen können. Das ist gewöhnungsbedürftig, aber sollte keine große Hürde darstellen.

Zudem fällt auf, dass in jeder zweiten Zeile der Vorteil „Versandkosten sparen“ wiederholt wird, der aber bereits rechts bei den Vorteilen zu finden ist:

Kategorieseite Cafissimo Kapselsorten

Hier könnte man beispielsweise testen, wie sich die Conversion Rates verhalten, wenn man nur verschiedene Vorteile in jeder zweiten Zeile anzeigt (ähnlich wie bei der Modellseite) oder sie komplett entfernt.

Die Produktdetailseiten

Wie bereits bei den Kategorieseiten angesprochen, wird die Nutzererwartung auf dem Weg zu den Produktdetailseiten nicht immer erfüllt. Wenn man zum Beispiel ein blaues Maschinenmodell anklickt, kann es sein, dass man nicht auf der Produktdetailseite für das blaue Modell landet, sondern die schwarze Variante angezeigt bekommt. Der Nutzer erhält keine Information, dass das Modell nicht verfügbar ist und muss es sich selbst erschließen und zwar dadurch, dass eine andere Seite angezeigt wird.

Die Produktdetailseiten sind insgesamt übersichtlich und zumeist erwartungsgemäß gestaltet. Wie bereits erwähnt, könnten die unterschiedlichen Farben der Maschinenmodelle mit einem MouseOver-Effekt zum besseren Verständnis versehen werden. Die Produktbilder wirken professionell, lassen sich vergrößern und es gibt sogar eine hilfreiche 360°-Ansicht.

Irritieren könnte die Nutzer, dass der Warenkorbbutton nun gelb ist, obwohl die Call-to-Action-Buttons auf der Start- und den Übersichtsseiten vorher immer rot waren und das kleine Warenkorbsymbol immer blau dargestellt wurde. Der Button auf den Produktdetailseiten ist zwar aufgrund der Position nicht zu übersehen, aber diese dritte Farbe im Spiel der Handlungsaufforderungen könnte die User durchaus verwundern:

Produktdetailseite Cafissimo CLASSIC

Weiterhin werden „Diese Artikel könnten Sie auch interessieren“ angezeigt, welche die Produktseite sinnvoll durch Kapselsorten oder einen Kapselhalter ergänzen. Allerdings stimmen die darunter angezeigten Produkte „Zuletzt angesehen“ nicht exakt. Bei den Maschinen ist nämlich oft nur das Modell korrekt, aber nicht die Farbe. Das verwirrt den Nutzer, weil ihm Produkte angezeigt werden, die er angeblich zuletzt angesehen haben soll, dies aber nicht hat.

Im unteren Bereich werden eine Reihe von Qualitätssiegeln präsentiert, welche jedoch nicht konsistent mit einer Info ausgezeichnet sind:

Bei den Produktdetailseiten der Kapseln habe ich nahezu die gleichen Anmerkungen zu machen. Bis heute hat sich mir nicht erschlossen, warum man auf den Produktdetailseiten auch andere Produkte anklicken kann und wie diese Auswahl zu Stande kommt. Sie bildet nämlich nicht alle unterschiedlichen Sorten ab und die Reihenfolge und Anzahl ist von Seite zu Seite ebenfalls verschieden:

Fazit

Cafissimo kann mit einem übersichtlichen Seitenaufbau punkten. Handlungsaufforderungen werden herausgestellt und die Produkte gut in Szene gesetzt. Auch inhaltlich sind die Seiten gut aufbereitet und mit Zusatzinformationen und Videos angereichert. Der Maschinenberater findet in 3 einfachen Schritten das passende Modell.

Der Aufbau der Kategorieseiten weicht von der üblichen Gestaltung in Onlineshops ab, da bei der angewandten Kacheloptik neben den Produkten selbst auch Themenbilder, -videos oder Vorteile dargestellt werden sowie Verlinkungen zu anderen Seitenbereichen vorhanden sind.

Nutzererwartungen werden außerdem nicht immer erfüllt, da sich hin und wieder beispielsweise die verfügbaren Farben pro Modell von den zuvor dargestellten Maschinen unterscheiden. Auch die Intros der Maschinenmodelle werden unterschiedlich umgesetzt. Ebenso stimmen die zuletzt angesehenen Produkte auf den Produktdetailseiten oft nicht mit den tatsächlich zuletzt angesehenen Artikeln überein.

Insgesamt sollte Cafissimo also noch mehr auf die Nutzererwartungen eingehen, um so die User Experience weiter zu verbessern. Denn was Design und Inhalt betrifft ist die Rubrik „Cafissimo“ auf der Seite von Tchibo wirklich gut aufgestellt. 

Gesamtauswertung

Nun kommen wir zum direkten Vergleich der vier Konkurrenten im Bereich „Kapselkaffee“. Um diese Anbieter nach den gleichen Kriterien und unabhängig voneinander bewerten zu können, habe ich die Themenbereiche Konsistenz, Funktionalität, Content und Design ausgewählt. Funktionalität umfasst die Usability von Filter- und Vergleichsfunktionen sowie die Reduzierung unnötiger Klicks, wenn man zum Beispiel ein Produkt in den Warenkorb legen möchte. Konsistenz, Content und Design sind zwar nicht ausschließlich Usability-Themen, aber wichtig für die User Experience. Die einzelnen Kriterien findet ihr in der untenstehenden Tabelle.

Bei jedem Kriterium habe ich maximal 3 Punkte vergeben:

• gut umgesetzt = 3 Punkte
• kleine Kritikpunkte = 2 Punkte
• mehrere Kritikpunkte = 1 Punkt

Und der Sieger in puncto Usability und Nutzererlebnis ist:

Gesamtauswertung Kapselkaffee Usability Check

Cafissimo von Tchibo!

Cafissimo zeigte besonders gute Ergebnisse in den Bereichen Konsistenz, Design und vor allem Content. Bei Letzterem können sich die anderen Wettbewerber was von Cafissimo abschauen. Keiner der Konkurrenten konnte so ausführliche Produktdetailseiten vorweisen. Zu beachten ist, dass Cafissimo im Vergleich zu den anderen Anbietern nicht direkt auf  einer eigenen Domain untergebracht ist (bzw. nicht in diesem Artikel untersucht wurde), sondern als Themenbereich auf der Tchibo-Website angeboten wird. Cafissimo erreichte also 35 von 45 möglichen Punkten.

Der Zweitplatzierte mit 31 Punkten ist Dolce Gusto, der vor allem in den Bereichen Funktionalität und Design überzeugte. Besonders hervorzuheben auf dieser Website ist die Reduzierung unnötiger Klicks bis zum Warenkorb und dass es viele allgemeine Informationen zur Thematik Kapselkaffee gibt.

Dicht dahinter mit 29 Punkten folgt Nespresso, deren neue Website auf den ersten Blick zwar schön aussah, aber dennoch nur sehr schwer lesbare Texte und wenig Produktinformationen anbot.

Weit abgeschlagen auf dem letzten Platz mit nur 23 von 45 möglichen Punkten ist der Internetauftritt von Tassimo. Gut gelöst war hier einzig und allein das Crossselling. Bei allen anderen Kriterien mussten häufig Abstriche gemacht werden.

Grundsätzlich gibt es bei jedem der untersuchten Anbieter noch Verbesserungspotentiale. Zu großen Teilen sind die Webseiten „usable“, aber das Nutzererlebnis lässt sich an vielen Stellen noch deutlich verbessern.