Das Baymard Research-Institut hat im September 2022 Piccantino auf den UX-Prüfstand gestellt. In vielen Bereichen sind wir sehr gut – doch gerade der wichtige Checkout bietet großes Optimierungspotential.
Baymard ist ein Research-Institut, das sich vor allem auf E-Commerce-Usability spezialisiert hat. Dafür untersucht Baymard laufend die größten E-Commerce-Seiten mit qualitativen und quantitativen Methoden und veröffentlicht dann, was gut oder eben schlecht war – mit entsprechenden Empfehlungen.
🤓 Quantitative UX-Methoden liefern uns klare Daten und Fakten. Zum Beispiel, wie viele Personen unsere Shops nutzen oder wie lange sie sich darin aufhalten. Das sehen wir beispielsweise in Google Analytics.
Qualitative UX-Methoden hingegen liefern uns detaillierte Informationen darüber, warum und wie Menschen eine Webseite oder eine App verwenden. Dafür benötigt man beispielsweise Usability-Tests. Beide Methoden sind wichtig, um zu verstehen, wie User eine Webseite oder App erleben und wie wir diese verbessern können.
Ende September 2022 hat Baymard mit Piccantino den ersten niceshops-Shop in den Kategorien Browsing, Comparison, Evaluation, Conversion und Site Speed evaluiert. Progressive Web App wurde bei uns neutral bewertet, da wir diese Technologie derzeit nicht einsetzen.
Jede Kategorie enthält eine Vielzahl an UX-Empfehlungen, die sich aus unzähligen Studien ergeben, die Baymard laufend durchführt. In jeder dieser 6 Kategorien ergibt sich daraus dann ein Gesamtscore, der uns in jeder Kategorie zwischen POOR und PERFECT einordnet. Die kleinen grauen Punkte unterhalb der Balken zeigen, wie andere Mitbewerber in den jeweiligen Bereichen abschneiden.
In Browsing geht es darum, wie einfach es ist, bei Piccantino – beziehungsweise generell in unseren Shops – zu navigieren. Hier schneiden wir insgesamt gut ab.
Pluspunkte konnten wir unter anderem sammeln, weil wir keine Slider (automatisch wechselnde Bilder) im oberen Bereich der Startseite verwenden. Weil wir Produktkategorien im Hauptmenü zeigen. Weil wichtige Hilfe-Themen schnell gefunden werden können und weil wir keine Pop-Ups verwenden. Warum auf Pop-Ups generell verzichtet werden sollte, kannst du im Artikel »Pop-Ups unterbrechen den Userflow« nachlesen.
4 missachtete Guidelines haben uns allerdings so viele Minuspunkte gekostet, dass wir bei Browsing schlussendlich nur bei GOOD gelandet sind:
Ein Link ist ein Versprechen. Und User haben eine gewisse Erwartung, wenn sie einen Link klicken. Linktexte sollen deshalb zeigen, was man dahinter erwarten kann. »Jetzt entdecken« enthält jedoch keinerlei Informationen darüber, was dahinter erwartet werden kann.
Lies mehr darüber in Ninas Blogbeitrag »Userfreundliche Linktexte erstellen«.
🎉 Nina hat inzwischen Schulungen zu Linktexten durchgeführt. Die immer gleichen »Jetzt entdecken«-Links sind deshalb bei Piccantino und vielen anderen Shops schon verschwunden.
↔︎ Nutze den Slider, um die Versionen zu vergleichen.
Laut Baymard-Research sind bei Pop-Ups und Dialog-Fenstern die Erwartungen der User, dass sich diese mit dem Zurück-Button schließen und nicht, dass zur vorherigen Seite zurückgekehrt wird.
Im Video befinden wir uns auf einer Produktseite, öffnen ein Modal-Window und landen nach Klick auf die Zurück-Taste auf der vorherigen Seite.
Bekannt dürfte sein, dass unsere Suche sehr viel Optimierungspotential bietet. So hat unter anderem die 0-Fehler-Toleranz unserer Suche den Score stark negativ beeinflusst.
Tippfehler sollten automatisch korrigiert werden und Suchergebnisse sollten für die wahrscheinlich gesuchten Produkte angezeigt werden.
Beim letzten Minuspunkt in Browsing geht es um die zu geringen Abstände zwischen verschiedensten User Interface (UI)-Elementen, hier rot markiert.
Obwohl wir die Mindestgrößen für UI-Elemente einhalten, ist ein weiterer wesentlicher Faktor ein ausreichend großer Abstand zwischen diesen Elementen.
In den umfangreichen Studien von Baymard wurde immer wieder festgestellt, dass zu geringe Abstände zwischen den Elementen bei Usern zu Fehlern, Desorientierung und sogar zu Abbrüchen führen.
In der Kategorie Comparison geht es darum, wie gut und effizient Produkte von Usern gefunden werden können. Wir befinden uns hier also vorwiegend auf der Produktübersichts-Seite (Listpage). In dieser Kategorie sind wir sehr gut, aber noch nicht perfekt.
Was machen wir schon sehr gut? Relevante Filter sind vorhanden, die Zurück-Taste führt zur vorherigen Position auf der Listpage, die Sterne-Bewertungen bei den Produkten werden mit der Anzahl der Bewertungen angezeigt und Lieferzeiten werden klar kommuniziert.
Aber auch hier sind es 4 Themen, die uns einige Minuspunkte gekostet haben.
Gleich 3 dieser 4 Probleme finden wir in der Darstellung der Produkte auf der Listpage.
Zu kleine Preise: Preise sind ein wichtiger Aspekt im Entscheidungsprozess der User. User haben eine Preisspanne im Kopf, wenn sie die Produktlisten durchsuchen. Und Artikel, die außerhalb dieser Spanne liegen, werden wahrscheinlich gar nicht erst in Betracht gezogen. Wenn die Preise also schwer zu erkennen sind, können User die Listenelemente nicht effizient durchsuchen und könnten abspringen.
Produkte nehmen zu viel Platz in Anspruch: In Baymard-Studien hatte fast jeder einzelne User auf mobilen Websites, bei denen die Listenelemente sehr hoch waren, erhebliche Probleme bei der Navigation. Das hat sehr häufig dazu geführt, dass die User die Orientierung verloren und in anschließenden Befragungen die Websites als kompliziert zu navigieren beschrieben haben.
Elemente werden nicht ausreichend voneinander getrennt: Baymard hat in Studien immer wieder beobachtet, dass für User nicht klar ist, wo ein Element anfängt und aufhört. Das sieht man am Vorher-Bild oben auch recht schön – die »In den Warenkorb«-Buttons könnten theoretisch auch zu den darunterliegenden Produkten gehören.
Zuletzt ist es das problematische Verhalten der Filter, das uns viele Minuspunkte gekostet hat. Mehr Informationen dazu findest du in unserem Blogbeitrag »Filter müssen sichtbar und einfach zu bedienen sein«.
🎉 Auf der Listpage konnten wir inzwischen große Fortschritte erzielen: Die Preise sind nun deutlich größer, die einzelnen Produkte nehmen wesentlich weniger Platz in Anspruch und die Produkte sind deutlich voneinander getrennt.
↔︎ Nutze den Slider beim Bild oben, um die Versionen zu vergleichen.
In Evaluation geht es um die Produkt-Detailseite. Hier evaluieren die User, ob das Produkt das Richtige für sie ist. Und wie man sieht, sind wir hier perfekt – fast zumindest.
Sehr gut ist unter anderem, dass das Produktbild, Swatches (z. B. Farbauswahl) und Thumbnail-Bilder – vor allem auch auf Smartphones – auf einen Blick sichtbar sind. Weiters, dass der Warenkorb-Button deutlich erkennbar ist und sich Versand-Infos in seiner Nähe befinden.
Der einzige Punkt, den Baymard in dieser Kategorie negativ bewertet hat, ist, dass die Produktbewertungen eine eigene Seite mit eigenem Link darstellen.
Nach Klick auf den Button »Alle Erfahrungsberichte anzeigen« wird man zu einer neuen Seite mit eigenem Link weitergeleitet.
Bei den umfangreichen Tests von Baymard wurde immer wieder festgestellt, dass es für User auf Smartphones aufgrund der sehr begrenzten Displaygröße äußerst schwer ist, den gesamten Aufbau einer Seite zu verstehen. Eine unerwartete Weiterleitung kann damit schnell zur Desorientierung führen, da diese oft nicht erwartet wird.
Kommen wir zu unserem Sorgenkind: Conversion – also wie gut wir darin sind, aus Besucher:innen Kund:innen zu machen. Hier befinden wir uns also konkret im Checkout und teilweise im Warenkorb.
Wie man sieht, haben wir in dieser Kategorie laut Baymard leider gar nicht gut abgeschnitten, da einige Probleme die Gesamtwertung stark negativ beeinflusst haben. Schauen wir uns trotzdem wieder vorher an, was wir denn schon gut machen:
Unser Checkout ist ein abgekoppelter Bereich – Dinge wie das Hauptmenü oder sonstige Navigationselemente lenken also nicht ab. Der wichtige Gäste-Checkout ist prominent platziert und damit einfach zu finden. Wir erklären schlüssig, warum bestimmte Eingaben wie die Telefonnummer verpflichtend sind und verlangen sie nicht einfach nur so. Und wir haben eine große Auswahl an Zahlungsmöglichkeiten.
Wir machen also vieles schon sehr richtig. Gleichzeitig hat Baymard aber ganze 9 Punkte gefunden, die sehr problematisch sind. Die 4 Wesentlichsten davon sind:
Bei unseren Formularfeldern gibt es keine bzw. eine falsche oder mangelhaft umgesetzte Live-Inline-Validation.
Live-Inline-Validation ist eine Technik, bei der Webseiten Eingaben von Usern sofort überprüfen und entsprechend sofort Feedback geben, um Eingabefehler zu vermeiden und eine bessere Benutzererfahrung zu gewährleisten. Auf das, was Browser da machen (siehe Screenshot), soll und darf man sich nicht verlassen.
Eine korrekt umgesetzt Live-Inline-Validation zeigt Fehler sofort und klar erkennbar an.
↔︎ Nutze den Slider, um zu sehen, wie die Live-Inline-Validation aussehen sollte.
Baymard hat in zahlreichen Studien festgestellt, dass es bei 32 % der User zu fehlenden Eingaben kommt, wenn wie bei uns die Pflichtfelder nicht als solche markiert sind.
User erwarten, auf einen Blick zu sehen, welche Eingabefelder verpflichtend sind – nur optionale Felder zu markieren, ist nicht ausreichend.
🎉 Alle verpflichtenden Formularfelder sind inzwischen mit einem * gekennzeichnet.
↔︎ Nutze den Slider, um die Versionen zu vergleichen.
Gutschein-Code-Felder ziehen überproportional viel Aufmerksamkeit auf sich. Das hat Baymard unter anderem mit Eye-Tracking-Studien immer wieder bewiesen. Wenn User Gutschein-Felder sehen, machen sich viele auf die Suche nach einem Gutschein, verlassen dabei die Seite und kommen oft nicht mehr zurück.
Wir haben vor längerer Zeit einen A/B-Test durchgeführt und dabei das Feld versteckt. Es war erst zu sehen, nachdem der Text »Hast du einen Gutschein- oder Aktionscode?« geklickt wurde. Wir mussten den Test abbrechen, bevor wir genug Daten hatten: Kund:innen haben bei uns angerufen und sich beschwert, dass es kein Eingabefeld mehr gibt.
↔︎ Nutze den Slider, um die beiden Varianten zu vergleichen.
🤓 A/B-Tests sind eine Art von Experiment, bei dem zwei unterschiedliche Webseiten-Versionen (A und B) gleichzeitig verschiedenen Usern gezeigt werden, um herauszufinden, welche besser funktioniert. Dabei wird gemessen, welche Version bessere Ergebnisse erzielt, zum Beispiel mehr Klicks oder Verkäufe. Die Gewinner-Version wird in den meisten Fällen schlussendlich verwendet.
Die Versandoptionen-Seite ist in zweierlei Hinsicht problematisch. Einerseits verursachen wir mit dieser Seite bei Usern einen regelrechten Information-Overload. Oder wie man es auch sagen kann: Die kognitive Last ist hier einfach zu hoch. Zu viele Informationen, zu viele Optionen. Und zu viele Optionen sorgen nachweislich für eine höhere Absprungrate.
Andererseits fehlen die beiden wichtigsten Informationen. Nämlich: Wann kommt mein Paket? Und was kostet es?
🎉 Den oberen Teil der Seite haben wir inzwischen grundlegend umgebaut und damit alle Usability-Probleme diesbezüglich korrigiert.
↔︎ Nutze den Slider, um die beiden Varianten zu vergleichen.
Bei Site Speed geht es um die Geschwindigkeit und Performance des Webshops – mit Fokus auf für die User Experience relevanten Werte.
Diese sind:
Largest Contentful Paint Score: Die Ladezeit des größten Inhalts auf einer Webseite above the fold (= sichtbare Inhalte ohne zu scrollen).
First Input Delay Score: Die Zeit zwischen dem ersten Interaktionsversuch und der Reaktion der Webseite auf diese Interaktion.
Cumulative Layout Shift Score: Die unerwartete Veränderung des Seitenlayouts während des Ladens oder Interagierens mit einer Webseite.
Interaction to Next Paint Score: Die Zeit zwischen der ersten Interaktion des User mit der Webseite und dem nächsten visuell sichtbaren Update der Seite.
In all diesen Punkten haben wir laut Baymard absolut perfekte Werte. Es herrscht aus Usability-Sicht kein Handlungsbedarf bei der Performance. 🙌
↔︎ Nutze den Slider, um die Ergebnisse zu vergleichen.
Im April 2023 hat Baymard Piccantino schließlich erneut evaluiert. Durch die beschriebenen kleineren wie auch größeren Änderungen konnten wir die gemessene UX-Performance erheblich verbessern. 🎉
Vor allem beim Checkout sehen wir eine großartige Steigerung um 92 % – dennoch bleibt der Checkout, wie man in der Grafik auch schön sieht, weiterhin eine UX-Baustelle. Zu lang, zu kompliziert, zu viele Elemente. Wir sind und bleiben da aber auf alle Fälle dran.
