Produktvergleich auf der Website gestalten: Tabelle, Mobil und Kaufentscheidung

Ein Produktvergleich auf der eigenen Website hilft genau in dem Moment, in dem Besucher zögern. Sie haben zwei oder drei Modelle in getrennten Tabs offen, springen hin und her und machen sich Notizen. Dadurch verzögert sich der Kauf. In diesem Leitfaden zeigen wir, Talha Aslan und Team, Schritt für Schritt, wie wir eine Seite für den Produktvergleich gestalten. Es geht um die richtigen Merkmale, das Hervorheben von Unterschieden, die mobile Darstellung und den Weg zur Kaufentscheidung. Die Beispiele sind Beispielszenarien, keine Kundenfälle.

Besonders viel Nutzen bringt eine solche Seite bei technischen Produkten, bei Tarifen oder Abostufen und bei verschiedenen Versionen desselben Produkts. Ein Softwareanbieter mit drei Tarifen zeigt zum Beispiel alle Tarife in einer Tabelle. Besucher öffnen also nicht mehr drei Seiten und vergleichen im Kopf. Somit fällt die Entscheidung schneller, und der Support hört seltener die Frage, welches Produkt das richtige ist.

Die Nielsen Norman Group beschreibt dieses Muster im Artikel Comparison Tables for Products, Services, and Features. Der Kerngedanke lautet: Nehmen Sie den Nutzern die Arbeit ab. Das heißt, die Seite übernimmt die Rechnung, die Besucher sonst im Kopf machen müssten. Mit diesem Gedanken beginnen wir jedes Design. Jede Spalte, jede Zeile und jede Farbe muss eine Frage beantworten: Erleichtert dieses Element die Entscheidung?

Kurz gesagt ist der Produktvergleich kein Katalog, sondern ein Entscheidungswerkzeug. Den Katalog tragen Produktliste und Produktdetailseite. Der Produktvergleich begleitet also den unentschlossenen Moment dazwischen.

Wann brauchen Sie überhaupt einen Produktvergleich?

Nicht jeder Shop braucht einen Produktvergleich. Bei günstigen, einfachen Produkten mit schneller Kaufentscheidung möchte niemand eine lange Tabelle lesen. Für Socken oder Kugelschreiber bringt ein Vergleich meist nichts. Bei teuren, technischen oder sehr ähnlichen Produkten sieht die Lage allerdings anders aus.

In Projekten prüfen wir den Bedarf mit einigen Fragen:

• Erfüllen die Produkte denselben Zweck, sodass Besucher nur eines davon kaufen?
• Gibt es mindestens drei oder vier messbare Unterschiede?
• Öffnen Besucher vor dem Kauf mehrere Produktseiten?
• Fragen Kunden im Support häufig nach dem Unterschied?
• Ist der Preis so hoch, dass sich Besucher Zeit lassen?

Lautet die Antwort meist ja, lohnt sich ein Produktvergleich. Ergänzen sich die Produkte dagegen, kaufen Besucher also beide, brauchen Sie eher einen Bereich für Cross Selling. Dazu haben wir einen eigenen Beitrag über Cross Selling im Onlineshop geschrieben. Außerdem verliert die Tabelle ihren Sinn, wenn die Produkte zu verschieden sind. Ein Kühlschrank neben einem Staubsauger sagt Besuchern nichts.

Worin unterscheiden sich statischer und dynamischer Vergleich?

Zunächst gibt es zwei grundlegende Ansätze. Beim statischen Vergleich wählen Sie die Produkte selbst aus und bauen die Tabelle vorab. Beim dynamischen Vergleich markieren Besucher Modelle in der Produktliste und stellen die Tabelle selbst zusammen. Welcher Ansatz passt, hängt von der Größe Ihres Sortiments ab und davon, wie oft sich Produkte ändern.

