Crédito: fuente
El diseño de una página de checkout es un tema central para asegurar las ventas de un ecommerce: prácticas de CRO, una buena experiencia del usuario y un formulario infalible son algunos de los ingredientes principales para unas buenas conversiones. Hoy, revisamos a 5 grandes ecommerces de distintos sectores para analizar cuáles son sus técnicas.
1. Ikea
Para comprar en la tienda en línea de Ikea, los usuarios deben crear una cuenta. Los consumidores pueden optar por crear una cuenta sencilla o una cuenta IKEA Family, que da acceso a una experiencia de compras más privada con ofertas especiales. Para diferenciar estas opciones, el flujo de registro presenta un formulario dinámico con dos caminos distintos.
El flujo de registro de Ikea
Cuando creas una cuenta en Ikea, primero se te pregunta qué tipo de cuenta te gustaría crear. Dependiendo de la respuesta, se presentan dos formularios distintos: uno más largo y preciso para acceder al programa IKEA Family y otro más conciso para sencillamente crear una cuenta.
Tras crear su cuenta, los usuarios son redirigidos a una página de bienvenida. Allí, pueden empezar a comprar, revisar sus datos personales o completar su perfil con preguntas adicionales sobre su hogar y sus preferencias. Esta técnica de perfilado progresivo (o progressive profiling, como se le conoce en inglés) permite enriquecer la base de datos de los usuarios sin perjudicar a las conversiones.
Mientras que el formulario inicial era lo suficientemente corto para mantener altas las tasas de conversión, este formulario se usa para complementar la información previa y proporcionar una mejor experiencia.
En eCommerce, un checkout en 4 pasos convierte más que en solo uno (Flat101)
El formulario de compra de Ikea
Mientras que el formulario de registro de Ikea era simple y conciso, el checkout se percibe como algo más complejo. Los usuarios son redirigidos a un subdominio, haciendo que sea más complicado que los compradores modifiquen los detalles de su carrito de la compra.
El flujo de checkout de Ikea es un formulario de tres pasos:
- Carrito de la compra
- Pago e información de recogida
- Revisar y pagar
El primer paso presenta todos los ítems añadidos al carrito. Los usuarios pueden modificar la cantidad de objetos o eliminar productos.
En segundo lugar, los usuarios continúan rellenando la información de recogida, donde pueden elegir la fecha y la franja horaria en la que les gustaría recibir su producto. Este es el paso más largo: consiste en una larga explicación sobre las instrucciones de recogida y las horas de la tienda, además de 13 campos con detalles de la facturación.
Por último, los usuarios pueden revisar su pedido y proceder al pago. Lamentablemente, parece que se produce un problema con el precio subtotal.
Lo más destacado del checkout de Ikea
✅ Progressive profiling. Tener un formulario de registro conciso no tiene por qué ser contraproducente. Puedes compensar esta falta de datos con una técnica de perfilado progresivo. El formulario adicional de Ikea complementa a la perfección esta información con datos útiles sobre el hogar de sus consumidores. ¡Brillante!
✅ Formularios dinámicos. Dependiendo de las preferencias del usuario (o del tiempo que tenga), los clientes pueden rellenar un formulario más corto o uno más largo. ¡Estamos convencidos de que es una forma estupenda de mejorar las conversiones!
❌ Formulario de varios pasos. Nos encanta que los procesos de checkout se dividan en varios pasos. Pero en este caso, está lleno de información sobre la recogida que aleja demasiado al formulario.
❌ UX. Aunque nos encanta el formulario de registro de Ikea, el proceso de pago es algo más tedioso. El sistema de subdominio hace que sea difícil modificar elementos. Además, los clientes son redirigidos a un subdominio adicional para comprobar que sus ítems están en stock, lo cual alarga y dificulta el proceso todavía más.
2. Zara
Zara permite a sus clientes escoger entre comprar como invitado o crear una cuenta. Los dos sistemas tienen sus pros y sus contras, pero ofrecer las dos opciones probablemente se traduzca en unos números estupendos.
Cuando escoges comprar como invitado, tienes que cumplimentar un formulario con información básica de envío y detalles de pago. El formulario tiene tres pasos: ‘Envío’, ‘Pago’ y’ Resumen’.
Cuando llenas el formulario más largo (el de la dirección de envío), la función de autocompletado de Google ayuda al usuario a dar los detalles. Además, esta es una forma de comprobar la veracidad de la dirección.
El siguiente paso consiste en escoger los métodos de envío. Este es un campo con opciones que incluye diferentes métodos de envío además de fechas para cada uno de ellos. En el siguiente paso, el de pago, los clientes pueden seleccionar primero el método, para después proceder a dar más detalles o ser redirigidos a la plataforma de pago.
Finalmente, podremos revisar nuestra compra y entonces autorizar el pago. Lamentablemente, parece que la tarjeta de crédito no se verifica en esta fase. Dado que la validación se ejecutará después de clicar en ‘Authorise Payment’, los usuarios tendrán que introducir los detalles de pago de nuevo.
Lo más destacado del checkout de Zara
✅ Formulario de varios pasos. 3 pasos con el número ideal de campos en cada uno de ellos: esa es nuestra idea de un buen formulario multi-step. El camino hacia el final del checkout es claro y lo suficientemente conciso. ¡Genial!
✅ Función de autocompletado. Cuanto más fácil sea el formulario, mejor serán las tasas de conversión. Una función simple como la de autocompletado ahorra un precioso tiempo y esfuerzo, y anima a los clientes a continuar al siguiente paso.
✅ Comprar como invitado o crear una cuenta. Nos gusta la idea de que los usuarios puedan escoger entre estas dos opciones, especialmente en este sector.
❌ Verificación de la tarjeta de crédito. Aunque todo el proceso es fluido, echamos de menos algún tipo de validación al introducir un número falso de tarjeta de crédito.
3. Disney Shop
El checkout de Disney Shop es un formulario con un solo paso, disfrazado de formulario de múltiples pasos: aunque el formulario está marcado con diferentes números de pasos, los usuarios tienen que hacer scroll continuamente para llenar todo el formulario, de forma que las fases no están realmente separadas las unas de las otras.
Una de las primeras cosas que notamos cuando accedemos al carrito de la compra es que más de la mitad de la pantalla está copada con ofertas especiales. Desconocemos cuáles son los resultados de estos anuncios, pero sospechamos que dificulta a los compradores el ver su carrito y que continúen al checkout.
Cuando procedemos a los detalles de pago, los usuarios tienen que introducir detalles básicos de ubicación, con un número justo de campos fáciles de rellenar.
Después, la dirección introducida tiene que ser confirmada para que encaje con el sistema de USPS, lo cual añade un paso adicional al cliente. Las direcciones pueden ser introducidas con una función de autocompletado, pero tienen que ser verificadas después.
Al final del formulario de checkout, los usuarios tienen que introducir su email. Lamentablemente, este campo está rellenado por defecto por el valor ‘null’.
Si este valor no se corrige, se produce un error. El proceso de validación se produce después de enviar el formulario, y los clientes tienen que corregirlo y pasar de nuevo el recaptcha.
Lo más destacado del checkout de Disney
✅ UX. La tienda Disney tiene una buena UX con prácticas geniales para la conversión: el resumen del carrito está presente a lo largo de toda la compra, el branding de Disney refuerza la experiencia y el número y organización de los campos es correcto.
❌ Verificación de la tarjeta de crédito. La verificación de la tarjeta de crédito se ejecuta solo después de haber enviado el formulario. Aun así, no se presenta un mensaje de error, lo cual dificulta que el usuario lo pueda corregir. Además, los clientes tienen que pasar el recaptcha de nuevo cuando se producen errores.
❌ Formulario de un paso muy largo. Un formulario de checkout tan largo debería estar organizado en varios pasos, para que cada paso pueda aportar esa sensación satisfactoria de término.
❌ Bug. Aunque el bug del valor de null sea solo un pequeño error, conduce a que el cliente envíe el formulario sin percatarse de que hay un error.
4. Rituals
El proceso de checkout de Rituals es un formulario de 4 pasos: ‘Compra’, ‘Envío’, ‘Revisar’ y ‘Pagar’.
De nuevo, las compras en Rituals pueden hacerse como invitado o como cliente con cuenta. Vamos a ver el camino de compra como invitado. Primero, los usuarios pueden escoger cuándo quieren recibir su compra.
En el paso de ‘Envío’, algunos detalles de ubicación se pueden introducir con la función de autocompletado, que facilita el proceso y además verifica la dirección, como ya hemos visto en un ejemplo anterior.
Los clientes pueden revisar su compra justo antes de proceder al pago.
Después de escoger el método de pago, los clientes pueden introducir los detalles de su tarjeta o dirigirse a la plataforma de pago que hayan escogido.
Lo más destacado del checkout de Rituals
✅ UX. ¿Qué podría no gustarnos de este formulario? Cuatro pasos sencillos y cortos, el número ideal de campos, el resumen de la compra y CTA visibles vayas donde vayas.
✅Formulario de varios pasos. Todo lo que necesitas para completar la compra es completar 4 pasos, bien definidos y organizados. Es el número ideal de pasos y campos para que el checkout se perciba como corto y fácil de terminar.
✅Función de autocompletado. De nuevo nos encontramos con la función de autocompletado, que alivia al usuario y además sirve como sistema de verificación.
✅ Comprar como invitado o crear una cuenta. Este es otro estupendo ejemplo de poder escoger entre comprar como cliente o como invitado.
5. Privalia
Formulario de registro de Privalia
Privalia es un tipo de ecommerce privado, donde los clientes tienen que crear una cuenta para poder disfrutar de ofertas exclusivas. Este sistema de venta tiene que priorizar un método de registro eficiente. En este caso, los usuarios pueden registrarse con sus redes sociales o con su correo y contraseña.
Después de crear una cuenta, Privalia muestra la posibilidad de activar un método de personalización, donde los clientes pueden ver las ofertas de sus marcas favoritas, ubicación, etc.
El formulario de checkout de Privalia
El checkout de Privalia es un formulario de 3 pasos: ‘Datos personales’, ‘Detalles de envío’ y ‘Pago’.
Cuando introducimos los datos personales, el campo del nombre está rellenado con la información de la dirección de correo electrónico. Aunque probablemente tenga que editarse, puede ahorrar algo de tiempo y esfuerzo para los clientes. Los pasos de envío suelen ser los más largos, y esta no es una excepción. Aun así, el paso no incluye campos innecesarios, lo cual ayuda a las tasas de conversión.
Lo más destacado del checkout de Privalia
✅ Formulario de varios pasos. Este es uno de los formularios más cortos de nuestra lista, con solo tres breves pasos. Nos gusta que los campos estén bien organizados y que el formulario en general sea breve y conciso.
✅ Función de autocompletado. En este proceso de pago, podemos ver un tipo diferente de función de autocompletado, que puede funcionar en muchos casos. ¡Merece la pena probarlo!
✅ UX. Si bien en este caso el branding no está tan presente como en otros ejemplos, podemos ver algunas de las prácticas fundamentales de UX y CRO: el resumen de la compra está presente en todos los pasos, los CTA son claros y visibles y la barra de progreso del formulario ayuda a terminar el formulario.
¿Te gustaría diseñar tu formulario de checkout con todas estas técnicas? Con Arengu puedes crear el tuyo y añadir todos los detalles que necesites, personalizándolo con tu propia lógica.
Imagen: 06
Mantente informado de las noticias más relevantes en nuestro canal de Telegram
