Kaffee online kaufen – Websites im Usability-Check – Teil 3: Dolce Gusto

In den ersten beiden Teilen der Serie wurden die Websites von Nespresso und Tassimo untersucht. Dabei wurden zahlreiche Optimierungspotentiale entdeckt, mit der sich die User Experience verbessern lässt. Nun wird sich zeigen, wie Dolce Gusto unter der Usability-Lupe abschneidet.

Die Startseite

Besucht man zum ersten Mal dolce-gusto.de bzw. startet eine neue Session wird zunächst eine Ladeanimation abgespielt. Diese ist schlicht gehalten, ist aber sehr aussagekräftig, indem das Wort „schwarz“ in verschiedenen Farben gezeigt wird. Dies vertreibt die Wartezeit schön und stellt für die Nutzer noch keine Hürde dar. Es lässt sich jedoch vermuten, wenn die Startseite schon eine längere Ladezeit benötigt, dass die Seitenperformance insgesamt vielleicht zum Problem werden könnte.

Ladeanimation Startseite dolce-gusto.de

Die Startseite wirkt auf den ersten Blick übersichtlich. Die Navigation erfolgt über runde Formen, welche beim Überfahren mit der Maus zu Kapseln werden. Der Nutzer versteht diese Art Navigation, welche dazu noch thematisch passend ist. Leider wird im ersten Moment nicht deutlich, dass es sich ganz links um das Logo und damit eine Klickmöglichkeit zurück zur Startseite handelt. Denn die Bildunterschrift „Home“ geht trotz farblicher Hervorhebung verloren, sobald man über die anderen Navigationspunkte fährt:

Startseite Dolce Gusto

Die Unternavigationspunkte sind unterschiedlich gestaltet, was die Schriftgröße, Schreibweise und das Design betrifft. Dies ist inkonsistent und kann die Nutzer verwirren.

Unternavigationspunkte Kategorien Alle Sorten

Unternavigationspunkte Kategorien Maschinen

Im sichtbaren Bereich der Startseite werden 3 Themen angeteasert. Der Pfeil im linken Element hebt sich jedoch wenig ab, sodass die eigentliche Funktion möglicherweise nicht wahrgenommen wird. Denn bei Klick öffnet sich das Element nach rechts und es erscheinen 3 weitere Themen. Vermutlich werden diese nur selten gesehen. Hier empfiehlt es sich, mittels Eventtracking den Klick auf den Pfeil zu tracken und auszuwerten, wie viele User wirklich klicken.

Startseite sichtbarer Bereich

Die Vorteile von Dolce Gusto findet man erst im unteren Bereich der Seite. Aufgrund der Position und ihrem Kontext sowie der hellen Schriftfarbe könnten diese leicht verloren gehen und werden vermutlich nur von den wenigsten Nutzern gesehen. Zudem werden Themen vermischt und die Symboliken sind nicht eindeutig. Beispielsweise wird neben einem Schloss mit SSL-Aufschrift darauf hingewiesen, dass man auch gerne mit Visa und Mastercard zahlen kann. Hier werden die Aspekte Sicherheit und Zahlungsmethoden miteinander verbunden, wobei Letztere nur textuell vorhanden sind und visuell nicht unterstützt werden. Die kostenlose Lieferung ist mit einem Geschenk versehen. Versandkosten bekommt man allerdings erst ab 40,- Euro geschenkt, sodass der Aspekt der Lieferung vielleicht besser mit einem Transporter unterstützt wäre.

Die Vorteile sollten generell weiter oben im sichtbaren Bereich platziert und durch bekannte Logos (z.B. SSL, Visa, Mastercard) und Symbole (z.B. Trustsymbole wie Gütesiegel) unterstützt werden. Dies schafft Aufmerksamkeit, Vertrauen und man hebt sich von der Konkurrenz ab. Dass diese Möglichkeit noch viel zu wenig Unternehmen nutzen, hat die Studie „Der Conversion Header – USPs und vertrauensbildende Elemente im sichtbaren Bereich platzieren“ gezeigt.

