Organizzare la navigazione di un'app - PT 1

Come organizzare efficientemente la navigazione in una web app moderna

# La navigazione ai fini dell'esperienza utente

La navigazione è uno dei temi cardine dell'Information Architecture, è ciò che consente all'utente di orientarsi all'interno dell'applicazione al fine di consumare contenuti e informazioni e compiere le azioni desiderate.

In virtù della definizione precedente il modo migliore di partire nella strutturazione della navigazione di un'app è quello di basarsi sul labeling e sulla sitemap; se è stato fatto un buon lavoro a riguardo, se sono stati identificati e utilizzati correttamente i termini, i contenuti e le convenzioni che l'utente si aspetta di trovare, l'individuazione delle pagine principali procederà senza troppi intoppi.

# Il processo di esplorazione

Un utente che cerca un determinato contenuto all'interno di un'applicazione deve essere sempre in grado di capire come orientarsi per raggiungerlo; quando ciò non avviene è a causa di una cattiva IA, di una navigazione e di funzionalità di ricerca progettate male. Un utente che non riesce a trovare quanto desidera è un utente frustrato, che sarà portato ad abbandonare l'utilizzo dell'app in breve tempo.

Pensiamo al caso del primo accesso ad un'applicazione. Quello che guida un utente neofita in questo caso è la percezione umana e le indicazioni visive che siamo stati in grado di disseminare sulle pagine. Tali indicazioni devono essere chiare e poco invasive, se sono necessarie troppe spiegazioni per far comprendere la navigazione dell'app evidentemente il sistema che abbiamo progettato è troppo complesso e risulterà di conseguenza poco usabile e appagante nell'utilizzo. E' sufficiente di base utilizzare i termini giusti per le voci dei menu di navigazione (defininendone un numero ristretto), dare loro visibilità all'interno dei layout in base alla loro importanza, riuscire a dare risalto alle sezioni di accesso e alle funzionalità di ricerca principali.

Un utente fidelizzato è invece un utente che si muove per abitudine, che conosce i percorsi che gli abbiamo insegnato e che quando non sa dove è posizionato un determinato contenuto si aspetta di replicare le modalità di ricerca che già conosce. Questo può accadere ad esempio quando vengono introdotte nuove funzionalità nell'applicazione. Dobbiamo evitare per quanto possibile lo stress di dover riapprendere i flussi di navigazione.

In termini di usabilità la navigazione deve essere:

  • Semplice - stabiliamo i punti di accesso, rendiamo le pagine principali facilmente raggiungibili ed evitiamo di generare troppe interconnessioni o percorsi di navigazione troppo profondi.
  • Predittiva - utilizziamo pattern di navigazione già conosciuti all’utente, facciamo in modo che si possa orientare all’interno dell’applicazione già dopo i primi minuti o addirittura senza averne alcuna esperienza pregressa. Prestiamo attenzione che anche le CTA che inseriamo nelle pagine siano predittive e non conducano l'utente su pagine che non si aspetta.
  • Consistente - all'interno di un’applicazione operano diverse entità, ognuna con un proprio contesto. Stabiliamo una gerarchia di navigazione comune e rispettiamola, definiamo delle tipologie di pagina che presentano i contenuti sempre nello stesso modo e e con gli stessi pattern di interazione, facciamo in modo che i collegamenti alle pagine secondarie e l'accesso ad esse sia sempre coerente.
  • Chiara - La scansione visiva di una pagina deve essere un processo mentale semplice e rapido; l'utente deve essere in grado di individuare gli elementi interattivi che si occupano della navigazione, deve riuscire ad identificare dal primo accesso i componenti di navigazione globali. E' importante inoltre che si possa distinguere visivamente la tipologia di link e, ricollegandoci al principio di predittività, dove esso conduce (sezione principale, sotto-sezione, link esterno).
  • Sicura - l'utente non deve mai essere messo in situazioni che possa avvertire come "di pericolo", deve essere sempre in grado di ritornare indietro nel suo percorso senza avere la sensazione di aver provocato danni, non deve accedere a pagine di cui non riesca ancora a capirne lo scopo. A riguardo è necessaria anche una forte attenzione in fase di sviluppo del rispetto delle indicazioni di design.

# Tipi di pagina

Una definizione di massima delle tipologie di pagina ci aiuta nell'aumentare la consistenza del sistema di navigazione e a dare un'impronta visiva più forte alla documentazione generata:

  • Navigation Pages - tutte le pagine che fanno da punto di accesso, che intendono condurre l’utente da qualche parte, come le homepage, gli indici di sezione, le pagine dei risultati di ricerca.
  • Consumption Pages - pagine che mostrano determinate informazioni riguardo una specifica entità o informazione di carattere accessorio.
  • Interaction Pages - form di creazione o di modifica di un’entità, form di login, pagine di ricerca.

# Livelli di navigazione

Successivamente all'individuazione delle pagine dobbiamo stabilire i collegamenti tra di esse. Anche in questo caso un raggruppamento in macro-categorie può esserci di aiuto:

  • Principali - Le rotte che collegano le pagine più importanti, quelle che fungono da punti di accesso alle sezioni; sono solitamente presenti nei menu e nella barre di navigazione, devono essere facilmente raggiungibili; tutti i flussi che ci conducono ai livelli “figli” di una sezione, come form e dettagli.
  • Secondarie- tutte le navigazioni che ci conducono a schermate di interesse accessorio.
  • Esterne - i flussi di navigazione che ci conducono all’esterno del nostro prodotto.

# Pattern UI per la navigazione

I pattern UI dedicati alla navigazione si evolvono e si adattano in base alle nuove tecnologie, alle mode e alle esigenze del tempo. Una regola che risulta sempre valida è quella di non eccedere nella quantità di informazioni mostrate per non disorientare l'utente e per consentirgli di prendere facilmente decisioni, in maniera tale da effettuare con rapidità la navigazione verso le pagine di suo interesse.

I componenti dedicati alla navigazione principale, come ad esempio un Drawer Menu, dovrebbero raggruppare le voci in maniera coerente e fornire accesso immediato a tutte le sezioni principali dell'applicazione, senza fare eccezioni, in maniera tale da preservare la consistenza della navigazione. Da questi componenti l'utente infatti si aspetta sempre di atterrare su un punto di accesso o su una sezione importante dell'applicazione, la cui visibilità deve essere sempre massima.

La navigazione secondaria deve poi essere gestita a partire dal nodo padre mediante l'utilizzo di link e riferimenti visivi chiari.

Prestiamo infine attenzione a rendere l'utente consapevole in ogni istante l'utente del punto dell'app in cui si trova, per permettergli di tornare indietro o ragionare sulle successive azioni da intraprendere. Navbar, header di sezione, breadcrumbs, selettori, sono tutti pattern che adattati al dispositivo in utilizzo (desktop o mobile) e coadiuvati ai riferimenti d'ambiente (ad esempio l'url sulla barra degli indirizzi del browser), sono la bussola che permette di preservare il senso di orientamento dell'utente.