Separadores de categoria en el menu: lineas, espacio en blanco o bloque de color?

Un meze house de 26 mesas en Cesme separaba sus categorias con finas lineas grises. Al cambiarlas por 24 pixeles de espacio en blanco, el tiempo en pagina subio un 22 por ciento y el scroll se volvio mucho mas ordenado. El separador elegido influye directamente en lo que el cliente termina pidiendo.

Tres tipos de separador y su psicologia

La linea parece minimalista pero el cerebro la interpreta como barrera y produce una micro-pausa. El espacio en blanco da aire y agrupa por proximidad. El bloque de color es la senal mas fuerte y debe ser escaso.

Material Design 3 reserva las lineas para tablas densas; en un menu el valor por defecto debe ser 16 a 32 px de espacio.

Que separador para que categoria?

Con una sola cocina basta el espacio en blanco. Con varias cocinas o jerarquia, ayudan los bloques de color — maximo tres tonos.

• Espacio 24-32 px: dentro de una misma categoria.
• Linea 1 px opacidad 0.1: para subgrupos.
• Bloque de color: solo para categorias principales.

Datos A/B y patrones de scroll

El test de cuatro semanas registro 18 por ciento mas profundidad de scroll con la variante de espacio en blanco; el tiempo medio paso de 52 a 64 segundos y los add-to-cart subieron un 9 por ciento.

Una cafeteria en Karakoy bajo el bounce un 14 por ciento con bloques de color tematicos. El bloque funciona si se aplica con criterio.

FAQ

Puedo combinar los tres? Si, con jerarquia: bloque arriba, espacio al medio, linea en el nivel mas profundo.

Y en modo oscuro? Mantenga la opacidad de la linea entre 0.08 y 0.12.

Y la accesibilidad? Contraste WCAG AA 4.5:1 y una pista no cromatica adicional.

¿Te resultó útil? Compártelo.