Design del menu QR: best practice 2026

Perché il design conta più del contenuto

Studi UX di Cornell (2021) e Nielsen Norman Group (2023) dimostrano che la scelta del cliente al ristorante è influenzata fino al 40% dal design del menu. Lo stesso piatto, presentato in 2 layout diversi, ottiene tassi di ordinazione molto differenti.

• Tempo di scelta: con menu mal progettato, cliente impiega 8-12 minuti per decidere (cattiva UX). Con menu chiaro: 3-5 minuti.
• Scontrino medio: con design eccellente +12-25% rispetto a menu basico (foto + abbinamenti + filtri).
• Tasso "chiedo consiglio cameriere": con menu confuso 60-70%, con menu chiaro 25-35%.
• Bounce rate: cliente che scansiona QR e chiude in <30 sec senza ordinare. Con menu lento o brutto: 25-40%.

I 5 pilastri di un buon menu QR

1. Gerarchia visiva chiara: il cliente capisce in 3 secondi struttura e categorie.
2. Foto professionali per le Star: piatti con foto vendono +30% (Cornell SHA).
3. Navigazione mobile-first: scroll fluido, tap target 44px+, tutto a portata di pollice.
4. Filtri accessibili: allergeni, vegan, gluten-free, fascia prezzo a 1 click.
5. Performance: caricamento <2 secondi anche con connessione 3G in ristorante affollato.

Gerarchia visiva: cosa il cliente vede prima

L'eye-tracking applicato a menu mobili mostra il percorso F-pattern: il cliente legge in alto a sinistra → scrolla a destra → torna a sinistra giù → scrolla. Cosa mettere dove:

Foto piatti: regole d'oro

Le foto sono il fattore singolo più impattante sul ordine: piatti con foto vendono +30% rispetto a piatti solo testo (Cornell SHA, 2009).

Regole tecniche

• Risoluzione: minimo 1200×800px, formato JPG/WebP ottimizzato (file <200KB per veloce caricamento).
• Aspect ratio uniforme: tutte le foto in 4:3 o 1:1 (square). Coerenza visiva.
• Illuminazione naturale: foto con luce naturale (vicino finestra) o luce LED diffusa. NO flash diretto.
• Composizione: inquadratura close-up dall'alto (45° angolo) o vista dall'alto ("flat lay").
• Sfondo neutro: piatto bianco/scuro su tovaglia neutra. NO fondi rumorosi.
• Coerenza brand: tutte le foto dello stesso fotografo, stessa atmosfera (rustica/elegante/colorata).

Quali piatti fotografare?

• SEMPRE: le Star del menu (alta popolarità + alto margine).
• SEMPRE: piatti signature / specialità della casa.
• Quando possibile: dolci e dessert (vendono molto con foto).
• Selettivo: piatti con presentazione spettacolare (es. flambé, taglio carne al tavolo).
• Mai: tutti i piatti! Se ogni piatto ha foto, l'occhio non sa dove guardare = paralisi decisionale.

Tipografia mobile

• Font: scegli 1 font serif (per nomi piatti) + 1 sans-serif (per descrizioni). Massimo 2 famiglie.
• Dimensione: testo descrizioni minimo 16px (preferibilmente 17-18px). Nome piatti 18-22px. Headline 24-32px.
• Line height: 1.5-1.6 per testo descrittivo. 1.2 per titoli.
• Peso: usa weight 400 (regular) per testo, 600-700 (semibold/bold) per nomi piatti.
• Allineamento: sinistra (mai justified su mobile, crea spaziatura strana).
• Larghezza riga: max 65-75 caratteri per riga (su mobile equivale a tutta la larghezza schermo).

Navigazione mobile-first

• Categorie come chip orizzontali scrollabili in alto: "Antipasti | Primi | Secondi | Dolci | Vini". Click salta alla sezione.
• Sticky navigation: mentre scorri, le categorie restano visibili in alto.
• Tap target ≥ 44×44px: ogni elemento cliccabile deve essere grande almeno quanto un polpastrello.
• Spaziatura tra elementi cliccabili: minimo 8px, preferibilmente 12-16px per evitare tap errati.
• Scroll smooth: animazione fluida quando salti tra sezioni (no jump istantaneo).
• Back to top button flottante dopo aver scrollato 500px.
• Search bar se hai >50 piatti: cliente cerca "vongole" e trova subito.

Filtri allergeni e dietetici

I filtri sono il differenziatore #1 di un menu digitale rispetto a un PDF:

• Allergeni (14 UE): ogni cliente celiaco/intollerante esclude piatti con quel componente con 1 tap.
• Vegano / Vegetariano: filtro rapido per dieta.
• Gluten-free: separato da allergeni perché spesso scelta lifestyle (non solo celiachia).
• Bambini / Kids friendly: piatti adatti.
• Light / Calorico: per chi fa attenzione alle calorie.
• Fascia di prezzo: filtra piatti €, €€, €€€.

Performance: velocità di caricamento

Un menu QR che non carica in 2 secondi perde clienti:

• Bounce rate se >3 sec: 32%
• Bounce rate se >5 sec: 65%
• Bounce rate se >10 sec: oltre 90%

Best practice tecniche:

• Foto in WebP (40-60% più leggere di JPG a parità qualità).
• Lazy loading immagini (carica solo quelle visibili).
• CDN per asset statici (Cloudflare, Vercel Edge).
• Server-side rendering o static generation per first paint immediato.
• Niente video autoplay in homepage menu.
• Hosted near user: server EU per ristoranti italiani.

Accessibilità WCAG

Il menu deve essere usabile da TUTTI, inclusi anziani, ipovedenti, persone con difficoltà motorie:

• Contrasto colore testo/sfondo: minimo 4.5:1 (standard WCAG AA), ideale 7:1 (AAA).
• Niente solo colore per indicare info: usa anche icone (es. allergeni con icona + testo, non solo pallino colorato).
• Testo alternativo per immagini: alt text per screen reader.
• Form e tap target: chiari, etichettati, accessibili da tastiera.
• Multilingua: traduzioni curate, non Google Translate (conformità + rispetto).
• Modalità dark/light: rispetta preferenza sistema operativo cliente.
• Zoom: il menu deve restare leggibile fino a 200% zoom browser.

I 12 errori più comuni

1. ❌ Caricare PDF cartaceo come "menu digitale"
2. ❌ Foto piatti basse risoluzione o stock photo da Google
3. ❌ Layout desktop invece di mobile-first
4. ❌ Testo sotto 14px illegibile per over 50
5. ❌ Troppi colori e font (più di 2 famiglie)
6. ❌ Mancanza filtri allergeni
7. ❌ Caricamento >3 secondi (PDF, immagini pesanti, server lento)
8. ❌ Tap target piccoli (<32px) che provocano click errati
9. ❌ Navigazione complicata, no chip categorie
10. ❌ Niente prezzo accanto al piatto (forza cliente a cercare)
11. ❌ Menu in 1 sola lingua in zona turistica
12. ❌ Niente CTA per prenotazione/ordine dopo che cliente ha visto i piatti