Nozioni di base sulla progettazione degli spostamenti per le app di Windows
Se pensi a un'app come a un insieme di pagine, il termine spostamento descrive l'atto di spostarsi tra le pagine e all'interno di una pagina. È il punto di partenza dell'esperienza utente e rappresenta il modo in cui gli utenti trovano il contenuto e le funzionalità a cui sono interessati. È molto importante e può essere difficile da comprendere nel modo corretto.
Esiste un gran numero di opzioni disponibili per lo spostamento. È possibile:
Richiedere agli utenti di passare attraverso una serie ordinata di pagine.
Fornire un menu che consenta all'utente di passare direttamente a una pagina desiderata.
Inserire tutti gli elementi in una singola pagina e fornire meccanismi di filtro per visualizzare il contenuto.
Anche se non esiste una singola progettazione della struttura di spostamento funzionante per tutte le app, puoi fare riferimento a una serie di principi e linee guida per decidere la struttura più appropriata per la tua app.
Principi di buona progettazione per la struttura di spostamento
Iniziamo con i principi di base per una buona progettazione della struttura di spostamento:
- Coerenza: soddisfare le aspettative degli utenti.
- Semplicità: non fare più del necessario.
- Chiarezza: fornire percorsi e opzioni comprensibili.
Coerenza
Lo spostamento deve essere coerente con le aspettative degli utenti. L'uso di controlli standard noti agli utenti e di convenzioni standard per le icone, la posizione e gli stili rende lo spostamento prevedibile e intuitivo per gli utenti.
Gli utenti si aspettano di trovare determinati elementi dell'interfaccia utente in posizioni standard.
Semplicità
Riducendo la quantità degli elementi di spostamento si semplificano le scelte che gli utenti devono fare. Consentendo un facile accesso alle destinazioni importanti e nascondendo gli elementi meno rilevanti si permette agli utenti di accedere più rapidamente al contenuto desiderato.
Presentare gli elementi di navigazione in un menu di navigazione familiare.
Non sovraccaricare gli utenti con numerose opzioni di navigazione.
Clarity
La presenza di percorsi chiari permette agli utenti di spostarsi in modo logico. Con opzioni di spostamento intuitive e relazioni comprensibili tra le pagine, è meno probabile che gli utenti rimangano disorientati.
Le destinazioni sono etichettate con chiarezza per consentire agli utenti di sapere dove si trovano.
Raccomandazioni generali
Prendiamo ora in considerazione i nostri principi di progettazione, vale a dire coerenza, semplicità e chiarezza, e usiamoli per definire alcune indicazioni generali.
- Pensa agli utenti. Traccia i percorsi che potrebbero in genere seguire nell'app e, per ogni pagina, rifletti sul perché l'utente si trova lì e dove potrebbe volere andare da lì.
- Evita gerarchie di spostamento complesse. Se si superano due livelli di spostamento, fornire una barra di navigazione che mostra all'utente dove si trovano e si tornerà rapidamente indietro. In caso contrario, si rischia di incagliare l'utente in una gerarchia profonda che avrà difficoltà a lasciare.
- Evitare il pogo stick, il quale si verifica quando è presente contenuto correlato, ma per passare a quest'ultimo l'utente deve accedere a un livello superiore, quindi di nuovo a quello inferiore.
Usare la struttura appropriata
Ora che hai familiarità con le regole e i principi di spostamento generali, è il momento di scegliere come strutturare la tua app. Esistono due strutture generali: piatta e gerarchica.
Piatta/laterale
In una struttura piatta/laterale, le pagine sono affiancate. È possibile passare da una pagina a un'altra in qualsiasi ordine.
È consigliabile usare una struttura piatta quando:
- Le pagine possono essere visualizzate in qualsiasi ordine.
- Le pagine sono chiaramente distinte l'una dall'altra e non hanno una relazione padre/figlio ovvia.
- Sono presenti meno di 8 pagine nel gruppo.
Quando ci sono più pagine, potrebbe essere difficile per gli utenti capire come le pagine sono univoche o comprendere la posizione corrente all'interno del gruppo. Se non pensi che si tratta di un problema per la tua app, vai avanti e fai in modo che le pagine siano peer. In caso contrario, è consigliabile usare una struttura gerarchica per suddividere le pagine in due o più gruppi più piccoli.
Gerarchico
In una struttura gerarchica, le pagine sono organizzate in una struttura ad albero. Ogni pagina figlio ha un solo elemento padre, ma una pagina padre può avere una o più pagine figlio. Per raggiungere una pagina figlio, si passa attraverso l'elemento padre.
Le strutture gerarchiche sono utili per organizzare contenuti complessi che si estendono su diverse pagine. Lo svantaggio è il sovraccarico del sistema di spostamento: più complessa è la struttura, più operazioni dovrà eseguire l'utente per passare da una pagina all'altra.
È consigliabile una struttura gerarchica quando:
- Le pagine devono essere attraversate in un ordine specifico.
- Esiste una chiara relazione padre-figlio tra le pagine.
- Sono presenti più di 7 pagine nel gruppo.
Combinazione di strutture
Non è necessario scegliere una struttura o l'altra: molte app ben progettate usano entrambi i tipi di strutture. Un'app può usare strutture piatte, per le pagine di primo livello che possono essere visualizzate in qualsiasi ordine, e strutture gerarchiche, per le pagine con relazioni più complesse.
Se la struttura di spostamento ha più livelli, è consigliabile collegare gli elementi di spostamento peer-to-peer solo ai peer all'interno del sottoalbero corrente. Considera la figura a lato, che mostra una struttura di spostamento con due livelli:
- Al livello 1, l'elemento di spostamento peer-to-peer dovrebbe consentire l'accesso alle pagine A, B e C.
- Al livello 2, gli elementi di spostamento peer-to-peer per le pagine A2 devono essere collegati solo alle altre pagine A2. Non devono essere collegati a pagine di livello 2 nel sottoalbero C.
Usare i controlli appropriati
Dopo aver stabilito una struttura di pagine, è necessario decidere come gli utenti si sposteranno tra quelle pagine. La piattaforma XAML offre un'ampia gamma di controlli di spostamento per garantire un'esperienza di spostamento coerente e affidabile nell'app.
Con poche eccezioni, qualsiasi app con più pagine usa un frame. In genere, un'app ha una pagina principale che contiene il frame e un elemento di spostamento principale, ad esempio un controllo visualizzazione struttura. Quando l'utente seleziona una pagina, il frame la carica e la visualizza.
Visualizza un elenco orizzontale di link alle pagine dello stesso livello. Il controllo NavigationView implementa il modello di spostamento superiore.
Usa lo spostamento superiore quando:
- Vuoi visualizzare tutte le opzioni di spostamento sullo schermo.
- Vuoi più spazio per il contenuto dell'app.
- Le icone non possono descrivere in modo chiaro le categorie di spostamento.
Visualizza un set di schede orizzontale e il relativo contenuto. Il controllo TabView è utile per la visualizzazione di diverse pagine (o documenti) e al tempo stesso offre all'utente la possibilità di ridisporre, aprire o chiudere le schede.
Usa le schede quando:
- Vuoi consentire agli utenti di aprire, chiudere o ridisporre le schede in modo dinamico.
- Prevedi che possano essere aperte numerose schede contemporaneamente.
- Prevedi che gli utenti possano spostare facilmente le schede tra le finestre dell'applicazione che usano le schede, analogamente ai Web browser come Microsoft Edge.
Visualizza un elenco orizzontale di collegamenti alle pagine a ciascuno dei livelli superiori. Il controllo BreadcrumbBar implementa il modello di spostamento superiore.
Usare un percorso di navigazione quando:
- Si vuole visualizzare il percorso della posizione corrente
- Hai molti livelli di navigazione
- Si prevede che gli utenti possano tornare a qualsiasi livello precedente
Visualizza un elenco verticale di link alle pagine di primo livello. Utilizzare quando:
- Le pagine esistono al livello superiore.
- Ci sono molti elementi di spostamento (più di 5)
- Non ti aspetti che gli utenti passino frequentemente da una pagina all'altra.
Mostrare un elenco di elementi. La selezione di un elemento consente di visualizzare la pagina corrispondente nella sezione dei dettagli. Utilizzare quando:
- Prevedere che gli utenti si spostino tra gli elementi child di frequente.
- Si vuole consentire all'utente di eseguire operazioni di alto livello, ad esempio l'eliminazione o l'ordinamento, su singoli elementi o gruppi di elementi e anche di consentire all'utente di visualizzare o aggiornare i dettagli per ogni elemento.
Il modello lista/dettagli è particolarmente indicato per le cartelle di posta in arrivo, gli elenchi di contatti e l'immissione dei dati.
Gli elementi di spostamento incorporati possono essere visualizzati nel contenuto di una pagina. Diversamente dagli altri elementi di spostamento, che dovrebbero essere coerenti all'interno delle pagine, gli elementi di spostamento incorporati nel contenuto sono univoci per ogni pagina.
Prossimo: aggiungere codice di spostamento alla tua app
Nell'articolo successivo, Implementare lo spostamento tra due pagine, viene illustrato il codice richiesto per usare un Frame controllo per abilitare lo spostamento di base tra due pagine dell'app.
