7 reglas de oro del diseño de menú móvil

Un menú móvil no es un menú de escritorio reducido. La pantalla pequeña, la conexión a menudo lenta y el uso con una mano imponen decisiones de diseño propias. Estas siete reglas afectan directamente el ticket promedio y la satisfacción del cliente.

1. Texto de cuerpo nunca bajo 16 px

16 px (1 rem) es el umbral. Debajo, el cliente hace zoom manual, lo que rompe la navegación. Recomendación: cuerpo 16-18 px, nombre de producto 18-22 px, título de categoría 22-28 px.

2. Objetivos táctiles mínimo 44 × 44 px

Apple HIG y Google Material piden 44 × 44 px. Más pequeño = 15-23% más errores. Entre pestañas, al menos 8 px de separación.

3. Jerarquía en F-pattern

La lectura móvil es vertical. Coloca lo destacado arriba del todo, fija la barra de categorías. Si la lógica del menú no se entiende en 5 segundos, gana el botón atrás.

4. WebP/AVIF y lazy loading

WebP es 30% más ligero que PNG. AVIF otro 15-20% menos. Las imágenes solo se cargan al abrir la categoría — <img loading="lazy">.

5. Regla de los tres segundos

LCP bajo 3 s. Prueba con 3G simulado — el Wi-Fi del local rara vez va mejor. Bundle JavaScript bajo 150 KB.

6. Paleta máximo 4-5 colores

Color de marca + secundario + acento + negro + blanco. Iconos de alérgenos por forma Y color — 1 de cada 12 hombres es daltónico rojo-verde.

7. Test con una mano

Coloca acciones críticas en la mitad inferior — regla de la zona del pulgar. Plataformas móvil-first como thMenu siguen estos patrones; verifica si personalizas.

Un menú móvil bien afinado sube los pedidos un 12-18%. Mal afinado, devuelve al cliente al mesero y borra la ventaja digital.

¿Te resultó útil? Compártelo.