Die Nielsen Norman Group empfiehlt statische Tabellen für kleine, feste Produktgruppen und dynamische Tabellen für größere Sortimente. In den meisten Projekten bauen wir beides. Konkret steht auf der Tarifseite eine statische Tabelle, während Kategorieseiten eine Vergleichsbox anbieten, die den dynamischen Vergleich öffnet. So bieten Sie Suchmaschinen eine feste Seite und Besuchern trotzdem Flexibilität.

Wie viele Produkte sollte ein Produktvergleich nebeneinander zeigen?

Die kurze Antwort: wenige. Mit jedem Produkt wächst die Tabelle in die Breite. Besucher scrollen dann seitwärts und vergessen, welche Spalte zu welchem Produkt gehört. Die Nielsen Norman Group rät, Vergleiche auf etwa fünf Produkte zu begrenzen. Für dynamische Tabellen nennt sie meist drei bis vier. Auf dem Smartphone sinkt die Zahl auf etwa zwei.

Unsere Faustregel lautet deshalb: vier Spalten am Desktop, zwei auf dem Smartphone. Möchte jemand ein fünftes Produkt hinzufügen, zeigen wir einen freundlichen Hinweis und bitten darum, zuerst ein Produkt zu entfernen. Zudem setzen wir über jede Spalte eine kleine Schaltfläche zum Entfernen. Denn Entscheiden heißt Eingrenzen: Besucher schauen sich vier Produkte an, streichen zwei und lesen die übrigen zwei genau.

Nehmen Sie als Beispielszenario einen Shop für Staubsauger. Ein Besucher möchte auf der Kategorieseite sechs Modelle markieren. In dieser Größe wirkt die Tabelle überladen. Stattdessen hebt die Seite nach vier Auswahlen die Schaltfläche zum Öffnen des Vergleichs hervor. Entfernt der Besucher dann zwei Modelle, wirkt die Ansicht ruhiger und die Unterschiede treten deutlich hervor.

Betrachten Sie die Anzahl also als bewusste Designgrenze. Sie schränkt Besucher nicht ein. Im Gegenteil, sie führt schneller zur Entscheidung.

Welche Merkmale gehören in die Vergleichstabelle?

Alle Felder aus der Produktdatenbank in die Tabelle zu kippen, ist der häufigste Fehler, den wir sehen. Besucher verlieren sich in dreißig Zeilen und übersehen den Unterschied, auf den es ankommt. Deshalb wählen wir Zeilen danach aus, worauf Besucher bei der Entscheidung tatsächlich achten.

Um diese Kriterien zu finden, prüfen wir mehrere Quellen:

1. Supportanfragen: Was fragen Kunden am häufigsten?
2. Produktbewertungen: Welche Merkmale loben oder kritisieren Käufer?
3. Begriffe aus der internen Suche: Nach welchen Merkmalen suchen Besucher?
4. Notizen aus dem Vertrieb: Welcher Unterschied überzeugt Kunden?
5. Retourengründe: Welche Erwartung hat das Produkt nicht erfüllt?

Danach sortieren wir die Zeilen nach Bedeutung. Oben stehen Preis, Hauptzweck und die zwei oder drei entscheidenden technischen Werte. Dann folgen Zusatzinformationen wie Farben, Lieferumfang, Garantie und Lieferung. Ausführliche technische Daten wandern nach unten in einen aufklappbaren Bereich für Interessierte.

In einer Tabelle für Kaffeemaschinen ist der Pumpendruck zum Beispiel technisch wichtig. Trotzdem zählen für die meisten Besucher Zeilen wie die Anzahl der Tassen pro Durchgang oder der Aufwand beim Reinigen mehr. Kurz gesagt: Wählen Sie Zeilen in der Sprache Ihrer Besucher, nicht in der Sprache des Produktteams.

Wie sorgen Sie für einheitliche Produktdaten?

Eine Vergleichstabelle ist nur so verlässlich wie ihre Daten. Steht das Gewicht bei einem Produkt in Kilogramm und beim nächsten in Gramm, ziehen Besucher falsche Schlüsse. Ist ein Feld leer, fehlt dann das Merkmal oder nur die Information? Auch die Nielsen Norman Group betont, dass unvollständige oder uneinheitliche Merkmale eine Tabelle deutlich weniger nützlich machen.

