Las 115 reglas de UX de checkout para ecommerce con las que auditamos

Las reglas de UX de checkout para ecommerce son las condiciones concretas y comprobables que la página de producto, el carrito y el checkout de una tienda deben cumplir para no perder una venta: mostrar el coste de envío antes del pago, validar una dirección antes de confirmar el pedido o marcar el precio para que un rastreador lo lea correctamente. UXFix revisa las tiendas frente a 115 de estas reglas, repartidas en ocho secciones y puntuadas por separado para compradores humanos y para agentes de compras con IA.

Qué comprueba realmente un motor de reglas de UX de checkout

Un motor de reglas no es una impresión subjetiva. Es una lista fija de condiciones de aprobado/suspenso aplicadas igual a todas las tiendas, para que los resultados sean comparables entre auditorías y a lo largo del tiempo.

El motor de UXFix ejecuta cada una de las 115 reglas sobre una tienda en vivo, dos veces: una simulando el recorrido de un comprador humano por la página de producto, el carrito y el checkout, y otra simulando a un agente de compras con IA que lee esas mismas páginas. Las dos puntuaciones suelen divergir mucho. Una tienda puede superar el 90 % de las reglas orientadas a humanos y fallar aun así la mitad de las orientadas a agentes, normalmente porque el precio y la disponibilidad viven en elementos renderizados con JavaScript que un agente nunca ve.

Es el mismo razonamiento que aplica el Baymard Institute en su propia investigación sobre usabilidad del checkout, donde un conjunto fijo de directrices de usabilidad se prueba contra cientos de sitios reales en lugar de juzgarse caso por caso. Construimos nuestra lista para que fuera exhaustiva y no opinable: cada regla de abajo es algo que podemos observar y puntuar, no una cuestión de gustos.

Las 115 reglas, organizadas por sección

La lista se divide en ocho secciones. La página de producto y el flujo de checkout concentran más reglas porque ahí es donde ocurre la mayor parte del abandono, según la investigación continuada de Baymard sobre carritos abandonados.

Página de producto (22 reglas)

• El precio se muestra en la moneda que el visitante espera, no solo en la predeterminada de la tienda.
• El precio rebajado y el precio original son visibles cuando se aplica un descuento.
• El estado de stock se indica con palabras, no solo con un punto de color.
• La estimación de entrega se muestra antes de añadir al carrito, no después.
• Al menos una imagen muestra el producto en uso, con escala o contexto.
• La guía de tallas o ajuste se enlaza desde la página, no queda enterrada en unas FAQ aparte.
• Elegir una variante no reinicia la posición del scroll ni el estado de la página.
• Las reseñas son visibles cerca de la parte superior, no ocultas solo tras una pestaña.
• La valoración con estrellas aparece junto al precio, no solo al final de la página.
• Un resumen de la política de devoluciones es visible en la propia página.
• El coste de envío o el umbral de envío gratis se menciona en la página de producto.
• El título del producto coincide con los términos que los compradores buscan realmente.
• Existe marcado schema de producto para que el precio y la disponibilidad sean legibles por máquinas.
• El botón de añadir al carrito es la acción visualmente dominante.
• El selector de cantidad no viene por defecto por encima de 1.
• Los artículos sin stock muestran una fecha de reposición o una opción de aviso.
• El contenido de venta cruzada no empuja el producto principal fuera de la vista inicial.
• Tiempo de carga por debajo de unos 2,5 segundos en móvil, según los objetivos de Core Web Vitals.
• Hay migas de pan para usuarios y rastreadores.
• Los vídeos de producto tienen subtítulos o una alternativa en texto.
• Las señales de confianza están cerca del botón de compra, no solo en el pie de página.
• La fecha de entrega mostrada es coherente con la que después confirma el checkout.

Este último punto conecta directamente con un patrón que vemos constantemente: tiendas que dan una estimación de entrega en la página de producto y otra distinta en el checkout. Nuestras notas de auditoría lo desarrollan en por qué los compradores abandonan el checkout cuando no se muestran las fechas de entrega.

Carrito (18 reglas)

