Menu digitale ristorante: come progettarlo davvero, partendo da uno schermo che sbaglia tutto

È una schermata orizzontale, formato 16:9, pensata chiaramente per un monitor appeso sopra un bancone: in alto a destra la firma di un piccolo locale, NO33 Poliklinik Cafe. Il fondo imita una carta quadrettata invecchiata, con una vignettatura scura agli angoli e una texture a maglia fitta che corre dietro ogni riga di testo. Tre blocchi: a sinistra una colonna lunghissima di primi piatti, a destra in alto colazione e insalate, sotto le zuppe. Titoli in maiuscolo dorato con spaziatura larghissima, voci in grassetto marrone, prezzo a sinistra, un punto medio come separatore, le calorie in corsivo chiaro. Visto sullo schermo del computer è perfino elegante. Visto da tre metri, in coda, con la giacca in mano e qualcuno dietro, diventa un’altra cosa.

Di board come questo ne ho disegnati e corretti parecchi, dalle caffetterie ai self-service aziendali, e ogni volta la discussione iniziale è la stessa: abbiamo preso un 4K, ci sta tutto il listino. No. La risoluzione del pannello non ha praticamente nulla a che vedere con la leggibilità di un menu. Conta la distanza da cui si guarda, conta quanta luce c’è intorno, conta quante righe l’occhio riesce a processare prima di arrendersi.

Cosa funziona e cosa si rompe in questa schermata

Parto dalle cose giuste, perché ce ne sono. La griglia a tre blocchi è chiara e i tre titoli di sezione si leggono prima di tutto il resto: sono gli unici elementi davvero grandi e con un colore diverso. Soprattutto, i prezzi sono allineati a destra contro il punto separatore, così i nomi dei piatti partono tutti dalla stessa colonna: è una soluzione sobria che evita il disastro dei puntini di guida, quell’eredità dei menu stampati che su schermo produce solo file di rumore orizzontale.

Poi si rompe tutto. Il fondo texturizzato è il nemico numero uno: il testo marrone scuro poggia su un marrone medio che varia da zona a zona, più chiaro al centro e più scuro agli angoli, quindi il contrasto non è costante nemmeno all’interno della stessa colonna. Le calorie in corsivo chiaro, su quel fondo, in certe righe quasi spariscono. E poi ci sono tre voci con il prezzo semplicemente mancante: compare la sigla TL senza numero, per la pasta al curry e per due zuppe. Non è un dettaglio estetico, è un errore di produzione che un cliente nota subito e che mina la fiducia nel resto del listino. Ogni volta che consegno un board digitale lascio al gestore una regola sola: se un prezzo non c’è, la riga non va in onda.

La leggibilità la decide la distanza, non il pannello

L’occhio umano, in condizioni normali, distingue un dettaglio di circa un primo d’arco, e una lettera leggibile al limite dell’acuità occupa più o meno cinque primi. Ma leggere al limite è faticoso: le norme ergonomiche sui display elettronici ragionano infatti in angolo visivo e collocano l’altezza di carattere confortevole molto più in alto della soglia, attorno ai venti primi d’arco. Tradotto in millimetri: a tre metri di distanza una lettera comoda sta sui quindici-diciotto millimetri di altezza reale sullo schermo; a cinque metri siamo sui venticinque-trenta. Su un monitor da 55 pollici, alto circa 68 centimetri, una lettera da 18 millimetri significa che in verticale ci stanno poco più di trenta righe di testo in tutto, interlinea compresa. Questa schermata, con undici voci nella sola colonna di sinistra più titoli e sottotitoli, sta già oltre.

Da qui la regola operativa che uso in cantiere: prima si misura la distanza del cliente in coda, poi si calcola l’altezza minima delle lettere, e solo alla fine si decide quante voci entrano. Mai il contrario. Il 4K serve a rendere pulito il bordo delle lettere e a non sfarinare le immagini, non a stipare più righe: se riduci il corpo per farci stare tutto, il pannello ti restituisce una grafica nitidissima e illeggibile.

Il contrasto su schermo emissivo: dimentica la tinta, guarda la luminanza

La domanda che mi fanno sempre è se scurire o schiarire il fondo stanchi l’occhio. È la domanda sbagliata. Su un display emissivo quello che conta è lo scarto di luminanza fra testo e sfondo, non quanto è calda o fredda la tinta. I criteri di accessibilità più usati al mondo fissano un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande: non sono numeri per siti web e basta, sono numeri che descrivono l’occhio umano. Questo marrone su marrone, in parecchi punti, non ci arriva.

C’è un secondo fattore che in laboratorio non si vede: l’ambiente. Un locale illuminato secondo i criteri delle norme sull’illuminazione degli interni ha faretti a soffitto che picchiano sul vetro del monitor, e se il pannello è lucido il riflesso somma una velatura chiara uniforme su tutta l’immagine. Quella velatura alza la luminanza del nero e schiaccia il contrasto reale. Un fondo texturizzato, già di suo ambiguo, con un riflesso sopra diventa una nuvola. Io il fondo lo tengo pieno, piatto e scuro, e ci metto testo quasi bianco: è la configurazione che perde meno in condizioni reali.

