Saltar al contenido

El diseño de la tarjeta de producto (II)

En un supermercado virtual la tarjeta (snippet) del producto es uno de los elementos más importantes, tal vez sea el más importante. Proponemos algunas ideas para mejorarla y bajar el tiempo de compra de productos.

navegación por producto

Como vimos en la Parte I de esta nota, existe un problema particular de los supermercados virtuales que se transforma en un inhibidor para la compra: el tiempo que lleva seleccionar un producto y agregarlo al carro, que se ubica entre 45 segundos y un minuto y medio.

Desarrollaremos a continuación algunas ideas y propuestas que apuntan a mejorar la interfaz dotando la de una interacción que pensamos podría bajar estos tiempos.

Manejar y apliar las fotos desde la tarjeta

El estándar de los supermercados para las imágenes es una imagen pequeña en la tarjeta, y una o más fotos de buen tamaño y calidad en la ficha a la que se accede al clickear la tarjeta, en la mayoría de los casos con opciones para ampliarla.

La idea es poder manejar las fotos desde la tarjeta: poder pasarlas y ampliarlas sin necesidad de ir a la ficha, tal como lo hace gallito.com.uy con sus ofertas de autos (permite pasarlas, pero no ampliarlas)

Gallito permite pasar las imágenes desde la tarjeta. No permite ampliarla y le agrega una marca de agua que reduce sensiblemente su utilidad.

Calculo de totales

Resulta llamativo que esta funcionalidad no sea universal: hacer la multiplicación precio unitario por cantidad y mostrarla en la tarjeta, y en el carro. Las tarjetas de producto frecuentemente muestran 2, 3 o más números, y ninguno de ellos es el precio que el cliente va a pagar por su compra. Hacer que el cliente estime mentalmente una multiplicación que el sistema puede hacer de forma instantánea es transformar un problema leo y entiendo en uno pienso y entiendo.

Supermercados Disco en Uruguay tiene una implementación de esta funcionalidad.

En la versión de hace unos meses, disco.com.uy calculaba automáticamente el importe sin necesidad de agregar al carrito.
La versión actual mantiene la funcionalidad pero ahora está oculta: es obligatorio agregar al carro para descubrirla y utilizarla. Esto incluye cómo se fracciona el producto (unidades, kg, metros, etc.)

Carrito siempre visible

Prácticamente todos los supermercados online tiene alguna forma de marcar los productos ya seleccionados. En muchos casos se podría hacer mejor, pero inclusive si la solución fuera la óptima, el producto es visible solamente si se lista la categoría.

Para llevar adelante de forma efectiva y rápida la selección de los 30 o 40 productos típicos de una compra de supermercado, entender qué está agregado al carro, qué falta y poder modificar o quitar los que ya están es una función primordial. El estándar es que el usuario tenga que ir especialmente a una pantalla de cierre de transacción (checkout en la jerga de comercio electrónico) donde habitualmente los productos se muestran con una tarjeta distinta y la funcionalidad implementada de forma diferente, que además tiene foco en el pago y la entrega y no en el ajuste de los productos.

La idea es en el escritorio dedicar un espacio de forma permanente al carrito, y mostrar los productos con una tarjeta equivalente a la del listado, en función del espacio disponible. Como mínimo tiene que tener la foto, el nombre, el importe unitario, el importe a pagar por el producto y la posibilidad de quitarlo o modificar la cantidad.

Tiene que mostrar además el total general de la compra, la cantidad de items, y si fuera posible otras informaciones relevantes como por ejemplo costo y fecha de envío.

En el móvil no es razonable dedicar de forma permanente espacio de la pantalla al carrito, por lo que la recomendación es representarlo con un botón y activarlo al clickear o deslizar. Allí el carro oculta completamente lo que se está mostrando y utiliza toda la pantalla para la interacción con la compra.

Jumbo Colombia tiene una implementación del carrito siempre visible algo pobre en el escritorio y buena en el móvil. No se explica por qué las tarjetas de producto de escritorio, donde hay espacio para hacerlo, no muestran el nombre del producto, el precio y otros atributos.

Jumbo colombia implementa el carrito siempre visible en una versión muy pobre. La tarjeta de producto casi no tiene información y hace un mal uso del espacio.
La implementación en móvil es muy buena, con una tarjeta de producto funcional.
Conserva la herencia del antiguo checkout (el botón de abajo a la derecha), que conduce a un carro con otras fichas de productos y otro modelo de interacción.

Navegar desde el producto