Die Hauptkategorieseiten

Es gibt aktuell 9 Navigationspunkte, jedoch nur 7 Hauptkategorieseiten, weil bei den Punkten „Über Nescafé Dolce Gusto“ und „Online-Shop“ jeweils die erste Kategorieseite angezeigt wird. Klickt man sich nun durch die Hauptkategorieseiten fällt auf, dass sich die Inkonsistenz der Navigation auch auf diesen wiederfindet. Mit Ausnahme der Kategorien „Alle Sorten“ und „Accessoires“ sind alle anderen Seiten unterschiedlich aufgebaut:

• „Alle Sorten“ und „Accessoires“ bestehen aus 6 bzw. 4 Teasern.
• „Maschinen“ zeigt links die Kategorien mit visueller Unterstützung an und mittig folgen 4 Teaser mit Texten.
• „Registrieren“ enthält 2 Boxen mit den Vorteilen einer Registrierung und dem Login-Formular.
• „Rezepte“, bei welchem bei MouseOver „Aktion“ zu lesen ist, enthält einen großen Teaser.
• „Aktion“ enthält aktuell 2 große Call-to-Actions, die zu den Aktionen „Maschinenkauf“ und „Maschinenregistrierungsbonus“ führen.
• „Punktestar des Monats“ enthält eine große Box. Darunter wird gebeten, Facebook-Fan zu werden oder den Newsletter zu abonnieren.

In der Hauptkategorie „Maschinen“ findet sich eine unerfüllte Erwartungshaltung: Bei den verschiedenen Maschinentypen suggeriert der kleine Pfeil, dass man eine detaillierte Auswahl treffen kann, also noch nicht am Ziel ist. Es öffnen sich daraufhin die Kriterien „manuell“ und „automatisch“, welche am Ende wieder einen Pfeil aufweisen. Die User erwarten, dass es hier weitergeht, aber mehr Kriterien werden nicht angeboten. Man ist unerwartet am Ziel:

Hauptkategorieseite Maschinen mit Auswahl

Bei „Punktestar des Monats“, wo man ein exklusives Produkt für weniger Sammelpunkte als üblich erhält, wird darauf hingewiesen, dass man den aktuellen Punkte-Star an seinem auffälligen Logo erkennt. Klickt man auf den Button „Zum Punkte-Star des Monats“, fehlt allerdings dieses „auffällige Logo“. An dieser Stelle ist der Nutzer unsicher, ob es sich wirklich um das richtige Produkt handelt. Sucht man das Produkt im Online-Shop, ist das Logo vorhanden.

Die Kategorieseiten

Bei den Kategorieseiten von „Über Nescafé Dolce Gusto“ fällt auf, dass es teilweise lange dauert, bis die Seiten vollständig aufgebaut sind. Zudem fehlt bei der rechten Teaserbox unter „System & Demo“, welche auf die Mobile-Apps von Nescafé Dolce Gusto hinweist, eine Klickmöglichkeit zu diesen. Insgesamt sind die Seiten aber sehr informativ, gut aufbereitet und Informationen werden mittels Demos und Videos unterstützt.

In der Rubrik „Online-Shop“ bzw. „Sorten“ erhält man zusätzliche Informationen bei MouseOver über die Sorten. Diese hätte man allerdings reduzieren können, da inkl. MwSt und zzgl. Versandkosten doppelt aufgeführt sind. Zudem steht überall „Glas ist nicht im Produkt enthalten“, auch wenn kein Glas abgebildet ist oder wenn eine Tasse dargestellt wird. Dies verwirrt die Nutzer und derartige Informationen wären vielleicht besser auf der Produktdetailseite angesiedelt.

Kategorieseite Online-Shop Sorten

Weiterhin wurde versucht, das Feld mit den Details farblich an das dargestellte Produkt (Packungsfarbe) anzupassen. Hier liegt erneut eine inkonsistente Gestaltung vor, da dies nur in ca. 90% der Fälle funktionierte.

