Componentes

Un componente para impulsar las ventas

Uno de los componentes más utilizados e importantes en el e-commerce, es sin duda el componente Product Card, el cual nos despliega información básica de cada producto en una sola vista y que está presente a lo largo de la ruta de compra de los usuarios, desde el home hasta pantallas como la lista de productos y categorías.

Este componente debe ser diseñado cuidadosamente de acuerdo a las expectativas de nuestros usuarios y lo que esperan ver en un solo vistazo de cada producto antes de entrar a conocer todos los detalles.

El diseño y la eficiencia de la product card puede marcar una diferencia significativa en las ventas de nuestro e-commerce, por lo que es importante darle la importancia requerida.

Elementos

Los elementos de la Product Card deben de transmitir a nuestros usuarios información útil y rápida de un solo vistazo a manera de un resumen del producto y sus principales características.

Es importante mantener un número limitado de elementos, ya que visualmente debe ser muy legible y tomar en cuenta que convive generalmente con más Product Cards en una o varias secciones de elektra.mx

Layout

La posición de los elementos que conforman la Product Card debe ser clara y accesible visualmente, con el objetivo de brindar la información más relevante a los usuarios de manera fácil y rápida.

Este componente debe tener una buena composición de los elementos, dejando espacios libres para darle un aspecto ligero y no genere un cansancio visual.

Es esencial que el layout y la posición de los elementos se genere con base en el 8px grid system.

Typography

Los tamaños de la tipografía definida en esta product card, han sido dadas para generar un equilibrio ideal entre los títulos y la información relevante del producto a mostrar, es esencial que se respeten para lograr este objetivo.

Colors

Colores definidos con base en los fundamentos de color, se recomienda utilizar los colores exactos y mantenerlos en todas las plataformas para generar consistencia visual.

Elevation & Shape

La product card cuenta con un efecto muy ligero de sombra para dar la sensación de elevación sobre la superficie así como un efecto redondeado en las esquinas para darle un aspecto visualmente más suave.

Para más detalles de aplicación y especificaciones de estos efectos: Elevation & Shape

Comportamiento

Este componente cuenta con un comportamiento bastante sencillo, siendo sus principales características:

1. En el home de la versión desktop, se despliega en un carrousel de 4 columnas y una fila, puede ir desde 8 hasta 32 productos desplegados y navegables por medio de chevrones hacia la izquierda o derecha.
2. En el home de la versión app se despliega en un carrousel, con un solo ítem desplegado a la vista, para navegar en este carrousel se utiliza el swipe con el dedo a la derecha o izquierda.
3. Su comportamiento de interacción es como un botón que cubre toda su superficie, es decir, el usuario puede hacer click o un toque en cualquier parte de la Product Card y lo llevará al PDP del producto seleccionado.
4. Los badges o labels de ofertas y status pueden activarse o desactivarse según sea el caso o necesidad, en este diseño se cuenta con 3 espacios disponibles arriba y abajo de la foto del producto para este fin.