• El total del carrito se actualiza al instante al cambiar la cantidad, sin recargar manualmente.
• El coste de envío se muestra en el carrito, no se aplaza al primer paso del checkout.
• El campo de código de descuento no se deja vacío y destacado si no hay ningún código aplicable.
• Existe la opción de guardar para más tarde en lugar de obligar a eliminar.
• Se muestra una ventana estimada de entrega por línea de pedido.
• La cantidad se puede editar sin salir de la página del carrito.
• El carrito persiste entre sesiones para usuarios registrados y, cuando es posible, invitados.
• Las ofertas de upsell no tapan el botón de checkout.
• Los impuestos se muestran o se etiquetan claramente como "calculados en el checkout", con un motivo.
• Las líneas de pedido muestran detalles de la variante, no solo el nombre del producto.
• La acción de eliminar un artículo tiene un paso de deshacer o de confirmación.
• El icono de carrito de la cabecera se actualiza en tiempo real en todo el sitio.
• El umbral de envío gratis se muestra con un indicador de progreso, no solo con texto estático.
• La conversión de moneda se muestra en vivo si la tienda vende en el extranjero.
• El estado de carrito vacío sugiere una acción siguiente en lugar de ser un callejón sin salida.
• Las opciones de envoltorio de regalo o nota no obligan a salir del flujo del carrito.
• El resumen del carrito queda fijo al hacer scroll en carritos largos en móvil.
• No hay más de un CTA destacado compitiendo con "ir al checkout".

El campo de código de descuento merece mención aparte. Un campo que invita a introducir un código pero no tiene ninguno que ofrecer manda al comprador a buscar uno por toda la web, y muchos no vuelven. Lo profundizamos en por qué el campo de código de descuento hunde en silencio la conversión de tu carrito.

Envío y entrega (12 reglas)

• La estimación de fecha de entrega se muestra antes de empezar el checkout, no después del pago.
• Se ofrecen varias velocidades de envío con diferencias de precio claras.
• La hora límite para entrega en el día o al día siguiente se indica con claridad.
• El coste de envío internacional y el aviso de aduanas se muestran antes del checkout, si procede.
• Se indica el origen de la preparación del pedido para que las estimaciones de entrega sean creíbles.
• El coste de envío nunca aparece por primera vez en el pago.
• Los envíos divididos se explican por adelantado si los artículos salen por separado.
• La validación de dirección detecta errores antes de la confirmación, no después.
• Las limitaciones de apartados de correos o entregas rurales se comunican, no se descubren al fallar.
• La recogida en tienda se muestra con stock en tiempo real, si se ofrece.
• Se indica una garantía de entrega o SLA para los niveles de envío premium.
• El coste y el proceso de devolución se indican antes de la compra.

La sorpresa por el coste de envío es el fallo más común que registramos entre las 115 reglas. Si este trimestre no arreglas nada más, arregla esto. Hay un desglose completo en por qué los compradores abandonan el carrito por los costes de envío.

Flujo de checkout y formularios (20 reglas)

• El checkout como invitado está disponible y se ofrece antes de obligar a crear una cuenta.
• El progreso se muestra por pasos para que el comprador sepa cuánto le queda.
• El país se detecta automáticamente para aplicar el formato de dirección correcto.
• Validación de campos en línea, no solo errores tras enviar todo el formulario.
• Autocompletado de direcciones disponible para reducir errores de escritura.
• Solo se piden los campos necesarios, sin recoger datos superfluos.
• El botón atrás conserva los datos introducidos en lugar de reiniciar el formulario.
• Los mensajes de error son específicos ("número de tarjeta no válido"), no genéricos ("se ha producido un error").
• El resumen del pedido permanece visible en todos los pasos del checkout.
• Editar el carrito desde el checkout no reinicia todo el flujo.
• El campo de teléfono explica por qué se necesita.
• Campos compatibles con el autocompletado para nombre, dirección y tarjeta, según los estándares del navegador.
• Se prefiere un checkout con pasos mínimos frente a flujos multipágina innecesarios.
• La suscripción a la newsletter no está marcada por defecto.
• La casilla de términos no bloquea el envío con campos obligatorios poco claros.
• Se avisa del vencimiento de la sesión antes de perder los datos del carrito o del formulario.
• El checkout se puede recorrer solo con teclado, en línea con las pautas WCAG.
• La página de confirmación incluye un número de pedido y próximos pasos claros.
• El correo de confirmación se envía en pocos minutos, con todos los detalles del pedido.
• La URL del checkout usa HTTPS sin advertencias de contenido mixto.

Obligar a crear una cuenta en el momento equivocado es una categoría de abandono propia, distinta de la fricción general de formularios. Lo tratamos aparte en por qué los compradores abandonan el checkout al crear una cuenta.

Pago (15 reglas)

