UX de páginas de precios: patrones que ayudan a decidir sin presionar

La página de precios es donde el interés se convierte en una decisión, así que es tentador llenarla de cuentas atrás, etiquetas de «solo quedan 2» y letra pequeña. Esos trucos pueden subir los clics una vez. Después te cuestan confianza, devoluciones y reseñas.

Las páginas de precios que diseño intentan lo contrario: que la decisión sea tan clara que no haga falta presionar. Aquí tienes tres patrones de proyectos recientes, ChromaAI, ArbX y Bandar’s Bounties, y los principios que hay detrás.

Cualquier visitante de una página de precios se hace en silencio las mismas preguntas:

• ¿Qué obtengo exactamente?
• ¿Qué plan es para alguien como yo?
• ¿Qué pasa cuando haga clic?
• ¿Puedo irme si no es para mí?
• ¿Merece la pena frente a lo que hago hoy?

Una buena página de precios responde a las cinco sin obligar a hacer scroll, pasar el ratón por encima o abrir un chat. Casi todos los patrones que siguen son, sencillamente, formas de responderlas más rápido.

En ChromaAI, una plataforma de contenido con IA para creadores, la sección de precios ofrece tres planes: uno gratuito, Creator y Professional. Cada tarjeta empieza con una línea sobre a quién va dirigida: «For those just getting started», «Built for consistent content» y «Serious tools for serious work». La gente elige un plan porque se reconoce en él, no porque descifre una lista de funciones.

Unos pocos detalles hacen gran parte del trabajo:

• Las mismas filas en el mismo orden en todas las tarjetas, para comparar créditos, duración de vídeo, edición y calidad línea a línea.
• Un botón más discreto para el plan gratuito y botones rellenos para los de pago, de modo que la jerarquía queda clara sin esconder la opción gratuita.
• Un titular que plantea el valor frente a la alternativa real, contratar a un editor de vídeo, y no frente a la competencia.
• Garantías bajo las tarjetas: prueba gratuita, cancelación en cualquier momento y sin tarjeta de crédito. Resuelve la última duda justo donde se toma la decisión.

Primed Proxies muestra una idea parecida. Junto a la tarjeta del plan hay una breve explicación, «What is a Server?», con cuatro ventajas clave, y debajo una línea para que los clientes grandes reserven una llamada con ventas. Explicar el producto al lado del precio elimina un motivo para salir de la página, y la línea de ventas da un camino a los grandes compradores sin recargar los planes.

ArbX es un SaaS de analítica de apuestas deportivas con un tema oscuro y elegante. Para su sección de precios diseñé un efecto de cuadrícula continua con una animación sutil y cambios de opacidad. Da a la página un aire futurista que encaja con el resto del producto, y el layout deja ver con claridad qué obtienes.

Si añades animación a una página de precios:

• Déjala en el fondo. Nunca animes los precios ni las listas de funciones que la gente intenta leer.
• Que sea lenta y continua, no un estallido que aparte la mirada de los planes.
• Respeta la reducción de movimiento. Si alguien ha desactivado las animaciones en los ajustes del sistema, muestra una versión estática.
• Que sea ligera. Una animación pesada que ralentiza la página deshace todo lo que aporta.

La mayoría de interruptores de precios cambian entre facturación mensual y anual. En Bandar’s Bounties, un grupo premium de Discord que ayuda a encontrar errores de precio y ofertas exclusivas online, el interruptor hace otra cosa. Cambia entre «The wrong choice» y «The right choice», bajo el titular «Decide your future today and transform your life».

La elección correcta muestra los dos pases, mensual y trimestral, con el descuento del trimestral subrayado con un trazo a mano. La elección equivocada muestra una única tarjeta llamada «Stay where you are», con todo lo que te pierdes: avisos lentos, ofertas que se agotan antes de que las veas y pedidos cancelados por llegar tarde.

El público tiene entre 16 y 35 años y busca ganar un dinero extra, así que un tono atrevido y desenfadado encaja. Y no resulta agresivo, por tres motivos:

• El visitante tiene el control. Es él quien decide pulsar el interruptor; no aparece nada que le corte el paso ni la salida.
• Va con humor. El tono es ligero, no busca hacer sentir culpable.
• Las desventajas son reales. Con los errores de precio, la velocidad es literalmente el producto, así que la comparación describe lo que el servicio resuelve de verdad.

Esa es la diferencia con el confirmshaming, el típico enlace «No, gracias, no me gusta ahorrar» de un pop-up. Uno invita a explorar una comparación; el otro te hace sentir culpable al salir. Para una herramienta B2B o un público más serio, usaría una tabla comparativa sencilla.

• Muestra el precio. «Contáctanos» solo tiene sentido para acuerdos de empresa realmente a medida.
• Destaca como mucho un plan, y llámalo «el más popular» solo si lo es.
• Deja claras las diferencias de facturación. Si el anual sale más barato, muestra el ahorro con claridad y di cuándo se cobra.
• Pon las garantías junto al botón: pruebas, cancelación, reembolsos y si hace falta tarjeta.
• Responde a las objeciones justo debajo de los planes con unas preguntas frecuentes breves.
• Acerca la prueba social a la decisión. Bandar’s Bounties coloca historias reales de miembros y artículos de prensa cerca de los planes.
• Nada de cuentas atrás falsas, extras marcados por defecto ni cargos que solo aparecen al pagar.

En el móvil, las tarjetas de los planes se apilan y la comparación se sale de la pantalla. Mantén cada tarjeta corta, deja las filas de funciones idénticas para que se pueda comparar haciendo scroll y haz que los nombres de los planes y los botones sean lo bastante grandes para pulsarlos. En tablas comparativas largas, un selector que muestre un plan cada vez suele funcionar mejor que una tabla con scroll horizontal.

Mide los clics por plan, hasta dónde hace scroll la gente y qué preguntas frecuentes se abren. Después pregunta a los nuevos clientes qué estuvo a punto de frenarles. Sus respuestas tienen que estar en la página. Si también vas a rediseñar el producto, mi checklist de rediseño de SaaS cubre el resto.