Diseño del carrito de la compra: patrones para mejorar la conversión

octubre 1, 2019

Los carritos de la compra son una parte clave de cualquier comercio electrónico. Pero, ¿qué hace que un carrito tenga una buena conversión? ¡Sigue leyendo y descúbrelo!

El comercio electrónico es una parte enorme de Internet hoy en día. Con el paso del tiempo, las tiendas online han crecido a tal escala que se han ganado un lugar en nuestro día a día. Sin embargo, con el crecimiento de la popularidad del comercio electrónico también crece la competencia.

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

Los minoristas de todo el mundo han estado reflexionando sobre el coste y los beneficios de invertir en la UX de sus tiendas online. ¿Qué hace falta para que un sitio web de comercio electrónico ofrezca una buena UX? ¿En qué consiste una buena experiencia de compra online? Y lo más importante de todo: ¿podemos sobrevivir si no hacemos esa inversión?

El comercio electrónico ha sido una ola que se cierne sobre el comercio minorista: ha llegado el momento de que las tiendas físicas se hundan o naden. Con los minoristas online optimizando cada vez más su diseño de UI en busca de una buena conversión y unas ventas saludables, ha llegado el momento de ponerse al día y seguir siendo relevantes.

¿Y qué mejor lugar para empezar que con el diseño clásico del carrito de la compra? Es una pieza clave de la experiencia de compra, y puede tener un impacto sorprendentemente grande en las métricas clave de la plataforma. Es el típico aspecto de un sitio web que puede mejorarse en gran medida con pequeños retoques, y la recompensa puede ser enorme.

En este post, hablaremos de los patrones de carrito de la compra más importantes, de algunos ejemplos impresionantes y de cómo hacerlo con tu herramienta de prototipado.

Por qué deberías invertir en un gran diseño de carrito de la compra: el comercio electrónico y el baile de las ventas

Un comercio electrónico tiene muchos aspectos diferentes que tienen que funcionar juntos para satisfacer las necesidades del usuario y animarle a comprar. Entre esos aspectos, hay algunos cuyo objetivo es ayudar a los usuarios a ver y explorar los artículos disponibles, como la navegación. Otros pretenden ayudar a los usuarios a comprender las características de un artículo concreto, como la página de producto.

El carrito de la compra desempeña un papel muy importante en el baile general de las ventas online. La página del carrito no es tanto una última parada antes de pasar por caja, aunque los usuarios repasen los artículos de su carrito antes de pasar por caja. Esto se debe a que el usuario experimenta el carrito de la compra mientras navega y explora, normalmente como un pequeño icono en la parte superior derecha de la pantalla. Por eso es tan importante respetar los principios generales de diseño de UI para crear una experiencia fluida.

El objetivo principal del carrito de la compra es ayudar al usuario a tener claro lo que está pidiendo y los detalles del pedido. También es ayudar al usuario a hacer cualquier cambio de última hora que sea necesario, como pedir dos camisas en lugar de sólo una o cambiar el color de la camisa.

La cesta de la compra suele ser algo que los usuarios no examinan activamente, pero se darán cuenta al instante cuando una cesta de la compra no esté a la altura de las expectativas. Se supone que debe ser un breve resumen de toda la información importante, siendo la funcionalidad la principal preocupación. Esto requiere una buena arquitectura de la información que permita a los compradores centrarse en la experiencia.

El diseño del carrito de la compra no consiste realmente en intentar influir en el usuario para que compre más (aunque es algo que se puede conseguir). Se trata de facilitar al usuario la realización del pedido, con la menor fricción posible. Se trata de despejar el camino de cualquier obstáculo, y conseguir que el usuario llegue rápidamente a la línea de meta.

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

Patrones de diseño de carritos de la compra: directrices principales

Entonces, ¿qué hace que el diseño de un carrito de la compra sea realmente funcional? Tiene que ofrecer información importante y, al mismo tiempo, dar al usuario la posibilidad de hacer cambios, indicándole lo que puede esperar una vez realizada la compra.

