Eine Produktvergleichstabelle stellt zwei bis fünf Produkte nebeneinander, meist mit Produkten als Spalten und Attributen als Zeilen, damit Kund:innen Spezifikationen abwägen können, ohne jede Produktseite zu öffnen. Sie gehört auf Kategorieseiten, Produktseiten und in Kaufberatungen für Produkte, die man nach mehreren messbaren Attributen zugleich auswählt: Laptops, Bohrschrauber, E-Bikes, Kaffeemaschinen, Matratzen.
Die Usability-Forschung ist sich bei den Layout-Regeln einig. Zeig höchstens fünf Produkte (auf dem Smartphone oft nur zwei), gruppiere die Zeilen, halte die Produktnamen beim Scrollen sichtbar und lass Kund:innen Zeilen ausblenden, in denen alle Produkte denselben Wert haben (Nielsen Norman Group, Baymard Institute). Die Regel, an der die meisten Tabellen scheitern, ist aber eine Datenregel: Jede Zelle braucht einen Wert, in derselben Einheit und demselben Format, für jedes Produkt. Dieser Leitfaden zeigt, wo eine Vergleichstabelle hingehört, welche Attribute du pro Kategorie vergleichst, Layout und Muster für Mobilgeräte sowie die Attributdaten, die da sein müssen, bevor irgendetwas davon funktioniert.
Drei Stellen, an denen eine Vergleichstabelle ihren Platz verdient
Vergleichstabellen gibt es in zwei Arten. Eine statische Tabelle vergleicht Produkte, die du vorab ausgewählt hast; eine dynamische lässt Kund:innen in der Produktliste ein Vergleichen-Kästchen anhaken und eine eigene Tabelle zusammenstellen. Der Artikel der Nielsen Norman Group von Kate Moran und Taylor Dykes aus dem Jahr 2024 empfiehlt statische Tabellen für kleine Sortimente und dynamische für große Kataloge und merkt an, dass die meisten dynamischen Tabellen nur drei oder vier Artikel aufnehmen (NN/g).
- Kategorieseiten: ein Vergleichen-Kästchen auf jeder Produktkarte und eine fixierte Vergleichsleiste, die die Tabelle öffnet. Das ist die dynamische Variante, nützlich in Kategorien mit Dutzenden ähnlicher Produkte, etwa Akku-Bohrschrauber oder Saugroboter.
- Produktseiten: ein kurzer Block „mit ähnlichen Artikeln vergleichen“ unter den Spezifikationen, mit dem aktuellen Produkt in der ersten Spalte und zwei oder drei Alternativen daneben. Er hält Kund:innen auf deiner Seite, wenn sie zwischen Modellen schwanken; der Leitfaden zur Produktdetailseite zeigt, wo er zwischen den anderen Abschnitten passt.
- Kaufberatungen und Sortimentsseiten: eine statische Tabelle einer Produktlinie (Einstiegs-, Mittel- und Topmodell), die erklärt, was der Aufpreis bringt. Hier wählst du die Zeilen und kannst pro Spalte ein kurzes Fazit ergänzen.
Käufe, bei denen Vergleichen hilft, und bei denen es im Weg steht
NN/g verbindet Vergleichstabellen mit kompensatorischen Entscheidungen: Kund:innen wägen Attribute gegeneinander ab, etwa mehr Drehmoment gegen mehr Gewicht oder einen größeren Akku gegen einen höheren Preis. Für solche Entscheidungen sind Tabellen am besten. Derselbe Artikel rät von Tabellen ab, wenn sich die Artikel nicht gegenseitig ausschließen, wenn sie günstig und einfach sind oder wenn sie sich schwer an Fakten vergleichen lassen; ästhetische Käufe wie Kleidung und Möbel brauchen meist keine (NN/g).
Ein schneller Test: Sind deine Filter für eine Kategorie überwiegend Zahlen und Ja/Nein-Merkmale (Wattzahl, Fassungsvermögen, Abmessungen, „spülmaschinenfest“), hilft eine Tabelle. Sind es überwiegend Stil, Farbe und Muster, steck die Mühe lieber in Bilder und Passform-Informationen.
Vergleichsattribute für acht Produktkategorien
Vergleichszeilen sollten die Attribute sein, zwischen denen Käufer abwägen, nicht jedes Feld, das du zufällig hast. NN/g warnt ausdrücklich davor, alle verfügbaren Metadaten in die Tabelle zu kippen. Das hier sind sinnvolle Startzeilen pro Kategorie, mit der Einheit oder dem Werteformat, das jede Zeile braucht:
Vergleichszeilen pro Kategorie, mit Einheiten und Zeilengruppen
| Laptops | Bildschirmgröße, Prozessor, Arbeitsspeicher, Speicherplatz, Gewicht, Akkulaufzeit | Zoll, Modellname, GB, GB, kg, Stunden | Leistung, Display, Mobilität |
|---|---|---|---|
| Akku-Bohrschrauber | Spannung, max. Drehmoment, Bohrfutter, Gewicht mit Akku, bürstenloser Motor | V, Nm, mm, kg, ja/nein | Leistung, Handhabung, Akku |
| Saugroboter | Saugleistung, Laufzeit, Staubbehälter, Wischfunktion, Lautstärke | Pa, Minuten, ml, ja/nein, dB | Reinigung, Akku, Komfort |
| E-Bikes | Motorposition, Motordrehmoment, Akkukapazität, Rahmengrößen, Gewicht | Liste Nabenmotor/Mittelmotor, Nm, Wh, cm, kg | Motor, Akku, Passform |
| Matratzen | Härtegrad, Höhe, Kernmaterial, abnehmbarer Bezug, Probezeit | Skala 1 bis 10, cm, kontrollierte Liste, ja/nein, Nächte | Komfort, Materialien, Service |
| Kaffeemaschinen | Maschinentyp, Pumpendruck, Wassertank, Milchsystem, integriertes Mahlwerk | kontrollierte Liste, bar, Liter, kontrollierte Liste, ja/nein | Zubereitung, Kapazität, Ausstattung |
| Laufschuhe | Sprengung, Gewicht, Dämpfungsgrad, Untergrund | mm, g, kontrollierte Liste, Liste Straße/Trail | Passform und Laufgefühl, Einsatz |
| Wandfarbe | Ergiebigkeit, Glanzgrad, Trockenzeit, Gebindegröße, innen oder außen | m2 pro Liter, kontrollierte Liste, Stunden, Liter, Liste | Verarbeitung, Ergebnis |
Zwei Muster ziehen sich durch die Tabelle. Erstens besteht die Hälfte der Zeilen aus Zahlen mit Einheit, und die lassen sich nur gut sortieren und vergleichen, wenn die Einheit bei jedem Produkt identisch ist. Zweitens besteht der Rest aus kontrollierten Listen oder Ja/Nein-Werten, und die bleiben nur vergleichbar, wenn alle „Mittelmotor“ gleich schreiben. Beides sind Fragen der Attributmodellierung, bevor es Designfragen sind; die Macht von Produktattributen geht tiefer auf diese Modellierung ein.
Eine Beispiel-Vergleichstabelle aus Attributdaten
Hier ein konkretes Beispiel: drei Akku-Bohrschrauber mit 18 V aus einer erfundenen Produktlinie, zur Veranschaulichung verglichen anhand der Attribute aus der Tabelle oben. Der Block unten ist sortierbar, deshalb sind die Produkte hier Zeilen; in einem Shop würdest du ihn meist drehen, sodass Produkte Spalten sind.
Beispiel zur Veranschaulichung: drei Akku-Bohrschrauber mit 18 V
| Kompakter Bohrschrauber | 18 | 40 | 10 | 1,4 | 2,0 | Nein | 89 |
|---|---|---|---|---|---|---|---|
| Bürstenloser Bohrschrauber | 18 | 60 | 13 | 1,6 | 2,0 | Ja | 129 |
| Profi-Schlagbohrschrauber | 18 | 90 | 13 | 2,1 | 4,0 | Ja | 199 |
Damit diese Tabelle funktioniert, braucht es mehrere Entscheidungen, und jede davon ist eine Datenentscheidung:
- Einheiten stehen im Spaltenkopf, nicht in den Zellen. Zellen enthalten reine Zahlen, deshalb bringt das Sortieren nach Drehmoment 40, 60 und 90 in die richtige Reihenfolge. Eine Zelle mit „60Nm“ neben einer mit „60 Nm max.“ wird als Text sortiert.
- Eine Definition pro Attribut. „Gewicht mit Akku“ ist ein anderes Attribut als „Gewicht (ohne Akku)“. Lieferanten mischen beides, und eine Tabelle, die es mischt, lässt den kompakten Bohrschrauber schwerer oder leichter wirken, als er ist.
- Boolesche Werte sind Ja oder Nein, nie leer. Eine leere Zelle in der Zeile bürstenloser Motor lesen manche als „nein“ und andere als „unbekannt“.
- Identische Zeilen sind auch Information, aber nicht in der Standardansicht. Alle drei haben 18 V, was für die Akku-Kompatibilität wichtig ist. Zeig das in der vollständigen Tabelle und blende es aus, wenn Kund:innen auf die Ansicht mit nur den Unterschieden umschalten.
Layout-Regeln aus den Tests von Baymard und der Nielsen Norman Group
Baymards Artikel über Vergleichstools von Edward Scott (Oktober 2022) nennt vier Verbesserungen aus seinen Usability-Tests: Nutzer identische Attribute entfernen lassen, Attribute in Kategorien gruppieren, die Spaltenköpfe beim Scrollen sichtbar halten und Zeilen mit Trennlinien oder abwechselnder Schattierung gestalten (Baymard). Von den Arten, Attribute zu ordnen, schnitt die Gruppierung in Kategorien bei den Testpersonen am besten ab. NN/g ergänzt einige weitere Regeln:
- Produkte als Spalten, Attribute als Zeilen, mit Attributbezeichnungen links und Produktnamen oben. Das ist die Konvention, die Kund:innen erwarten.
- Höchstens fünf Produkte. Größere Mengen brauchen zuerst Filter, damit Kund:innen die Liste eingrenzen, bevor sie vergleichen.
- Fixierte Produktköpfe mit Name, Vorschaubild und Preis, damit niemand nach oben scrollen muss, um zu prüfen, welche Spalte welche ist. Baymard stellte fest, dass das Problem damit ganz verschwindet.
- Ein Schalter „Nur Unterschiede“, etwa der Schalter Highlight Differences, den NN/g bei Best Buy zeigt. Wo du keine Zeilen ausblenden kannst, hebe stattdessen die abweichenden Zellen hervor.
- Kurzer Zelltext, möglichst keine ganzen Sätze, mit einheitlicher Ausrichtung. Zahlen rechtsbündig oder zentriert, Text linksbündig.
- Fachbegriffe direkt erklären: ein Tooltip bei „bürstenloser Motor“ oder „Wh“, der sagt, was das für Käufer bedeutet.
- Eine Version auf einen Blick mit fünf oder sechs Schlüsselzeilen, plus Link oder Schalter zur vollständigen Spezifikationstabelle.
Vergleichstabellen auf dem Smartphone
NN/g merkt an, dass du die Tabelle auf dem Smartphone eventuell auf zwei Produkte kürzen musst, die mobile Tabelle braucht also ein eigenes Muster (NN/g). Das übliche ist eine fixierte erste Spalte mit Attributbezeichnungen, zwei Produktspalten und ein Produktkopf, der oben bleibt, während Kund:innen durch die Zeilen scrollen. Lass sie tauschen, welche zwei Produkte angezeigt werden, statt sie horizontal durch vier Spalten scrollen zu lassen.
Passt eine echte Ansicht nebeneinander nicht, schlägt NN/g vor, Produkte zu Tabs zu machen, und nimmt in Kauf, dass Vergleichen schwerer wird. Übertrag das Smartphone-Limit nicht auf den Desktop: Wer am Desktop Platz für vier Produkte hat, sollte auch vier vergleichen können. Und behalte den Schalter „Nur Unterschiede“ auf Mobilgeräten, wo jede ausgeblendete Zeile Scrollen spart.
Einheiten, Werteformate und leere Zellen
NN/g nennt den Inhalt das größte Problem von Vergleichstabellen: Ein Attribut, das bei einigen der verglichenen Produkte fehlt, gehört kaum in die Tabelle. In der Praxis fallen die Datenprobleme in vier Gruppen, und für jede liegt die Lösung im Attributmodell, nicht im Template. Der Leitfaden zu Maßeinheiten behandelt die Seite der Einheiten im Detail.
- Gemischte Einheiten. Drei Lieferanten senden die Akkukapazität als „2Ah“, „2000 mAh“ und „2.0 Ah“. Speichere eine Zahl in einer Einheit (2,0, Einheit Ah) und lass das Template das Symbol ausgeben.
- Unkontrollierte Werte. „Mid-drive“, „middenmotor“, „center motor“ und „Mid“ sind ein Wert. Eine feste Liste erlaubter Werte pro Attribut, die Art von Referenzdaten, die ein Katalog verwalten sollte, hält sie über Produkte und Sprachen hinweg identisch.
- Verschiedene Definitionen hinter einer Bezeichnung. Gewicht mit oder ohne Akku, Ergiebigkeit pro Anstrich oder pro Gebinde, Laufzeit im Eco- oder Turbo-Modus. Schreib die Definition in den Attributnamen oder seinen Hilfetext und lehne Lieferantenwerte ab, die die andere verwenden.
- Leere Zellen. Leg fest, was eine Lücke bedeutet, und gib es aus: „Nein“, wenn das Merkmal fehlt, „Keine Angabe“, wenn der Lieferant keine Angabe gemacht hat. Lass eine Zelle nie leer und betrachte eine hohe Zahl von „Keine Angabe“ als Signal, das Attribut zu füllen, bevor du die Zeile zeigst.
Füllgrade entscheiden, welche Zeilen überhaupt in eine Tabelle dürfen. Nimm zur Veranschaulichung eine Bohrschrauber-Kategorie, in der „max. Drehmoment“ bei 96 % der Produkte gefüllt ist und „Lautstärke“ bei 38 %: Das erste ist eine Vergleichszeile, das zweite ein Projekt. Mach diese Prüfung pro Kategorie, bevor du die Tabelle gestaltest, denn das Template kann einen fehlenden Wert nicht reparieren.
Strukturierte Daten für Vergleichsseiten: was schema.org bietet
Weder Google noch schema.org hat einen strukturierten Datentyp für Vergleichstabellen. Googles Suchgalerie listet 25 Funktionen für strukturierte Daten auf, etwa Product, Review-Snippet und Breadcrumb, und keine davon ist für Vergleiche (Google Search Central, Seite zuletzt aktualisiert am 16. Oktober 2026). Schema.org hat nur einen allgemeinen Typ Table, „a table on a Web page“, der keine der Rich-Result-Funktionen von Google ist. Zeichne jede Produktseite wie gewohnt mit strukturierten Daten vom Typ Product aus und baue den Vergleich selbst als einfache HTML-Tabelle: ein table-Element, eine Kopfzeile mit th-Zellen für die Produkte und th-Zellen mit scope="row" für die Attributbezeichnungen.
Dieses semantische Markup hilft Screenreader-Nutzern mehr als jedes Schema: Sie hören zu jeder Zelle das Attribut und das Produkt. Gib die Tabelle nicht als Raster aus div-Elementen oder als Bild aus, und kopiere keine Vergleichsinhalte in FAQ- oder Review-Markup, um Rich Results hinterherzujagen.
Wo Magento, Shopify, Lightspeed und WooCommerce vergleichbare Attribute speichern
Jede Plattform speichert die Zeilen irgendwo; nur manche stellen den Vergleich für dich dar.
- Magento (Adobe Commerce): integrierter Produktvergleich (Product Compare). Jedes Attribut hat die Einstellung Comparable on Storefront; setze sie auf Yes, um das Attribut in den Vergleich aufzunehmen (Adobe Experience League). Unter denselben Storefront Properties liegt auch Use in Layered Navigation für Filter.
- Shopify: Spezifikationen liegen meist in Metafeldern, die das Theme oder eine App ausliest, um einen Vergleichsblock zu bauen. Typisierte Metafelder (Zahl mit Einheit, einzeiliger Text aus einer Liste) halten Werte vergleichbar; der Leitfaden zu Shopify-Metafeldern erklärt die Typen.
- Lightspeed eCom (C-Series): Spezifikationen, gruppiert nach Produkttyp und laut Lightspeeds Limits-Seite auf 50 begrenzt, die das Theme auf der Produktseite anzeigt.
- WooCommerce: Produktattribute, global oder pro Produkt; der Vergleich kommt vom Theme oder einem Plugin.
Der rote Faden: Die Plattform speichert einen Wert pro Attribut und Produkt, und der Vergleich ist eine Ansicht auf diese Werte. Sind die Werte im Shop uneinheitlich, ist es der Vergleich auch, egal welche App ihn darstellt.
Datenprüfung, bevor eine Vergleichstabelle live geht
Vergleichstabellen aus einem PIM-Attributmodell speisen
WISEPIM stellt keine Vergleichstabellen in deinem Shop dar; das übernehmen dein Theme, eine App oder deine Plattform. WISEPIM liefert die strukturierten Attributdaten dahinter. In WISEPIM hat jedes Attribut einen Typ (etwa Zahl, Dezimalzahl, boolesch, Auswahl oder Mehrfachauswahl), eine Gruppe, die Kategorien, für die es gilt, und optional einen Einheitencode-Satz für Zahlen oder ein Optionsset erlaubter Werte für Auswahlfelder, wie auf der Seite zur Attributverwaltung beschrieben. KI-Anreicherung kann fehlende Attributwerte aus Titeln und Beschreibungen des Produkts füllen, und die Attributliste zeigt Füllgrade pro Attribut, damit du siehst, welche Zeilen bereit sind.
Diese Attribute werden über die Verbindungen im jeweiligen Format der Plattform ausgespielt: Metafelder bei Shopify, Attribute bei Magento, Spezifikationen bei Lightspeed eCom. Feed Hub kann außerdem einen JSON-LD-Feed mit schema.org-Product-Daten veröffentlichen, der sichtbare Attributwerte als additionalProperty auflistet, für Teams, die Vergleichsseiten oder andere Tools auf Basis eines Feeds bauen. Der Leitfaden zur Attributstandardisierung zeigt, wie du uneinheitlich angelieferte Werte bereinigst.
