Kaffee online kaufen – Websites im Usability-Check – Teil 2: Tassimo

Im ersten Teil der vierteiligen Serie habe ich die neue Website von Nespresso unter die Usability-Lupe genommen. Nun wird sich zeigen, ob Tassimo besser punkten kann. Zwar bin ich persönlich Tassimo Kunde und habe bereits einmal im Onlineshop bestellt, doch da es damals eher ein Impulskauf war, kann man denke ich noch von einer relativen Neutralität sprechen. Außerdem habe ich zu diesem Zeitpunkt wenig auf die Usability geachtet.

Die Startseite

Auf der Startseite wird man mit einem kurzen Intro begrüßt, was schon darauf schließen lässt, dass die Website eher zum Entdecken einladen soll. Genauso ist auch der erste Hauptnavigationspunkt beschriftet. Daneben finden sich der „Shop“, die „Hilfe“ und „Aktuelles“. Verwirrend ist hier für den Nutzer, dass er auf der gleichen Seite landet, wenn er sowohl auf „Entdecken“ als auch auf das Tassimo-Logo klickt. Auf tassimo.de gelangt man nicht (leitet per 301 weiter). Die Hauptnavigation ist folglich recht übersichtlich gehalten und darunter findet sich die Subnavigation.

Startseite von Tassimo bzw. Hauptkategorie Entdecken

Oben rechts findet sich der Warenkorb mit dem Login, wo auch ein Anreiz für eine Neuregistrierung dargestellt wird. Gut gelöst ist weiterhin, dass man in der Mitte links eine kurze Info über die verwendete Technik erhält, was für Einsteiger besonders hilfreich ist. Mittig kann man die verschiedenen T Discs sowie Maschinen ansehen. Allerdings wird man bei Klick direkt auf die jeweilige Unterkategorie geleitet, was eher unerwartet ist, zumal sich das Design und die Handhabung wenig von der Startseite unterscheidet. Die Blätterfunktionen hätte man ebenso auf der Homepage einbinden können. Das Intro wird bei jedem Aufruf der „Entdecken“-Seite neu abgespielt, was von den Nutzern als überflüssig und störend empfunden werden kann.

Erstaunlich ist, dass es auf der Startseite bzw. im Footerbereich gleich drei Suchfunktionen gibt. Im Gegensatz dazu hatte Nespresso keine einzige. Bei Tassimo gibt es eine Suche für die FAQs, die Filialsuche und die Suche auf der Website. Gewöhnungsbedürftig ist die dazugehörige Beschriftung, welche sich nicht oben als Titel, sondern am unteren Rand findet.

Darunter findet man noch drei Teaser mit aktuellen Themen, zum Beispiel Aktionen, wobei allerdings die Call to Actions nicht hervorgehoben werden. Insgesamt ist die Schriftgröße in diesem Bereich auch sehr klein gewählt und mit grau auf weiß nicht unbedingt immer perfekt lesbar.

Die Hauptkategorieseiten

Die Hauptkategorieseite „Entdecken“ ist bei Tassimo die Startseite, daher habe ich mir nun die Hauptkategorieseite „Shop“ angesehen:

Hauptkategorie Shop von Tassimo

Zuerst werden 2 Angebote präsentiert, in diesem Fall eine Maschine und eine T Disc, welche es nur im Internet zu kaufen gibt. Darunter findet sich ein Slider, den man manuell bedienen kann. Allerdings ist hier auch nur eine Auswahl enthalten. Durch die unvollständige Blätterfunktion könnte man vermuten, dass es nur wenige Produkte gibt.

Dass man im Footerbereich die Teaser ebenso weiterblättern kann, fällt mir erst in diesem Moment auf. Diese Funktion ist durch die Gestaltung auf der Startseite unter gegangen. Insgesamt ist die Shopseite übersichtlich, könnte aber noch mehr Einstiegspunkte in die Unterkategorien vertragen.

Die Kategorieseiten