Lógicamente, eso implica muchas cuestiones primarias, como qué se considera información importante. ¿Se espera que la información sobre el envío, por ejemplo, se encuentre en el carrito? Si el objetivo principal del carrito es puramente funcional, ¿podemos intentar animar a los usuarios a comprar más? Averigüémoslo.

1. Página del carrito de la compra vs carrito de la compra de navegación

Una distinción básica importante es que la mayoría de las plataformas tendrán dos diseños para el carrito de la compra. El primero es el carrito de navegación que los usuarios verán cuando exploren y compren. Suele ser un icono que se encuentra en la barra de navegación y que muestra el número de artículos que contiene. El segundo es la página del carrito, dedicada únicamente al carrito y a los artículos que contiene.

Ambos son importantes, y pueden moldearse para servir a distintos fines. El icono del carrito de navegación, por ejemplo, puede ser un aliado útil si quieres animar a los usuarios a comprar más o a pasar por caja rápidamente. A medida que los usuarios navegan por el sitio web, el icono puede tener breves animaciones u otras señales visuales que llamen la atención sobre él, y hagan que los usuarios busquen la salida más rápidamente.

Echa un vistazo a nuestra lista de ejemplos de wireframes para inspirarte en el diseño.

La página del carrito de la compra es crucial, porque tiene que ofrecer mucha información a los usuarios de forma organizada, para que no resulte abrumadora. Dicho esto, esta página es una gran oportunidad para intentar que los usuarios compren mayores cantidades de los mismos artículos, o para llevar a cabo un poco de venta cruzada.

2. Icono carro: ubicación, ubicación, ubicación

Dado que los usuarios verán este icono en casi todas las pantallas de la plataforma, querrás que sea fácil de encontrar. Es importante que lo hagas fácil de localizar, pero que encaje con el resto del diseño de navegación de la plataforma.

Hay algo que decir sobre la ubicación del carrito en el sitio web: hoy en día, lo clásico es colocarlo en la esquina superior derecha (normalmente, dentro de la barra de navegación). Esto significa que la mayoría de los usuarios actuales, especialmente los jóvenes que están acostumbrados a comprar por Internet, esperarán encontrar allí el icono del carrito.

Como diseñador de una nueva plataforma, tienes dos formas de utilizar esta información en tu beneficio.

Ejemplos: Los grandes nombres creen en el carrito de la esquina superior derecha. Entre ellos están Amazon, Ebay, Target, Asos, Flipkart, Apple y Best Buy, entre muchos otros.

La primera es aprovechar la familiaridad que los usuarios tienen con la ubicación clásica. Si los usuarios ya esperan encontrar el icono del carrito en la esquina superior derecha, hay más margen para que tu carrito sea discreto y se mezcle más con el diseño general de navegación. Esto puede ayudar al aspecto visual de tu sitio web, creando una experiencia más coherente para los usuarios.

La otra forma en que los diseñadores pueden utilizar esta información, es nadar a sabiendas contra corriente. Conscientes de que la mayoría de los usuarios esperan que el carrito esté en la parte superior derecha, los diseñadores pueden crear algo completamente distinto. Este suele ser el caso de los sitios web que pretenden ser memorables, superando los límites del diseño convencional.

Este camino puede ser difícil, como la mayoría de los diseñadores te dirán suspirando. Ser único e innovador es estupendo, pero conlleva riesgos. Al fin y al cabo, muchas cosas pueden salir mal cuando se trata de la experiencia del usuario con un diseño ingenioso. En este caso, la idea de que los usuarios no encuentren el carrito en el lugar esperado hace que sea aún más necesario encontrar el carrito, esté donde esté.

No hay nada malo en ofrecer a los usuarios una experiencia nueva, pero si los usuarios no pueden cumplir su tarea de comprar artículos, entonces su experiencia no ha sido buena. El carrito es algo que debe estar siempre a la vista, algo a lo que los usuarios puedan referirse rápidamente. Debe ser reconocible al instante.

¿Quieres crear algo nuevo? ¿Por qué no echas un vistazo al nuevo estilo de moda llamado neumorfismo?

3. Mostrar el número de elementos: indica a los usuarios en qué posición se encuentran