Wir lösen dieses Problem vor dem Design, schon bei den Daten:

• Eine Einheit pro Merkmal, für alle Produkte gleich.
• Ja oder Nein Angaben überall in derselben Schreibweise.
• Leere Zellen mit klarer Bedeutung: „nicht vorhanden“ und „keine Angabe“ sind zwei verschiedene Aussagen.
• Eine gemeinsame Datenquelle für Produktkarte und Tabelle, damit beide nie voneinander abweichen.
• Eine Liste mit Pflichtfeldern für jedes neue Produkt.

Außerdem zahlt sich diese Disziplin über den Produktvergleich hinaus aus. Dieselben strukturierten Daten speisen Filter, Produktkarten und das Markup für strukturierte Daten. Anders gesagt: Einmal bereinigte Daten tragen viele Ansichten. Deshalb prüfen wir die Merkmalsliste zu Projektbeginn zusammen mit der Designdatei.

Ein Tipp aus der Praxis: Exportieren Sie Ihre Merkmalsliste und sortieren Sie jede Spalte. Abweichende Einheiten, Tippfehler und leere Felder fallen dann sofort auf. Korrigieren Sie diese an der Quelle und nicht erst in der Tabellenvorlage.

Wie bauen Sie Zeilen und Spalten sinnvoll auf?

Am besten lesbar ist ein Aufbau mit Produkten in Spalten und Merkmalen in Zeilen. Besucher folgen einer Zeile von links nach rechts und vergleichen dasselbe Merkmal bei allen Produkten. Auch die Nielsen Norman Group empfiehlt Beschriftungen links und oben sowie kurze, einheitlich ausgerichtete Texte.

Diesen Aufbau stärken wir mit einigen Details. Zunächst zeigt jeder Spaltenkopf Produktbild, Name, Preis und eine Kaufschaltfläche. Dann bleiben die Zeilenbeschriftungen in der linken Spalte fest und kurz. Zwischen den Zeilen nutzen wir klare, aber ruhige Trennlinien oder einen leichten Farbwechsel im Hintergrund. So passen Häkchen und Kreuze eindeutig zur richtigen Zeile.

In den Zellen bevorzugen wir knappe Angaben. Statt „Dieses Produkt hat eine volle zweijährige Herstellergarantie“ genügt „2 Jahre“. Das beschleunigt das Lesen und erleichtert den Vergleich. Zudem hilft es dem Auge, wenn Zahlenwerte einheitlich ausgerichtet sind.

Darüber hinaus gruppieren wir zusammengehörige Zeilen. Zwischenüberschriften wie „Maße und Gewicht“, „Leistung“ oder „Garantie und Lieferung“ teilen eine lange Tabelle in Abschnitte. Besucher öffnen also nur die Gruppe, die sie interessiert. Gerade bei technischen Produkten wirkt die Tabelle dadurch nicht wie eine Wand.

Wie funktioniert die Funktion zum Hervorheben von Unterschieden?

In einer langen Tabelle sind die meisten Zeilen bei allen Produkten gleich. Haben alle vier Smartphones denselben Ladeanschluss, liefert diese Zeile keine Entscheidungshilfe. Besucher brauchen vor allem die Zeilen, in denen sich die Produkte unterscheiden. Deshalb geben wir ihnen Kontrolle über die Ansicht.

Die Nielsen Norman Group nennt drei gängige Lösungen: aufklappbare Zeilen, das Ausblenden identischer Zeilen und einen Schalter, der Unterschiede hervorhebt. Wir setzen meist einen Schalter „nur Unterschiede zeigen“ über die Tabelle. Aktivieren Besucher ihn, verschwinden identische Zeilen, und die Tabelle schrumpft oft deutlich.

