20+ Mejores Diseños de Páginas de Carritos de Compras

Cuando buscamos diseños para esta selección, en primer lugar, queríamos examinar los principios de creación de páginas de carritos de compras. Estas páginas tienen un papel importante en el proceso de compra, sin embargo, a menudo ellas son creadas 'con los pies'. De todos modos, crear una página sólida de carrito de compras puede ser un reto.

Idealmente, esta página debe incluir un resumen de producto, un campo para código de descuento, múltiples opciones de pago y métodos de envío, así como un precio total, enlaces a páginas de política de privacidad y devoluciones, un bloque de productos complementarios, botones para seguir compras o proceder a pago y envío, y otros detalles importantes similares.

El objetivo principal de cada página de carrito de compras es llevar al cliente a la página de pago, pero ¿cómo se puede hacerlo de la manera más efectiva?

Este artículo fue publicado por primera vez en 2011, cuando recogimos 42 tiendas en línea bien conocidas para examinar la usabilidad de sus carritos de compras. Pero como los tiempos cambian, los diseños de carritos de compras han cambiado mucho. Por lo tanto, decidimos visitar estas tiendas en línea otra vez para comprobar los cambios aplicados a los diseños de sus páginas de carritos de compras. Sorprendentemente, muchas de ellas se convirtieron en más simples y minimalistas. No hay flechas o iconos adicionales, incluso en los botones de las más grandes tiendas online, mientras que el botón lacónico "Comprar" ahora se utiliza a menudo. En la mayoría de las páginas de carritos de compras modernas:
  • el botón es resaltado con color;
  • a veces ellas incrustan flechas visualmente complementarias ;
  • o iconos de carrito de compras agregados al las llamadas a la acción de texto.

Además, las inscripciones del botón de pago y envío pueden ser diferentes:

  • en la mayoría de los casos se utiliza la palabra 'checkout' (comprar/pagar);
  • otras palabras populares son 'proceed to checkout' (proceder al pago);
  • 'proceed to purchase' (proceder a la compra);
  • 'proceed with your order' (proceder con su pedido);
  • 'go to checkout' (ir a la página de pago);
  • ‘proceed’ (proceder);
  • ‘check out now’ (comprar ahora);
  • ‘begin checkout’.

Los 'sellos de seguridad' están particularmente populares, ya que ellos aumentan la confianza y la credibilidad de cualquier tienda. De acuerdo al estudio realizado por Baymard, el sello de Norton es que gana la mayor confianza (35,6%), McAffee ocupa el segundo puesto (22,9%).

Cuando un usuario hace clic en el botón 'Comprar', es necesario mostrarle una lista completa de los productos del carrito, así como, por lo menos, un par de opciones de pago para elegir. Es verdad que NO todas las páginas de nuestra lista presentan los logotipos de tarjetas de crédito al lado de las opciones de pago correspondientes; sin embargo, te recomendamos agregarlos, como es muy conveniente para los compradores.

Ahora te invitamos a echar un vistazo los ejemplos de carritos de compras y aplicar las ideas más creativas a tu tienda.


1. Yoox.com

1-yoox


2. AE.com

2-ae


3. Store.Nike.com

3-nike


4. FaucetFace.com

4-faucetface


5. DeathWishCoffee.com

5-deathwishcoffee


6. Store.Apple.com

6-apple


7. Gucci.com

7-gucci


8. Skinny-Teatox.com

8-teatox


9. SurfDome.com

9-surfdome


10. RalphLauren.com

10-ralphlauren


11. MarcJacobs.com

11-markjacobs


12. Shop.AcneStudios.com

12-acne


13. Shop.Guess.com

13-guess


14. JuicyCouture.com

14-juicy-couture


15. Shop.Puma.com

15-puma


16. TopShop.com

16-topshop


17. NoonCopenhagen.com

17-noon


18. FlatSpot.com

18-flatspot


19. UO.com.au

19-urbanoriginals


20. US.Burberry.com

20-burberry


21. Store.DolceGabbana.com

21-dolcegabbana


22. Triangl.com

22-triangl


Todos los elementos del diseño de la página de carrito de compras son importantes. Aquí está una lista de comprobación que puedes utilizar para comprobar si tu carrito de compras es conveniente.

1. Resumen de producto – se trata de una imagen de producto, su nombre, descripciones adicionales (tamaño, color, etc.), precio y cantidad, así como de una opción de eliminación de producto del carrito de compras o una posibilidad de edición de sus características (tamaño, color, etc.).

2. Métodos de envío – es también importante mencionar la diferencia entre las opciones, así como indicar sus precios.

3. Campo para código promocional – si envías códigos promocionales a tus clientes potenciales, asegúrate de que tu página de carrito de compras tiene una sección especial para aplicarlos.

4. Precio total – debe componserse del costo de todos los productos en el carrito + el precio de envío. Muestra a los clientes la cantidad total de dinero que deben pagar para evitar sorpresas desagradables.

5. Múltiples opciones de pago – si tu tienda acepta diferentes opciones de pago, es necesario mencionar todas ellas, pero no te recomendamos ofrecer al cliente más de 10 sistemas de pago para elegir. Lo mejor es ofrecer dos opciones de pago que son las más populares entre tus clientes. Además, te recomendamos agregar iconos al lado de las opciones de pago (icono de PayPal, icono de tarjeta de crédito, etc.).

6. Sellos de seguridad – si tienes el sello VeriSign o el sello de McAfee Secure, es necesario agregarlo a la página de carrito de compras. Ellos aumentan aún más la fiabilidad de tu tienda.

7. Política de privacidad y devoluciones – no te olvides incluir los enlaces a estas páginas. Lo mejor cuando ellas se abren como ventanas emergentes (no en pestañas nuevas), por lo que un cliente no tendrá que salir de la página del carrito.

8. Productos complementarios – los productos complementarios pueden aumentar sensiblemente tus ventas. Sin embargo, recuerda que, para el mejor resultado, ellos deben ser realmente complementarios. La mejor manera de atraer mayor atención a estos productos es ofrecer un descuento. Por otro lado, el precio del producto complementario debe ser por lo menos un 50% inferior al precio del producto principal.

9. Seguir compras – este elemento es muy importante como da una oportunidad de agregar más productos al pedido.

10. Proceder al pago – este es el botón más importante en la página de carrito de compras. Tu objetivo principal es atraer la atención a esta opción - ¿cómo hacerlo? Pues, puedes resaltar el botón con color o aumentar su tamaño. Es mejor utilizar una llamada a la acción en lugar de la palabra 'comprar' regular. Ten en cuenta, por favor, que las palabras "pago seguro" pueden aumentar la confianza de los clientes en tu sitio web de comercio electrónico.

Fuente: "40+ Best Examples of Shopping Cart Page Designs" por Lilian Rigo


Diane Parks

Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!