Una casa de meze de 26 mesas en Cesme, Izmir, sustituyo las finas lineas divisorias entre categorias por 24 pixeles de espacio en blanco — el tiempo en pagina subio 22% y el comportamiento de scroll se volvio mucho mas ordenado. Analizamos cuando funciona cada estilo.
Tres Tipos de Separador
Las cartas suelen apoyarse en tres tecnicas: lineas (1-2px solidas), espacio blanco (16-32px) y bloques de color. La linea es la mas ligera pero fatiga rapido. El blanco se siente natural. El bloque crea la jerarquia mas fuerte.
Material Design 3 es claro: el espacio en blanco es el separador mas potente. Las lineas pertenecen al contenido tabular (lista de alergenos). Los bloques de color se reservan para anclar atencion — especial del chef, promo limitada.
Por Que Gana el Blanco
En Cesme, la linea 1px #E5E7EB se cambio por 24px de separacion vertical. Los usuarios percibieron cada categoria como bloque independiente, el movimiento ocular siguio el patron F natural, los heatmaps mostraron pausas uniformes. Con lineas, los usuarios las trataban como obstaculos.
El blanco da aire a la tipografia: el contraste entre titulo y cuerpo crece solo. En movil es aun mas critico — pantalla pequena, cada pixel cuenta.
Cuando Usar Bloques de Color
Tres escenarios justifican un bloque: (1) categoria promocional ("Ofertas de la Semana"), (2) layout con fuerte marca y banda con tinte detras del titulo, (3) cartas muy largas (50+ items) con secciones principales.
- Ratio de contraste minimo 4.5:1 para WCAG AA.
- Saturacion 15-25%, los colores plenos cansan.
- No mas de dos bloques de color distintos por pagina.
FAQ
Las lineas son inutiles? No — en tablas nutricionales o de alergenos, una linea 1px mejora la lectura. Evitar solo entre categorias.
Cuanto espacio en movil? 16-24px es ideal. Mas de 32px la pagina se estira, menos de 16px no se nota.
Los bloques afectan al SEO? No — Lighthouse mide contraste y usabilidad, no el fondo. El CSS no altera la semantica HTML.
¿Te resultó útil? Compártelo.
Artículos relacionados
12 beneficios concretos de los menús QR (con datos reales)
Cero costes de impresión, +31 % en ticket medio, soporte para 20 idiomas: 12 raz…
Por qué las fotos del menú aumentan las ventas: guía para restaurantes
Los platos con fotos reciben hasta un 30 % más de pedidos. Aquí está la ciencia …
Por que los usuarios de Apple Pay esperan 12 segundos menos que Chip+PIN en restaurantes
Datos Visa 2024: chip+PIN 25.3s, Apple Pay 13.1s. Para una brasserie de 32 mesas…