Esto es algo que hacen muchas grandes tiendas de comercio electrónico. Decir al usuario cuántos artículos hay en el carrito de la compra puede funcionar de varias maneras. Por ejemplo, algunos usuarios pueden sentirse alentados a poner más cosas en un carrito vacío, y entonces, mostrando un cero en el icono del carrito podemos cambiar eso. La única forma de averiguar qué funciona con tus usuarios es testar tu teoría.

Sin embargo, la principal razón por la que muchos diseñadores deciden incluir el número de artículos del carrito es que ayuda al usuario a ser consciente. Suena bastante sencillo, y lo es: a la gente le gusta volver al carrito para comprobar cuántas cosas tiene mientras sigue comprando.

Crea una forma de retroalimentación en la que los usuarios pueden estar seguros de que el artículo se ha añadido correctamente al carrito. Esto puede ayudar al usuario a sentirse más en control de la experiencia, lo que siempre es bueno en UX.

Añadiendo un número al icono del carrito de la compra, también podemos transformarlo en una forma de CTA. El número puede utilizar colores más vivos y alguna animación para destacar, e intentar motivar a los usuarios para que procedan a la compra antes de que abandonen la búsqueda.

4. El mini carrito de la compra: el punto intermedio

Cada vez más sitios web ofrecen ahora a los usuarios un minicarrito de la compra. Se trata, en la práctica, de una vista ampliada del icono del carrito en la que los usuarios pueden ver los detalles de los artículos. Es una forma maravillosa de dar al usuario más control sobre lo que hay en el carrito, como rectificar instantáneamente un paraguas añadido por error.

Sin embargo, hay que hacer una distinción importante entre este minicarrito y el diseño de carrito de la compra de página completa. Dado el espacio reducido, no querrás abrumar a los usuarios dándoles demasiadas opciones. Este minicarrito debe ser un pequeño cuadrado o rectángulo que ocupe sólo una fracción de la pantalla total, así que, ¿qué debe incluir?

Debe incluir la lista completa de artículos del carrito de la compra, junto con la opción de eliminar el artículo o tal vez modificar el número de cada artículo del pedido. El diseño de este mini carrito de la compra debe ofrecer a los usuarios dos CTA básicos: la alternativa de pagar directamente o la de ir al carrito de la compra y verlo todo con más detalle.

Pero ahí es donde debe detenerse. No olvides nunca que este diseño es para un espacio muy pequeño, y que aunque los usuarios quieran libertad y control pueden sentirse fácilmente sobrecargados. Puedes leer nuestro post sobre la Paradoja de la Elección para UXers, pero lo esencial es que los usuarios pueden tardar mucho tiempo en tomar una decisión. Si este tiempo se prolonga demasiado, los usuarios pueden paralizarse y dejar de disfrutar.

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

5. Informa a los usuarios cuando se añada un nuevo elemento: necesitan estar seguros de que

Para que los usuarios tengan todo el control, tienen que saber a qué se enfrentan. No puede haber dudas en sus mentes sobre si esa última tarea que hicieron se llevó a cabo con éxito: esa no es forma de comprar.

Para los consumidores, recibir una notificación de que se ha añadido un nuevo artículo ofrece la confirmación del éxito. Reduce la cantidad de veces que los usuarios añaden el mismo artículo varias veces, ya que no estaban seguros de que el sistema entendiera su orden. Esto, a su vez, hará que el proceso de pago sea más fácil y rápido, ya que los usuarios no tendrán que repasar cada artículo de su cesta corrigiendo los números.

También se trata de evitar que los usuarios tengan que comprobar su carrito para asegurarse de que el artículo se ha añadido. Es crucial recordar que toda la experiencia de compra debe tener la menor fricción posible.

Cuando se trata del tipo de notificación que más utilizan los sitios web de comercio electrónico, descubrimos que los modales superpuestos son una forma habitual de informar a los usuarios sobre un nuevo artículo en su carrito. Aquí tienes algunos enlaces útiles sobre los modales superpuestos:

