Nozioni di base sulla progettazione degli spostamenti per le app di WindowsNavigation design basics for Windows apps

Intestazione delle nozioni di base sullo spostamento

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.If you think of an app as a collection of pages, navigation describes the act of moving between pages and within a page. È 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.It's the starting point of the user experience, and it's how users find the content and features they're interested in. È molto importante e può essere difficile da comprendere nel modo corretto.It's very important, and it can be difficult to get right.

Esiste un gran numero di opzioni disponibili per lo spostamento.We have a huge number of choices to make for navigation. È possibile:We could:

Esempio di spostamento 1

Richiedere agli utenti di passare attraverso una serie ordinata di pagine.Require users to go through a series of pages in order.

Esempio di spostamento 2

Fornire un menu che consenta all'utente di passare direttamente a una pagina desiderata.Provide a menu that allows users to jump directly to any page.

Esempio di spostamento 3

Inserire tutti gli elementi in una singola pagina e fornire meccanismi di filtro per visualizzare il contenuto.Place everything on a single page and provide filtering mechanisms for viewing content.

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.While there's no single navigation design that works for every app, there are principles and guidelines to help you decide the right design for your app.

Principi di buona progettazione per la struttura di spostamentoPrinciples of good navigation

Iniziamo con i principi di base per una buona progettazione della struttura di spostamento:Let's start with the basic principles of good navigation design:

  • Coerenza: soddisfare le aspettative dell'utente.Consistency: Meet user expectations.
  • Semplicità: non fare più di quanto sia necessario.Simplicity: Don't do more than you need to.
  • Chiarezza: fornire percorsi e opzioni comprensibili.Clarity: Provide clear paths and options.

CoerenzaConsistency

Lo spostamento deve essere coerente con le aspettative degli utenti.Navigation should be consistent with user expectations. 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.Using standard controls that users are familiar with and following standard conventions for icons, location, and styling will make navigation predictable and intuitive for users.

immagine dei componenti della pagina

Gli utenti si aspettano di trovare determinati elementi dell'interfaccia utente in posizioni standard.Users expect to find certain UI elements in standard locations.

SemplicitàSimplicity

Riducendo la quantità degli elementi di spostamento si semplificano le scelte che gli utenti devono fare.Fewer navigation items simplify decision making for users. Consentendo un facile accesso alle destinazioni importanti e nascondendo gli elementi meno rilevanti si permette agli utenti di accedere più rapidamente al contenuto desiderato.Providing easy access to important destinations and hiding less important items will help users get where they want, faster.

Primo screenshot contenente una barra verde con un segno di spunta verde e la dicitura Sì.

Visualizzazione spostamento corretta

Presentare gli elementi di navigazione in un menu di navigazione familiare.Present navigation items in a familiar navigation menu.

Cosa non fare

Visualizzazione spostamento errata

Sovraccaricare gli utenti con numerose opzioni di navigazione.Overwhelm users with many navigation options.

ChiarezzaClarity

La presenza di percorsi chiari permette agli utenti di spostarsi in modo logico.Clear paths allow for logical navigation for users. Con opzioni di spostamento intuitive e relazioni comprensibili tra le pagine, è meno probabile che gli utenti rimangano disorientati.Making navigation options obvious and clarifying relationships between pages should prevent users from getting lost.

Screenshot della bozza di un'applicazione che mostra percorsi chiari per lo spostamento di un utente.

Le destinazioni sono etichettate con chiarezza per consentire agli utenti di sapere dove si trovano.Destinations are clearly labeled so users know where they are.

Indicazioni generaliGeneral recommendations

Prendiamo ora in considerazione i nostri principi di progettazione, vale a dire coerenza, semplicità e chiarezza, e usiamoli per definire alcune indicazioni generali.Now, let's take our design principles--consistency, simplicity, and clarity--and use them to come up with some general recommendations.

  1. Pensa agli utenti.Think about your users. 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ì.Trace out typical paths they might take through your app, and for each page, think about why the user is there and where they might want to go.

  2. Evita gerarchie di spostamento complesse.Avoid deep navigation hierarchies. Se vai oltre i tre livelli di spostamento, rischi che l'utente si perda in una gerarchia complessa da cui avrà difficoltà a uscire.If you go beyond three levels of navigation, you risk stranding your user in a deep hierarchy that they will have difficulty leaving.

  3. Evita il "pogo stick".Avoid "pogo-sticking." Il pogo stick 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.Pogo-sticking occurs when there is related content, but navigating to it requires the user to go up a level and then down again.

Usare la struttura appropriataUse the right structure

