Pages de Tarification
Règles
- 3 paliers maximum : Free/Starter, Pro, Enterprise — mettez en avant le palier recommandé avec un badge "Le plus populaire"
- Bascule mensuel/annuel : affichez les deux prix, indiquez les économies annuelles ("Économisez 20 %") — par défaut sur l'option annuelle
- Affichage des prix : police large pour le prix, petite pour la période ("/mois") — affichez le prix annuel en équivalent mensuel
- Tableau de comparaison des fonctionnalités : coches pour les fonctionnalités incluses, tirets pour les exclues — regroupez les fonctionnalités par catégorie
- Appel à l'action (CTA) par palier : "Commencer" (free), "Essai gratuit" (pro), "Contacter les ventes" (enterprise) — un CTA par fiche
- Barrières de fonctionnalités : définissez les fonctionnalités par plan dans un objet de configuration — vérifiez
user.plan par rapport à la configuration des fonctionnalités à l'exécution
- Facturation à l'usage : affichez un calculateur/curseur pour les paliers d'utilisation — mettez à jour le prix dynamiquement lorsque l'utilisateur ajuste
- Preuve sociale : affichez le nombre de clients ou des logos près de la tarification — "Approuvé par plus de 5 000 équipes"
- Section FAQ en dessous de la tarification — répondez aux objections courantes (annulation, remboursements, mises à niveau)
Modèle de Barrière de Fonctionnalités
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];
}
Disposition de la Fiche de Tarification
[Badge : "Le plus populaire"]
Nom du Plan
XX €/mois (facturé annuellement)
YY €/mois (facturé mensuellement)
- Fonctionnalité 1 ✓
- Fonctionnalité 2 ✓
- Fonctionnalité 3 ✗
[Bouton CTA]
À Éviter
- Plus de 4 paliers — provoque une paralysie décisionnelle
- Cacher la tarification derrière "Contacter les ventes" pour tous les paliers — les développeurs s'en vont
- Absence de réduction annuelle — les plans annuels réduisent le taux d'attrition et améliorent le flux de trésorerie
- Comparaison des fonctionnalités sans regroupement clair — devient illisible avec plus de 10 fonctionnalités