De esta forma, te aseguras de que el usuario vea la información sobre el nuevo elemento sin que tenga que alejarse de la página actual. Al crear esta ventana, también nos aseguramos de que el usuario no tenga nada que le distraiga de esta nueva información.

6. La página del carro lleno: la última frontera

La página del carrito de la compra suele ser la última parada que hacen los usuarios antes de pasar por caja. También es en este momento cuando los usuarios repasan los artículos de su cesta y toman la decisión real de conservar cosas, eliminarlas o abandonar todo el proceso de compra.

Esta página es muy importante para cualquier plataforma de comercio electrónico. El diseño de esta página requiere que incluyas toda la información importante, al tiempo que das a los usuarios libertad y control sobre el carrito. He aquí algunos aspectos básicos que debe tener en cuenta el diseño del carrito de la compra:

  • La posibilidad de eliminar elementos
  • La posibilidad de modificar cualquier cosa sobre los artículos. Esto incluye cambiar las cantidades y cualquier otra especificación. Un menú desplegable es una opción habitual para estos controles.
  • Información básica sobre cada artículo, incluida una foto.
  • Un enlace a la página de producto del artículo
  • Total estimado de la compra, incluidos gastos adicionales como impuestos o gastos de envío
  • La opción de convertir cualquier artículo en un regalo: esto podría ser tan sencillo como una casilla de verificación o botones de radio
  • Una ranura para insertar cualquier código promocional o cupón, si la plataforma funciona con ellos
  • Formas de pago

Éstas son las cosas clave que deben incluir todas las páginas de carrito de la compra. La razón principal por la que son tantas, es precisamente porque es la última revisión que hacen los usuarios de todo el pedido. Y por eso, el diseño del carrito de la compra tiene que ofrecer toda la información importante que el usuario pueda necesitar, además de darle el control para cambiar cualquier cosa de su pedido.

Otros elementos que los diseñadores pueden incluir es un cuadro de resumen del pedido, que simplifique todo el pedido y muestre sólo el resultado final: el coste de los artículos más cualquier coste adicional o descuento. Esto ayudará a los usuarios a sentirse tranquilos con el total de su compra, para que no haya sorpresas cuando llegue el momento de realizar el pago.

7. Un carrito de la compra limpio: la simplicidad es la clave

¿Cómo incluimos todos esos elementos en una sola página sin que el desorden se convierta en un problema? Es cierto que la página del carrito de la compra tiene que mostrar mucha información, pero aún así tiene que leerse como una simple lista de la compra. Debe resultar fácil y directa para el usuario.

Las claves para crear esta sensación de simplicidad son la arquitectura de la información y la jerarquía visual. Quieres que los elementos estén claramente diferenciados entre sí. La información debe estar en armonía, en lugar de competir por la atención, para que el usuario pueda comprender inmediatamente lo que ocurre.

Esto incluye los clásicos movimientos de jerarquía visual, como agrupar piezas de información para que los usuarios entiendan que todas ellas se refieren al mismo elemento. Dado que se trata de un tema considerablemente extenso, puedes consultar nuestros dos posts sobre jerarquía visual y arquitectura de la información para obtener todos los detalles.

Muchas tiendas también intentan limpiar el aspecto visual del diseño del carrito de la compra ocultando algunos elementos tras iconos o botones que provocan ventanas emergentes. Los espacios para cupones y descuentos, por ejemplo, pueden esconderse para que los usuarios puedan hacer clic en ellos si lo necesitan. Dicho esto, siempre es crucial asegurarse de que los usuarios puedan localizar estos botones, así como comprender su significado antes de hacer clic.

A mayor escala, el diseño del carrito de la compra podría hacerse de modo que cada artículo fuera ampliable al pasar el ratón por encima o al hacer clic. De este modo, los usuarios pueden elegir entre examinar cada artículo con más detalle o continuar con la información básica que se les ha proporcionado. ¡Las posibilidades son infinitas!

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

Diseño de carritos de la compra para móviles: diseñar para el mañana

Ahora que tenemos claros los rasgos clásicos que conforman un buen diseño de carrito de la compra, vamos a sumergirnos en los cambios que se producen al diseñar para móviles.