Die Kategorieseiten im Bereich „Entdecken“ stellen meist links auf einer sehr kleinen Fläche Text dar, der nur per Scrollen vollständig gelesen werden kann. Der Einsatz der Scrollfunktion auf dieser minimalen Fläche führt dazu, dass die Nutzer schnell zu weit scrollen und durch mehrfaches Hin- und Herscrollen eine negative User Experience erleben.

Weiterhin fällt in der Navigation auf, dass sich diese um die dazugehörigen Unterpunkte der Kategorien automatisch erweitert. Da die Unterkategorien nahezu die gleiche Schriftfarbe und Gestaltung haben, werden diese nicht mehr deutlich wahrgenommen und können leicht übersehen werden. Hier sollte eine deutlichere, visuelle Trennung erfolgen.

fehlende visuelle Zuordnung und Scrollen auf den Kategorieseiten von Tassimo

Weiterhin sind die Überschriften der Menüpunkte in der Navigation für die Unterkategorieseiten sind im „Entdecken“-Bereich mit „Kaffee & Co.“, „Latte & Co.“ sowie „Kakao & Co.“ durch den Zusatz „& Co.“ nicht deutlich genug und werfen bei den Nutzern Fragen auf, was sich zum Beispiel hinter „Kakao & Co.“ verbirgt.

Außerdem sind die T Discs und die Maschinen mehrfach als Kategorien in der Navigation zu finden:

• „T Disc Sortiment“ und „Tassimo Maschinen“ in der Hauptkategorie „Entdecken“
• „T Discs“ und „Maschinen“ in den Hauptkategorien „Shop“ und „Hilfe“

Diese Themen haben dort auch ihre Daseinsberechtigung, denn im Hilfebereich werden beispielweise Fragen zu den T Discs und den Maschinen beantwortet. Allerdings sollte man sich auf ein einheitliches Wording verständigen oder/und die T Discs und Maschinen aus dem „Entdecken“-Bereich nur dem Shop zuordnen. Denn schließlich soll dort die Conversion passieren.

Interessanterweise gibt es aber zwei Welten: der „Entdecken“-Bereich hat seinen eigenen Stil und der Shopbereich ebenso. Dies wäre an sich nicht so schlimm. Jedoch sind beide Kategorien komplett unterschiedlich aufgebaut und wenn man etwas im Shop kaufen möchte und auf eine Produktdetailseite will, landet man im „Entdecken“-Bereich! Die eigentlichen Produkte zum Kaufen sind also im „Entdecken“-Bereich zu finden und nicht im Shop wie vermutet. An dieser Stelle ist der Nutzer völlig verwirrt, weil er sich wieder in der anderen Welt zurechtfinden muss. Dieses Konzept sollte dringend überarbeitet werden.

Kategorieseite Maschinen des Shopbereichs

Kategorieseite Tassimo Maschinen des Bereichs Entdecken

Außerdem werden die Nutzer nicht immer auf die Seite mit dem angeklickten Modell geschickt. Wenn man beispielsweise im Shop unter Maschinen das Modell T20 Indian Summer Red ansehen möchte, gelangt man in den Bereich „Entdecken“, wo zunächst das Modell in weiß dargestellt wird, obwohl in der URL die korrekte Variante angegeben ist: https://www.tassimo.de/entdecken/tassimo-maschinen/t20/tassimo-t20-indian-summer-red/893?productId=950657. Der Nutzer muss nun erneut klicken, um zu seinem Wunschmodell zu gelangen. Dies ist nicht nur verwirrend, sondern der Kaufprozess verlängert sich dadurch und durch die unnötigen Klicks werden die User frustriert.

Auf diesen Seiten werden dem Nutzer keine weiteren Informationen im Vergleich zur vorherigen Seite geboten, denn der Text links ist allgemein gehalten. Außerdem ist der Call to Action-Button „In den Warenkorb“ nicht besonders hervorgehoben. Die Nutzer haben hier also keinen weiteren Anreiz, genau dieses Produkt zu kaufen. Es gibt keine Produktdetailseiten im klassischen Sinne, zumindest nicht für die Maschinen.