Farbe allein reicht für die Hervorhebung allerdings nicht. Menschen mit Farbsehschwäche übersehen einen Unterschied, den nur eine Farbe markiert. Daher kombinieren wir Farbe mit fetter Schrift, einem kleinen Symbol oder einer Textangabe. Außerdem achten wir auf lesbaren Kontrast. Hellgraue Schrift auf blassgelbem Grund wirkt schwach und strengt die Augen an.

Dann gibt es noch die Markierung des besten Werts. Sie können etwa die längste Akkulaufzeit fett setzen. Gehen Sie damit jedoch sparsam um. Krönen Sie in jeder Zeile einen Sieger, wirkt die Tabelle wie eine Werbetafel, und Besucher zweifeln an Ihrer Neutralität.

Warum brauchen Sie einen fixierten Tabellenkopf?

Beim Scrollen verschwinden allerdings die Spaltenköpfe aus dem Bild. Spätestens in Zeile zwanzig müssen sich Besucher merken, welche Spalte zu welchem Produkt gehört. Diese Gedächtnisarbeit bringt also nichts. Aus diesem Grund empfiehlt die Nielsen Norman Group, Spaltenköpfe beim Scrollen fixiert zu halten.

Im fixierten Kopf zeigen wir nicht die volle Produktkarte, sondern eine schlanke Version: kleines Bild, kurzer Name und Preis. Auch die Kaufschaltfläche bleibt in dieser Leiste. Besucher müssen also nach ihrer Entscheidung nicht wieder nach oben scrollen. Die Leiste sollte schmal bleiben, sonst verdeckt sie einen großen Teil des Bildschirms und erschwert das Lesen.

Dieselbe Logik gilt in der Horizontalen. Braucht die Tabelle seitliches Scrollen, bleiben die Zeilenbeschriftungen in der linken Spalte stehen. Somit wissen Besucher jederzeit, welches Merkmal sie gerade lesen.

Technisch lässt sich ein fixierter Kopf mit modernem CSS gut umsetzen. Achten Sie vor allem auf Layoutverschiebungen. Springt die Seite, sobald die Leiste erscheint, verlieren Besucher ihre Position. Wir reservieren den Platz für die Leiste daher von Anfang an und halten den Übergang weich.

Wie gestalten Sie einen Produktvergleich für Smartphones?

Der kleine Bildschirm ist die härteste Prüfung für jedes Vergleichsdesign. Eine Tabelle mit vier Spalten schrumpft auf dem Smartphone entweder bis zur Unlesbarkeit oder zwingt zum seitlichen Scrollen. Die Nielsen Norman Group empfiehlt, den Vergleich auf kleinen Bildschirmen möglichst trotzdem anzubieten, meist mit etwa zwei Produkten.

Mobil setzen wir auf diese Ansätze:

• Höchstens zwei Spalten: Wählen Besucher ein drittes Produkt, entscheiden sie selbst, welche zwei nebeneinander stehen.
• Eine Leiste zum Wechseln: Produktnamen stehen oben in einer scrollbaren Leiste, ein Tippen tauscht die Spalte.
• Beschriftung in der Zelle statt fester Beschriftungsspalte: Jede Zelle zeigt den Merkmalsnamen in kleiner Schrift.
• Aufklappbare Gruppen: Lange Tabellen teilen wir in Abschnitte wie „Leistung“ und „Maße“.
• Kaufschaltfläche in der Daumenzone: eine feste Leiste am unteren Rand.

Tabs oder eine Listenansicht sind ebenfalls möglich. Allerdings weist die Nielsen Norman Group darauf hin, dass diese Formen das Abwägen erschweren. Daher testen wir zuerst eine echte Tabelle mit zwei Spalten. Mehr zum Denkansatz finden Sie in unserem Beitrag über Mobile First Design. Zur Platzierung von Schaltflächen lesen Sie unseren Leitfaden zur Daumenzone.

Wie testen Sie die mobile Vergleichsansicht?