Der Shop mit den Kategorien und Unterkategorien ist insgesamt verständlich und übersichtlich aufgebaut. Teilweise hätte m.E. die Benennung der Menüpunkte verbessert werden können, denn statt „Outlet %“ würde Sale besser passen oder „Cashback“ könnte mit Aktion oder Aktionspreis benannt werden. Die Suchfunktion ist prominent platziert und liefert Vorschläge bei der Eingabe.

Weiterhin hat man die Möglichkeit, Produkte direkt von der Übersichtsseite aus in den Warenkorb zu legen. Dies ermöglicht einen schnellen Einkauf, wenn man weiß, was man möchte. Symbole wie der durchgestrichene Einkaufswagen und der Briefumschlag mit dem @-Zeichen verdeutlichen, dass Produkte momentan nicht verfügbar sind, man sich aber eine Benachrichtigung zukommen lassen kann. Der Nutzer versteht diese Symbole und daher lässt sich von einer korrekten Verwendung sprechen.

Die Produktdetailseiten

Die Produktdetailseiten sind schlank gehalten und übersichtlich gestaltet. Links findet sich ein großes Produktbild und rechts Detailinformationen. Die Produktbeschreibung könnte ausgebaut und verbessert werden, beispielweise indem man nicht schreibt, dass das Glas nicht im Produkt enthalten ist, wenn es sich um eine Tasse handelt. Gut sind die Hinweise, was 100ml dieses Produktes kosten und wie viele Bonuspunkte man durch den Kauf sammelt.

Die beiden Links unter dem Produktbild sind so weit von dem Produkt und den Informationen weg platziert, dass sie übersehen werden könnten. Dies ist sehr schade, denn gerade durch die Produktvorführung sieht man die Dosierung der Kapseln, wenn man zum Beispiel ein Produkt ausgewählt hat, welches 2 verschiedene Kapseln benötigt.

Unter den beiden Links und den Detailinformationen erfolgt eine visuelle Trennung durch einen Strich. Darunter werden immer 3 weitere Produkte angeboten, die zum ausgewählten Produkt passen, z.B. weitere Produkte der gleichen Kategorie oder Zubehör wie Tassen & Gläser. Diese Produkte werden allerdings sehr klein dargestellt und sind ganz rechts ausgerichtet. Hier wird nicht nur wertvoller Platz für das Crossselling verschenkt, sondern auch durch eine fehlende Überschrift wie „Dazu passend“ weiß der Nutzer nicht so recht, wie er mit diesen Produkten umgehen soll und warum sie dort stehen.

Fazit

Inhaltlich bietet www.dolce-gusto.de viele hilfreiche Informationen für Neu- oder Bestandskunden. Die Technologie wird gut erklärt und es gibt sogar eigene Dolce Gusto-Apps. Optimierungsbedürftig hingegen sind zum Beispiel die Navigation und die Benennung der Menüpunkte.

Weiterhin negativ zu bewerten sind unter anderem die Inkonsistenz bei der Gestaltung und die Anordnung der Elemente auf den Produktdetailseiten. Aufgrund der verschiedenen farblichen Gestaltung ist zudem die Schrift teilweise nicht optimal lesbar. Im Footer wird außerdem eine sehr kleine Schriftgröße verwendet, sodass vermutlich nur sehr wenige Nutzer zu den FAQs gelangen oder die Seite weiterempfehlen.

Positiv zu bewerten ist, dass der Weg bis zum Klick in den Warenkorb kurz gehalten ist und durch verständliche Symbole unterstützt wird. Es gibt eine prominent platzierte Suchfunktion, welche Suggests bei der Eingabe liefert und längere Seitenladezeiten werden durch eine Animation unterstützt.

Aber auch wenn die Seite inhaltlich gut ist, sollte Nescafé Dolce Gusto noch mehr Wert auf Nutzererwartungen und eine entsprechende Gestaltung legen.

Im letzten Teil der Artikelserie wird Cafissimo von Tchibo genauer untersucht und es wird einen abschließenden Vergleich der 4 Marken mit Nennung des User Experience-Siegers geben!