Für diese gibt es allerdings einen Maschinenvergleich, jedoch ist dieser vordefiniert und man kann nicht selbst Modelle auswählen. Weiterhin ist zu bemängeln, dass er Vergleich nicht vollständig ist, da beispielsweise die Modelle T55 und Joy fehlen. Außerdem sind die Funktionen lediglich mit sehr kleinen Symbolen gekennzeichnet, welche zudem nicht selbsterklärend sind, weil es keine Legende oder einen MouseOver-Effekt gibt. Das einzige, was man daraus entnehmen kann, ist lediglich, dass das Modell T65 die meisten Funktionen besitzt.

Maschinenvergleich bei Tassimo

Neben der Vergleichsfunktion gibt es im Shopbereich auch Filterfunktionen für die T Discs und Maschinen. Positiv hervorzuheben ist hierbei, dass die Anzahl der Produkte pro Filterkriterium angezeigt wird und sich auch automatisch aktualisiert, wenn man etwas auswählt. Zudem aktualisiert sich die gesamte Seite und zeigt gleich die Ergebnisse zu den Filterkriterien an. Verbessern könnte man hierbei, dass sich der Filter bequem mit einem Klick zurücksetzen lässt. Derzeit muss man pro Kriterium auf „alle“ klicken, um seine Filterung rückgängig zu machen, d.h. bis zu dreimal klicken.

Die Produktdetailseiten

Die Produktdetailseiten weichen wie bereits geschrieben von den Standards ab, die man in anderen Onlineshops kennt. Ein Problem ist die Darstellung der Informationen mit den Scrollfunktionen und dass sich weitere Infos in einem Layer öffnen. Informationen wie Preis, Inhalt und Call to Action-Button sind klein dargestellt und wenig hervorgehoben.

Lobenswert ist, dass weitere Produkte angeboten werden, die zu dem ausgewählten Produkt passen könnten: einmal Produkte der gleichen Marke und einmal vermutlich beliebte Produkte verschiedener Anbieter. Als Social Signal wird im oberen Bereich der Facebook Like-Button angeboten und daneben finden sich unter „Teilen“ weitere Möglichkeiten wie Sharing über Twitter oder per Mail an einen Freund weitersagen.

Jedoch finden sich keine Informationen zu den Versandkosten oder den Zahlungsmöglichkeiten. Es fehlt außerdem der Hinweis, ob das Produkt lieferbar ist. Für nicht verfügbare Produkte wird aber die nächste Verfügbarkeit dargestellt, was sehr praktisch ist, daher kann man sich erschließen, dass Produkte ohne Hinweis verfügbar sind. Des Weiteren wären Kundenmeinungen zu den Tassimo Maschinen für die Nutzer sicherlich hilfreich, da man ja insgesamt nur wenig Informationen erhält.

Fazit

Insgesamt stellt die Navigation und die Nutzerführung auf tassimo.de ein großes Problem dar. Elemente sind doppelt verankert, aber mit einem anderen Wording versehen. Und die Produktdetailseiten, über die die Nutzer kaufen möchten, sind nicht im Shop angesiedelt, sondern im Bereich „Entdecken“, welcher eine komplett andere Struktur aufweist. Die Nutzer müssen sich in 2 verschiedenen Welten zurechtfinden.

Zudem ist die Anordnung der Elemente sowie die Informationsbereitstellung auf den Produktseiten eher unüblich. Es fehlen hilfreiche Informationen. Außerdem werden die eigentlichen Handlungsaufforderungen, die Call to Actions, nicht hervorgehoben. Symbole wie beispielsweise beim Maschinenvergleich werden nicht erklärt und bieten den Nutzern damit kaum einen Mehrwert.

Ich kann Tassimo nur raten, die Nutzerführung auf der Website selbst einmal zu testen und auch unabhängige Nutzer in Form von beispielsweise Remote Usability Tests auf tassimo.de zu schicken, um meine Thesen und die herausgefundenen Problemfelder zu bestätigen.