1. La CTA debe estar a la vista en todo momento

Puede parecer difícil, pero una CTA flotante puede marcar una gran diferencia para los usuarios. El diseñador debe permitir que el usuario revise los artículos en su tiempo libre, pero facilitar al máximo el proceso de pago.

Una cosa importante sobre el botón de pago es que tiene que ser algo más que visible. Tiene que ser clicable, y esto afecta a varios aspectos del diseño de botones.

Design by Kohutpiotr.

Los diseñadores deben considerar la posibilidad de hacer el botón lo suficientemente grande como para que los usuarios no tengan que esforzarse con precisión para hacer clic. La elección de los colores debe garantizar un contraste suficiente contra el resplandor del sol, o para los compradores que puedan tener una discapacidad visual. Si te preocupa que los discapacitados visuales utilicen tu producto, consulta nuestra guía sobre test de accesibilidad.

2. Ten cuidado con lo que incluyes - y con lo que no

Los usuarios de móviles siguen necesitando toda la información crucial: el espacio reducido no excluye la necesidad de saber si el envío es gratuito o si tiene algún coste. En todo caso, el diseño para móviles hace que sea más difícil incluir toda esa información sin asfixiar tanto a la pantalla como al usuario.

Dicho esto, es cierto que diseñar para la web te da un amplio margen para jugar con los elementos incluidos en la página. Muchas plataformas de comercio electrónico realizan ventas cruzadas en los sitios web, pero se abstienen de hacerlo en las pantallas de los móviles.

La razón es que los usuarios se confundirán fácilmente con cualquier cosa que parezca fuera de lugar en la pantalla de su teléfono, añadiendo fricción al proceso de pago. Los usuarios echarán un vistazo más de cerca y comprenderán que esos artículos se están ofreciendo y no pertenecen al pedido, pero ese vistazo más de cerca requiere esfuerzo. Aumenta el coste de interacción de la página. En todo caso, todo el proceso de pago debe realizarse sin esfuerzo.

El objetivo general es eliminar todo lo que pueda confundir o distraer. Para muchas tiendas, esto significaría eliminar cualquier anuncio, promoción y venta cruzada. También significa eliminar los incentivos para la venta adicional, como los banners de «Envío gratuito para pedidos superiores a 50 $».

3. Decide con cuidado la elección y el tamaño de los elementos

Esta lucha es válida para cualquier diseño móvil, no sólo para el diseño de carritos de la compra. La pantalla más pequeña hace que todo esté más comprimido, y elementos como el texto se convierten en un problema potencial. Otro problema no es sólo que los usuarios lean letras pequeñas, sino que hagan clic y pulsen sobre elementos demasiado pequeños.

Por ejemplo, el tamaño de la fuente suele funcionar para indicar que cierta información pertenece a un artículo dentro del diseño del carrito de la compra. Sin embargo, en un dispositivo móvil el margen que tienen los diseñadores para la fuente aceptable es mucho más estrecho. Esto, a su vez, hace más difícil organizar la jerarquía visual del diseño del carrito de la compra.

Check out our prototype examples.

Lo mismo puede decirse de los controles. El diseño de un carrito de la compra tiene que dar al usuario el control para modificar la compra, pero todos esos controles que conllevará cada artículo necesitan espacio. Todos ellos necesitan ser clicables, como aumentar o disminuir la cantidad de un artículo.

Algunos diseños de carritos de la compra para móviles superan este problema de usabilidad con un único botón para realizar modificaciones en los artículos. Este botón llevará a otra pantalla, o a un modal superpuesto con más opciones.

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

Prototipado del diseño del carrito de la compra: por qué es imprescindible

El carrito de la compra puede parecer a menudo una parte sencilla de la plataforma de comercio electrónico, lo que hace que resulte tentador saltarse la fase de prototipado del proceso. Ese es un error que conducirá a carros de la compra con una usabilidad terrible, lo que puede ser una fuerza condenatoria en cualquier plataforma de comercio electrónico.

