eCommerce UX – Principios y estrategias de diseño esenciales

A medida que el panorama minorista general continúa evolucionando y las cadenas físicas luchan, el mercado de comercio electrónico está listo para crecer. Para 2021, se espera que las ventas globales de comercio electrónico crezcan a más de 4,48 billones de dólares, más del doble de las cifras de 2017.

Los minoristas y diseñadores de comercio electrónico que prestan mucha atención a la experiencia del usuario y se adhieren a un conjunto estándar de principios de diseño de UX de comercio electrónico para el flujo de compras del cliente pueden capitalizar este crecimiento del mercado y ver rendimientos financieros tangibles.

El flujo de compras es un recorrido general del usuario que, cuando se implementa correctamente, da como resultado más compras impulsivas, menos abandono del carrito y una mayor conversión general.

El recorrido del usuario incluye:

• Descubrimiento de sitios web
• Búsqueda y exploración de productos
• Página del producto
• Carro
• Verificar
• Confirmación

Este artículo cubre estos puntos clave del viaje del usuario y cómo los diseñadores de comercio electrónico pueden hacer que la experiencia del cliente sea agradable, sencilla y sin complicaciones.

Descubrimiento de sitios web

Posicionar la marca claramente

Los visitantes forman las primeras impresiones de un sitio web en tan solo 50 milisegundos. Un sitio web de comercio electrónico debe captar la atención del usuario mostrando de forma clara y rápida lo que vende y dónde encaja en el mercado general.

Por ejemplo, el sitio web de un minorista de joyería de lujo probablemente se vería y se sentiría muy diferente al sitio de una gran tienda consciente del presupuesto. El minorista de electrónica de gama alta Bang & Olufsen transmite la calidad de su marca mediante el uso de fuentes elegantes, una paleta de colores sofisticada e imágenes de productos elegantes.

Mostrar llamadas a la acción relevantes

Cuando el usuario llegue a la página de inicio, salúdalo con contenido oportuno y llamados a la acción (CTA) específicos. Una imagen de banner grande que corresponda a la temporada actual o un evento específico junto con un CTA apropiado ayuda al usuario a pasar al siguiente paso en el proceso de compra. Al crear CTA, evite frases genéricas como "comenzar" que no le dicen claramente al usuario lo que sigue.

Polaroid creó una llamada a la acción eficaz durante la temporada navideña al ayudar a los usuarios que estaban comprando regalos. En lugar de usar una frase genérica, Polaroid usó "Comprar regalos", dejando en claro que el usuario sería llevado a un área del sitio con sugerencias de regalos.

Personalice las páginas de aterrizaje para SEO

Al conectar los términos de búsqueda del usuario de motores de búsqueda como Google a páginas de destino específicas, los minoristas de comercio electrónico pueden capturar usuarios que tienen la misión de encontrar un producto específico.

Cuando un usuario busca algo, es muy probable que esté buscando comprarlo. La creación de una página de destino personalizada para los términos comunes de búsqueda de productos aumenta la posibilidad de que un minorista obtenga una venta (y tal vez un nuevo cliente). La empresa de papelería Papier lo hace bien con una página diseñada específicamente para invitaciones de boda que aparece en los resultados de búsqueda de Google.

Búsqueda y exploración de productos

Proporcionar búsqueda en el sitio

Si bien puede parecer bastante básico, muchos sitios aún no ofrecen una búsqueda general en todo el sitio o, si la ofrecen, no está optimizada correctamente. Pero la búsqueda en el sitio es fundamental para una sólida experiencia de compra en el comercio electrónico.

Según Invesp, el 60% de las compras online no son impulsivas. Las personas a menudo saben lo que están buscando y escribir su consulta en una barra de búsqueda en un sitio web de comercio electrónico, como el nombre de un producto o el número de modelo, es mucho más rápido que examinar las opciones del menú.

Las funciones adicionales, como la búsqueda predictiva o la función de autocompletar, ayudan a los usuarios a ver las opciones rápidamente. Apple usa esta táctica con un campo de búsqueda que se actualiza dinámicamente con enlaces rápidos a productos y búsquedas populares sugeridas.