Eine mobile Tabelle, die in der Designdatei gut aussieht, verhält sich auf einem echten Smartphone oft ganz anders. Lange Produktnamen brechen in zwei Zeilen um. Außerdem schiebt ein Preisschild die Schaltfläche zur Seite. Eine fixierte Leiste verdeckt den Bildschirm, sobald die Tastatur erscheint. Deshalb testen wir mobil ab dem ersten Entwurf und nicht erst am Ende.

Beim Testen achten wir auf einige Situationen. Zunächst setzen wir den längsten Produktnamen und den längsten Wert in die Tabelle. Denn das Design muss auch die ungünstigsten Daten aushalten. Dann prüfen wir ein kleines Smartphone im Hoch- und im Querformat. Danach vergrößern wir die Schrift in den Browsereinstellungen und kontrollieren, ob die Tabelle lesbar bleibt. Schließlich testen wir die Bedienung mit einer Hand: Erreichen Besucher Wechselleiste und Kaufschaltfläche bequem mit dem Daumen?

Für einen schnellen Blick auf die allgemeine Mobiltauglichkeit können Sie unseren Test zur Mobilfreundlichkeit nutzen. Trotzdem ersetzt kein Tool die Beobachtung echter Menschen. Fragen Sie einige Personen, welches von zwei Modellen zu ihnen passt, und beobachten Sie, wie sie auf dem Smartphone entscheiden. Notieren Sie, wo sie zögern, wonach sie suchen und was sie nicht finden. Diese Notizen bilden dann den Fahrplan für die nächste Designrunde.

Wie arbeiten Filter und Vergleichsauswahl zusammen?

Besucher landen selten direkt im Produktvergleich. Zuerst grenzen sie die Liste auf einer Kategorieseite mit Filtern ein, dann markieren sie einige Produkte. Filter und Vergleich sind also zwei Schritte derselben Entscheidung. Filter beantworten die Frage, welche Produkte grundsätzlich passen. Der Vergleich beantwortet dann, welches davon am besten passt.

Konkret verbinden einige Details diese Schritte. Produktkarten tragen ein gut sichtbares Kästchen zum Vergleichen. Markieren Besucher Produkte, erscheint unten eine kleine Vergleichsleiste mit der aktuellen Auswahl. Diese Leiste behält die Auswahl auch dann, wenn Besucher die Seite wechseln oder einen Filter ändern.

Halten Sie zudem die Namen in Filtern und Tabellenzeilen identisch. Haben Besucher nach „leiser Betrieb“ gefiltert, sollten sie genau diesen Begriff in der Tabelle sehen und nicht „Geräuschpegel“. Ein Beispielszenario: Jemand filtert Klimageräte nach Energieklasse, markiert drei Modelle und öffnet den Vergleich. Steht die Energieklasse ganz oben, passt die Tabelle sichtbar zur Entscheidung im Filter.

Wie Filterdesign den Umsatz beeinflusst, erklären wir im Beitrag über Produktfilter im Onlineshop. Daher wiederholen wir das hier nicht.

Wie erklären Sie Fachbegriffe verständlich?

Fachbegriffe sorgen in Vergleichstabellen für die meiste Verwirrung. Angaben wie „IP54“, „Invertermotor“ oder „Dualband“ sagen manchen Besuchern viel und anderen gar nichts. Die Nielsen Norman Group empfiehlt, Fachbegriffe im Kontext zu erklären, in vertraute Vergleiche zu übersetzen oder kurze Infoboxen und Links anzubieten.

Wir arbeiten mit drei Ebenen. Auf der ersten Ebene bleibt der Zellwert kurz: „IP54“. Auf der zweiten Ebene steht neben der Zeilenbeschriftung ein kleines Infosymbol. Ein Tippen darauf öffnet die Erklärung des Begriffs. Auf der dritten Ebene verlinken wir bei Bedarf auf einen ausführlicheren Ratgeber.

Zudem wirkt die Übersetzung in den Alltag gut. Neben „IP54“ könnten Sie etwa ergänzen: „auf dem Balkon bei Regen nutzbar, nicht untertauchen“. Stützen Sie solche Übersetzungen allerdings auf die offiziellen Herstellerangaben. Eine übertriebene Aussage kommt sonst als Retoure oder Beschwerde zurück.

