Qué hacer y qué no hacer en el diseño de carritos de compras móviles: 6 desmontajes prácticos (guía detallada de mCommerce)

Ya sabe que la página de su carrito es un engranaje vital en su máquina de comercio electrónico. Pero, ¿las páginas de su carrito móvil, la página que los visitantes ven antes de pagar, están haciendo su parte?

En Growcode encontramos repetidamente que las páginas del carrito son una de las partes más ignoradas de las tiendas de nuestros clientes, especialmente cuando se trata de dispositivos móviles. Y las consecuencias son significativas, afectando seriamente sus resultados finales.

Se espera que las ventas de comercio móvil representen el 52,9% de todas las ventas de comercio electrónico para 2021. Sin embargo, en 2017, la tasa promedio de abandono del carrito de la compra móvil fue de un 85,65%.

Eso significa que de todos los clientes que agregaron un producto o productos a un carrito, casi 9 de cada 10 se quedaron sin completar la compra.

# Se espera que las ventas de comercio móvil representen el 52,9% de todas las ventas de comercio electrónico para 2021. #EcommerceStats Haga clic para twittear
Clientes móviles sobre el abandono del carrito. Recuerde que los datos agregados, como en el gráfico anterior, no tienen en cuenta las diferencias considerables entre industrias. Fuente.
En esta publicación, veremos seis ejemplos de páginas de revisión de carritos. Los primeros tres utilizan prácticas de diseño sólidas que debería considerar replicar, mientras que los ejemplos restantes incluyen elementos que es mejor evitar.

También vale la pena mencionar que, si bien nos estamos enfocando en los errores de ciertos diseños de carritos de compras, no significa que sean completamente terribles en general. Analicemos las mejores prácticas para los carritos de compras móviles.

1. Hacer: Amazon

El carrito de compras de Amazon para sitios web móviles es un ejemplo brillante de un diseño de carrito de compras móvil bien hecho. No está abarrotado, pero tampoco es demasiado mínimo. Se incluyen todos los elementos necesarios, sin desviar la atención del CTA principal. También hay una serie de "complementos" discretos que se pueden seleccionar para aumentar el valor del pedido, desde envoltorios de regalo hasta artículos relacionados.
Carrito de compras móvil de Amazon ux. Se incluyen todos los elementos necesarios.

Consejo n. ° 1: una llamada a la acción clara en la parte superior de la página configurada en un color de contraste. A medida que el usuario se desplaza hacia abajo, esta CTA continúa flotando en la parte superior de la pantalla.

# Consejo de optimización del # carro móvil: tenga un #CTA claro en la parte superior de la página en un color que contraste. #ecommerce #optimización Clic para tuitear
El CTA flota en la parte superior de la pantalla cuando el usuario se desplaza hacia abajo.
Consejo n. ° 2: la llamada a la acción ocupa toda la pantalla, por lo que es fácil de tocar tanto para los usuarios diestros como para los zurdos.
Consejo n. ° 3: Reiteración del envío gratuito en la parte superior de la página para disipar cualquier duda y "endulzar el trato".
Consejo n. ° 4: las imágenes y los nombres de los productos se vinculan a la página de descripción para aquellos que desean volver a verificar los detalles del producto.
Consejo # 5: Hay botones claros y fáciles de tocar para cambiar el monto del pedido, eliminar artículos y guardarlos para más tarde.
Consejo n. ° 6: La notificación "En stock" les asegura a los clientes que no tendrán que esperar por el producto.
Consejo de optimización de #carros móviles #: La notificación 'En stock' tranquiliza a los #clientes que no tendrán que esperar por el producto. #ecommerce Clic para tuitear
Consejo n. ° 7: Amazon muestra productos que se han "Guardado para más tarde", con un sencillo botón "Mover al carrito" debajo.
Los elementos guardados para más tarde son claramente visibles.
Consejo n. ° 8: inclusión de productos relacionados, "Los clientes también compraron", que se pueden agregar al carrito sin salir de la página. Una ventaja adicional para el diseño de este elemento, ya que el tercer elemento no se muestra completamente y, por lo tanto, sugiere un movimiento de deslizamiento.
Consejo n. ° 9: mucho espacio en blanco y ausencia de detalles de "relleno" innecesarios. Amazon ha incluido solo lo que es absolutamente necesario.
Consejo n. ° 10: enlace a la "Parte superior de la página" en el pie de página.

¿Quieres más información como esta?

Obtenga consejos semanales de comercio electrónico, estrategias y conocimiento líder de la industria.
Entregado directamente en su bandeja de entrada.

el He leído la política de privacidad y acepto los términos y condiciones del boletín.

