Preisseiten
Regeln
- Maximal 3 Stufen: Free/Starter, Pro, Enterprise – hebe die empfohlene Stufe mit einem „Most Popular“-Abzeichen hervor
- Monatlicher/jährlicher Umschalter: zeige beide Preise an, stelle die jährlichen Ersparnisse dar („Save 20%“) – standardmäßig auf jährliche Ansicht
- Preisanzeige: große Schrift für den Preis, kleine Schrift für den Zeitraum („/mo“) – zeige den jährlichen Preis als monatliches Äquivalent an
- Feature-Vergleichstabelle: Häkchen für enthaltene Features, Striche für nicht enthaltene – gruppiere Features nach Kategorien
- Call-to-Action pro Stufe: „Get Started“ (Free), „Start Free Trial“ (Pro), „Contact Sales“ (Enterprise) – ein CTA pro Karte
- Feature-Gates: definiere Features pro Plan in einem Konfigurationsobjekt – überprüfe zur Laufzeit
user.plan gegen die Feature-Konfiguration
- Nutzungsbasierte Preisgestaltung: zeige einen Rechner/Schieberegler für Nutzungsstufen – aktualisiere den Preis dynamisch bei Benutzereingabe
- Social Proof: zeige Kundenzahlen oder Logos in der Nähe der Preise – „Trusted by 5,000+ teams“
- FAQ-Bereich unterhalb der Preise – adressiere häufige Einwände (Kündigung, Rückerstattung, Upgrades)
Feature-Gate-Muster
const PLAN_FEATURES = {
free: { maxProjects: 3, analytics: false, api: false },
pro: { maxProjects: 50, analytics: true, api: true },
enterprise: { maxProjects: Infinity, analytics: true, api: true },
} as const;
function hasFeature(plan: string, feature: string): boolean {
return !!PLAN_FEATURES[plan]?.[feature];
}
Preiskarten-Layout
[Abzeichen: „Most Popular“]
Name des Plans
$XX/mo (jährlich abgerechnet)
$YY/mo (monatlich abgerechnet)
- Feature 1 ✓
- Feature 2 ✓
- Feature 3 ✗
[CTA-Button]
Vermeide
- Mehr als 4 Stufen – führt zu Entscheidungslähmung
- Preise hinter „Contact Sales“ für alle Stufen zu verstecken – Entwickler verlassen die Seite
- Keinen jährlichen Rabatt – jährliche Pläne reduzieren Kundenabwanderung und verbessern den Cashflow
- Feature-Vergleich ohne klare Gruppierung – wird bei 10+ Features unlesbar