Siti di ristoranti: navigazione accessibile, ordine riuscito!

Navigare sul sito di un ristorante, soprattutto quando si cerca di soddisfare una fame impellente, deve essere un’esperienza fluida, piacevole e senza sforzo. Purtroppo non è sempre così e alcune pratiche possono generare una frustrazione immediata. L’obiettivo principale è permettere ai visitatori di trovare rapidamente e facilmente l’informazione o il prodotto desiderato, una distinzione cruciale che deriva dall’osservazione delle interazioni.

1. Gli aspetti che non funzionano: la frustrazione del cliente

Questi elementi difettosi sono delle vere fonti di frustrazione per il cliente, incidendo direttamente sulla sua capacità di interagire con il servizio offerto.

A. Ricerca complessa

Uno dei problemi più frequentemente riscontrati sui siti dei ristoranti è la difficoltà a accedere rapidamente al contenuto principale, a cominciare dal menu. Ciò che dovrebbe essere un’azione semplice, come consultare il menu o effettuare un ordine, a volte si trasforma in una vera odissea, soprattutto per gli utenti poco familiari con i codici del web o con disabilità.

Questa complessità deriva generalmente da un menu di navigazione mal strutturato o poco esplicito. Le diciture sono talvolta troppo vaghe (“I nostri prodotti”, “Scoprire”, “Esplora”) o disperse in più sottomenu, costringendo l’utente a indovinare, cliccare a caso o rinunciare. A ciò si aggiunge l’uso di elementi interattivi poco accessibili, come menu a discesa non utilizzabili tramite tastiera o elementi dinamici non riconosciuti dai lettori di schermo.

Questa mancanza di chiarezza è tanto più problematica poiché riguarda un momento critico del percorso dell'utente: la ricerca dell'informazione centrale. Se il menu o il pulsante d'ordine non sono immediatamente visibili o comprensibili, questo genera una frustrazione quasi immediata. E questa frustrazione può avere una conseguenza diretta : l'utente lascia il sito e va altrove, da un concorrente più accessibile e più leggibile.

In breve, un menu di navigazione mal concepito non rappresenta solo un ostacolo d'uso, diventa un freno commerciale.

B. Menu non disponibile direttamente sul sito

Tra gli errori più incomprensibili figura l'assenza pura e semplice del menù sul sito web del ristorante. In questo caso, l'utente, pur motivato ad ordinare, si trova in un vicolo cieco: nessuna informazione sui piatti proposti, nessun accesso diretto all'offerta, nulla se non un vago rinvio a una pubblicazione sui social network.

Questa pratica è controintuitiva nell'era digitale. Il sito web dovrebbe essere la fonte principale e più affidabile di informazioni, soprattutto per qualcosa di così fondamentale come il menù. Costringerlo a essere consultato altrove, in una story Instagram effimera, in un post Facebook poco leggibile o in un PDF non accessibile, equivale a chiedere all'utente di fare uno sforzo supplementare e non giustificato.

Per gli utenti con disabilità, questo può rapidamente diventare una barriera invalicabile : i contenuti pubblicati sui social network non sono sempre accessibili ai lettori di schermo, le immagini del menù non sono accompagnate da testo alternativo, e le piattaforme terze non garantiscono né ergonomia né compatibilità con le tecnologie assistive.

Ma al di là dell'accessibilità, questa assenza di informazioni sul sito genera un fastidio universale. Ogni cliente, qualunque sia il suo profilo, si aspetta legittimamente di trovare le informazioni essenziali dove dovrebbe cercarle: sul sito ufficiale. Non includervi il menù significa rompere questa logica e rischiare di perdere il cliente già nei primi secondi di navigazione.

C. Conseguenze della difficoltà di navigazione

Queste “cattive pratiche” in materia di navigazione hanno ripercussioni dirette e negative sull'utente e, per estensione, sull'attività del ristorante:

• Generano della frustrazione dell'utente.

• Esse impongono uno sforzo supplementare al cliente per ottenere ciò che cerca.

• Di fronte a questi ostacoli, il cliente non ordina e si rivolge a un concorrente, il che si traduce in una perdita di ricavi diretta.

Più in generale, questa difficoltà di navigazione è un punto di attrito che incide non solo sulla soddisfazione del cliente ma anche sulla credibilità del marchio e sui segnali positivi inviati ai motori di ricerca. In altre parole, una cattiva esperienza utente può danneggiare la reputazione del ristorante e la sua visibilità online.

2. Gli aspetti che funzionano: semplicità e accessibilità per tutti

Per fortuna esistono buoni esempi che comprendono l'importanza di una navigazione chiara ed esplicita. Per esempio, prenderò il sito di una pizzeria dove ho l'abitudine di andare a ordinare.

A. Navigazione chiara ed esplicita

Questa pizzeria ha adottato un approccio molto efficace: mostra direttamente nel suo menu principale due pulsanti chiave. Uno è intitolato "Ordina online" e l'altro "Ordina per telefono". 

Qual è il vantaggio di questo approccio apparentemente semplice?

