Eine Preistabelle, keine Preisliste. An diesem Punkt entscheidet der Besucher, ob er zahlt oder geht. Die Gestaltung dieses Punktes gibt entweder den Anstoß zur Handlung oder begräbt die Conversion.

Es geht nicht um auffällige Buttons. Es geht darum, wie Struktur, visuelle Hierarchie und Preispsychologie zusammenwirken. Die eine Technik, und die Seite funktioniert. Die andere, und der Besucher geht.

Nachfolgend 16 Beispiele von Dropbox bis BigCartel mit Analyse: warum ihre Tabellen einprägsam sind und welche Techniken funktionieren.

💡 Kurzüberblick:

• Gehen Sie die Beispiele durch und achten Sie auf wiederkehrende Muster
• Prüfen Sie die Vergleichstabelle und wählen Sie einen passenden Ansatz
• Wenden Sie die Technik-Matrix aus dem letzten Abschnitt an

Vergleichstabelle: 16 Ansätze für die Preistabellengestaltung

1. Dropbox

Dropbox Pläne-Seite, eines der klarsten Beispiele. Drei Karten, aussagekräftige Paketbilder, Trennung von „Personal" und „Teams" durch eine dünne Linie, nicht durch Farbe.

Statt Feature-Icons kontextbezogene Illustrationen. Die Team-Karte zeigt Zusammenarbeit; die persönliche Karte zeigt organisierte Dateien. Der Hintergrund fügt sich in die Seite ein, sodass Besucher Pläne vergleichen, anstatt gegen das Design anzukämpfen.

• Vorteile: Illustrationen statt Icons; Trennung durch Linie, nicht Farbe; Hintergrundintegration
• Nachteile: Bei vielen Funktionen liefert der Minimalismus möglicherweise zu wenig Information
• Wo Sie hinschauen sollten: 🔗 Dropbox Pläne

2. Wufoo

Wufoo nutzt eine vollfarbige Matrix mit einem Monats-/Jahres-Umschalter per Schieberegler. Funktionen werden durch Vergleich gezeigt: die vollständige Liste nur im beliebten Bonafide-Plan, während links und rechts grüne Häkchen neben verfügbaren Elementen erscheinen.

CTA-Buttons oben und unten. Für Seiten, die scrollen, ist das entscheidend. Nach unten gescrollt, um Funktionen zu studieren? Der Button wartet bereits.

• Vorteile: Matrix mit Schieberegler; Funktionsvergleich über beliebten Plan; CTA oben und unten
• Nachteile: Mit Farbe überladen, kann auf mobilen Geräten überladen wirken
• Wo Sie hinschauen sollten: 🔗 Wufoo Preise

3. Freshdesk

Freshdesk fügt ein animiertes Element hinzu: Der beliebte Plan ist mit einem schwebenden Heißluftballon-GIF markiert, der einzigen Bewegung auf einer statischen Seite. Die Augen werden sofort angezogen.

Das Thema „wachsendes Grün" zieht sich durch alles: Paketbilder, Feature-Icons, Buttons, Grüntöne. Besucher assoziieren Grün unbewusst mit Handlung.

• Vorteile: Animation lenkt auf beliebten Plan; konsistentes Farbthema
• Nachteile: GIF kann bei wiederholten Besuchen ablenken
• Wo Sie hinschauen sollten: 🔗 Freshdesk Preise

4. Plugmatter

Plugmatter zeigt ein eigenes Beispiel: eine Matrix in Rot und Weiß, passend zur Marke. Features links, Tarife rechts, der mittlere Tarif wird durch Helligkeit hervorgehoben, nicht durch eine neue Farbe.

Dasselbe Design steht als Vorlage in ihrem eigenen Preistabellen-Plugin zur Verfügung, ein seltener Fall von gelebtem „Eating your own dog food".

