Ecommerce UI Design: Cómo Crear Páginas de Colección de Productos Atractivas (6 Tácticas Accionables)

Introducción

Lamentablemente, los diseñadores y redactores suelen pasar por alto las páginas de colecciones de productos. Mientras que se dedica mucho esfuerzo a crear páginas de producto y páginas de destino atractivas, las páginas de colección se quedan en el camino y resultan muy poco interesantes.

Veamos seis formas prácticas de crear páginas de colección de productos que atraigan la atención, inspiren la acción e impulsen el tráfico y las conversiones.

Asegúrese de que la foto principal del producto sea atractiva

El primer obstáculo de diseño que deben superar las páginas de colecciones de productos es asegurarse de que la foto principal sea atractiva e interesante. Si no capta la atención del comprador prácticamente nada más aterrizar o en un par de desplazamientos, probablemente lo habrá perdido.

Empiece por considerar todo lo que sabe sobre su público objetivo. ¿Qué les gusta? ¿Por qué les gustan sus productos? ¿Qué es lo que les gusta de sus productos? ¿Cómo puede poner estas características en primer plano?

A continuación, empieza a considerar el diseño. ¿Es necesario ampliar las imágenes? ¿Necesitan un fondo vibrante o neutro? ¿Cuántos productos hay que mostrar seguidos?

Lo ideal es realizar pruebas A/B con varias variaciones de diseño. A veces, los cambios más pequeños pueden marcar la diferencia.

Fíjese en esta página de colección de ropa de bebé. Los productos en sí son bonitos y atractivos, por lo que no necesitan una presentación especialmente novedosa. La etiqueta "Recién llegado" distingue claramente algunos productos y hace que el comprador se fije en ellos.

Colocar este tipo de productos sobre un fondo neutro es una buena forma de resaltarlos.

Fuente: mamasandpapas.com

Otra forma de hacer que la foto principal de una página de colección resulte atractiva es mostrar el artículo en uso. Si echa un vistazo a esta página de invernaderos inclinados, verá cómo se puede hacer sin esfuerzo. Cada imagen es completamente distinta, con una paleta de colores diferente y mostrando el artículo desde un ángulo diferente. Es fácil imaginarse el producto en casa.

Fuente: greenhouseemporium.com

Es una táctica estupenda si quieres facilitar al cliente la visión del producto final y ayudarle a imaginar todo un estilo de vida.

Asegúrese de que los filtros no distraigan demasiado

Las páginas de colecciones necesitan filtros para ser útiles. No se puede esperar que los clientes naveguen por páginas y páginas de productos para encontrar un artículo concreto. Es probable que no sean conscientes de la amplitud de su oferta y que no tengan tiempo para mirar durante mucho tiempo.

Los filtros deben categorizar sus productos de forma significativa. El precio, el tamaño y el material son algunos de los filtros más habituales. Considere los propios productos y cuáles son los factores diferenciadores.

Cuanto más complejo sea el producto, más filtros debe haber. También puedes ofrecer otros útiles como "no apto para principiantes" o "solo para profesionales" si ayudan a los clientes a seleccionar el artículo adecuado.

Los filtros tampoco deben distraer demasiado. Deben ser de fácil acceso, pero no ocupar una gran parte de la página ni interferir en modo alguno con la experiencia de navegación.

Eche un vistazo a esta página de colecciones de tablas para suelos compuestos. Los filtros están situados a la izquierda y presentan un equilibrio perfecto entre ser fácilmente visibles y no estorbar. Tenga en cuenta que también son plegables, por lo que la gran cantidad de información no abrumará al cliente.

También se han ordenado de forma lógica: la mayoría de la gente querrá acotar los colores y materiales antes de entrar en detalles más específicos, como el tamaño.

Fuente: Ovaeda.com

Puede implementar fácilmente una solución similar que no ocupe mucho espacio pero que mejore significativamente la experiencia del usuario y permita a los clientes acotar su elección en cuestión de segundos.

Mostrar descripciones breves de productos al pasar el ratón por encima

Piense en las páginas de colección de productos como un centro de información. Aquí es donde se muestran todos los productos de una categoría determinada. Cuanto más útil sea, más probable será que el cliente convierta.

No obligue a los compradores a hacer clic en un artículo, leer la descripción del producto y volver a hacer clic. Tienen que perder el tiempo desplazándose para averiguar dónde lo dejaron. O, si siguen abriendo productos en pestañas nuevas, pronto se sentirán abrumados por la cantidad de artículos que intentan comparar.

Cuanta más información útil pueda mostrar en la página de la colección, mejor. Si añade una descripción breve y sencilla del producto cuando alguien pase el ratón por encima de él, podrá ayudar a los clientes a comparar productos en ese mismo momento.

Esta página de colección de masticables de calcio bariátricos hace un gran trabajo. Ofrece una breve descripción del producto, indicando las vitaminas y minerales que contiene. También se destacan los beneficios: tiene un sabor delicioso, favorece la salud inmunitaria, etc.

Fuente: Bariatricfusion.com _