Infoboxen müssen zudem auf dem Smartphone funktionieren. Eine Box, die nur beim Überfahren mit der Maus erscheint, öffnet sich auf einem Touchscreen womöglich nie. Deshalb bauen wir Erklärungen, die sich per Tippen öffnen und leicht wieder schließen lassen. Außerdem sorgen wir dafür, dass Tastaturnutzer sie erreichen.

Welches Markup braucht eine barrierefreie Vergleichstabelle?

Wer einen Screenreader nutzt, überfliegt die Tabelle nicht visuell. Stattdessen bewegt man sich von Zelle zu Zelle und möchte hören, zu welcher Überschrift jede Zelle gehört. Das Tables Tutorial des W3C empfiehlt, Kopfzellen mit th und Datenzellen mit td auszuzeichnen. Zudem stellt es klar, dass optische Hinweise allein eine Tabelle nicht barrierefrei machen.

Eine Tabelle für den Produktvergleich hat typischerweise zwei Kopfbereiche: oben die Produktnamen, links die Merkmale. Für diesen Fall empfiehlt das W3C, die Richtung jeder Kopfzelle mit dem Attribut scope festzulegen, also col für Spaltenköpfe und row für Zeilenköpfe. Auch eine Tabellenüberschrift (caption), die das Thema benennt, hilft in den meisten Fällen.

Unsere Checkliste zur Barrierefreiheit umfasst diese Punkte:

• Sind Produktnamen und Merkmale als Kopfzellen ausgezeichnet?
• Haben Häkchen und Kreuze eine Textentsprechung?
• Zeigen Text oder Formatierung die Unterschiede, nicht nur Farbe?
• Lässt sich der Schalter „nur Unterschiede zeigen“ per Tastatur bedienen?
• Übernimmt CSS das Layout und nicht eine Tabelle?

Das W3C betont außerdem, dass Tabellen nicht für das Seitenlayout gedacht sind. Da eine Vergleichsseite echte Daten enthält, erfüllen Sie diese Regel bereits. Verzichten Sie nur auf verschachtelte Tabellen als Dekoration.

Wie führen Sie Besucher zur Kaufentscheidung?

Am Ende eines Produktvergleichs steht eine Entscheidung, keine weitere Information. Besucher haben die Unterschiede gesehen und ein Produkt gewählt. Jetzt brauchen sie also den kürzesten Weg zum Kauf. Deshalb trägt jede Spalte eine klare Schaltfläche zum Kaufen oder für den Warenkorb, und der fixierte Kopf wiederholt sie.

Einige Methoden erleichtern die Entscheidung. Erstens ergänzen wir eine Zeile „ideal für“. Kurze Angaben wie „kleine Wohnungen“ oder „Vielreisende“ helfen Besuchern, sich in einer Spalte wiederzufinden. Zweitens holen wir Lagerbestand und Lieferzeit in die Tabelle. Erfahren Besucher erst im letzten Schritt, dass ihr Favorit ausverkauft ist, folgt Enttäuschung. Schließlich gilt: Wenn Sie ein Produkt als „beliebte Wahl“ markieren, stützen Sie das auf echte Verkaufsdaten und erklären Sie den Grund.

Auch der Text auf der Schaltfläche zählt. „Dieses Modell wählen“ oder „In den Warenkorb“ macht die Handlung klarer als „Details“. Beispiele für gute Schaltflächen zeigen wir im Leitfaden zum Call to Action.

Diesen Entscheidungsweg bauen wir zusammen mit Tabelle, Filtern und Produktseiten auf Ihrer Website. Im Rahmen unserer Leistungen im Webdesign planen wir die Vergleichsansicht passend zu Ihren Produktdaten. Für ein Angebot zu Ihrem Projekt nutzen Sie einfach das Kontaktformular.

Wie behandeln Sie einen Produktvergleich aus Sicht der SEO?