• Se ofrecen varios métodos de pago: tarjeta, monedero digital y pago aplazado cuando proceda.
• Los logos de las tarjetas aceptadas se muestran antes del paso de pago, no solo al llegar.
• Los errores de pago indican el motivo real, no solo "inténtalo de nuevo".
• Se ofrece el método de pago guardado a los usuarios registrados que regresan.
• La moneda en el pago coincide con la mostrada durante toda la navegación.
• No se añade ninguna comisión sorpresa al introducir la tarjeta.
• El paso de pago no obliga a volver a introducir datos de dirección ya facilitados.
• Hay un indicador de seguridad cerca del formulario de pago.
• El precio total en el pago coincide exactamente con el total del carrito.
• Reintentar tras un pago fallido no borra innecesariamente los datos de tarjeta introducidos.
• El pago dividido o el canje de tarjetas regalo se explican con claridad, si se ofrecen.
• Los pasos de verificación (3D Secure, etc.) se explican brevemente para evitar abandonos por confusión.
• Se ofrece Apple Pay o Google Pay donde sea técnicamente compatible.
• El plazo de reembolso se indica cerca de la confirmación del pago.
• Los campos de IVA o facturación, cuando proceda, no bloquean la finalización del checkout.

El pago es el paso con mayor coste de fallo por intento, porque quien llega hasta ahí ya ha superado todos los demás obstáculos. Más detalle en por qué los compradores abandonan el checkout en el pago.

Confianza y seguridad (10 reglas)

• Los sellos de confianza están cerca del CTA, no solo en el pie de página.
• Hay dirección física y datos de contacto disponibles, no solo un formulario de contacto.
• Se muestran reseñas o valoraciones independientes del propio sitio de la tienda.
• La política de privacidad se enlaza desde el propio flujo del checkout.
• Certificado HTTPS válido en todas las páginas del checkout.
• La política de devoluciones y reembolsos se enlaza directamente desde el carrito y el checkout.
• La atención al cliente es accesible durante el checkout, no solo antes de la compra.
• No hay contadores de cuenta atrás sin una fecha límite real y verificable.
• Los datos recogidos en el checkout coinciden con lo que declara la política de privacidad.
• Se muestra el registro mercantil o el número de empresa donde la confianza regulatoria lo requiera.

La ubicación de las señales de confianza es una decisión de diseño pequeña con un efecto desproporcionado. Lo hemos medido específicamente en por qué los compradores abandonan el checkout sin sellos de confianza ni señales de seguridad.

Móvil (10 reglas)

• Las áreas táctiles cumplen el tamaño mínimo recomendado, sin clics erróneos en botones diminutos.
• Los campos del checkout activan el teclado móvil correcto (numérico para la tarjeta, de email para el correo).
• Botones fijos de añadir al carrito y de checkout en páginas móviles largas.
• No se requiere desplazamiento horizontal en ningún paso.
• Tamaño de fuente legible sin hacer zoom con los dedos.
• Peso de la página móvil optimizado para alcanzar los umbrales de Core Web Vitals.
• El autocompletado y los gestores de contraseñas funcionan sin romper el diseño.
• Las ventanas modales no tapan su propio botón de cierre en móvil.
• Se tiene en cuenta el alcance del pulgar con una sola mano en los CTA principales.
• Se priorizan los monederos móviles frente a la introducción manual de la tarjeta.

Los fallos específicos de móvil suponen una parte desproporcionada del abandono que registramos, algo que cubrimos por completo en por qué los compradores abandonan el checkout en móvil.

Preparación para agentes con IA (8 reglas)

• El precio y la disponibilidad están marcados con datos estructurados de schema.org.
• Los detalles del producto son accesibles sin necesidad de renderizar JavaScript.
• El checkout no depende de un CAPTCHA que bloquee a agentes automatizados legítimos.
• El precio mostrado coincide exactamente con los datos estructurados, sin desviaciones.
• El robots.txt y las metaetiquetas no bloquean el rastreo legítimo de las páginas de producto.
• Las condiciones de envío y devolución existen como texto rastreable, no solo dentro de imágenes.
• Los pasos del checkout usan formularios HTML estándar, no componentes personalizados sin etiquetar.
• La confirmación del pedido devuelve un estado legible por máquinas para compras iniciadas por agentes.

¿Qué cambia cuando el comprador es un agente con IA?

A los agentes no los confunde un diseño recargado. Los bloquea la falta de datos estructurados, los precios que solo existen en JavaScript y los formularios sin etiquetas accesibles. Una página que un humano ve abarrotada pero usable puede resultar completamente ilegible para un agente, y una página con buena puntuación en usabilidad humana puede fallar las ocho reglas de preparación para agentes.

La guía de marcado de producto de Schema.org es la base en la que se apoyan la mayoría de los agentes para leer correctamente precio, disponibilidad e identificadores. Si tu precio solo se renderiza tras una llamada de JavaScript, un agente puede citar un número completamente equivocado, un modo de fallo que detallamos en por qué los agentes de compras con IA leen mal tus precios. Súmale un CAPTCHA en el checkout o un muro de acceso antes de mostrar los precios y el agente abandona la sesión sin más, algo que tratamos en por qué los agentes de compras con IA abandonan el checkout en tu tienda.

