Checkout sin fricción: cómo diseñar el pago de una tienda online

Hay una escena que se repite en las tiendas online que revisamos en el estudio. Alguien ha elegido su producto, ha dudado con la talla, lo ha añadido a la cesta y ha pulsado «Finalizar compra». Y justo ahí, a dos minutos de terminar, se encuentra con un formulario de registro, un coste de envío que no esperaba y un campo de teléfono que no admite espacios. Cierra la pestaña. No porque no quisiera el producto, sino porque el último tramo se le ha hecho cuesta arriba.

Baymard Institute, que lleva más de una década estudiando el comercio electrónico, sitúa la tasa media de abandono de carrito en torno al 70 %. Una parte de ese abandono es natural (gente que compara, que guarda para luego), pero otra parte nace en el propio proceso de pago y se puede recuperar con diseño. Eso es lo que significa un checkout sin fricción: un recorrido en el que cada paso se entiende, cada campo tiene sentido y nada sorprende.

En esta guía repasamos el checkout de principio a fin, desde la cesta hasta la página de confirmación, con criterios que aplicamos en nuestros proyectos.

01Qué genera fricción en un checkout

Antes de diseñar, conviene tener claras las causas más habituales. Las investigaciones de Baymard sobre abandono coinciden año tras año en los motivos principales:

• →Costes que aparecen tarde: envío, impuestos o recargos que no se veían en la ficha ni en la cesta. Es, con diferencia, el motivo más citado.
• →Registro obligatorio: tener que crear una cuenta para comprar.
• →Procesos largos o complicados: demasiados campos, demasiados pasos o pasos que no se entienden.
• →Falta de confianza al introducir la tarjeta.
• →Plazos de entrega lentos o poco claros.
• →Errores en el formulario y validaciones que no explican qué está mal.
• →Pocos métodos de pago o la ausencia del que esa persona usa siempre.

Casi todos tienen una respuesta de diseño. El resto de la guía va de eso.

02La cesta: el primer paso del checkout

Muchas veces se piensa que el checkout empieza en el formulario, pero empieza en la cesta. Es el momento en que la persona revisa lo que va a comprar y, sobre todo, cuánto le va a costar en total.

Una cesta que prepara bien el pago incluye:

• →Miniatura, nombre, variante (talla, color) y precio de cada producto, con opción de cambiar cantidad o eliminar.
• →Subtotal, coste de envío estimado y total. Si el envío depende del código postal, un campo para calcularlo ya en la cesta.
• →Si hay envío gratuito a partir de un importe, cuánto falta para llegar, dicho de forma sencilla.
• →Plazo de entrega estimado.
• →Campo de código promocional discreto, como un enlace que se despliega («¿Tienes un código?»), para que quien no lo tenga no sienta que se pierde algo.
• →Botón principal de «Finalizar compra» y, cuando la tienda los ofrece, botones de pago exprés (Apple Pay, Google Pay, PayPal) que se saltan el formulario.

03Estructura del checkout: invitado, pasos y foco

Compra como invitado, cuenta después

Pedir registro antes de pagar es una de las fricciones más evitables. Lo que funciona es ofrecer tres caminos claros al empezar: continuar como invitado (destacado), iniciar sesión si ya se tiene cuenta y, cuando haya, pago exprés. La creación de cuenta se ofrece en la página de confirmación, con los datos ya rellenos y solo una contraseña por añadir.

Una página o varios pasos

Las dos opciones funcionan. Una sola página con secciones bien separadas es cómoda cuando el proceso es corto. Varios pasos (contacto y envío, método de envío, pago) ordenan mejor procesos con más decisiones. Si se usan pasos, conviene que sean tres o cuatro, que haya un indicador de progreso y que se pueda volver atrás sin perder lo escrito.

Un checkout que no distrae

Durante el pago, la cabecera de la tienda se simplifica: logo (que enlaza a la cesta, no a la home), indicador de pasos y, si acaso, un teléfono o enlace de ayuda. Sin menú, sin buscador, sin banners. Al lado del formulario, en escritorio, un resumen del pedido siempre visible con productos, gastos y total; en móvil, ese resumen se pliega en un desplegable arriba («Ver resumen · 64,80 €»).

04Formularios de checkout: menos campos y mejor ayudados

El formulario es el corazón del checkout y donde más se nota el cuidado. Baymard ha observado que muchas tiendas piden bastantes más campos de los necesarios. En nuestros proyectos, un checkout de envío a domicilio para un cliente particular se queda en torno a una docena de campos visibles, y con margen para menos.

Los campos que de verdad hacen falta

• →Correo electrónico (primero, porque permite recuperar la cesta si la persona se va).
• →Nombre y apellidos (un solo campo «Nombre completo» o dos, según lo que pida la logística).
• →Dirección, con una segunda línea opcional plegada («Piso, puerta, escalera»).
• →Código postal, ciudad y provincia. Con el código postal se pueden autocompletar ciudad y provincia.
• →Teléfono, solo si lo necesita la empresa de transporte, explicando para qué.
• →Casilla «La dirección de facturación es la misma», marcada por defecto, que despliega los campos de facturación (y el NIF si se necesita factura) solo si se desmarca.

Autocompletado: el atajo que ya está en el navegador