Inspirar a los visitantes en el modo Discovery

Si bien muchos compradores tienen un artículo específico en mente para comprar, no todos los visitantes están tan seguros. Según Nielsen Norman, hay cinco tipos de compradores de comercio electrónico, uno de los cuales es el "navegador". Los navegadores no buscan necesariamente algo específico. Más bien, miran tranquilamente a su alrededor para ver si encuentran algo interesante.

Los sitios web de comercio electrónico pueden ayudar al comprador en el modo de descubrimiento mostrándole productos nuevos o más vendidos y permitiéndole ver categorías de productos de manera fácil y rápida.

Etsy atrae a los navegadores mostrándoles lo que es popular en este momento y mostrando claramente las categorías generales de productos, tanto en la navegación como en el contenido de la página de inicio.

Usar filtros y búsqueda por facetas

La búsqueda por facetas utiliza el filtrado y va un paso más allá al permitir que los usuarios seleccionen varios atributos a la vez.

Al crear filtros, en lugar de limitar las opciones a criterios generales como tamaño, color o precio, agregue filtros específicos para categorías específicas de los productos que se venden. Esos filtros pueden ser cosas como ajuste o tela para ropa, fuentes u ocasión para invitaciones y tamaño de pantalla o procesador para dispositivos.

Una vez que un usuario aplica filtros, debe ser inmediatamente evidente en la interfaz de usuario qué filtros se han aplicado. El usuario también debería poder eliminar fácilmente los filtros aplicados.

ASOS muestra una gama detallada de filtros para cada categoría y muestra claramente qué filtros se han aplicado.

Página del producto

Mostrar de forma destacada las acciones principales

El usuario nunca debe preguntarse cómo hacer algo importante, como colocar un producto en su carrito de compras. Muestre acciones principales como "agregar al carrito" o "comprar ahora" como botones, y colóquelos en una ubicación destacada en la pantalla en relación con el resto del contenido.

El minorista de mejoras para el hogar Lowe's le permite al usuario saber cómo agregar un producto a su carrito con un botón verde grande como una de las cosas más destacadas en la página.

Proporcione información detallada del producto

Muestre fotos profesionales de alta calidad y descripciones detalladas para ayudar a los compradores a comprender el producto.

Use la divulgación progresiva y la jerarquía visual para brindar al usuario la cantidad correcta de información que necesita. Bríndeles la información más importante de inmediato, luego agregue detalles más abajo en la página para los usuarios que deseen obtener más información.

Divida las descripciones largas en secciones; por ejemplo, descripción general, tamaños/dimensiones, características detalladas e información de envío. Usar la navegación expandir/contraer para secciones adicionales, como lo hace Myprotein, ayuda a evitar que el usuario se sienta abrumado.

Construya la confianza del cliente

Evite dejar a los clientes con dudas sobre las opciones de envío, la disponibilidad del producto y las políticas de devolución. Asegurarse de que toda esta información esté fácilmente disponible, lo que genera confianza en el cliente y puede ayudar a empujar a un cliente inseguro hacia una compra. Saber si pueden devolver algo y cómo les ayuda a tomar decisiones más informadas.

ASOS muestra claramente información importante sobre envíos y devoluciones en la página de cada producto mediante un modal al que se accede desde un enlace debajo del nombre de cada producto.

Agregar prueba social

La prueba social es un concepto que significa que las personas están influenciadas por el comportamiento de los demás. El concepto es parte de los principios de persuasión del Dr. Robert Cialdini (un destacado investigador en la ciencia de la influencia) y se ha demostrado que funciona.

Los minoristas de comercio electrónico pueden reforzar la confianza del comprador con prueba social agregando calificaciones, reseñas y comentarios de los clientes. Los productos en Amazon a menudo tienen miles de reseñas y los usuarios pueden ordenarlos por nivel de calificación de estrellas.

Carrito de compras

Mostrar un resumen claro del pedido

Antes de que el comprador finalice su compra, muéstrale un resumen del pedido claro y conciso que incluya los artículos comprados, la cantidad y el precio de cada artículo, y el total del pedido. Permita que el usuario edite cualquier elemento que desee actualizar o eliminar, y evite sorpresas con los cargos de envío al incluir un resumen de envío.

