Páginas de Precios
Reglas
- Máximo 3 niveles: Free/Starter, Pro, Enterprise — resalta el nivel recomendado con una insignia "Más Popular"
- Alternancia mensual/anual: muestra ambos precios, indica el ahorro anual ("Ahorra 20%") — valor predeterminado anual
- Visualización de precio: fuente grande para el precio, pequeña para el período ("/mes") — muestra el precio anual como equivalente mensual
- Tabla de comparación de funcionalidades: marcas de verificación para funcionalidades incluidas, guiones para las excluidas — agrupa funcionalidades por categoría
- CTA por nivel: "Empezar" (gratuito), "Iniciar prueba gratuita" (pro), "Contactar con ventas" (empresa) — un CTA por tarjeta
- Barreras de funcionalidades: define funcionalidades por plan en un objeto de configuración — verifica
user.plan contra la configuración de funcionalidades en tiempo de ejecución
- Facturación basada en uso: muestra un calculador/deslizador para niveles de uso — actualiza el precio dinámicamente mientras el usuario ajusta
- Prueba social: muestra el número de clientes o logotipos cerca de los precios — "Confiado por más de 5.000 equipos"
- Sección de preguntas frecuentes debajo de los precios — aborda objeciones comunes (cancelación, reembolsos, mejoras)
Patrón de Barrera de Funcionalidades
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];
}
Diseño de Tarjeta de Precio
[Insignia: "Más Popular"]
Nombre del Plan
$XX/mes (facturado anualmente)
$YY/mes (facturado mensualmente)
- Funcionalidad 1 ✓
- Funcionalidad 2 ✓
- Funcionalidad 3 ✗
[Botón CTA]
Evitar
- Más de 4 niveles — causa parálisis de decisión
- Ocultar precios detrás de "Contactar con ventas" para todos los niveles — los desarrolladores se van
- Sin descuento anual — los planes anuales reducen la rotación y mejoran el flujo de caja
- Comparación de funcionalidades sin agrupación clara — se vuelve ilegible con más de 10 funcionalidades