Los navegadores pueden rellenar casi todo el checkout en un toque si los campos están bien etiquetados con el atributo autocomplete. Es una de las mejoras con mejor relación entre esfuerzo e impacto:

<label for="email">Correo electrónico</label>
<input id="email" type="email" autocomplete="email" inputmode="email">
<label for="nombre">Nombre completo</label>
<input id="nombre" autocomplete="name">
<label for="direccion">Dirección</label>
<input id="direccion" autocomplete="address-line1">
<label for="cp">Código postal</label>
<input id="cp" autocomplete="postal-code" inputmode="numeric">
<label for="tel">Teléfono</label>
<input id="tel" type="tel" autocomplete="tel">
<label for="cc">Número de tarjeta</label>
<input id="cc" autocomplete="cc-number" inputmode="numeric">

El atributo inputmode hace que el móvil muestre el teclado adecuado (numérico para el código postal, con arroba para el correo). La especificación completa de valores está en la documentación de MDN sobre autocomplete.

Validación que ayuda

Los errores se muestran junto al campo, en cuanto la persona sale de él, con un texto que dice cómo arreglarlo («Al código postal le falta un número») y sin borrar lo ya escrito. Los formatos se aceptan con flexibilidad: un teléfono con espacios o una tarjeta con guiones son datos válidos que el sistema puede limpiar solo. En la guía de formularios web que convierten y en la de mensajes de error que ayudan entramos en detalle en ambas cosas.

05Métodos de pago y confianza

Elegir los métodos adecuados

Más métodos no significa más ventas; lo que importa es que esté el que tu cliente usa. En España, una combinación habitual y eficaz es:

El momento de la tarjeta

Al llegar al pago, unas pocas señales transmiten tranquilidad: los logotipos de los métodos aceptados, el campo de tarjeta integrado en la propia página (las pasarelas actuales lo permiten sin que los datos pasen por tu servidor), un icono de candado junto a una frase breve sobre pago seguro y un resumen del total justo encima del botón.

Muchas compras con tarjeta pasan por la autenticación reforzada que exige la directiva europea de servicios de pago (PSD2), normalmente a través de 3-D Secure: un código o una confirmación en la app del banco. La pasarela la gestiona, pero el diseño debe prever ese momento: avisar de que puede aparecer, mostrar un estado de espera claro y, si la persona vuelve sin completarlo, devolverla al paso de pago con todo intacto y un mensaje que explique qué ha pasado.

El botón final

El botón que cierra la compra debe dejar claro que implica pagar. La normativa europea de consumo (Directiva 2011/83/UE, recogida en la ley española de consumidores) pide que se rotule con una fórmula inequívoca del tipo «pedido con obligación de pago». En la práctica, textos como «Pagar 64,80 €» o «Confirmar pedido y pagar» cumplen y, de paso, son los más claros. Justo encima, el total final y la aceptación de condiciones con enlace a ellas.

06Después de pagar: la confirmación también es experiencia

La página de confirmación es el primer momento de la relación posterior a la compra, y muchas tiendas la desaprovechan. Una buena confirmación:

1. 01Da las gracias y confirma que el pedido se ha recibido, con su número.
2. 02Resume qué se ha comprado, a qué dirección va y cuánto se ha pagado.
3. 03Indica cuándo llegará y cómo se podrá seguir el envío.
4. 04Avisa de que se ha enviado un correo con todo y desde qué dirección, para que nadie lo busque en vano.
5. 05Ofrece crear cuenta con una sola contraseña.
6. 06Propone, con discreción, un siguiente paso: seguir a la marca, ver una guía de uso, conocer la colección.

El correo de confirmación replica esa información con el mismo tono de marca. Es uno de los correos que más se abren, y una oportunidad estupenda para que la tienda se sienta cercana.

07Cómo medir y mejorar el checkout

Un checkout se diseña bien y se afina con datos. Lo que nos funciona:

1. 01Medir cada paso con eventos en la analítica (en GA4: begin_checkout, add_shipping_info, add_payment_info, purchase) y construir un embudo para ver en qué paso se concentra la caída.
2. 02Registrar los errores de formulario: qué campos generan más errores suele señalar un problema de diseño o de formato.
3. 03Hacer la compra completa en un móvil real, con datos reales, al menos una vez al mes. Es sorprendente lo que aparece.
4. 04Revisar los pedidos fallidos en la pasarela de pago: rechazos, autenticaciones no completadas.
5. 05Leer las consultas a atención al cliente sobre el proceso de pago.
6. 06Cambiar una cosa cada vez y comparar con datos de varias semanas, para saber qué ha funcionado.

08Un final de compra a la altura del resto

Un checkout sin fricción no se nota. La persona llega, rellena lo justo, paga como paga siempre y recibe una confirmación que le deja tranquila. Es el remate de todo el trabajo anterior: de la marca, de la fotografía, de la ficha de producto. Cuando ese último tramo acompaña, el resto de la tienda rinde lo que merece.

En SIMA diseñamos y desarrollamos tiendas online con el checkout como prioridad, integrando pasarelas, métodos de pago y analítica dentro de nuestro servicio de desarrollo web y apps. Si sientes que tu tienda pierde compras en el último paso, escríbenos y lo revisamos contigo.