Menu e navigazione

Modulo 4: Creare contenuti · Tempo di lettura: 7 minuti

Obiettivo della lezione: Dopo questa lezione sarà in grado di creare un menu chiaro, sia in un tema a blocchi sia in un tema classico, e saprà riconoscere un buon menu.

Concetti chiave: blocco navigazione, Editor del sito, Aspetto > Menu, posizione del menu, sottomenu, link personalizzato, menu mobile, menu nel footer, testo del link, accessibilità

Due modi, a seconda del Suo tema

Dove crea il menu dipende dal Suo tema (lezione 5.1):

• Tema a blocchi: il menu è un blocco navigazione nell'intestazione del sito. Lo modifica nell'Editor del sito (Aspetto > Editor > Navigazione, oppure nella parte di template Header).
• Tema classico: crea il menu in Aspetto > Menu e lì sceglie una posizione del menu offerta dal tema, come "Menu principale" o "Footer".

Non vede Menu sotto Aspetto, ma solo Editor? Allora sta usando un tema a blocchi. È un'incomprensione comune dopo il cambio di tema: "il mio menu è sparito". Il vecchio menu esiste ancora (è salvato nel database come elenco di voci di menu), ma il nuovo tema lo cerca in un altro punto. Nell'Editor del sito può importare un menu classico esistente nel blocco navigazione.

Cosa può contenere

Una voce di menu può essere:

• una pagina o un articolo del Suo sito;
• una categoria (in tal caso rimanda all'archivio di quella categoria);
• un link personalizzato: qualsiasi indirizzo, anche verso un altro sito, o un'ancora all'interno di una pagina (/diensten/#prijzen);
• in un tema a blocchi, anche altri blocchi nella navigazione, come un campo di ricerca, icone dei social media o un pulsante "Prenota un appuntamento".

Le voci di menu possono essere trascinate l'una sotto l'altra come sottomenu: in un tema classico trascinandole leggermente a destra, nel blocco navigazione con "Aggiungi un sottomenu" oppure trascinando una voce su un'altra.

Una voce di menu rimanda a una pagina, ma ha un'etichetta propria. Se in seguito modifica il titolo della pagina, l'etichetta nel menu non cambia automaticamente (mai in un menu classico, nel blocco navigazione dipende da come ha aggiunto la voce). Dopo una modifica del titolo, controlli quindi anche il menu.

Un buon menu

Un menu non è l'indice di tutto il Suo sito. È un'indicazione verso i pochi punti dove vogliono arrivare la maggior parte dei visitatori. Alcune linee guida:

• Poche voci principali: cinque, sette al massimo. Di più non entra comunque in uno schermo di telefono e i visitatori non le leggono.
• Al massimo un livello di sottomenu. Un sottomenu dentro un sottomenu è scomodo da usare su un telefono e confuso per gli screen reader.
• Anche l'intestazione di un sottomenu è un link. In molti temi un clic su "Servizi" apre il sottomenu, ma "Servizi" stesso è anche una pagina. Si assicuri che quella pagina esista e mostri qualcosa di sensato, oppure che la voce sia chiaramente solo un'intestazione.
• Parole comuni che i visitatori userebbero: "Prezzi", non "Le nostre opportunità di investimento".
• Contatti e l'azione principale (prenotare un appuntamento, ordinare) sempre raggiungibili, spesso a destra nel menu o come pulsante.
• Link legali (Privacy Policy, termini e condizioni, impostazioni dei cookie) appartengono a un menu nel footer, non al menu principale. Devono però essere sempre reperibili, su ogni pagina (lezione 9.3).

Mobile e accessibile

Su un telefono il menu solitamente si comprime in un pulsante con tre righe (il "menu hamburger"). Nel blocco navigazione imposta quando questo avviene (sempre, oppure solo su schermi piccoli). Lo testi sempre su un telefono vero:

• Riesce a toccare ogni voce con il pollice, senza toccare per sbaglio quella accanto?
• I sottomenu si aprono con un tocco, e si richiudono?
• Il menu si chiude quando sceglie una voce?

Per l'accessibilità (visitatori che usano uno screen reader o solo la tastiera) presti attenzione a:

• Testi dei link chiari. "Leggi tutto" o "Clicchi qui" non dicono nulla se uno screen reader legge tutti i link uno dopo l'altro. "Legga tutto sui nostri orari di apertura" invece sì.
• Uso con la tastiera: con Tab attraverso il menu, con Invio si apre una voce. La maggior parte dei temi e il blocco navigazione lo fanno bene; i menu fatti su misura con script spesso no.
• Un link verso un altro sito si apre preferibilmente nella stessa finestra. Se deve aprirsi in una nuova finestra, lo indichi chiaramente.

Altra navigazione

Oltre al menu principale, questi elementi aiutano i visitatori a orientarsi:

• un campo di ricerca (il blocco ricerca), soprattutto su un sito con molti articoli;
• i breadcrumb ("Home > Servizi > Web design"), spesso forniti da un plugin SEO o dal tema;
• link interni nei Suoi testi verso altre pagine (utili anche per il posizionamento, lezione 9.2);
• una pagina 404 che aiuta: con un campo di ricerca e link verso le pagine principali invece di un semplice "non trovato". In un tema a blocchi la modifica come template "404" nell'Editor del sito.

In pratica: come si presenta in un pannello

Nella Bacheca di WordPress:

• Tema a blocchi: Aspetto > Editor > Navigazione. Scelga il menu, aggiunga voci con il simbolo più, le trascini nell'ordine giusto, e nelle impostazioni del blocco navigazione scelga quando compare il menu mobile.
• Tema classico: Aspetto > Menu. Crei un menu, selezioni le pagine a sinistra e clicchi su Aggiungi al menu, trascini per ordinare, e in fondo selezioni la posizione del menu. Salvare.

Riepilogo

• In un tema a blocchi crea il menu con il blocco navigazione nell'Editor del sito; in un tema classico in Aspetto > Menu con una posizione del menu.
• Un menu indica la strada verso pochi punti importanti: poche voci, al massimo un livello di sottomenu.
• I link legali appartengono a un menu nel footer, sempre reperibile.
• Testi il menu mobile su un telefono vero e usi testi dei link che dicono qualcosa di per sé.
• Un campo di ricerca, link interni e una pagina 404 utile completano il menu.

Quiz

Esercizio

Esercizio D4.3: Un menu che funziona. Crei (o migliori) il menu principale del Suo sito con al massimo sette voci principali, un sottomenu e un link personalizzato, e un menu nel footer con la Sua Privacy Policy. Testi il menu mobile sul Suo telefono e usando solo la tastiera (Tab e Invio). Segni cosa funziona e annoti: che tipo di tema ha (a blocchi o classico), dove ha creato il menu, e quale testo di link ha migliorato e in che modo?

Per approfondire

Per lavorare direttamente in WordPress non abbiamo ancora articoli nostri; la documentazione ufficiale di WordPress è comunque molto ampia.

• Blocco navigazione (wordpress.org, in inglese): https://wordpress.org/documentation/article/navigation-block/
• Menu nei temi classici (wordpress.org, in inglese): https://wordpress.org/documentation/article/appearance-menus-screen/
• Editor del sito (wordpress.org, in inglese): https://wordpress.org/documentation/article/site-editor/