Di tanto in tanto emergono — da parte dei clienti o su qualche sito di webdesign — idee bizzarre su come realizzare i menu principali. Alcune di queste idee riguardano:

1. L’uso di icone invece che di voci verbali per i menu principali
2. Nascondere di default il menu principale, rendendo visibile solo un’icona che lo attiva, come in molti siti mobile
3. L’uso di voci verbali fantasiose e poco rappresentative dei contenuti, ma collegate ad un progetto di comunicazione che preveda magari giochi di parole o espedienti mirati solo ad attirare l’attenzione nei menu.

Sono tutte idee sbagliate, che mostrano di non capire l’importanza del menu principale (ma vale anche per quelli secondari).

Il menu infatti è uno degli elementi più importanti perché, anche se non ci si clicca, contribuisce a far capire agli utenti di cosa il sito si occupa, cosa offre. Quindi particolare attenzione va posta nella scelta delle voci, nella loro rappresentatività dei contenuti e in quanto comprensibili esse siano per gli utenti.

Uso di icone invece di voci verbali

L’idea che le icone comunichino meglio e più efficacemente i contenuti è uno di quei miti del webdesign che periodicamente tornano a galla. Varie ricerche dimostrano che le icone sono poco comprensibili agli utenti, ad eccezione di un piccolo gruppo che è riconosciuto perché diventato familiare:

• la casa,
• la lente di ingrandimento,
• il carrello,
• le frecce di avanti e indietro, e, in misura minore,
• alcuni simboli come il + e il meno per aperture e chiusure, e la x per la chiusura/eliminazione (a seconda dei contesti)

I simboli dei brand

Altri simboli noti sono quelli dei brand, ma non vanno ovviamente usati come voci di navigazione, bensì per segnalare partnership o il supporto di un determinato servizio (ad esempio il pagamento con carte di credito o paypal) o per i pulsanti di condivisione social. Anche in quei casi, usare anche l’etichetta verbale è preferibile se l’obiettivo è la massima comprensibilità (se vi rivolgete ad un target di “iniziati”, di esperti, e non vi interessa un pubblico più ampio, allora è meno importante: ma quale vantaggio ricavate dall’omettere il testo?).

Usare al posto delle voci di menu dei simboli come il mondo, persone stilizzate, banconote, simboli astratti, icone di documenti e graffette, benché a qualcuno sembri una buona idea per particolari tipi di siti, significa una sola cosa: obbligare gli utenti a tirare a indovinare.

Sono icone non standard, il cui significato non è condiviso, è ambiguo e, anche una volta compreso per lo specifico sito, non è facilmente memorizzabile, proprio perché quelle icone significano cose diverse in contesti diversi.

Affiancare le icone alle voci verbali

Da anni chi si occupa di interazione uomo-macchina sa che le etichette verbali sono meno ambigue, più comprensibili, più precise, comunicano meglio i concetti rispetto alle icone. Questo rimane vero anche dopo 25 anni di web. I siti cambiano, ma il funzionamento del nostro sistema cognitivo no.

Qualcuno crede che senza le voci verbali queste creative icone sarebbero comprensibili ai più?

Naturalmente è possibile affiancare delle icone alle voci verbali: ma in quei casi sono le voci verbali a comunicare il significato, mentre le icone possono rafforzarlo o fornire appoggio visivo.

Nascondere il menu con l’icona ad hamburger

I siti mobili (specialmente in ottica responsive) hanno intrapreso l’abitudine a non mostrare il menu principale (quello sopra il contenuto) e a presentare al suo posto un’icona, nota come icona ad hamburger (qui la sua storia), che lo attiva a richiesta.

La nota (ma non troppo) icona ad hamburger, dai tre strati sovrapposti. Manca chiaramente il formaggio.

In tal modo si evita che il menu, già aperto, sposti troppo in basso il contenuto, dato lo scarso spazio a disposizione. Questa abitudine è legittima (entro certi limiti, ne parliamo tra poco) sul mobile, ma non dove lo spazio c’è, anzi, dove sta aumentando per effetto di display desktop sempre più grandi o a maggior risoluzione.

Dunque, la tendenza a usare l’icona dell’hamburger per nascondere il menu anche sui siti desktop è sbagliata. Serve solo a ridurre la visibilità del vostro contenuto, e a far sì che solo una piccola minoranza di utenti (quelli che cliccano sull’icona) vedano il vostro menu. Se volete darvi la zappa sui piedi è una buona idea. In tutti gli altri casi, no.

L’icona ad hamburger è poco consigliato anche per i siti mobili

In merito al menu a comparsa, va anche detto che l’uso dell’icona, anche per i siti mobile, non è consigliata. Benché il suo uso si stia diffondendo, vi sono molte evidenze che suggeriscono che pochi utenti ne capiscano il significato convenzionale. Anche perché non viene usata solo per questo scopo, come dovreste sapere se usate un browser come Chrome (guardate in alto a destra…) e come ci ricorda questo articolo del NNGroup.

