El túnel de pedido de PrestaShop fue diseñado para una pantalla ancha. En móvil, por donde pasa ahora la mayoría del tráfico, conserva elecciones de interfaz que cuestan pedidos en cada etapa.
Aquí está el análisis pantalla por pantalla, con lo que se corrige sin rediseño.
Pantalla 1: el carrito
Tres problemas recurrentes.
El botón de pedido bajo la lista. En un carrito de cinco artículos, se encuentra tras un largo desplazamiento. El comportamiento esperado es un botón fijo en la parte baja de la pantalla, mostrando el total, visible en permanencia.
Los selectores de cantidad minúsculos. Los botones de más y menos suelen medir menos de treinta píxeles. La recomendación de accesibilidad sitúa el objetivo táctil mínimo en torno a cuarenta y cuatro píxeles de lado. Por debajo, el cliente se equivoca de botón, lo que le obliga a corregir y le irrita.
La eliminación sin confirmación ni anulación. Un toque accidental en la papelera vacía una línea sin recurso. Una opción de anulación temporal evita la reconstrucción mental completa del carrito.
Pantalla 2: identificación
Es la pantalla que produce más abandonos en móvil, y bastan dos detalles técnicos.
El campo email no llama al teclado correcto. Un campo correctamente tipado hace aparecer un teclado con la arroba accesible. Sin eso, el cliente pasa por la tecla de cambio en cada entrada.
El relleno automático no funciona. Los navegadores saben rellenar email, nombre, dirección y tarjeta bancaria, a condición de que los campos lleven las indicaciones de autocompletado esperadas. Un formulario correctamente anotado se rellena en dos toques. Un formulario sin anotaciones impone una entrada completa.
Es probablemente la corrección más rentable de todo el túnel, y solo requiere añadir atributos a los campos existentes.
Tercer punto: la contraseña. Si impone la creación de cuenta, la ausencia de opción para mostrar la contraseña escrita produce errores repetidos en un teclado táctil.
Pantalla 3: la dirección
El formulario de dirección es el más largo del túnel y el peor adaptado.
Demasiados campos. Muchas configuraciones piden empresa, complemento de dirección, segundo complemento, teléfono fijo y móvil. En móvil, cada campo adicional es un obstáculo. Reduzca a lo estrictamente necesario y oculte los campos opcionales tras un enlace.
El código postal no llama al teclado numérico. Misma observación que para el email: el tipo de campo determina el teclado propuesto.
El orden de los campos no sigue la lógica local. En España se introduce el código postal antes de la ciudad, y el primero debería rellenar previamente la segunda. Esta autocompletación suprime un campo entero y reduce los errores.
Los errores se muestran tras la validación. Un formulario que señala cinco errores en bloque tras pulsar el botón obliga a subir por la página. La validación durante la escritura, campo por campo, es claramente menos frustrante.
Checkout Simple y Elegante para PrestaShopUn checkout elegante en una página que convierte€99,00
Pantalla 4: el envío
Dos problemas.
Las opciones de transporte en radios apretados. Tres transportistas presentados en líneas compactas con botones de radio pequeños producen selecciones erróneas. Cada opción debería ser una tarjeta completamente clicable.
El punto de recogida en un mapa no adaptado. Los módulos de punto de recogida muestran a menudo un mapa diseñado para escritorio, con marcadores minúsculos y un zoom caprichoso. En móvil, una lista ordenada por distancia, con el mapa como opción, funciona mejor.
Pantalla 5: el pago
Es la pantalla donde un problema cuesta más caro, puesto que todo el esfuerzo anterior se pierde.
El teclado numérico para la tarjeta. El número de tarjeta, la fecha de caducidad y el código de seguridad deben llamar a un teclado numérico. Sigue estando frecuentemente mal configurado, incluso en módulos de pago recientes.
El relleno automático de la tarjeta. Los navegadores y los gestores de contraseñas saben rellenar una tarjeta guardada, siempre que las indicaciones de autocompletado sean correctas. Sin ellas, el cliente debe sacar su tarjeta física, lo que interrumpe el recorrido y deja tiempo para renunciar.
La redirección a una página bancaria no adaptada. La autenticación reforzada abre a veces una página con la visualización rota en móvil. Pruebe este recorrido en condiciones reales, con una tarjeta real: es el punto del túnel menos probado y el más crítico.
La vuelta tras la autenticación. Si el cliente cambia a su aplicación bancaria para validar, sale del navegador. La vuelta debe restaurar la sesión y continuar el pedido, no volver a empezar desde el carrito.
Los problemas transversales
Cuatro elementos que afectan a todas las pantallas.
El zoom automático al enfocar. En algunos navegadores móviles, un campo cuyo tamaño de fuente es inferior a dieciséis píxeles desencadena un zoom automático al seleccionarlo, lo que desplaza toda la página. La corrección consiste en no bajar nunca de ese tamaño en los formularios.
El teclado que oculta el campo activo. En un formulario largo, el teclado virtual cubre a veces el campo que se está rellenando. El desplazamiento debe ajustarse a la apertura del teclado.
Los banners fijos acumulados. Cabecera fija, banner de cookies, banner promocional: en una pantalla de teléfono, a veces solo queda un tercio de la altura para el contenido. En el túnel, elimine todo lo que no sea necesario.
El tiempo de carga entre etapas. Cada recarga completa es una ocasión de abandono. Un túnel en una página, o con transiciones sin recarga, suprime estos puntos de ruptura.
El método de diagnóstico
Tres acciones, en este orden, antes de cualquier modificación.
Realice un pedido en su propio teléfono, en condiciones reales, con una tarjeta real y una red móvil en lugar de wifi. Eso revela en diez minutos lo esencial de los problemas.
Registre la tasa de finalización por etapa, por separado en móvil y en ordenador. La diferencia entre los dos localiza el problema: si el móvil se descuelga en la dirección, es inútil retocar el pago.
Mire grabaciones de sesiones móviles que no llegaron al final. Las dudas, las correcciones repetidas y los zooms manuales se ven de inmediato y señalan los campos problemáticos.
Por dónde empezar
Si solo puede hacer tres cosas, tome estas.
Los atributos de autocompletado en todos los campos del túnel. Coste bajo, efecto inmediato, y beneficia a todos los navegadores.
Los tipos de campo, para que cada entrada llame al teclado correcto. Misma lógica, misma relación esfuerzo resultado.
Las zonas táctiles ampliadas a cuarenta y cuatro píxeles como mínimo en todos los elementos interactivos del túnel.
Estas tres correcciones no requieren ningún rediseño y tratan la mayoría de las fricciones medibles.
El módulo Checkout Simple y Elegante para PrestaShop reconstruye este recorrido en PrestaShop 8 y 9: túnel en una página sin recarga entre etapas, formulario de dirección aligerado con relleno previo de la ciudad por el código postal, tipos de campo y atributos de autocompletado correctamente colocados, y zonas táctiles dimensionadas para el móvil.
