E-commerce UX: la nueva forma de asegurar que las ventas no paren

Te decimos todo lo que debes saber si no estás seguro sobre invertir en la página web de tu negocio. Y te traemos páginas que van a inspirarte sobre cómo debe ser la experiencia de usuario.

Sabemos que tu producto es increíble, pero ¿cómo lo transmites a través de una pantalla o de un móvil? Más aún cuando se trata de un snack, una bebida o incluso un servicio. Si la página carece de diseño y de experiencia, lamentablemente ya no vende.

Aquí nace el UX para e-commerce: el diseño de interfaces eficientes y atractivas que crean una experiencia memorable, logrando que el cliente pase más tiempo en el sitio, llene su carrito y recomiende la marca.

Los imprescindibles del e-commerce UX

Simplicidad operacional.
Diseño que complemente al producto o servicio, haciéndolo destacar.
Seguridad de la información.
Lógica en la navegación de la página.
Catálogos y menús fáciles de entender y navegar.
Imágenes de producto combinadas con UGC o testimonios.
Páginas de pago sencillas que muestran el progreso.

Uno de los errores más comunes en las páginas de e-commerce es arrojar todo en el home page. A nadie le gusta entrar a un lugar y verlo todo desordenado, o ser atacado por una inmensidad de opciones sin haberlas pedido.

A continuación te mostramos nuestra selección de páginas con un UX impecable, y qué es lo que nos gusta de ellas.

Nothing Tech

mx.nothing.tech

Desde su inicio te atrapa con elementos poco comunes para percibir tech.

Página de producto del Nothing Phone (3a) Pro: la modelo al centro, tarjetas de video y detalle alrededor, y una ficha con precio y botón de añadir al carrito. — Modelos, videos, animaciones, descripciones breves y botón de compra grande y a la vista.

Página del CMF Phone 2 Pro con la misma retícula de tarjetas —cámara, batería, premios— sobre una fotografía a pantalla completa. — Modelos, videos, animaciones, descripciones breves y botón de compra grande y a la vista.

Ya capturó tu atención.

Visor 3D del Nothing Phone (3) girando sobre el fondo desenfocado de la página. — Videos, animaciones 3D y texto breve para conocer las funcionalidades del producto.

Accesible a la vista.

Página de los audífonos Nothing Ear con tarjetas de especificaciones, diseño y contenido de la caja alrededor de la fotografía principal. — Slides y scroll down para ver más información del producto.

Panel de especificaciones desplegable con dimensiones, peso, sonido, batería y conectividad de los audífonos. — Slides y scroll down para ver más información del producto.

Ficha de compra flotante con batería, audio y cancelación de ruido, selector de color y botón de precio. — Precio total, botón de añadir y opciones de producto a la vista.

Nothing Community: listado de discusiones del foro con respuestas recientes, vistas y categorías en la barra lateral. — Página dedicada a la comunidad, con foros en vivo.

Poppi

drinkpoppi.com

Página del sabor Orange Cream con descripción breve, carrusel de iconos de sabores y galería de producto a la derecha. — Opciones de sabor y cantidad, acompañadas de una galería personalizada por sabor y videos.

Sección «Taste The Obsession» con cuatro videos verticales de clientes reales bebiendo Poppi. — Títulos atractivos, iconos y tabla nutricional con datos importantes y sencillos.

Sección «Here's What Customers Are Saying» con dos testimonios firmados dentro de tarjetas. — Títulos atractivos, iconos y tabla nutricional con datos importantes y sencillos.

Bershka

bershka.com

Página de producto de Bershka: tres tomas en video de la misma camisa y, encima, la ficha con precio, tallas y botón de añadir a la cesta. — Video slides de las prendas mientras seleccionas talla y ves detalles.

Bloque «Inspírate con estos looks» con la prenda en una fotografía de calle, acordeones de composición y disponibilidad, y miniaturas de otros creadores usándola. — Descripción de material, cuidados, disponibilidad en tiendas, videos del producto en la tienda y modelado por diferentes influencers y modelos.

IKEA

ikea.com

Página de la cama MALM: galería de miniaturas, precio, calificación de 60 reseñas, selectores de color y tamaño, y botón de agregar al carrito. — Descripción de producto y sugerencias de uso.

Visor 3D de la cama MALM con sus medidas acotadas, opción de vista previa en realidad aumentada y precio con botón de compra. — Previsualización 3D del producto.

Descripción corta de la cama y acordeones de «Detalles del producto» y «Medidas». — Información resumida y recomendaciones de acuerdo con tu búsqueda.

Fila de productos relacionados con precio, calificación, disponibilidad y botón directo de carrito y favoritos. — Información resumida y recomendaciones de acuerdo con tu búsqueda.

Encabezado de IKEA con la barra de búsqueda y una fila de categorías ilustradas con la foto de un producto cada una. — Imagen para catálogos y barra de búsqueda en todas las pestañas.

Ambientación de comedor con puntos interactivos sobre cada mueble; uno abierto muestra el nombre y el precio del producto. — Apartados de inspiración con precio y acceso directo a carrito y favoritos.

Lo que nos gusta de estas páginas

Nombran las cosas como las conocen popularmente sus clientes, sin términos extravagantes o técnicos, sobreponiendo la creatividad.

Y parte de lo que es el e-commerce UX es justo eso: si el comprador entra a la página por un producto en especial, las promociones aparecen en áreas estratégicas —con colores brillantes, texto diferente o acompañadas de su propia página de fotos y promociones— para que añada más productos a su carrito.

Cuatro páginas, cuatro conclusiones

De las cuatro páginas que acabas de observar podemos concluir que:

Todas hacen uso de iconos para acentuar la información.
Muestran testimonios o calificaciones.
Utilizan fotografías de gente real usando el producto, o videos ilustrativos.
Se aseguran de mostrar el add to cart en los puntos estratégicos.

Ahora que ya estás inspirado y quieres comenzar a invertir en la página web de tu negocio, te podemos apoyar a crear el mejor e-commerce UX.

Comienza ahora.