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
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.
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.
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.
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?
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.
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.
- 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.
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!
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.
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.
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.
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.
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!
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.
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.