1. Risparmio di tempo immediato : Gli utenti trovano istantaneamente ciò che cercano, senza dover indovinare dove cliccare o sfogliare più pagine.

2. Maggiore accessibilità : Punto cruciale spesso sottovalutato: per le persone ipovedenti o non vedenti che usano lettori di schermo e la ricerca vocale, la chiarezza di questi pulsanti è un grande vantaggio. Un'etichetta chiara che indica precisamente dove porta il pulsante rende la ricerca vocale molto più semplice. Un pulsante come "clicca qui" non è utile per queste tecnologie, diversamente da "scopri la nostra mappa". È un passo enorme verso l'inclusione digitale.

B. Foto e ingredienti di un piatto

Al di là della sola navigazione, l'esperienza utente e l'accessibilità si estendono al modo in cui il contenuto viene presentato. Sul sito che ho analizzato ho osservato aspetti che meritano di essere evidenziati:

1. Descrizione degli ingredienti accanto alle foto : Un aspetto molto positivo è la presenza di descrizioni degli ingredienti accanto a ogni foto di piatto. Questo permette all'utente di conoscere esattamente la composizione, cosa estremamente utile per le persone con restrizioni alimentari, allergie o che semplicemente vogliono fare una scelta consapevole. È un eccellente esempio di trasparenza e attenzione verso il cliente.

2. Gestione delle immagini : La pagina che elenca le pizze si basa su una buona logica. Ogni immagine è accompagnata da una descrizione testuale completa degli ingredienti, il che rende le immagini non essenziali per la comprensione. Hanno un ruolo puramente illustrativo e possono quindi essere considerate decorative. Tuttavia, affinché un sito sia pienamente accessibile, queste immagini dovrebbero essere indicate esplicitamente come decorative nelle tecnologie assistive, assegnando loro un attributo alt vuoto (alt=""). Invece, se ritenete che la vostra immagine non sia solo decorativa potete compilare il tag alt con "[Nome della pizza] con [gli ingredienti]"

Tuttavia, per questo sito della pizzeria non è presente alcun attributo alt, il che può causare una lettura indesiderata da parte dei lettori di schermo (nome del file o percorso tecnico). Non basta quindi non inserire nulla: l'assenza dell'attributo è interpretata diversamente rispetto a un attributo vuoto. Questo aspetto meriterebbe di essere corretto per rispettare pienamente le buone pratiche di accessibilità.

3. Ora, spazio alle raccomandazioni 

Ora che abbiamo analizzato ciò che funziona e ciò che non funziona in termini di accessibilità sui siti di ristoranti, è il momento di trasformare queste osservazioni in azioni concrete.

A. Raccomandazioni generali per una navigazione ottimale

Per garantire un'esperienza utente fluida e accessibile, ecco le azioni essenziali da mettere in atto sul sito del vostro ristorante:

• Rendi il menu del tuo ristorante facilmente accessibile : Il collegamento al vostro menu deve essere visibile e chiaramente nominato già dalla pagina iniziale o nel menu di navigazione principale.

• Usa etichette dei pulsanti esplicite : Invece di termini generici, optate per espressioni chiare che indichino precisamente l'azione o la destinazione del clic. Per esempio, "Vedi il Menu", "Ordina Online", "Prenota un Tavolo", "Contattaci" sono esempi di etichette efficaci.

• Rendi più semplici le azioni principali : Se l'ordine telefonico è un'opzione popolare, un pulsante "Ordina per telefono" con il numero chiaramente mostrato è molto utile.

• Considera l'accessibilità vocale : Pulsanti con etichette precise e descrittive non sono utili solo per tutti gli utenti, ma sono indispensabili per le persone che utilizzano assistenti vocali o lettori di schermo. Questo rende il vostro sito utilizzabile da un pubblico molto più ampio.

• Evita informazioni frammentate : Tutte le informazioni importanti (menu, orari, contatti, indirizzo) devono essere centralizzate e facili da trovare sul vostro sito, senza costringere l'utente a navigare su altre piattaforme come i social network.

B. Raccomandazioni specifiche per le immagini

Le immagini svolgono un ruolo fondamentale nella comunicazione visiva sul web. Ma per molti utenti, in particolare coloro che utilizzano un lettore di schermo o che soffrono di disturbi cognitivi o visivi, possono diventare un ostacolo se non sono integrate correttamente. 

Ogni immagine deve essere accompagnata da un testo alternativo (alt) che descriva brevemente il suo contenuto o la sua funzione.

• Per una immagine informativa, l'attributo alt deve trasmettere l'informazione veicolata dall'immagine.

• Per una immagine puramente decorativa, usare un alt vuoto (alt="") ed escluderla dalla navigazione con role="presentation" o aria-hidden="true".

Le immagini non devono essere l'unico canale di informazione. Se un'informazione importante è trasmessa tramite un'immagine (grafico, pittogramma, mappa, ecc.):

• Fornite una descrizione testuale nelle vicinanze

• Usate aria-describedby per collegarvi una descrizione estesa se necessario.