Ein statischer Produktvergleich kann ein wertvoller Einstieg für Suchanfragen nach dem Muster „A oder B“ sein. Mit fester URL, aussagekräftigem Titel und einer kurzen Zusammenfassung über der Tabelle verstehen Suchmaschinen, was die Seite vergleicht. Daher lassen wir feste Seiten wie Tarif oder Serienvergleiche für den Index offen.

Beim dynamischen Vergleich sieht es anders aus. Erzeugt jede Produktkombination eine eigene URL, entstehen auf Ihrer Website schnell Tausende nahezu identische Seiten. Solche Seiten bringen in den Suchergebnissen selten Mehrwert und verbrauchen Crawl Budget. Also halten wir dynamische Vergleichsadressen meist aus dem Index heraus.

Vorsicht gilt auch bei strukturierten Daten. Die Seite Intro to Product Structured Data on Google von Google Search Central beschreibt Produkt Markup anhand einzelner Produktseiten. Sie unterscheidet Händlereinträge für Seiten mit Kaufmöglichkeit und Produkt Snippets für Seiten ohne Kaufmöglichkeit. Statt jedes Produkt auf der Vergleichsseite auszuzeichnen, behalten Sie das Haupt Markup sicherer auf den Produktdetailseiten.

Wie Sie die Produktseite selbst stärken, lesen Sie in unserem Beitrag Produktseite im Onlineshop optimieren.

Beispielszenario: Wie vergleichen Sie drei Kaffeemaschinen?

Dieser Abschnitt ist zunächst ein Beispielszenario, mit dem wir den Ablauf greifbar machen, kein echter Kundenfall. Ein Shop verkauft drei Kaffeemaschinen: ein Einstiegsmodell, ein mittleres Modell und ein Premiummodell. Die häufigste Supportfrage lautet, worin sich die drei unterscheiden.

Im ersten Schritt sichten wir Supportanfragen und Bewertungen. Dabei zeigt sich, dass Besucher vor allem auf Tassenkapazität, Milchschaum, Reinigungsaufwand und Preis achten. Dann eröffnen wir die Tabelle mit diesen vier Zeilen und verschieben die technischen Daten in einen aufklappbaren Bereich darunter.

Im zweiten Schritt ergänzen wir die Zeile „ideal für“: „Singlehaushalte“, „Fans von Milchkaffee“ und „volle Büros“. Danach kommt der Schalter „nur Unterschiede zeigen“. Zeilen, die bei allen drei Maschinen gleich sind, etwa das Material des Wassertanks, verschwinden aus der Ansicht.

Auf dem Smartphone sehen Besucher zwei Modelle nebeneinander und tauschen das dritte über die obere Leiste ein. Unten steht eine feste Leiste mit der Schaltfläche für den Warenkorb. Zum Schluss ergänzen wir für jedes Modell Lagerstatus und voraussichtliche Lieferzeit.

Zudem legen wir den Erfolg vorab fest: den Anteil der Besucher, die vom Vergleich in den Warenkorb wechseln, und die Entwicklung der Supportfragen nach dem Unterschied. So bewerten Sie das Design mit Daten statt mit Vermutungen.

Was sollten Sie vor dem Start Ihres Produktvergleichs prüfen?

Vor dem Livegang gehen wir die folgende Checkliste Schritt für Schritt durch. Sie wirkt vielleicht lang. Allerdings steht jeder Punkt für eine Stelle, an der echte Besucher hängen bleiben könnten.