Esta es también la razón por la que ChatGPT, Gemini y herramientas similares a veces se saltan una tienda perfectamente buena al recomendar dónde comprar algo, un patrón explorado en por qué ChatGPT y Gemini no recomiendan tu tienda. Los fallos de rastreabilidad previos al checkout, tratados en por qué los agentes de compras con IA no encuentran tus páginas de producto, suelen explicar la diferencia antes incluso de que entren en juego las reglas de checkout para agentes.

Dónde pierden más puntos la mayoría de las tiendas

En las auditorías que hacemos, tres secciones concentran la mayoría de las reglas suspendidas: la comunicación del coste de envío en el carrito y la página de producto, la fricción de los formularios del checkout y los mensajes de error de pago genéricos. Ninguna requiere un rediseño. La mayoría de las soluciones son cambios de texto o mover un elemento existente antes en el flujo.

El patrón se repite con los plazos de entrega. La investigación de usabilidad del checkout de Baymard y nuestros propios datos de auditoría coinciden en lo mismo: cuantas menos sorpresas haya entre el carrito y la confirmación del pago, mayor será la tasa de finalización, sin más.

Cómo recorrer esta lista esta semana

No intentes arreglar las 115 reglas en un solo sprint. Trabaja sección por sección, empezando por las que están ligadas al dinero: envío y pago. Un orden realista:

1. Revisa tu página de producto, carrito y checkout actuales frente a las reglas de envío y entrega de arriba. Corrige cualquier punto en el que el coste o el plazo se comunique más tarde de lo necesario.
2. Comprueba manualmente los mensajes de error de pago provocando un rechazo en un entorno de pruebas. Reescribe todo lo que sea genérico.
3. Recorre tu checkout una vez solo con el teclado, según las pautas de accesibilidad WCAG, y anota dónde se rompe.
4. Comprueba si el precio de tu producto se renderiza en el HTML en bruto o solo después de ejecutar JavaScript, porque ese único detalle decide si los agentes con IA lo leen bien.
5. Deja para el final las secciones de confianza y móvil, ya que suelen tener el menor impacto individual pero se suman a todo lo demás.

Un conjunto fijo de reglas importa porque convierte el "nuestro checkout parece estar bien" en algo verificable. O muestras el coste de envío antes del checkout o no lo haces. O tienes marcado schema de producto o no lo tienes. Esa concreción es justamente el sentido de hacer una auditoría en lugar de guiarse por la intuición.

Preguntas frecuentes

¿Por qué 115 reglas exactamente y no una lista más corta?

Llegamos a 115 probando patrones de fallo reales a lo largo de cientos de auditorías, no eligiendo un número redondo. Algunas secciones, como la preparación para agentes con IA, son cortas a propósito porque hay menos modos de fallo distintos; otras, como el flujo de checkout y los formularios, son largas porque la fricción aparece de muchas formas pequeñas e independientes. El número es una consecuencia de lo que vemos fallar realmente, no un objetivo.

¿Necesito superar las 115 reglas para tener un buen checkout?

No. La mayoría de las tiendas sanas superan entre un 80 y un 90 por ciento de las reglas orientadas a humanos y aun así convierten bien, porque un puñado de reglas (el momento de mostrar el coste de envío, el checkout como invitado, la claridad de los errores de pago) pesa mucho más que el resto. La lista completa es una herramienta de diagnóstico, no un examen de aprobado o suspenso. Úsala para encontrar tus mayores carencias, no para perseguir una puntuación perfecta.

¿En qué se diferencia la puntuación humana de la de agentes con IA?

La puntuación humana simula a un comprador leyendo las páginas renderizadas tal como las muestra un navegador. La puntuación de agentes con IA simula cómo un agente automatizado interpreta esas mismas páginas, algo que depende mucho más de los datos estructurados, la semántica HTML y la rastreabilidad que del diseño visual. Una tienda puede sacar 95 para humanos y 60 para agentes si el precio o la disponibilidad dependen de un JavaScript que el agente nunca ejecuta.

¿Puedo usar esta lista sin hacer una auditoría formal?

Sí. Cada regla de arriba es algo que puedes comprobar manualmente con un navegador, un dispositivo móvil y aproximadamente una hora de tu tiempo. Una auditoría formal ahorra sobre todo tiempo, al ejecutar las 115 comprobaciones automáticamente y comparar tu tienda con datos de referencia, pero la lista en sí está pensada para poder usarse por sí sola.