100%de 27 tiendas auditadas fallan esto
El formulario de pago admite el autocompletado de tarjeta del navegador móvil
iOS y Android pueden autocompletar una tarjeta guardada con un toque cuando los campos están etiquetados correctamente. Sin ello, el comprador teclea a mano 16 dígitos, la caducidad y el CVV, y muchos abandonan.
- ■Pon `autocomplete="cc-number"` en el campo del número de tarjeta, `cc-exp` en la caducidad, `cc-csc` en el CVV y `cc-name` en el nombre del titular.
- ■Nunca uses `autocomplete="off"` en los campos de pago.
- ■Si usas Stripe Elements o los campos de tarjeta propios de Shopify, esto ya está correcto. Si construiste el formulario tú mismo, añade los atributos.
Cómo lo comprobamos, y quién aprueba ›97%de 37 tiendas auditadas fallan esto
Un único campo de nombre completo (no nombre + apellidos)
Dos campos cuestan dos toques y dos focos de teclado en móvil. La investigación de Baymard muestra que un solo campo de Nombre completo mejora de forma medible la finalización del checkout, sobre todo en teléfonos.
- ■Sustituye los dos campos de nombre por uno solo de «Nombre completo».
- ■Configura autocomplete="name" para que los navegadores y los gestores de contraseñas lo autocompleten de una sola vez.
- ■Divide en Nombre/Apellidos solo si tienes un sistema posterior real que los exija por separado, y en ese caso divídelos en el servidor, no en la interfaz.
Cómo lo comprobamos, y quién aprueba ›97%de 36 tiendas auditadas fallan esto
Enviar a la misma dirección de facturación ofrecido por defecto
En la mayoría de los pedidos, la dirección de facturación y la de envío son la misma. Obligar al comprador a volver a introducir su dirección es trabajo duplicado y una fuente habitual de erratas.
- ■Añade una casilla encima de la dirección de facturación: «Dirección de facturación igual que la de envío».
- ■Marca la casilla por defecto. Muestra el formulario de dirección de facturación solo cuando el comprador la desmarque.
- ■Conserva los valores de la dirección de envío como texto de resumen de solo lectura para que el comprador pueda confirmarlos.
Cómo lo comprobamos, y quién aprueba ›95%de 37 tiendas auditadas fallan esto
Atributos de autocompletado bien definidos (given-name, family-name, cc-number, etc.)
WCAG 2.2 exige autocomplete en los campos de datos personales por accesibilidad. Más allá del cumplimiento, un autocomplete correcto convierte el checkout en una experiencia de 2 toques para los compradores que vuelven, algo enorme para la conversión en móvil.
- ■Añade el atributo `autocomplete` correcto a cada campo: `given-name`, `family-name`, `email`, `tel`, `street-address`, `address-line1`, `address-line2`, `postal-code`, `country`.
- ■Nunca configures `autocomplete="off"` en campos de datos personales. Algunos navegadores lo ignoran de todos modos; los que lo respetan rompen el autocompletado de tus compradores.
- ■Para los campos de pago, usa `cc-number`, `cc-exp`, `cc-csc`, `cc-name`. Ver el hallazgo sobre autocompletado de tarjeta en móvil más abajo.
Cómo lo comprobamos, y quién aprueba ›94%de 36 tiendas auditadas fallan esto
Expectativa de entrega mostrada antes de la compra final
El plazo de entrega es a menudo el factor que decide entre dos tiendas. Si tu competidor le dice al comprador «llega el martes» y tú no dices nada, pierdes. Sobre todo con los regalos.
- ■Muestra la fecha de entrega estimada en el resumen del pedido, antes del botón de pagar.
- ■En pedidos con elección de método de envío (estándar frente a exprés), muestra la fecha de cada opción para que el comprador pueda cambiar coste por velocidad.
- ■Repite la fecha en la pantalla de pedido confirmado y en el correo para dejar claras las expectativas.
Cómo lo comprobamos, y quién aprueba ›92%de 36 tiendas auditadas fallan esto
Autocompletado de dirección (Google / Loqate) presente
El autocompletado de dirección reduce aproximadamente a la mitad el tiempo de introducir la dirección en móvil y baja las tasas de entregas fallidas por erratas. Además transmite calidad, y los compradores lo notan.
- ■Añade Google Places Autocomplete (el plan gratuito es generoso) o Loqate/SmartyStreets si envías a otros países.
- ■En Shopify: activa Shop Pay, o la extensión de autocompletado del checkout en Shopify Plus.
- ■Cuando el autocompletado rellene la dirección, ofrece mostrar solo «Editar» en lugar del formulario completo. Es más limpio y confirma la dirección de un vistazo.
Cómo lo comprobamos, y quién aprueba ›