• Vorteile: strenge Markenstilistik; mittlerer Tarif durch Helligkeit hervorgehoben; Design ist zugleich Produktdemo
• Nachteile: kontrastreiches Rot ist nicht universell einsetzbar
• Anschauen unter: 🔗 Plugmatter

5. Pulse

Pulse beweist, dass weniger Text ein mutigeres Design erlaubt. Großzügiges Layout, großer Button, minimale Beschreibungen. Der beliebteste Tarif in der Mitte hat einen dunkleren Hintergrund und einen helleren Button, darüber ein „Great Value"-Label.

• Vorteile: großzügiges Layout schafft Raum zum Atmen; Nutzenversprechen als Label
• Nachteile: bei komplexen Produkten kann zu viel Weißraum entstehen
• Anschauen unter: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp hat ein dynamisches „Recommended"-Label entwickelt: Bewegt man den Schieberegler für die Abonnentenzahl, ändert sich der empfohlene Tarif. Besucher müssen nicht raten, was sie wählen sollen.

Der Preis erscheint nach der Funktionsbeschreibung, sodass Besucher den Wert einschätzen, bevor sie die Zahl sehen.

• Vorteile: dynamisches Label, das sich am Bedarf orientiert; Preis nach dem Nutzen
• Nachteile: auf kleinen Bildschirmen kann der Schieberegler unhandlich sein
• Anschauen unter: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk bietet eine kostenlose Testversion für ALLE Pakete an, nicht nur für das Basispaket. Die „Try"-Buttons sind orange hervorgehoben und führen zu einer voll funktionsfähigen Professional-Version.

Wenn die Testphase endet, fühlt sich die Rückstufung auf den Basistarif wie ein Verlust an. Bindungspsychologie durch Erfahrung, nicht durch Rabatt.

• Vorteile: Testphase für alle Tarife; voll ausgestatteter Testzeitraum
• Nachteile: Komplexes Produkt erschließt sich in der Testphase möglicherweise nicht vollständig
• Ansehen unter: 🔗 Zendesk Pricing

8. Litmus

Litmus arbeitet mit großen Farbblöcken, einem pro Tarif. Die Farben ergänzen sich und beißen sich nicht.

Zwei unterschiedliche CTAs: ein Button oben und unten ein Angebot, das einen konkreten Betrag beim Jahrestarif spart. Ein Sparbetrag als Zahl wirkt besser als Prozentangaben.

• Vorteile: Farbblöcke zur Unterscheidung der Tarife; zwei semantisch unterschiedliche CTAs
• Nachteile: Große Blöcke benötigen viel vertikalen Platz
• Ansehen unter: 🔗 Litmus Pricing

9. BeanStalk

BeanStalk spielt mit Tiefe: Karten für Freelancer sind flach und grau, während Karten für Unternehmen dreidimensional und „erhöht" wirken. Das visuelle Gewicht der Karte passt zu Preis und Zielgruppe.

Paketnamen (Bronze, Platinum) transportieren keine Bedeutung, aber ausführliche Beschreibungen gleichen das aus.

• Vorteile: 3D-Effekt für teurere Tarife; unterschiedliche „Ernsthaftigkeit" für verschiedene Zielgruppen
• Nachteile: Tarifnamen sind nichtssagend; 3D auf einer ultraflachen Website wirkt altmodisch
• Ansehen unter: 🔗 BeanStalk Pricing

10. Readymag

Readymag verwendet nur zwei Farben: Dunkelblau und Weiß. Das Dollarzeichen ist deutlich kleiner als die Preisnummer, eine Technik, die den „Zahlungsschmerz" reduziert: Besucher konzentrieren sich auf die Zahl, nicht auf die Tatsache der Ausgabe. Tooltips zu den Funktionen erläutern Optionen, ohne die Tabelle zu überladen.

• Vorteile: Minimalismus, reduziert auf zwei Farben; dezente Technik mit dem Währungssymbol; Tooltips statt Textwüsten
• Nachteile: Bei langen Tabellen können die zwei Farben ineinanderfließen
• Anschauungsbeispiel: 🔗 Readymag Pricing

