Por qué prefiero el diseño grid en vez de masonry

Si has creado o está construyendo actualmente un producto, estoy seguro de que tiene una "página de lista" donde hay muchos elementos. ¿Alguna vez te has preguntado qué diseño funciona mejor para tu sitio?

Constantemente me pregunto esto a mí mismo para poder mejorar la experiencia del usuario y la conversión para la comunidad mundial para los amantes de las plantas de interior que estoy construyendo.

Al principio, elegí un diseño de masonry porque pensé que era bonito, como se puede ver en la imagen de abajo.

Pero, ¿cuál es la mejor opción para mi producto? No precisamente. Te diré por qué finalmente elegí el diseño grid en vez del masonry:

Como sabrás, en América y Europa leemos e identificamos el contenido de arriba a abajo y de izquierda a derecha. Esto significa que analizamos el contenido visual y de texto en ese orden.

Cuando una persona visite tu aplicación, mirará en la esquina superior izquierda y luego seguirá hacia la derecha. Una vez que terminen la línea, irán hacia abajo formando un patrón en forma de F.

Con esto en mente, ¿ves el problema que tuve con el masonry?

En mi honesta opinión, el masonry hace que el contenido sea más difícil de analizar para las personas de América y Europa. Podemos facilitarles la vida con el uso de un diseño grid para que el usuario pueda seguir fácilmente su patrón natural de lectura.

Como puede ver en la imagen de arriba, el diseño masonry se ve bonito, pero aumenta la carga cognitiva.

La carga cognitiva es el esfuerzo mental total que se necesita para procesar información relacionada con el razonamiento y la toma de decisiones.

La información que se muestra en un diseño masonry aumenta más la carga cognitiva que la cuadrícula porque, como se comentó anteriormente, el diseño masonry dificulta la lectura y el análisis del contenido siguiendo un patrón visual de arriba a abajo y de izquierda a derecha, y esto significa peor experiencia de usuario.

Tengo más control sobre los elementos de la lista con un diseño grid.

Esto es un gran beneficio cuando pienso en anuncios porque puedo controlar fácilmente dónde colocarlos.

Puedo asegurar que los 3 anuncios siempre se muestran como yo quiero:

Esto es cierto para mi proyecto. Para hacer el diseño masonry, utilicé

display: flex

column-count

Los marcadores de posición de las imágenes no tenían la altura exacta de la imagen, y esto era un problema porque una vez que se descargaban las imágenes, las columnas de la altura del masonry eran diferentes y hacían que las imágenes se movieran entre columnas algunas veces.

Esto es muy malo para la experiencia del usuario porque visualmente las cosas se ven mal, y también es malo para el rendimiento web porque causa reflow y repaints.

¿Qué diablos significa esto? Re-flow es el proceso que cada navegador hace para recalcular el diseño de un elemento o un grupo de elementos cuando cambia su ancho, alto o posición (aunque esto puede ser pirateado a veces), y al final activa una nueva pintura.

Estos 2 procesos son costosos y deben optimizarse siempre que sea posible porque, de lo contrario, podríamos comenzar a ver algún retraso en nuestra aplicación web o sitio web.

No es algo nuevo que el contenido que está más cerca del final de la página, sea menos relevante para el SEO o debería serlo. Tiene sentido, ¿no? ¿Por qué colocaría el contenido más importante de su página en la parte inferior, donde los usuarios no pueden acceder a él fácilmente?

Con un diseño de cuadrícula, puedo colocar fácilmente los patrocinadores o los anuncios al final de la lista y colocarlos cuando quiera con solo CSS.

Esto es realmente bueno porque quiero colocar mi contenido más valioso para los usuarios en la parte superior de la página, y los anuncios no lo están.

Creo que el diseño grid es la mejor opción para todos los diseños, con algunas excepciones, porque hace que el contenido sea más fácil de leer.

Como se comentó anteriormente, esto significa menos carga cognitiva que se traduce en una mejor experiencia de usuario.

Una mejor experiencia del usuario está directamente relacionada con la felicidad del usuario y esto termina con la retención del usuario.