Abre el checkout en vivo en un móvil. Cuenta cada campo que no hace falta para enviar o cobrar. Si los pedidos de pago mueren después del carrito, esa cuenta suele ser la razón – cuanto más confuso es el formulario de checkout, menos compradores terminan.
Parte 5 de Conversión, página a página – plan completo
La última entrega fue la página del carrito confirmando la bolsa. Esta página cobra. Dirección, método de envío, pago. Un formulario que también pregunta cómo te conocieron, quiere un segundo teléfono «para las tardes» y esconde Invitado bajo Crear cuenta no es riguroso. Es cómo convences a alguien de que no complete un pedido que el carrito ya ganó.
Qué tiene que hacer un formulario de checkout
Un solo trabajo: cobrar y obtener una dirección de envío. Quién recibe el paquete. A dónde va. Cómo se envía. Cómo pagan. Y un botón Pagar que se vea de verdad.
El carrito ya mostró las líneas y el total. Este formulario de checkout no tiene que volver a vender el producto, recoger una encuesta de marketing ni forzar una contraseña antes de la tarjeta. Si un campo no es obligatorio para enviar el pedido o cobrar la tarjeta, no pertenece a esta pantalla.
Qué hace confuso un formulario de checkout
El más largo que hemos desenredado este año era una tienda de ropa con un tema por defecto – nada personalizado, nada raro. Crear cuenta antes de la tarjeta. Email, y otra vez email. Contraseña, y confirmar contraseña. Empresa. IVA. Fax, todavía ahí desde 2012. Dos campos de teléfono, uno etiquetado «tardes.» Un desplegable: cómo nos conociste. Newsletter marcada por defecto. Una barra de progreso que decía Paso 3 de 5 y no daba pista de qué eran el 4 y el 5. El total aparecía como una línea minúscula bajo un widget de cupón. Pagar estaba bajo el pliegue, llamado «Continuar,» así que nadie sabía que el clic les cobraba.
Nada de eso es exótico. La mayoría de checkouts confusos son extras normales apilados uno a uno – cada uno defendible, el montón fatal.
El formulario de invitado más limpio que hemos lanzado pide una dirección de envío, un método legible, pago, un Pagar. Invitado es lo predeterminado. Cuenta es una oferta después del cobro, si quieren historial de pedidos. Mismo trabajo que el formulario largo. Uno de ellos cobra.
Campos que pueden esperar hasta después del pago
El artículo de Nick Babich en Smashing Magazine sobre formularios móviles lo resume en una línea: cada campo es esfuerzo, y más corto es mejor. Preguntas extra en el registro o al pagar es cómo pierdes a alguien que ya tenías. Haz seguimiento después si necesitas la historia. No retengas la tarjeta como rehén por ello.
Quita o mueve fuera de esta pantalla:
- Cómo nos conociste
- Alta en newsletter (pregunta después de Pagar, sin marcar)
- Empresa e IVA salvo que el comprador haya elegido checkout de empresa
- Fax
- Un segundo teléfono
- Contraseña de cuenta, si el invitado puede pagar
- Fecha de nacimiento, «color favorito,» cualquier cosa que alimente un CRM y no una etiqueta de envío
Lo obligatorio para una factura legal o un formulario aduanero no es un extra opcional. Consérvalo. La prueba sigue siendo la misma: ¿este campo envía el paquete o cobra la tarjeta? Si la respuesta es no, puede esperar.
Checkout de invitado vs muro de cuenta
Forzar un login para pagar son dos formularios haciendo el trabajo de uno. Ya escribieron un email en el carrito, o están a punto de escribir uno para el recibo. Pedir una contraseña antes de la tarjeta es un mostrador de socios entre el «sí» y el dinero.
Invitado primero. Muestra Crear cuenta después del cobro, cuando el pedido existe y un historial merece la pena. Si ya tienen cuenta, iniciar sesión es un atajo – no la única puerta. Enterrar Invitado como un enlace minúsculo bajo una caja de login alta es el mismo muro con peores modales.
Cuando el formulario borra lo que ya escribieron
Un pago fallido que borra el formulario basta para perder el pedido. El comprador rellena la dirección, escribe la tarjeta, pulsa Pagar. Algo falla – CVV, una casilla obligatoria, un código postal que la transportista no acepta. La página se recarga. El número de tarjeta desaparece. A veces la dirección también. La mayoría no empieza de nuevo. Se van.
Conserva lo que escribieron. Marca el único campo que falló. No borres la tarjeta porque una casilla de newsletter estaba vacía. PCI no exige castigar a la gente; exige no almacenar el PAN. Una recarga que borra el formulario es un fallo de la tienda, no una función de seguridad.
El mismo formulario en un móvil
Ya peleaste con el volcado de escritorio en la página de producto móvil. El checkout es donde esa pelea se pierde más fácil: cada campo extra es un teclado a ancho completo y un campo con zoom, y cinco «pasos» que en un monitor de 27 pulgadas parecían ordenados son cinco visitas separadas en un autobús.
Campos a ancho completo. Etiquetas encima de la caja, no al lado. Teclado numérico para la tarjeta. Una columna. Pagar visible sin una búsqueda del tesoro. Si necesitas una segunda pantalla, que sea «datos de la tarjeta» – no «cuéntanos cómo nos encontraste.»
Abre el formulario en vivo esta noche y cuenta otra vez. Corta lo que no envía ni cobra. El carrito ya ganó este pedido una vez – el único trabajo que queda es no perderlo en el formulario. Luego intenta pagar en un móvil con un pulgar. Si tú te quedas atascado, ellos se quedan atascados.
Trabájalo con tu agente de IA
No le pidas a un agente que «mejore la UX del checkout.» Pásale el formulario real y haz que separe lo de enviar-o-cobrar de lo que puede esperar.
Qué pegar: el HTML del checkout, o dos capturas (escritorio + móvil). Si tu primera pantalla es invitado vs cuenta, pega eso también – más el estado de error, la pantalla que ve un comprador tras un cobro fallido.
Prompt 1 – inventario de campos. «Lista cada campo y paso de este checkout. Etiqueta cada uno: necesario para enviar o cobrar, o puede esperar hasta después del pago. Propón una lista de recortes. No añadas funciones. No inventes Express Pay como la solución.»
Prompt 2 – ruta de invitado. «Aquí está la primera pantalla del checkout. Reescríbela para que un invitado pueda pagar sin crear contraseña. Cuenta pasa a ser una oferta después del cobro.»
Prompt 3 – prueba del borrado. «Aquí está el estado de error tras un pago fallido. Lista todo lo que el formulario borró. Reescribe el flujo para que un cobro fallido conserve cada campo que el comprador ya había escrito.»
Buena salida: un inventario de campos, un orden más corto de bloques y un estado de error que conserve lo escrito – algo que puedas entregar a un tema. No «mejora el flujo.»
Esta es la parte 5 de Conversión, página a página.
Anterior: La página del carrito confirma el pedido – no lo vuelve a vender · Siguiente: Agradecimiento / post-compra – aún en redacción. Suscríbete en el hub de la serie para no perdértelo.