Ventuno voci sono troppe, e non è un’opinione

La colonna di sinistra qui contiene undici piatti di fila. La ricerca classica sui limiti della memoria di lavoro parla di una capacità di pochi elementi alla volta, e gli studi sull’eccesso di scelta mostrano che davanti a un assortimento grande le persone guardano di più e scelgono di meno. Nella pratica del banco questo si vede benissimo: oltre sette-nove voci consecutive la lista smette di essere letta riga per riga e viene saltata a blocchi, di solito con lo sguardo che va alla prima, all’ultima e a quella con il prezzo più alto.

C’è poi un pezzo di ricerca che ha smontato una leggenda del settore. Per decenni si è detto che esiste un punto dolce del menu, in alto a destra, dove piazzare i piatti a margine migliore. Uno studio con eye-tracking su menu reali ha mostrato che la gente legge il menu come legge un libro, in sequenza, e che quei punti magici non risultano statisticamente: alcune zone, semmai, funzionano al contrario. Il che cambia il modo di progettare: non si cerca la casella fortunata, si lavora sull’ordine di lettura e sul respiro fra i blocchi.

La soluzione per un listino enorme non è comprimere, è spezzare. Tre o quattro schermate a rotazione da otto-dieci secondi l’una, ciascuna con un massimo di sette-otto voci e titoli di sezione persistenti, reggono molto meglio di una schermata unica fitta. Lo spazio bianco qui non è decorazione: è lo strumento con cui dichiari dove finisce un gruppo e dove ne comincia un altro.

Prezzi, calorie e l’ordine in cui l’occhio li incontra

In questa grafica il prezzo viene prima del nome del piatto. È una scelta forte, e per un locale di quartiere con prezzi chiari può anche avere senso: dichiara trasparenza. Ma sposta l’attenzione sul numero prima che la persona sappia cosa sta comprando, e con i prezzi incolonnati così la lettura verticale della colonna dei numeri diventa automatica, quasi un confronto a tabella. Una ricerca condotta in un ristorante vero dalla scuola di hotel management di Cornell ha confrontato formati di prezzo diversi e ha trovato che la versione con il solo numero, senza simbolo di valuta e senza prezzo scritto in lettere, era associata a spese medie più alte. Qui la sigla della valuta è ripetuta ventuno volte: si potrebbe dichiararla una volta sola in testa alla sezione e lasciare i numeri nudi.

Le calorie accanto a ogni piatto sono un’informazione utile, ma trattate così competono con il nome: stesso asse, stessa riga, separatore identico. Io le porto su una seconda riga, in corpo minore e in un grigio più tenue, e le lascio al loro ruolo di nota, non di titolo.

Se questo board fosse in Italia: gli allergeni non sono un QR in un angolo

Qui di allergeni non c’è traccia, e in un locale italiano questo sarebbe un problema serio. Il regolamento europeo sulle informazioni alimentari ai consumatori ha esteso l’obbligo di indicare le sostanze allergeniche anche agli alimenti non preimballati, quindi ai piatti serviti al banco e al tavolo, e il Ministero della Salute ha dato indicazioni operative su come questa informazione vada resa disponibile al consumatore prima della scelta e in forma scritta e accessibile.

Il QR code può essere parte della soluzione, non la soluzione. Un quadratino di due centimetri in basso a destra, su uno schermo a tre metri da chi ordina, non è inquadrabile e di fatto non esiste: va dimensionato sulla distanza esattamente come il testo, affiancato da una dicitura leggibile che dica dove trovare l’informazione completa, e accompagnato da un supporto alternativo al banco per chi non ha lo smartphone a portata. Nei locali dove l’ho impostato così, il personale ha smesso di dover rispondere a voce quindici volte al giorno, e questo è il vero guadagno operativo.

Tre prove che puoi fare domani, senza strumenti

La prova dei tre passi indietro. Mettiti dove sta davvero il cliente che ordina, non davanti al monitor. Se devi inclinare la testa o strizzare gli occhi per leggere un prezzo, il corpo tipografico è sbagliato: non serve altro test.
La prova dei tre secondi. Guarda la schermata per tre secondi e poi voltati. Quante voci ricordi? Se ne ricordi due su venti, il problema non è la memoria: è che il board non ha gerarchia.
La prova in bianco e nero. Trasforma la grafica in scala di grigi. Se il testo e il fondo diventano due grigi vicini, come succede a questo marrone su marrone, il contrasto non regge e nessuna texture elegante lo salverà sotto i faretti.

Questo board non è brutto: è un oggetto grafico curato, con una sua identità da bottega. Ma è stato progettato guardandolo da cinquanta centimetri, e verrà letto da tre metri. Quasi tutti gli errori che vedo nei menu digitali nascono esattamente lì, in quella distanza che nessuno misura.

Fonti

Tag:Comunicazione del progetto