Seleccione esta casilla de verificación para continuar

¡Guau! Te acabas de registrar. Revise su bandeja de entrada para confirmar la suscripción.

2. Hacer: grapas

La belleza del carrito Staples es su simplicidad. Los productos se pueden revisar en segundos. El resultado es un mayor énfasis en las opciones que se incluyen.
La belleza del carrito Staples es su simplicidad. Uno de los mejores carros de comercio electrónico para dispositivos móviles.
Consejo # 1: Al igual que Amazon, se llama la atención sobre el hecho de que el producto se enviará de forma gratuita, tanto en la parte superior de la página como en el resumen de pago. Además, el texto está en verde, lo que hace que la notificación se destaque aún más. También se muestra la fecha exacta de "entrega prevista".
Consejo # 2: El diseño es ultra simple y se hace un uso excelente del espacio en blanco. Los clientes pueden verificar rápidamente sus pedidos, realizar los cambios necesarios sin salir de la página y verificar el total.
Consejo n. ° 3: El cuadro "Cupones y recompensas" no es molesto. La importante opción de "recoger en la tienda" también se proporciona sin desviar la atención del CTA principal.
Consejo # 4: La palabra "Seguro" se incluye en la CTA de pago.
Consejo n. ° 5: se ha eliminado el pie de página.

¿Hay algún problema? Si bien Staples hace muchas cosas bien, un problema con este diseño de carrito es la simplicidad del encabezado, que no incluye un menú expandible o un formulario de búsqueda. Si una empresa solo vende un producto, esta puede ser una solución viable. Sin embargo, para los sitios de productos múltiples, siempre vale la pena darles a los clientes la opción de navegar nuevamente si así lo desean.

3. Hacer: Sears

Sears ofrece muchas opciones adicionales, incluidos planes de pago, recogida en la tienda, opciones de regalo y promociones. Su carrito es un buen ejemplo para los minoristas que desean combinar muchos elementos diferentes en una página sin arruinar el diseño que evita el abandono del carrito de la compra móvil.
El diseño del carrito móvil de Sears contiene muchos elementos, pero lo mantiene simple.
Consejo n. ° 1: se incluye una llamada a la acción en la parte superior de la página junto con el subtotal. Un icono de candado genera aún más confianza y también se ofrece la opción de pagar con Paypal.
Consejo n. ° 2: como artículo de alto precio, se incluyen planes de pago para disipar cualquier duda en esta etapa.
Consejo n. ° 3: los ahorros de venta se incluyen en rojo en la sección de resumen del pedido, lo que anima a los clientes a hacer clic para finalizar la compra mediante la creación de urgencia y la reducción de dudas.
Consejo n. ° 4: se proporciona un enlace para iniciar sesión en el programa de fidelización que actúa como un incentivo adicional para los nuevos clientes. Es importante tener en cuenta que este no es un enlace para configurar una cuenta de tienda sin ningún beneficio, que se incorporaría mejor en el formulario de pago.
Consejo n. ° 5: se incluye un sello de "pago seguro" en la parte inferior de la página.
¿Hay algún problema? Es un poco demasiado, y es probable que el efecto sea una atención dispersa para algunos clientes. No es necesario ofrecer suscripciones a revistas y un enlace al programa de fidelización en la parte inferior, por ejemplo.

4. No lo hagas: Vitacost

Aunque Vitacost utiliza muchos de los elementos descritos anteriormente, su implementación a menudo es defectuosa. El resultado es una página de carrito mal diseñada que probablemente vería un aumento en las conversiones del carrito de compras con algunos pequeños ajustes.
Vitacost utiliza muchos de los elementos descritos anteriormente, pero su implementación suele ser defectuosa.
Error n. ° 1: inclusión de una barra de búsqueda molesta que aleja a las personas de la página del carrito. Es una buena idea incluir un ícono de barra de búsqueda (como en el ejemplo de Amazon) para las personas que desean continuar navegando. Pero no lo hagas demasiado grande.

Consejo para la optimización del # carrito móvil: no incluya una barra de búsqueda molesta que aleje a las personas del carrito. #ecommerce Clic para tuitear
Error # 2: Inclusión automática de un producto “BOGO” poco claro (compre uno y obtenga la mitad del precio) que puede confundir o molestar a los clientes.
MIstake # 3: Barra de código de promoción intrusiva. Esto distrae la atención de la llamada a la acción principal y anima a los clientes a dejar el carrito para buscar promociones en línea. Los cuadros de promoción deben ser visibles, pero no demasiado. Sin duda, deberían estar después de una llamada a la acción.
MIstake # 4: el costo de envío se establece como "TBD", lo que genera dudas (en general, debe evitar las abreviaturas)
Error n. ° 5: el pie de página es demasiado grande. ¿Vitacost quiere que los clientes finalicen la compra o descarguen la aplicación?
Error n. ° 6: las opciones de productos, para eliminar o aumentar elementos, son demasiado pequeñas y difíciles de aprovechar.
Error n. ° 7: la barra flotante, que se puede ver en la parte inferior de la captura de pantalla, ocupa demasiado espacio en la pantalla de los teléfonos más pequeños.

