Buenas prácticas en el diseño de tablas de precios

Diseño UX
31/8/2021
|
Torresburriel Estudio
Buenas prácticas en el diseño de tablas de precios

Seguir las buenas prácticas en el diseño de tablas de precios es clave para conseguir uno de los objetivos habituales cuando hablamos de un negocio online que vende productos o servicios online: aumentar las conversiones

Así como si queremos comparar características de un producto o servicio utilizamos tablas comparativas, para comparar los precios tendremos que diseñar tablas de precios. Estas son las 10 mejores prácticas en el diseño de tablas de precios: 

  1. Utilizar una tabla de precios cuando exista más de una versión del mismo producto o servicio
  2. Seleccionar las características más relevantes para la comparación
  3. Destacar el precio
  4. Relacionar correctamente los precios con las características de cada versión
  5. Hacer que la tabla sea fácil de escanear
  6. Mostrar el precio por mes y la facturación anual
  7. Ser honesto y evitar los dark patterns
  8. Asegurar que la cabecera es visible durante el desplazamiento
  9. Mostrar un botón que permita seleccionar el producto o servicio
  10.  Añadir un apartado de preguntas frecuentes

¿Cuándo utilizar las tablas de precios?

Deberemos añadir una tabla de precios cuando tengamos más de una versión o plan del producto, y el usuario solo pueda comprar una versión. 

Seleccionar las características adecuadas para la comparación

Para que la tabla de precios sea relevante tenemos que asegurarnos de elegir las funciones adecuadas para comparar. Pero por otra parte, tenemos que tener cuidado de la cantidad de información que ofrecemos, ya que si es demasiada, los usuarios se pueden agobiar y abandonar el proceso de compra.

Destacar el precio

Cuando los usuarios ven una tabla de precios, lo más importante para ellos es precisamente eso, el precio. Utilizando el color y el peso de la fuente, tenemos que darle el peso visual adecuado a su importancia, para que sea fácil de reconocer.

Relacionar los precios de los planes y sus características

La clave de la tabla de precios es que los usuarios entiendan cómo cambian las características del producto o servicio a medida que cambia el precio.

La forma habitual de presentar los planes es con el precio ascendente, es decir, primero el plan gratuito o menos costoso, y después los más caros o profesionales. De esta forma se asume de forma intuitiva que hay una progresión desde los planes más básicos (a la izquierda) hasta los planes más completos (a la derecha).

Además, lo habitual es que los planes «estándar» (y aquellos que son más populares) se encuentren en el centro de la comparativa de precios.

Facilitar el escaneo de la tabla

La información de la tabla tiene que ser fácil de interpretar de un vistazo. Debemos centrarnos en comunicar las diferencias en vez de las similitudes, evitando el ruido visual. 

Uno de los patrones de escaneo más habituales al escanear una tabla de comparación de precios es el patrón de la cortadora de césped. Esto significa que una forma de leer la información es comenzando en la celda superior izquierda, moviéndose hacia la derecha hasta el final de la fila, luego descendiendo hasta la última celda de la fila siguiente y se moviéndose hacia la izquierda hasta el final de la fila.

Mostrar el precio por mensual y anual

Muchos de estos productos en los que se pueden seleccionar diferentes planes son SaaS (Software as a Service), y se pueden adquirir pagando de forma mensual o anual con algo de descuento. Es interesante añadir la diferencia de precio entre pagar de forma mensual o anual para que los usuarios lo puedan comparar fácilmente. 

Ser honestos

Tenemos que evitar a toda costa los dark patterns que tratan de atraer la atención de los usuarios sobre un plan concreto. Algunas de las malas prácticas que nos podemos encontrar son ocultar el plan gratuito o añadir un plan con un precio muy alto como señuelo.

Mantener la cabecera durante el desplazamiento

Si los encabezados no son visibles, las personas usuarias tendrán que desplazarse en la página hacia arriba y hacia abajo (o hacia los laterales) repetidamente, y eso les puede llevar a perder el foco sobre lo que están comparando, porque la carga cognitiva aumenta considerablemente y puede resultar muy frustrante.

Si la tabla de comparación es larga, tenemos que asegurarnos de mantener la cabecera con las etiquetas durante el desplazamiento para que los usuarios no tengan que memorizar qué plan representa cada columna.

Añadir un botón para seleccionar un plan

Otra recomendación es añadir un botón que permita seleccionar un plan en concreto que resalte la opción, lo que facilitará al usuario saber qué plan ha elegido y cuáles son las diferencias con el resto.

Crear un apartado de preguntas frecuentes

Por último, también es interesante añadir un apartado de preguntas frecuentes para facilitar el proceso de decisión. Se pueden añadir preguntas como cuáles son las limitaciones de cada plan, cómo se puede pasar de un plan a otro o cómo funciona el periodo de prueba.

Siguiendo estas buenas prácticas de diseño de tablas de precios conseguiremos que los usuarios entiendan las diferencias entre cada uno de los planes, facilitando que tomen la decisión más adecuada.

Artículo actualizado en julio de 2022.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.