Aunque hay muchas razones creativas para garantizar un proceso de creación de prototipos del carrito de la compra, nunca hay que olvidar las razones empresariales. Al fin y al cabo, una plataforma de comercio electrónico tiene un objetivo muy claro: vender. Al igual que otras partes más clásicas del diseño UX, vender consiste en hablar el idioma del usuario.

Puede resultar sorprendentemente difícil diseñar algo desde la perspectiva del usuario. La empatía necesaria para crear justo lo que el usuario necesita o desea es francamente sobrehumana: ninguno de nosotros, simples mortales, puede hacerlo bien a la primera. Los usuarios tienen mente propia, y el equipo de diseño tiene que pelar capas y capas del comportamiento del usuario para decidir qué camino es el correcto.

¡No te quedes sin prototipar el diseño de tu carrito de la compra! No es tan difícil como muchos piensan. Aquí tienes un tutorial sobre cómo crear un carrito de la compra con Justinmind: es cuestión de minutos.

Y ése es el quid de la cuestión de por qué las plataformas de comercio electrónico no pueden prescindir del prototipo del diseño del carrito de la compra: el test. No se puede testar un mero concepto. El equipo necesita un prototipo físico para colocarlo delante de los usuarios y testar su reacción.

Los diseñadores suelen tener una idea clara de lo que es bueno y malo en el diseño, pero el comportamiento del usuario es lo único que separa un éxito de un fracaso.

Así pues, es hora de que el equipo de diseño ponga a prueba todas sus ideas. Utilizando una herramienta profesional de creación de prototipos, el objetivo debe ser crear varios prototipos iniciales e ir avanzando. A medida que se desarrolle el proyecto, el prototipo será cada vez más detallado, hasta que se convierta en una representación de alta fidelidad idéntica al carro real.

Test del diseño de tu carrito de la compra: la conversión es la clave

Muchos consideran que éste es el momento de la verdad. El momento en que descubrimos si el diseño va a ser un éxito o si es hora de volver a la mesa de dibujo. Aquí está el problema con esa idea: el test no es un momento único. Es una serie de momentos que tienen lugar a lo largo del proceso de desarrollo.

Al igual que en el proceso de pensamiento de diseño, en Justinmind creemos firmemente en el test temprano y frecuente. El diseño de tu carrito de la compra debe probarse varias veces a medida que avanzas y construyes sobre él.

El verdadero secreto del éxito del test de tu cesta de la compra reside en la conversión. Antes de empezar el test, tienes que decidir cuáles son tus estándares. ¿Qué esperas conseguir con esta versión del diseño? Recomendamos tener siempre una línea clara, un objetivo que pretendes alcanzar con el diseño.

Ejemplo: Queremos una conversión de al menos el 50% en la cesta de la compra en los 3 minutos siguientes a que los usuarios vean la pantalla. Si las pruebas revelan que no llegamos a ese 50%, es hora de optimizar el diseño.

La idea es que cada vez que realices un test, te darás cuenta de pequeñas cosas que provocan reacciones negativas en los usuarios. Podría ser un pequeño texto que hace que los usuarios vuelvan a leerlo, o una animación visual que hace que los usuarios se sientan un poco confusos. Es importante recordar que ningún diseño de carrito de la compra es perfecto, y que siempre es posible optimizarlo.

Debes prestar mucha atención a la rapidez con la que los usuarios comprenden el diseño del carrito de la compra y si hay dudas sobre los detalles del pedido. El objetivo final aquí es que los usuarios vean todo lo que necesitan en esta única pantalla y, con suerte, procedan al pago.

Empieza a diseñar tu sitio web de comercio electrónico hoy mismo con Justinmind

descargar cta

Ejemplos de carritos de la compra que nos encantan

1. Victoria's Secret

El diseño del carrito de la compra de Victoria’s Secret es innovador, y se beneficia de lo inesperado. Cuando el usuario hace clic en el icono del carrito en la parte superior derecha, no se le lleva a otra pantalla, sino que el carrito se abre desde el lado derecho de la pantalla.

Este diseño vertical deja espacio para otra barra vertical en la que la empresa realiza ventas cruzadas de otros artículos. También nos gusta que el carrito tenga un enlace «editar» que lleva a un modal superpuesto en el que los usuarios pueden modificar completamente el artículo pedido, sin saturar el diseño del carrito.