Ora che hai familiarità con le regole e i principi di spostamento generali, è il momento di scegliere come strutturare la tua app.Now that you're familiar with general navigation principles, how should you structure your app? Esistono due strutture generali: piatta e gerarchica.There are two general structures: flat and hierarchal.

Pagine disposte in una struttura piatta

Piatta/lateraleFlat/lateral

In una struttura piatta/laterale, le pagine sono affiancate.In a flat/lateral structure, pages exist side-by-side. Puoi spostarti da una pagina a un'altra in qualsiasi ordine.You can go from one page to another in any order.

È consigliabile usare una struttura piatta quando:We recommend using a flat structure when:

  • Le pagine possono essere visualizzate in qualsiasi ordine.The pages can be viewed in any order.
  • Le pagine sono chiaramente distinguibili e tra di esse non esiste una relazione padre/figlio ovvia.The pages are clearly distinct from each other and don't have an obvious parent/child relationship.
  • Sono presenti meno di 8 pagine nel gruppo.There are less than 8 pages in the group.
    Quando sono presenti più pagine, potrebbe essere difficile per gli utenti distinguere le varie pagine o capire la posizione corrente all'interno del gruppo.(When there are more pages, it might be difficult for users to understand how the pages are unique or to understand their current location within the group. Se ritieni che ciò non rappresenti un problema per la tua app, puoi tranquillamente definire le pagine come peer.If you don't think that's an issue for your app, go ahead and make the pages peers. In caso contrario, valuta la possibilità di usare una struttura gerarchica per suddividere le pagine in due o più gruppi più piccoli.Otherwise, consider using a hierarchical structure to break the pages into two or more smaller groups.)

Pagine disposte in una struttura gerarchica

GerarchicaHierarchical

In una struttura gerarchica, le pagine sono organizzate in una struttura ad albero.In a hierarchical structure, pages are organized into a tree-like structure. Ogni pagina figlio ha un solo elemento padre, ma una pagina padre può avere una o più pagine figlio.Each child page has one parent, but a parent can have one or more child pages. Per raggiungere una pagina figlio, devi passare attraverso la pagina padre.To reach a child page, you travel through the parent.

Le strutture gerarchiche sono utili per organizzare contenuti complessi che si estendono su diverse pagine.Hierarchical structures are good for organizing complex content that spans lots of pages. 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.The downside is some navigation overhead: the deeper the structure, the more clicks it takes to get from page to page.

È consigliabile una struttura gerarchica quando:We recommend a hierarchical structure when:

  • Le pagine devono essere attraversate in un ordine specifico.Pages should be traversed in a specific order.
  • Esiste una chiara relazione padre-figlio tra le pagine.There is a clear parent-child relationship between pages.
  • Sono presenti più di 7 pagine nel gruppo.There are more than 7 pages in the group.

un'app con una struttura ibrida

Combinazione di struttureCombining structures

Non è necessario scegliere una struttura o l'altra: molte app ben progettate usano entrambi i tipi di strutture.You don't have to choose one structure or the other; many well-design apps use both. 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.An app can use flat structures for top-level pages that can be viewed in any order, and hierarchical structures for pages that have more complex relationships.

Se la struttura di spostamento ha più livelli, consigliamo che gli elementi di spostamento peer-to-peer siano collegati solo ai peer nel sottoalbero corrente.If your navigation structure has multiple levels, we recommend that peer-to-peer navigation elements only link to the peers within their current subtree. Considera la figura a lato, che mostra una struttura di spostamento con due livelli:Consider the adjacent illustration, which shows a navigation structure that has two levels:

  • Al livello 1, l'elemento di spostamento peer-to-peer dovrebbe consentire l'accesso alle pagine A, B, C e D.At level 1, the peer-to-peer navigation element should provide access to pages A, B, C, and D.
  • Al livello 2, gli elementi di spostamento peer-to-peer per le pagine A2 dovrebbero essere collegati solo alle altre pagine A2.At level 2, the peer-to-peer navigation elements for the A2 pages should only link to the other A2 pages. Non dovrebbero esserci link alle pagine di livello 2 nel sottoalbero C.They should not link to level 2 pages in the C subtree.

Usare i controlli appropriatiUse the right controls

Dopo aver stabilito una struttura di pagine, è necessario decidere come gli utenti si sposteranno tra quelle pagine.Once you've decided on a page structure, you need to decide how users navigate through those pages. La piattaforma UWP offre un'ampia gamma di controlli di spostamento per garantire un'esperienza di spostamento coerente e affidabile nell'app.UWP provides a variety of navigation controls to help ensure a consistent, reliable navigation experience in your app.

Immagine frame

FrameFrame