11. Crazyegg

Crazyegg vergrößert die Variablen, die die Tarife unterscheiden, und macht sie deutlich größer als den umgebenden Text. Besucher müssen nicht nach Unterschieden suchen; sie springen sofort ins Auge.

Der ausgewählte Tarif ist blau eingefärbt (Vertrauen), die Buttons sind grün (Handlung). Die Farben nutzen psychologische Wirkung.

• Vorteile: übertrieben große Unterschiede; Vertrauens-Blau plus Handlungs-Grün
• Nachteile: nur für Tabellen mit wenigen Variablen geeignet
• Anschauen unter: 🔗 Crazyegg-Preise

12. Heroku

Heroku ist nahezu monochrom: alles in Lilatönen, bis auf einen einzigen blauen Akzent auf dem Button des Professional-Tarifs. Das Auge wird sofort dorthin gelenkt.

Der Preis ist IM Button integriert, nicht darüber platziert. Die Tarifbeschreibungen nutzen Vererbung: „Alle Funktionen des Free-Tarifs plus…" und so weiter die Kette hinunter.

• Vorteile: monochrom mit einem Farbakzent; Preis im CTA; kaskadierende Vererbung
• Nachteile: monochrom kann langweilig wirken
• Anschauen unter: 🔗 Heroku-Preise

13. Freshbooks

Freshbooks lässt Text zwischen den Seiten „schweben". Die meisten Tarife unterscheiden sich nur in der Anzahl der Kunden und im Preis. Weniger Unterschiede, klareres Design.

Der Evergreen-Tarif trägt einen „Beliebteste Wahl"-Hinweis und ein kleines Dollarzeichen im Verhältnis zur Zahl, dieselbe Technik wie bei Readymag.

• Vorteile: Klarheit durch wenige Variablen; schwebender Effekt
• Nachteile: nur wenn sich Tarife um 1-2 Parameter unterscheiden
• Anschauen unter: 🔗 Freshbooks-Preise

14. Slidedeck

Slidedeck lässt alle Pläne bewusst visuell identisch aussehen; der empfohlene ist lediglich etwas dunkler hinterlegt. Bei einem Add-on zählt nicht die Farbgebung, sondern die Verfügbarkeit bestimmter Funktionen. Das Design lenkt nicht vom Studium der Funktionsliste ab.

• Vorteile: Design stört den Vergleich nicht; visuelle Gleichheit erzwingt das Lesen
• Nachteile: Ohne visuellen Anker verliert man leicht die Orientierung
• Anschauen unter: 🔗 Slidedeck Pricing

15. YepText