Lo único que nos gustaría tener en este carrito es un total estimado con impuestos y gastos de envío, ¡pero ningún diseño es perfecto!

2. Walmart

Walmart es un gran nombre en el sector minorista, y su carrera por alcanzar a las plataformas de comercio electrónico ha sido una historia interesante de seguir. Podemos hacernos una idea del tiempo que han invertido en su presencia online por el diseño de su carrito de la compra.

El carrito en sí es sencillo, con pocas distracciones de la compra. Podemos ver la clara división de la pantalla, que constituye una gran arquitectura de la información.

Los usuarios pueden encontrar toda la información que puedan necesitar, con cuadro de resumen de pedido incluido. Walmart optó por incluir algunas ventas cruzadas debajo de la información, donde los usuarios pueden verlas pero no les molestan mientras leen la información.

3. Etsy

Etsy es un ejemplo interesante de diseño de carrito de la compra. Como muchas plataformas que ofrecen a los usuarios artículos de vendedores individuales, Etsy hace que los usuarios paguen por artículos que proceden del mismo vendedor a la vez. Esto significa que al comprar dos artículos de vendedores diferentes, los usuarios tienen que pasar por caja dos veces.

Nos gusta que la información de su carrito de la compra consiga mostrar toda la información relevante, muestre dos cuadros de resumen de pedido separados y aún así consiga mantener una interfaz limpia. ¡No puede haber sido fácil!

Los usuarios también apreciarán que puedan utilizar cupones donde los vendedores los acepten, hacer regalos de artículos e incluso dejar un mensaje de regalo de forma gratuita. También nos encanta que los CTA sean coherentes pero no compitan entre sí. ¡Qué bien!

4. Libros de UX Compra rápida

Esta aplicación tiene un maravilloso diseño de carrito de la compra, obra de Abinash Mohanty. Hace un uso inteligente del espacio, con la jerarquía visual asumiendo el papel protagonista en la pantalla. Todos sabemos que las pantallas de los móviles pueden ser un verdadero reto para los diseñadores, por eso este diseño es tan estupendo.

Toma toda la información excesiva y la esconde, sin dejar de mostrar al usuario toda la información clave, incluida la dirección de facturación, los gastos de envío, la lista completa de artículos y el total. Apreciamos especialmente que los controles para modificar el orden de los libros sean utilizables, en lugar de diminutos iconos con los que la mayoría de nosotros tendríamos problemas.

5. App para encontrar comida

Esta aplicación de Shojol Islam utiliza una interfaz limpia, con una arquitectura de la información inteligente para que todo resulte lógico y útil. Nos gusta la proporción de los componentes de la UI, que permiten pulsar cómodamente, así como el espacio suficiente entre los controles para evitar errores.

El cuadro de resumen situado debajo de la lista de artículos es una gran ventaja de este diseño. El usuario puede recorrer los artículos y modificar lo que desee, y luego ver desglosado todo el coste del pedido. La orientación de la navegación debajo de todo es sólo la guinda de un maravilloso pastel de usabilidad.

El resumen

El carrito de la compra es una parte crucial de cualquier plataforma de comercio electrónico. Puede ser fácil pasar por alto esta página debido a otras partes importantes del proyecto, como suele ocurrir con el diseño de la navegación. Aunque puede que el diseño del carrito de la compra no sea tan emocionante, no deja de ser importante para el correcto funcionamiento de la plataforma.

Cuando optes por un diseño de carrito de la compra, lo mínimo que debes tener en cuenta es que la gente necesita control, libertad e información. Este es el punto en el que los usuarios revisan sus artículos y deciden realmente lo que van a comprar: ¡de ti depende que esa decisión sea fácil!

PROTOTIPAR - COMUNICAR - VALIDAR
HERRAMIENTA DE PROTOTIPADO TODO EN UNO PARA CARROS DE LA COMPRA WEB Y MÓVILES
Rebeka Costa
In-house SEO manager, usability enthusiast and patron of all sleep-deprived designers