Per le immagini complesse (schemi, infografiche, grafici):

• Usate una didascalia esplicativa sotto l'immagine.

• Fornite un testo equivalente o un riepilogo dettagliato, adiacente o collegato tramite ARIA.

Quando usate un'immagine come link o come pulsante interattivo:

• L'attributo alt dell'immagine deve indicare chiaramente l'azione che verrà avviata o la destinazione del link, piuttosto che limitarsi a descrivere l'immagine stessa o il nome del file. Per esempio, per un pulsante di download l'alt dovrebbe essere "Scarica il PDF della brochure".

Riepilogo: ciò che bisogna sempre verificare

Tipo di immagine	Attributo alt richiesto?	Contenuto dell'attributo alt
Immagine informativa	Sì	Descrivere ciò che l'immagine rappresenta
Immagine decorativa	Sì (alt="")	Vuota per essere ignorata dai lettori di schermo
Pulsante / collegamento	Sì	Indicare l'azione o la destinazione
Logo	Sì	Nome del marchio o dell'azienda
Grafico complesso	Sì + descrizione	Riassunto o equivalente testuale separato (didascalia, descrizione collegata)

L'accessibilità delle immagini è spesso trascurata, ma costituisce una componente essenziale di un sito web inclusivo. Applicando queste buone pratiche, garantite una migliore esperienza a tutti gli utenti, rispettando al contempo gli obblighi legali di accessibilità digitale.

C. Raccomandazioni: moduli di contatto accessibili

Per quanto riguarda i moduli di contatto, la loro accessibilità è fondamentale per garantire che tutti gli utenti, incluse le persone con disabilità, possano interagire e accedere ai servizi essenziali. Un modulo di contatto ben progettato è facilmente utilizzabile da chiunque.

Ecco i punti chiave da rispettare per un modulo di contatto accessibile, basandosi sugli standard WCAG e sul RGAA:

• Etichettatura chiara dei campi : Ogni campo (come il nome, l'indirizzo e-mail, il messaggio) deve avere un'etichetta visibile ed esplicita che ne descriva la funzione, e tale etichetta deve essere collegata al campo mediante il tag <label> con l'attributo for. È fondamentale evitare di fare affidamento solo sui placeholder, poiché possono essere invisibili agli ausili tecnici o scomparire durante la digitazione.

• Navigazione fluida con la tastiera : Un utente deve poter navigare nel modulo solamente con la tastiera (tasti Tab, Maiusc+Tab, Invio, Spazio). Tutti gli elementi interattivi devono essere raggiungibili e attivabili senza l'uso del mouse.

• Messaggi per lettori di schermo : Per gli utenti di screen reader, devono essere fornite descrizioni supplementari, ad esempio usando aria-describedby per collegare un campo a un messaggio di aiuto. Bisogna inoltre indicare se un campo è obbligatorio mediante gli attributi required e/o aria-required="true".

• Gestione chiara degli errori : Se si verifica un errore durante la compilazione, deve essere indicato chiaramente vicino al campo interessato, utilizzando un colore combinato a un testo esplicito e, se possibile, un'icona. I messaggi di errore devono inoltre essere leggibili da un lettore di schermo, tramite role="alert" o aria-live="assertive".

• Feedback all'utente dopo l'azione : Dopo l'invio corretto del modulo, deve essere visualizzato un messaggio di conferma e letto automaticamente da un lettore di schermo, utilizzando role="status" o aria-live="polite".

• Accessibilità mobile e zoom : I moduli devono essere responsive, cioè adattarsi agli schermi mobili, e poter essere ingranditi fino al 200% senza perdita di contenuto o sovrapposizioni.

Applicando queste raccomandazioni a tutti gli elementi del sito, dai menu ai moduli, si costruisce un'esperienza davvero inclusiva, coerente ed efficace per tutti gli utenti.

Bonus: i captcha nei moduli

I CAPTCHA sono spesso utilizzati per proteggere i moduli dai bot, ma pongono numerosi problemi di accessibilità. Il Il RGAA richiede che questi dispositivi siano utilizzabili da tutti, anche per le persone che usano uno screen reader o non possono usare il mouse. Ecco una tabella riassuntiva delle criticità e delle soluzioni accessibili raccomandate.

Conclusione: un'accessibilità che beneficia tutti

L'accessibilità digitale non è un lusso riservato a pochi utenti, ma una leva essenziale per migliorare l'esperienza di tutti i clienti, incluse le persone con disabilità. Un sito di ristorazione accessibile significa un sito più chiaro, più fluido, più efficace. L'esempio della pizzeria analizzata mostra che è possibile offrire una navigazione intuitiva e una presentazione visiva gradevole.

Adottando queste buone pratiche, i ristoranti non si limitano a conformarsi a delle norme: ampliano la loro clientela, migliorano il loro posizionamento organico e, soprattutto, dimostrano un vero rispetto per tutti i loro utenti.

L'articolo «Siti di ristoranti: navigazione accessibile, ordine riuscito!» è stato pubblicato sul sito Abbondanza.