Modist muestra tanto un resumen claro del pedido como un recibo. El usuario puede administrar fácilmente los artículos que ha seleccionado (mover a la lista de deseos, eliminar, cambiar la cantidad) y ver tanto un resumen como un desglose detallado del envío y los impuestos.

Verificar

Permitir que los usuarios paguen como invitados

Las compras impulsivas representan casi el 40% de todo el dinero gastado en eCommerce. Elimine el obstáculo adicional de crear una cuenta o iniciar sesión al permitir que los compradores paguen como invitados. Durante el proceso de check-out como invitado, una simple integración para crear una cuenta puede convertir a algunos invitados en usuarios de la cuenta.

Aesop permite a los usuarios realizar fácilmente el check-out como invitados y, al mismo tiempo, ofrece la opción de iniciar sesión o registrarse. Proporcionar múltiples opciones en un solo formulario elimina posibles bloqueadores de compra para aquellos que desean pagar rápidamente, pero también brinda a los usuarios que desean registrarse la oportunidad de hacerlo.

Proporcione comentarios visuales durante el proceso de pago

Incluir una barra de progreso ayuda a los clientes a comprender dónde se encuentran en el proceso de pago y cuánto les queda por completar.

Apple muestra al usuario cada paso del proceso y le permite navegar entre los pasos usando los enlaces de progreso. El progreso se guarda, por lo que el usuario no pierde nada al moverse entre los pasos.

Utilice métodos de pago comunes

Además de permitir el pago a través de las principales tarjetas de crédito, agregar otros métodos de pago populares como PayPal puede aumentar la conversión para los compradores que no desean entregar la información de su tarjeta de crédito.

En los Países Bajos, iDEAL se usa a menudo para transacciones de comercio electrónico y el 60% de los consumidores holandeses lo han usado en una compra reciente. El minorista de ropa Scotch & Soda permite a los compradores pagar con iDEAL y PayPal.

Confirmación del pedido

Mostrar una confirmación de pedido detallada después de la compra

Una vez que el cliente complete la compra, bríndeles una confirmación que incluya el procesamiento exitoso del pago y los detalles de la entrega, como la dirección, el método de entrega y la fecha de entrega prevista.

Este concepto de correo electrónico de confirmación para Amazon muestra el número de pedido, brinda una descripción general de los artículos comprados y proporciona una fecha de envío y algunas recomendaciones para futuras compras.

Enviar actualizaciones de pedidos y envíos por correo electrónico

Además de la pantalla de confirmación, el envío de un correo electrónico de confirmación ayuda a mantener informado al usuario sobre el estado de su compra. Si bien todos los clientes deben recibir una confirmación por correo electrónico, esto es particularmente útil en los casos en que los usuarios se han registrado como invitados y no tienen una cuenta en el sitio web para verificar sus pedidos anteriores.

Si algo cambia con el pedido, como un retraso en la entrega, envíe una actualización. Una vez que se envíe el artículo, envíe una actualización por correo electrónico con el número de seguimiento.

Resumen

Los principios de este artículo proporcionan una línea de base de los puntos de contacto del viaje del usuario que todo diseñador de comercio electrónico debe seguir, pero es solo el comienzo. Para obtener más información sobre detalles específicos sobre la experiencia de usuario del comercio electrónico móvil, visite Comercio electrónico para la experiencia móvil o lea más sobre el diseño de la página de destino Cómo diseñar páginas de destino efectivas.

El creciente mercado de comercio electrónico representa muchas oportunidades para los minoristas. Aquellos que reconocen la importancia de UX y siguen las mejores prácticas para el viaje del usuario de comercio electrónico pueden seguir siendo competitivos y afectar positivamente sus resultados.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Tendencias destacadas de comercio electrónico y su influencia en el diseño (con infografía)
• UX de comercio electrónico para la experiencia móvil
• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La guía definitiva para el diseño de sitios web de comercio electrónico
• Comercio electrónico rediseñado: cómo los cambios menores lograron importantes mejoras en la experiencia de usuario