YepText, die am schnellsten erfassbare Tabelle der Sammlung. Drei Zeilen, markante Paketnamen (Workin' It, The Beast, The Champ), Entscheidung in Sekunden.

Die Namen spiegeln die Zielgruppe wider, nicht eine formale Stufe. Emotionale Verbindung ohne ein einziges zusätzliches Wort.

• Vorteile: extrem schnelle Erfassung; markante Namen
• Nachteile: für komplexe SaaS zu wenig Information
• Anschauen unter: 🔗 YepText Pricing

16. BigCartel

BigCartel nutzt Bilder als Hintergrund des Preisbereichs: Jedes Bild zeigt, FÜR WEN der Plan gedacht ist, ein Künstler mit einigen Werken, ein wachsender Shop, ein etabliertes Unternehmen. Ein visuelles Porträt der Zielgruppe wirkt stärker als Worte.

Funktionen werden in einem Popup eingeblendet, was die Tabelle übersichtlich hält und die Informationen nur einen Klick entfernt.

• Vorteile: Bilder zeigen die Zielgruppe; Details im Popup versteckt
• Nachteile: Risiko, dass Besucher nicht klicken; nicht für den direkten Vergleich geeignet
• Anschauen unter: 🔗 BigCartel Signup

Video: Preistabellen-Design, das die Conversion steigert

Analyse der DNSK Design Study, wie „hässlichere, aber klarere" Preistabellen die Conversion erhöhten DNSK Design Study. Sechs Minuten, und es wird deutlich, warum visuelle „Schönheit" oft schadet:

⁉️🤔 Häufig gestellte Fragen

Was macht eine Preistabelle „conversion-freundlich"?

Drei Dinge: Klarheit der Unterschiede zwischen den Plänen, visuelle Betonung der empfohlenen Option und Abwesenheit von „Schmerz" beim Anblick des Preises. Konkrete Techniken: kleines Währungszeichen, Preis nach der Leistungsbeschreibung, ein hervorgehobener Plan. Die DNSK-Studie zeigte, dass „klare" Tabellen spürbar besser konvertieren als „hübsche" DNSK Study, 2024.

Ist es notwendig, einen Plan als „beliebt" hervorzuheben?

Fast immer sinnvoll. Besucher kommen mit der Frage „Welchen soll ich wählen?", und der hervorgehobene Plan löst sie auf. Die Ausnahme: wenn sich Pläne klar nach Zielgruppe trennen, wie bei Dropbox: persönlich / Team / Unternehmen. Dann ist es besser, visuell zu trennen statt durch Hervorhebung.

Wie viele Pläne sind optimal?

Drei oder vier. Drei ist der Klassiker: Basis / Beliebt / Erweitert. Vier, wenn es ein Enterprise-Segment gibt. Fünf oder mehr riskieren eine „Auswahlparalyse". Von den 16 Beispielen nutzen die meisten 3-4 Pläne.

Welche Farben für CTA-Buttons funktionieren am besten?

Grün („Los") und Orange („Jetzt handeln"). Blau für Vertrauenselemente. Rot mit Vorsicht: es zieht Aufmerksamkeit auf sich, wird aber als „Gefahr" gelesen. Die Hauptregel: Der CTA-Button sollte das EINZIGE Element dieser Farbe auf der Seite sein.

Sollte man den Preis sofort zeigen oder hinter „Kontaktieren Sie uns" verstecken?

Für Self-Service sofort und transparent zeigen. Versteckte Preise irritieren. Für Enterprise mit individueller Preisgestaltung einen Hinweis geben („ab X €") und die genaue Zahl über den Kontakt liefern. Beispiel: Heroku in der Sammlung.

Welchen Ansatz für das Preistabellen-Design sollten Sie wählen?

16 Beispiele liegen hinter uns. Nun das Wesentliche: was Sie auf Ihr Projekt anwenden.

Wenn Sie 3-4 Pläne mit klaren Unterschieden haben, wählen Sie den Ansatz von Freshbooks oder Readymag: minimale Farben, Betonung auf 1-2 Variablen, kleines Währungszeichen. Funktioniert für die meisten SaaS.

Wenn sich Pläne deutlich in den Funktionen unterscheiden, nutzen Sie eine Matrix wie Plugmatter oder Wufoo: Funktionen links, Pläne rechts, Häkchen an den Schnittpunkten. Unterschiede in Sekunden erkennbar.

Wenn Sie klare Zielgruppensegmente haben, wählen Sie den Ansatz von Dropbox oder BeanStalk: unterschiedliche Karten für unterschiedliche Zielgruppen, visuell getrennt, mit unterscheidbaren Bildern.

Wenn das Produkt komplex ist und eine Testphase braucht, nutzen Sie das Zendesk-Modell: kostenlose, voll funktionsfähige Testphase für alle Pläne. Lassen Sie sie die professionelle Version testen; das Downgrade auf Basis wird sich wie ein Verlust anfühlen.

Und die wichtigste Lehre aus dieser Sammlung: Preistabellen-Design dreht sich nicht um „hübsch". Es dreht sich darum, „sofort klar zu machen, welchen Plan man nehmen soll". Setzen Sie das um, und die Conversion wird für sich sprechen.