En los supermercados en línea la tarjeta de producto es siempre un destino, una hoja del árbol que solamente puede conducir a la ficha o agregarse al carro. Esto descarta información extremadamente valiosa: la idea de que una CocaCola es miembro de la familia de las CocaColas, de los refrescos, de las bebidas, etc.

Una idea que parece poderosa es transformar la ficha de producto en un pivot de navegación sobre el producto, la idea que intenta expresar la imagen que ilustra este artículo.

Para empezar, la categoría del producto y las antecesoras que entren en el espacio de la tarjeta deben ser clickeables, de modo de poder desde la tarjeta navegar a la categoría. Los productos no solo aparecen en su categoría, aparecen en la página principal, en las ofertas, en los combos, en el carro si impelmentan la idea del apartado anterior, y en muchos otros lugares. Ir de allí a la categoría sin pasar por el menú es una funcionalidad valiosa.

Y la funcionalidad principal es buscar la forma de desplegar productos que se relacionan de diferentes formas con el que se está mostrando.

Abajo se muestra una idea de estudio para escritorio y móvil, que amplía la tarjeta de producto para permitir navegar sobre los productos. Al clickear sobre cualquier producto relacionado, este toma el lugar central, con una animación de 1/4 de segundo, y permite seguir comprando y navegando desde el nuevo producto.

En el escritorio, con Mouse Over se despliega un navegador a la derecha, que permite elegir productos similares y a través de un combo cambiar el tipo: por categoría, por marca, por tamaño de envase o lo que corresponda en cada producto.
En el móvil se dispara con un tap en un link de “productos similares”. El navegador de productos es más compacto, pero presenta la misma funcionalidad

A modo de resumen

Sean estas ideas u otras, lo que parece evidente es que las interfaces que proponen los supermercados en línea aún tienen mucho camino para recorrer.

En la próxima entrega presentaremos una idea de cómo aplicar personalización masiva para mejorar la experiencia global de uso en los supermercados virtuales.

___

Curso de Psicología Cognitiva y Experiencia de Usuario

Diseñar experiencias de usuario de calidad implica comprender cómo piensa, juzga, recuerda y olvida el usuario. Ese es precisamente el campo de estudio de la Psicología Cognitiva y el objetivo central del curso.

Una oportunidad única de dar un salto en tu formación.

Próximo comienzo: 9 de junio de 2021
Consultas: capacitacion@concreta.com.uy

Inscripciones abiertas.

11 comentarios

  1. admin

    Este es 1 comentario

    1. admin

      asdasdasd

    2. admin

      pepe

  2. admin

    gsdfgsdf

  3. admin

    A modo de resumen

    Sean estas ideas u otras, lo que parece evidente es que las interfaces que proponen los supermercados en línea aún tienen mucho camino para recorrer.

    En la próxima entrega presentaremos una idea de cómo aplicar personalización masiva para mejorar la experiencia global de uso en los supermercados virtuales.

    ___
    Taller Intensivo de Diseño de la Interacción

    Aprender a diseñar es como aprender a cocinar: no alcanzan las recetas, hay que experimentarlo. Viví la experiencia de diseñar profesionalmente, con tutorías, casos reales y todo el apoyo del equipo de Concreta.

    Una oportunidad única de dar un salto en tu formación.

    Próximo comienzo: 5 de mayo de 2020
    Consultas: capacitacion@concreta.com.uy

    Inscripciones abiertas.

  4. admin
    Daniel Mordecki

    En un supermercado virtual la tarjeta (snippet) del producto es uno de los elementos más importantes, tal vez sea el más importante. Proponemos algunas ideas para mejorarla y bajar el tiempo de compra de productos.
    navegación por producto

    Como vimos en la Parte I de esta nota, existe un problema particular de los supermercados virtuales que se transforma en un inhibidor para la compra: el tiempo que lleva seleccionar un producto y agregarlo al carro, que se ubica entre 45 segundos y un minuto y medio.

    Desarrollaremos a continuación algunas ideas y propuestas que apuntan a mejorar la interfaz dotando la de una interacción que pensamos podría bajar estos tiempos.

  5. admin
    Daniel Mordecki

    Juan y Pedro
    Esto es un asalto

    Veremos cómo se ve.
    será cierto

    Sitio Web

  6. admin
    Anónimo

    Este es mi comentario

  7. admin

    Un comentario más

  8. admin

    agora sim

  9. admin

    y ahora?=

Deja una respuesta

Tu dirección de correo electrónico no será publicada.