Menu con molti servizi: come renderlo semplice da usare sullo smartphone

Fare l’inventario delle voci e delle destinazioni

Elenca le voci presenti nel menu desktop e in quello mobile, indicando la pagina raggiunta. Segna duplicati, etichette generiche, collegamenti a pagine eliminate e servizi comparsi soltanto nel footer. Il numero delle voci da solo non descrive il problema: conta quanto sono distinguibili e quanto corrispondono a ciò che cerca il pubblico.

Raccogli alcune richieste reali ricevute dall’attività. Per un’impresa di impianti, “riparazione urgente”, “manutenzione programmata” e “nuovo impianto” possono rappresentare scelte diverse da quelle espresse dai nomi interni dei reparti. Non usare dati personali: bastano il tipo di necessità e le parole ricorrenti.

Prepara una tabella con etichetta, destinazione, gruppo e motivo della presenza nel menu. Quando una voce non ha un compito riconoscibile, verifica se debba restare al primo livello, essere collocata in un gruppo o diventare un collegamento contestuale. Non eliminare la pagina soltanto per accorciare l’elenco.

Raggruppare i servizi con un criterio comprensibile

Scegli un criterio principale per ogni gruppo: esigenza, tipo di servizio o pubblico. Mescolare nello stesso livello settori, tecnologie e reparti può obbligare il cliente a indovinare. Un servizio trasversale può essere raggiunto da più percorsi, purché etichette e destinazioni restino coerenti.

Non esiste un numero di voci valido per ogni attività. Verifica invece se una persona riesce a prevedere cosa troverà aprendo il gruppo e se le sue sotto-voci confermano l’aspettativa. La pagina di riepilogo deve aiutare a scegliere, non limitarsi a ripetere un elenco già presente nel menu.

Separare il comando di apertura dal collegamento alla pagina

Una voce come “Servizi” può avere due funzioni: aprire un sottomenu e portare alla pagina di presentazione. Se lo stesso tocco produce effetti diversi a seconda del punto o della durata, la navigazione diventa difficile da prevedere. Decidi un comportamento e rendilo visibile.

Puoi usare un comando che apre il gruppo e inserire al suo interno “Tutti i servizi”, oppure distinguere un collegamento testuale da un pulsante di apertura. Le aree devono essere sufficientemente separate da evitare attivazioni involontarie. Il modello W3C di navigazione con pannelli espandibili distingue pulsanti e collegamenti e documenta lo stato aperto o chiuso. È un esempio da adattare e collaudare, non codice da copiare senza verifiche.

Prova anche il secondo tocco e il passaggio fra gruppi. Il visitatore deve capire se sta chiudendo una sezione, aprendone un’altra o cambiando pagina. Non affidare l’unica apertura al passaggio del mouse: sul telefono quel gesto non corrisponde alla normale navigazione.

Mantenere il contesto quando il menu ha più livelli

Quando un sottomenu occupa tutto lo schermo, mostra il nome del gruppo e un comando di ritorno riconoscibile. Tornare al livello precedente, chiudere il menu e tornare alla pagina visitata prima sono operazioni differenti. Etichette come “Indietro ai servizi” possono chiarire la prima senza confonderla con la cronologia del browser.

Se mantieni i livelli nello stesso pannello, verifica scorrimento e visibilità delle voci aperte. Se sostituisci il pannello con uno nuovo, controlla dove finisce il focus e come si torna alla voce di partenza. Un elenco che salta all’inizio dopo ogni scelta costringe a ripetere la ricerca.

Esempio ipotetico: un produttore separa “Installazione”, “Manutenzione” e “Ricambi”. Dentro “Manutenzione” il titolo del pannello e una voce “Panoramica della manutenzione” aiutano chi non conosce ancora le singole formule. La pagina corrente può essere riconoscibile nel menu, senza trasformare ogni antenato in un collegamento indistinguibile.

Provare comandi, scorrimento e tastiera

Verifica il menu con un telefono reale, testo ingrandito e orientamento diverso. Etichette lunghe non devono coprire le frecce; il pulsante di chiusura deve restare raggiungibile; l’ultima voce non dovrebbe sparire dietro una barra fissa. Controlla anche il passaggio dal menu al contenuto della pagina.

Il W3C dedica criteri specifici alle dimensioni e alla distanza dei bersagli interattivi. Un controllo visivo delle icone non basta: conta l’area effettivamente attivabile e il rapporto con i comandi vicini. Chiedi al tecnico di verificarla insieme al focus e alle etichette disponibili per le tecnologie assistive.

Con la tastiera, prova apertura, attraversamento delle voci, chiusura e ritorno al comando iniziale. La navigazione del sito non richiede automaticamente il comportamento complesso dei menu di un’applicazione desktop. La guida ai controlli di accessibilità aiuta a estendere la verifica ai percorsi raggiunti dal menu.

Conservare collegamenti utili alle pagine dei servizi

Un menu più corto deve mantenere percorsi reali verso le pagine importanti. Non basta mostrare un’etichetta che attiva uno script se manca una destinazione raggiungibile. Chiedi al tecnico di distinguere i pulsanti che aprono i gruppi dai collegamenti che portano ai contenuti.

Il tutorial W3C sulla struttura dei menu descrive come rappresentare navigazione e gerarchie. Affianca al menu pagine di riepilogo, breadcrumb e collegamenti nelle descrizioni dei servizi. Questi percorsi aiutano anche chi arriva direttamente a una pagina interna e deve capire quali alternative offre l’attività.

Confronta inoltre la disponibilità dei contenuti tra desktop e smartphone. Compattare il menu non deve isolare pagine che restano utili ai clienti. Se il catalogo dei servizi è molto ampio, valuta una ricerca interna ben progettata, mantenendo comunque una navigazione comprensibile per chi non conosce il termine da digitare.

Validare il nuovo menu con compiti concreti

Prepara alcuni obiettivi senza suggerire la voce da scegliere: trovare un servizio urgente, confrontare due formule, raggiungere una sede o tornare a un’informazione appena letta. Chiedi a persone che non conoscono il progetto di svolgerli sul telefono. Annota esitazioni, gruppi aperti per errore e punti in cui chiedono aiuto.

• I nomi dei gruppi anticipano il contenuto.
• Aprire un sottomenu e visitare una pagina sono azioni distinguibili.
• Ritorno e chiusura funzionano senza perdere l’orientamento.
• Le voci restano leggibili con testo ingrandito.
• I servizi importanti hanno destinazioni e percorsi verificati.

Confronta le osservazioni con la versione precedente e modifica le etichette che hanno creato dubbi. Non dedurre il successo dal solo numero di clic sul menu: più aperture possono indicare curiosità oppure difficoltà. Un test di usabilità centrato sui compiti aiuta a distinguere questi casi.

Domande frequenti

Quante voci dovrebbe avere un menu mobile?

Non c’è un numero adatto a tutti i siti. Conta che gruppi e nomi siano comprensibili e che i servizi importanti restino raggiungibili. Un elenco breve ma ambiguo può funzionare peggio di una struttura più ampia organizzata bene.

La voce principale deve aprire il sottomenu o una pagina?

Entrambe le scelte sono possibili, ma il comportamento deve essere chiaro. Puoi separare collegamento e pulsante di apertura, oppure usare un comando di apertura e inserire nel gruppo un link esplicito alla pagina di riepilogo.

Posso togliere dal menu mobile i servizi meno richiesti?

Puoi ridurre ciò che appare subito, mantenendo collegamenti chiari attraverso gruppi e pagine di riepilogo. Prima di escludere una voce verifica che il servizio resti reperibile e che il cambiamento non interrompa percorsi utili.