1. Sind bei jedem Produkt alle Zeilen ausgefüllt und in derselben Einheit angegeben?
2. Unterscheiden leere Zellen klar zwischen „nicht vorhanden“ und „keine Angabe“?
3. Zeigt der Desktop höchstens vier und das Smartphone zwei Spalten?
4. Bleiben Spaltenköpfe und Zeilenbeschriftungen beim Scrollen stehen?
5. Funktioniert der Schalter „nur Unterschiede zeigen“, auch per Tastatur?
6. Öffnen sich Erklärungen zu Fachbegriffen auf Touchscreens?
7. Hat jede Spalte eine Kaufschaltfläche und eine Bestandsangabe?
8. Tragen Kopfzellen das richtige Markup mit scope?
9. Zeigen Text oder Symbole die Unterschiede, nicht nur Farbe?
10. Bleiben dynamische Vergleichsadressen außerhalb des Index und statische Seiten indexierbar?
11. Lädt die Seite auch bei langsamer Verbindung in vertretbarer Zeit?
12. Misst ein Tracking den Wechsel vom Vergleich in den Warenkorb?

Diese Liste müssen Sie nicht bei jedem neuen Produkt wiederholen. Sobald Sie jedoch eine neue Produktkategorie eröffnen, lohnt sich eine erneute Prüfung.

Welche Fehler passieren beim Produktvergleich am häufigsten?

Die Fehler, die wir in der Praxis sehen, ähneln sich zudem stark. Der erste besteht darin, alle Datenbankfelder in die Tabelle zu kippen. Folglich verlieren sich Besucher in dreißig Zeilen. Der zweite: Jedes Produkt wirkt wie ein Sieger. Verliert die Tabelle ihre Neutralität, vertrauen Besucher ihr nicht mehr.

Der dritte Fehler besteht darin, die mobile Ansicht als verkleinerten Desktop zu behandeln. Eine Tabelle mit vier Spalten auf dem Smartphone bedeutet winzige Schrift und Fehlklicks. Viertens geht oft die Auswahl verloren. Verschwinden die markierten Produkte beim Seitenwechsel, müssen Besucher von vorn beginnen.

Der fünfte Fehler ist fehlende Messung. Starten Sie den Produktvergleich und schauen nie wieder hin, wissen Sie nicht, wo Besucher abspringen. Beobachten Sie, welche Zeilen Besucher aufklappen, welche Produkte sie am häufigsten gemeinsam vergleichen und wie viele in den Warenkorb wechseln. Um solche Probleme systematisch zu finden, hilft ein UX Audit.

Schließlich ist es ein häufiger Fehler, die Seite einmal zu bauen und dann sich selbst zu überlassen. Produkte ändern sich, Preise schwanken, neue Modelle kommen hinzu. Eine veraltete Tabelle liefert Besuchern somit falsche Informationen. Deshalb koppeln wir die Vergleichsdaten an den Ablauf der Produktpflege. Ändert sich ein Produkt, zieht die Tabelle automatisch nach.

Wie setzen wir den Produktvergleich auf Ihrer Website um?

Wir, Talha Aslan und Team, behandeln die Vergleichsansicht als Teil der Kaufreise und nicht als isoliertes Element. Der Ablauf folgt meist dieser Reihenfolge. Zunächst sichten wir Ihre Produktdaten und Supportanfragen. Danach legen wir die Zeilen und ihre Reihenfolge fest. Dann erstellen wir Entwürfe für Desktop und Smartphone und testen sie mit Ihren echten Daten.

Beim Aufbau sorgen wir dafür, dass Filter, Produktkarten und Vergleichstabelle aus derselben Datenquelle schöpfen. Ändern Sie ein Produkt, zeigen also alle Ansichten dieselbe Information. Zudem richten wir barrierefreies Tabellenmarkup, fixierte Köpfe und den Schalter „nur Unterschiede zeigen“ von Anfang an ein.

Nach dem Start messen wir den Wechsel vom Vergleich in den Warenkorb und nehmen in den ersten Wochen kleine Korrekturen an den beobachteten Hürden vor. Ein Ergebnis garantieren wir dabei nicht. Ein Produktvergleich erleichtert die Entscheidung, doch Preis, Bestand und das Produkt selbst prägen den Umsatz ebenfalls.

Planen Sie einen Produktvergleich für Ihren Shop, schildern Sie uns Ihr Projekt auf unserer Seite zum Webdesign. Wir klären Umfang und Zeitrahmen und erstellen Ihnen ein passendes Angebot.