Secondo una” serie di test A/B informali condotti su Exisweb, il modo migliore per far capire che vi è un menu nascosto è usare non un’icona, ma la voce “MENU” con un bordino arrotondato tutto attorno. Questa è la soluzione che ha il tasso di click maggiore. Ma i risultati non sono definitivi: il tasso di engagement (azioni svolte dopo l’apertura del menu) è lo stesso per diverse soluzioni. E utenti Android e iOS hanno comportamenti differenti.

Icone usate nei test A/B di Exisweb. La prima icona è quella più cliccata dagli utenti, la seconda è la classica icona “ad hamburger”.

Altri test dimostrano che la presenza della parola MENU, in compresenza all’icona, e un colore che stacchi dallo sfondo l’icona stessa, portano a una maggior conversione (non solo click, ma conversioni economiche).

Pochi click e i limiti dei test A/B

Attenzione, però: anche sui siti mobili, le percentuali di click su queste icone (sia che scegliate l’hamburger che la voce MENU) sono basse, e spesso non superano il 2%.

Sono indicazioni da prendere con le molle: i test A/B hanno valore solo per quello specifico sito e quelle scelte di design, e soprattutto registrano tutte le visite, anche quelle casuali, non motivate, sbagliate. Comunque sia è una minoranza di utenti quella che clicca sul menu. Ecco perché non ha proprio senso nasconderlo, a meno che non si sia obbligati dal poco spazio a disposizione, e sempre con l’obiettivo di ottenere un altro vantaggio: ad esempio far emergere il contenuto principale.

Questi test ci mostrano oltretutto anche i limiti dei test A/B, che spesso non sono risolutivi e vanno integrati con test di usabilità in presenza che ci consentano di capire anche* i perché dei comportamenti degli utenti* e di farci un’idea di ciò che risulta poco comprensibile.

L’uso di voci fantasiose

Per voci fantasiose intendo l’uso di voci che sembrino denotare una strategia di comunicazione da spot, piuttosto che con il profumo dell’informazione in mente. Voci cioè che vengono scelte perché “suonano bene assieme”, perché richiamano raggruppamenti metaforici, sinestetici, e che non hanno al centro la significatività semantica dal punto di vista dell’utente.

Sono per esempio le voci che iniziano tutte con la stessa lettera, come nelle filastrocche. O che rimano allo stesso modo. O che richiamano noti quintetti (le dita di una mano, per esempio), terzetti (oro, argento e bronzo), personaggi delle favole, colori, eccetera. Benché sempre meno frequenti, di tanto in tanto vengono proposte per i menu principali voci il cui unico criterio sia di tipo giocoso.

Scegliere la significatività semantica e la comprensibilità per l’utente

Le voci dei menu devono essere scelte invece con un’unico criterio: devono essere quelle che meglio fanno capire all’utente il distinto contenuto o gruppo di contenuti che rappresentano. Inoltre, le voci devono essere:

• Distinguibili fra di loro: non devono esserci voci che competono fra di loro per il medesimo significato (servizi e prodotti, servizi e servizi online, ecc.); è meglio evitare del tutto voci simili nel medesimo menu (vale anche per i menu a tendina, che mostrano un secondo livello, e dove magari due gruppi di voci possono avere delle sottovoci simili, presentate simultaneamente nella tendina)
• Comprensibili per l’utente: alcune voci rappresentano bene il contenuto, ma al prezzo di essere troppo gergali o tecniche. Bisogna chiedersi se l’utente cui ci rivolgiamo è in grado di capire quella voce
• Non generiche: benché sia forte la tentazione di scegliere voci molto generali, e di dettagliare all’interno, è invece importante che nei primi livelli dei menu (e negli ultimi) la significatività sia massima. Sono i momenti infatti in cui sbagliare scelta porta l’utente a commettere errori difficili da notare e recuperare.

Testare, testare, testare (anche solo le voci)

Per identificare le voci giuste non ci sono modi automatici o facili: vanno proposte diverse voci per ciascun gruppo di contenuti/sezione del sito, e vanno testati con utenti. Anche con test online, come il reverse card-sorting, ma pure con semplici test di usabilità in presenza in cui è utile discutere delle voci con gli utenti per capire i significati che essi vi attribuiscono.

Qualunque siano le nuove tendenze del webdesign, alcune cose non cambiano. L’importanza delle voci di menu è fra queste. Evitare gli errori più comuni (argomentando le ragioni) vi renderà la vita più facile e soprattutto eviterà errori di progetto che dovrete correggere in seguito, quando sarà evidente che non funzionano.