Fíjese en lo breves que son las descripciones. Puedes leerlas en un par de segundos y seguir comparando productos.

Cuando aplique esta táctica, considere cuidadosamente la descripción hover. No tiene por qué ser la misma que la de la página del producto. Debe comentar brevemente las ventajas o características principales del artículo, diferenciándolo claramente de otros productos de la página.

Céntrese en ser informativo más que en impulsar una venta. Es más probable que los clientes se conviertan si confían en su elección.

Prueba social

La prueba social es una gran herramienta para hacer que las páginas sean más atractivas y útiles. Demostrará a sus clientes que usted es digno de confianza, fiable y que sus productos son de buena calidad. Esto es especialmente importante para los nuevos clientes que aún no están familiarizados con su marca y que pueden ser más reacios a convertir.

La prueba social tiene muchas formas, pero las valoraciones con estrellas son el tipo de prueba más útil para poner en sus páginas de recaudación. Le servirán para varios propósitos:

• calificar la calidad de cada producto
• mostrar cuántos clientes lo han comprado y se han tomado su tiempo para reseñarlo
• ayudar a los clientes a tomar decisiones de compra más rápidas

Las clasificaciones por estrellas son fáciles de incorporar. Echa un vistazo a la página de la colección de paletas de sombras de ojos de Sephora. Son fáciles de ver y muestran toda la información relevante: cuántas opiniones hay y cuál es la satisfacción general con el artículo. También puedes ver claramente que una de estas paletas es mucho más popular que las demás.

Fuente: sephora.com

Otra gran señal de prueba social para incorporar en sus páginas de recaudación son las notificaciones de venta en tiempo real.

Echa un vistazo a esta página de pegatinas personalizadas para portátiles. Mientras navegas, aparece una discreta ventana emergente en la esquina inferior derecha que te informa de quién ha comprado en el sitio web, de dónde es y qué ha comprado.

Esta es una buena manera de añadir un poco de FOMO a sus tácticas de marketing. Se mostrará a los clientes otros artículos, artículos que son claramente populares porque alguien acaba de comprarlos. También enviará fuertes señales de confianza y credibilidad.

Asegúrese de que la ventana emergente no sea demasiado llamativa ni distraiga la atención. Además, intente espaciarlas para que no empiecen a molestar a los compradores.

Fuente: vinylstatus.com

Visualizar varias vistas de productos

Cuanto mejor puedan ver los clientes un producto, mayores serán las posibilidades de que lo conviertan. Cuantas más imágenes de un artículo se muestren en la página de la colección, más participación e interés generará.

Puede incorporar más de una imagen de varias maneras. Puedes permitir el desplazamiento por una galería de productos o mostrar una foto diferente al pasar el ratón por encima.

Esta página de ropa de niño de H&M incluye una galería de productos desplegable. Puedes ver todas las fotos que aparecen en la página de cada producto directamente desde la página de la colección, para que nunca tengas que hacer clic.

Fuente:hm.com

Si prefieres mostrar una foto diferente al pasar el ratón por encima, puedes inspirarte en esta página de la colección de ropa de playa para mujer. La marca muestra inteligentemente la parte trasera de la prenda al pasar el ratón por encima, para que puedas ver la prenda completa sin tener que abrir otra página. Es una gran táctica para las marcas de ropa.

Fuente:simplybeach.com

A la hora de decidir si añadir una galería o una foto flotante, tenga en cuenta la naturaleza del artículo. ¿Cuántas fotos necesita ver un comprador? ¿Y cuáles deben ser esas fotos?

Puede mostrar el producto en uso o las fotos de los clientes, si es más probable que convenzan a un nuevo comprador. Puede mostrar el artículo de cerca o incluso enumerar las especificaciones del producto.

Mostrar artículos vistos recientemente

Las recomendaciones de productos suelen reservarse para las páginas de productos individuales. Aquí es también donde las marcas pondrán el carrusel de "vistos recientemente".

Sin embargo, al incluirlo en la página de la colección, puede recordar a los clientes los artículos que ya han visto y que les han gustado. Les ahorrará tiempo y esfuerzo a la hora de volver a consultar su historial de tener numerosas pestañas abiertas al mismo tiempo.

Echa un vistazo a la página de zapatillas de running para hombre de Adidas. En cuanto veas un producto individual, aparecerá una función de "vistos recientemente" en la parte inferior de la página de la colección, que te ayudará a no perder de vista los artículos que han despertado tu interés.

Fuente: adidas.com

El mismo carrusel aparece también en páginas de productos individuales, lo que permite una experiencia de navegación personalizada.

También puede recomendar productos a los clientes en función de los artículos que hayan visto, al igual que haría en las páginas de productos.

Conclusión

Considere cuáles de estas tácticas de diseño de páginas de colección de productos puede aplicar en sus propias páginas. Quizá las seis puedan contribuir a aumentar tus tasas de conversión.

Tenga siempre en mente la naturaleza de sus productos y los puntos débiles de su público. Qué buscan y cómo puede tu diseño ayudarles a encontrarlo?