Pricing Page Layout

Ofrecer demasiados planes activa la sobrecarga cognitiva: la persona pospone o abandona la decisión en lugar de elegir. El estudio fundacional de Iyengar & Lepper (2000) mostró que reducir las opciones de 24 a 6 mermeladas elevó la tasa de compra del 3% al 30%. En pricing SaaS el número óptimo es 3 tiers, Básico / Pro / Enterprise, porque permite comparación lateral de un vistazo. Un cuarto tier (Free o Elite) solo se justifica si tiene un propósito diferenciado claro; si lo añades, preséntalo como banner separado antes de la tabla, no como columna del mismo peso visual. Más de 4 columnas obliga a scroll horizontal en desktop y rompe el escaneo.

Marcar un plan como "Más popular" aprovecha el efecto de anclaje y el efecto decoy: el usuario evalúa el resto de opciones en relación al plan destacado (Ariely, Predictably Irrational, con el ejemplo clásico de The Economist). El énfasis debe ser puramente visual, borde, fondo, badge, y honesto: el plan señalado debe ser genuinamente el más contratado o el de mejor relación valor/precio. Resaltar un plan con urgencia falsa ("¡Solo 2 plazas!"), contadores inventados o un badge "Premium" sin justificación es un dark pattern que erosiona la confianza. Acompaña el badge con un dato verificable ("Elegido por el 60% de los equipos") en lugar de presión artificial.

El toggle de ciclo de facturación es el elemento de mayor impacto en revenue per customer dentro de la pricing page. Para maximizar la adopción anual, el ahorro debe expresarse en términos concretos y monetarios ("Ahorra $147/año"), no solo en un porcentaje abstracto que el usuario tiene que calcular. El toggle necesita un estado default claro, el plan anual por defecto tiende a aumentar su adopción, y debe revelar la diferencia real entre lo que se cobra hoy y el precio mostrado: el precio por mes en grande, el total anual facturado en texto secundario. Cambiar de ciclo debe actualizar el precio en vivo para que la relación causa-efecto sea evidente.

Las tablas de pricing con filas de checkmarks crean la ilusión de claridad pero ocultan las diferencias que más importan. El usuario necesita saber qué obtiene en cada tier, no solo si lo obtiene: límites cuantitativos (seats, storage, API calls), restricciones de uso y nivel de soporte deben estar visibles en la tabla, no tras tooltips ni en letra pequeña. Nielsen Norman Group advierte que cuando las diferencias clave están implícitas o enterradas, los usuarios eligen la opción equivocada; los diseñadores sobreestiman cuán obvias son esas diferencias para alguien nuevo. Dos checkmarks idénticos a distinto precio son confusos: sustituye "✓ / ✓" por "10,000 req/mes" e "Ilimitado".

Presentar un precio y añadir cargos, setup fee, impuestos, addons obligatorios, solo al final del flujo es el dark pattern más dañino para la conversión y la confianza. El estudio de checkout de Baymard Institute (4,400+ sesiones) encontró que el 39% de los usuarios abandonó por cargos extra inesperados: es la causa número uno de abandono. Aunque el dato nace en e-commerce, el principio aplica idéntico al SaaS: el costo sorpresa al final de la activación genera el mismo rechazo cognitivo. La pricing page debe mostrar el precio real que se pagará, incluir o señalar impuestos de forma prominente y listar cualquier addon con su precio separado, no esconderlo hasta la pantalla de pago.

Los CTAs de pricing deben reflejar la etapa del usuario en el funnel y el nivel de compromiso que pide cada tier: el plan gratuito invita a "Empezar gratis", el plan pagado a "Iniciar prueba", y el tier enterprise a "Hablar con ventas". Usar el mismo texto en los tres ("Get started" en gris) no comunica la diferencia de compromiso ni si hace falta tarjeta de crédito. El principio de NN/g es que el texto del CTA debe coincidir con la acción que ocurrirá a continuación. Acompáñalo con jerarquía visual consistente: el plan recomendado lleva botón primario lleno, los demás botón outline o secundario, y un microcopy de tranquilidad ("Sin tarjeta") bajo el CTA del trial.

Ocultar por completo el precio del tier Enterprise fuerza al usuario a pasar por un formulario de ventas sin saber si el producto está dentro de su presupuesto, lo que genera frustración y pierde leads calificados. El buyer moderno, especialmente en Product-Led Growth, prefiere investigar solo antes de hablar con ventas. El patrón correcto incluye un precio ancla ("Desde $399/mes") o al menos un rango de uso ("Para equipos de 50+ personas"), tres o cuatro bullets de lo que añade frente a Pro, y una expectativa concreta bajo el CTA ("Demo personalizada en 48h"). El ancla cumple además una función psicológica: hace que el plan Pro parezca razonable por comparación.

Las tablas de pricing con múltiples columnas son uno de los patrones más problemáticos para accesibilidad y pantallas pequeñas. En móvil, la solución estándar es colapsar a una vista de tarjeta por plan con selector tab o accordion, en lugar de scroll horizontal infinito. Para tecnología asistiva, WCAG 1.3.1 (Info and Relationships) exige markup semántico: <table> con <th scope="col"> para los headers de plan y <th scope="row"> para cada feature, más un caption o aria-label que describa el propósito. Sin <th> correctos, un screen reader lee filas de números y checkmarks sin contexto. Los checkmarks como emoji ✅ sin texto alternativo se anuncian como "checkmark, checkmark" sin decir qué feature ni qué plan; añade .visually-hidden con "Incluido / No incluido".