Con poche eccezioni, qualsiasi app con più pagine usa un frame.With few exceptions, any app that has multiple pages uses a 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.Typically, an app has a main page that contains the frame and a primary navigation element, such as a navigation view control. Quando l'utente seleziona una pagina, il frame la carica e la visualizza.When the user selects a page, the frame loads and displays it.

Immagine schede e pivot

Spostamento superioreTop navigation

Visualizza un elenco orizzontale di link alle pagine dello stesso livello.Displays a horizontal list of links to pages at the same level. Il controllo NavigationView implementa il modello di spostamento superiore.The NavigationView control implements the top navigation pattern.

Usa lo spostamento superiore quando:Use top navigation when:

  • Vuoi visualizzare tutte le opzioni di spostamento sullo schermo.You want to show all navigation options on the screen.
  • Vuoi più spazio per il contenuto dell'app.You desire more space for your app's content.
  • Le icone non possono descrivere in modo chiaro le categorie di spostamento.Icons cannot clearly describe your navigation categories.

Immagine schede e pivot

SchedeTabs

Visualizza un set di schede orizzontale e il relativo contenuto.Displays a horizontal set of tabs and their respective content. 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.The TabView control is useful for displaying several pages (or documents) while giving the user the capability to rearrange, open, or close tabs.

Usa le schede quando:Use tabs when:

  • Vuoi consentire agli utenti di aprire, chiudere o ridisporre le schede in modo dinamico.You want users to be able to dynamically open, close, or rearrange tabs.
  • Prevedi che possano essere aperte numerose schede contemporaneamente.You expect that there might be a large number of tabs open at once.
  • 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.You expect users to be able to easily move tabs between windows in your application that use tabs, similar to web browsers like Microsoft Edge.

Immagine schede e pivot

PivotPivot

Simile alla Visualizzazione di spostamento ma con supporto aggiuntivo per il tocco e un comportamento di spostamento leggermente diverso.Similar to Navigation View, but with additional support for touch and slightly different navigation behavior.

Usa un pivot quando:Use a pivot when:

  • Vuoi che l'app consenta lo scorrimento tramite tocco tra le categorieYou want your app to allow touch-swiping between categories
  • Vuoi che le opzioni di navigazione scorrano all'infinitoYou want navigation options to carousel infintely
  • Non è necessario un controllo esteso sul comportamento di spostamento tra le categorieYou do not need extensive control over navigation behavior between categories

Immagine visualizzazione spostamento

Spostamento a sinistraLeft navigation

Visualizza un elenco verticale di link alle pagine di primo livello.Displays a vertical list of links to top-level pages. Utilizzare quando:Use when:

  • Le pagine sono al primo livello.The pages exist at the top level.
  • Ci sono molti elementi di spostamento (più di 5)There are many navigation items (more than 5)
  • Non prevedi che gli utenti si spostino tra le pagine di frequente.You don't expect users to switch between pages frequently.

Immagine master/dettagli

Master/dettagliMaster/details

Visualizza un elenco (visualizzazione master) di elementi.Displays a list (master view) of items. La selezione di un elemento consente di visualizzare la pagina corrispondente nella sezione dei dettagli.Selecting an item displays its corresponding page in the details section. Utilizzare quando:Use when:

  • Prevedi che gli utenti si spostino tra gli elementi figlio di frequente.You expect users to switch between child items frequently.
  • Vuoi consentire all'utente di eseguire operazioni di base, come l'eliminazione o l'ordinamento, su elementi singoli o gruppi di elementi, ma vuoi anche che l'utente possa visualizzare o aggiornare i dettagli per ogni elemento.You want to enable the user to perform high-level operations, such as deleting or sorting, on individual items or groups of items, and also want to enable the user to view or update the details for each item.

Il modello master/dettagli è particolarmente indicato per le cartelle di posta in arrivo, gli elenchi di contatti e l'immissione dei dati.Master/details is well suited for email inboxes, contact lists, and data entry.

Immagine collegamenti ipertestuali e pulsanti

Collegamenti ipertestualiHyperlinks

Gli elementi di spostamento incorporati possono essere visualizzati nel contenuto di una pagina.Embedded navigation elements can appear in a page's content. 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.Unlike other navigation elements, which should be consistent across the pages, content-embedded navigation elements are unique from page to page.

Argomento successivo: aggiungere codice di spostamento alla tua appNext: Add navigation code to your app

Nell'articolo successivo, Implementare lo spostamento tra due pagine, viene illustrato il codice richiesto per usare un controllo Frame per abilitare lo spostamento di base tra due pagine dell'app.The next article, Implement basic navigation, shows the code required to use a Frame control to enable basic navigation between two pages in your app.