En todo diseño nos enfrentamos a una decisión aparentemente sencilla pero que puede suponer una gran diferencia. ¿Cómo presento mis productos en móvil? No nos referimos a qué contamos sobre el producto sino cómo vamos a poner el listado de productos, categorías, etc.

list-gridHay 2 métodos principales, ponerlos en forma de listado uno debajo de otro, o en forma de cuadrícula.

En forma de listado todo el contenido se presenta en una única columna. Predomina el texto frente a la imagen. Se podría añadir un icono o una miniatura de imagen pero el usuario elegirá dónde hacer clic en base al texto. Permite presentar más información y más elementos en menos espacio.

La cuadrícula por el contrario puede presentar el contenido en 2 o más columnas. Lo importante es la imagen. De hecho se pone la cantidad mínima de texto necesario para no alargar demasiado el scroll. Aquí la decisión se toma en base a las imágenes.

Cada forma tiene sus pros y contras y dependiendo del momento y de la información a presentar será más recomendable una forma o la otra.

Listado

El listado hace que el usuario escanee la página de manera habitual, es decir en forma de “F”. Va leyendo de izquierda a derecha y de arriba a abajo. Las listas son la mejor opción para presentar información homogénea. Este formato “ahorra” espacio, se pueden presentar muchas opciones en solo un pantallazo, lo que reduce el scroll. Sin embargo hay que tener en cuenta que la atención del usuario se reduce de las opciones superiores a las inferiores.

Es una buena opción para presentar las notificaciones de una aplicación por ejemplo. El usuario elige en función del texto de cada opción, es una elección más racional.

list

Cuadrícula

La cuadrícula es la manera más llamativa de presentar las opciones al usuario. El peso recae sobre la imagen, por lo que en el caso de los ecommerce poder enseñar una imagen llamativa de sus productos es muy positivo. El usuario es capaz de escanear muy rápido las diferentes opciones, tomando decisiones más rápidas e impulsivas. Dependiendo de las imágenes, habrá algunas que llamen mucho la atención mientras que otras pasarán totalmente desapercibidas.

Su principal problema es el espacio. En un pantallazo no se podrán mostrar más de 4 o 6 productos, por lo que hará falta hacer mucho scroll para ver más productos. Si el usuario no encuentra lo que busca tendrá que invertir más esfuerzo en localizarlo que en una lista.

Sin embargo, mostrar los productos en forma de cuadrícula cuando el usuario ya ha aplicado varios filtros o su selección es más específica reduciendo las opciones, mejora la experiencia de usuario. Es decir, si por defecto utilizamos la cuadrícula para mostrar todos los productos de la tienda sobrecargaremos de información al usuario, Mientras que si solo lo utilizamos dentro de una categoría de productos que el usuario ya haya elegido, le ayudará a encontrar el producto que buscaba con mayor rapidez.

grid

¿Cuál es mejor?

Sencillamente DEPENDE. Cada forma tiene sus pros y contras, pero dependiendo de la cantidad de información que sea necesaria para que el usuario tome una decisión entre los productos expuestos será más recomendable un formato o el otro. Los detalles de productos es mejor presentarlos como listado, mientras que las imágenes como cuadrícula. Los productos que no requieran demasiada información, como la ropa es preferible mostrarlos como cuadrícula. El usuario elige por la imagen, no por la composición del tejido por ejemplo.

Algunos ecommerce como Amazon, permiten al usuario mostrar la información como ellos prefieran. Cambiando entre lista y cuadrícula se puede adaptar la información al usuario.

Cambio grid list

Privacy Preference Center

Cookies propias

Se usan para saber si ya aceptaste nuestras políticas y para servir más rápidos los contenidos.

PHPSESSID, etBloomCookie_optin_1, gdpr

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación.

NID, _ga, _gid
NID, _ga, _gid

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?