5. No lo hagas: Lonely Planet

Donde la página de Staples utiliza efectivamente un diseño mínimo, Lonely Planet excluye demasiados elementos. No hay funciones para reducir las dudas y generar confianza, no hay recomendaciones o sugerencias de productos para aumentar el valor de la compra, y es difícil hacer clic en muchos de los botones.
Lonely Planet excluye demasiados elementos. Se les deja mucho espacio que podría usarse para mejorar la experiencia del carrito.
Error n. ° 1: el espacio se utiliza mal. Sería mejor que el carrito llene toda la página y utilice espacios en blanco, en lugar de aparecer sobre el contenido actual.
Error # 2: No se incluye información sobre entrega, descuentos u opciones de pago. Esto probablemente disminuiría las dudas y los temores de los clientes inseguros.
Error n. ° 3: no hay sugerencias de productos relacionados.
Error # 4: Los botones para aumentar o reducir la cantidad de productos son tan pequeños que prácticamente no se puede hacer clic.
Error n. ° 5: El CTA - "Proceder a pagar" - no parece un botón.
Error n. ° 6: el formato emergente hace que sea difícil tocar la llamada a la acción desde la izquierda. ¡Deje que los clientes usen ambos pulgares!

6. No: Nike

El problema principal con la página de Nike es la forma en que varios elementos se han incluido al azar, sin pensar en cómo podrían funcionar si se colocan juntos o en diferentes puntos de la página. También hay confusión sobre la CTA.
En la página de Nike se han incluido de forma aleatoria varios elementos.
Error # 1: Los descuentos de envío solo están disponibles para miembros. Esto agrega fricciones innecesarias y es probable que actúe como un desincentivo para aquellos clientes que no desean unirse, quienes pensarán que están perdiendo. Ofrezca a los clientes la opción de iniciar sesión en la etapa de pago, junto con la opción de registrarse para nuevos clientes. La página del carrito debe ser exclusivamente para revisar pedidos.

Error # 2: El uso de dos CTA. Casi siempre es mejor tener un CTA en las páginas del carrito porque está buscando un curso de acción específico. La única razón para ofrecer múltiples CTA es darles a los clientes la opción entre diferentes opciones de pago. Sería mejor mostrar un formulario adecuado (ya sea un formulario de inicio de sesión o un formulario de dirección) después de que un usuario le proporcione su dirección de correo electrónico.

Error n. ° 3: los "tipos de pago aceptados" no se enumeran cerca de la CTA de pago. Es una buena idea incluir estas insignias en la página de su carrito, especialmente si no es tan conocido como Nike, pero el pie de página no es el lugar adecuado para ellas.

Error n. ° 4: el término "invitado" puede generar confusión si los clientes no se identifican a sí mismos de esa manera (¿puede convertirse en miembro si compra como invitado?)

Finalizando el diseño del carrito de la compra móvil

La mayoría de las páginas de carrito de mejor rendimiento tienen un diseño limpio y simple, pero también proporciona el tipo y la cantidad de información correctos. Mientras rediseña el suyo, tenga en cuenta que el propósito de las páginas del carrito es que los compradores revisen y confirmen su pedido, eliminen cualquier artículo innecesario y agreguen productos similares. Cualquier otra acción deseada, como iniciar sesión en su cuenta o registrarse, puede dejarse para la página de pago. Por lo tanto, recuerde estas mejores prácticas para carritos de compras móviles y otras técnicas de optimización de carritos de compras.

Y recuerde, ¡la prueba dividida es clave! Utilice las tácticas descritas aquí para crear sus propias pruebas y comprometerse a ajustar elementos a largo plazo. Si hace eso, es casi seguro que verá aumentos constantes en sus conversiones.

Obtenga la lista de verificación de optimización de comercio electrónico de 115 puntos

Basándonos en ocho años de experiencia, reunimos todas nuestras ideas principales en un solo libro: La lista de verificación de optimización del comercio electrónico de una tienda en línea de más de 7 figuras. Si desea aumentar el rendimiento de todas sus páginas, desde la página de inicio hasta el pago, obtenga su copia aquí.