Linee guida ed elenco di controllo per i controlli di stato (app di Windows Store)

In questo argomento descriviamo le procedure consigliate per l'uso di controlli di stato in un'app di Windows Store scritta in C++, C# o Visual Basic.

Roadmap: che relazione c'è tra questo argomento e gli altri? Vedi:

• Roadmap per app di Windows Store in C# o Visual Basic
• Roadmap per app di Windows Store scritte in C++

È il controllo giusto?

I controlli ProgressBar e ProgressRing indicano agli utenti lo stato di un'operazione il cui completamento richiede più di 2 secondi. Un controllo ProgressBar può mostrare una percentuale di completamento approssimativa (stato determinato), mentre entrambi i controlli di stato possono indicare che un'operazione è in corso (stato indeterminato).

Non è sempre necessario mostrare un controllo di stato. A volte lo stato di un'attività è abbastanza ovvio o l'attività viene completata così velocemente che la visualizzazione di un controllo di stato sarebbe solo una fonte di distrazione. Ecco alcuni punti da considerare per scegliere se mostrare un controllo di stato:

• L'operazione verrà completata in due secondi o meno?

  Se sì, non mostrare un controllo di stato. Se di solito (ma non sempre) un'operazione viene completata in più di due secondi, aspetta 500 millisecondi prima di mostrare il controllo per evitare sfarfallii.

• L'operazione è in attesa che l'utente completi un'attività?

  Se sì, non usare una barra di stato. Le barre di stato indicano lo stato del computer, non dell'utente.

• L'utente deve essere informato su un'operazione in corso?

  Se, ad esempio, l'app sta scaricando qualcosa in background e l'utente non ha avviato il download, non è necessario che l'utente tenga traccia della percentuale di completamento.

• L'operazione è un'attività in background, non blocca l'interazione dell'utente ed è di interesse minimo (ma non del tutto) per l'utente?

  Usa testo e puntini di sospensione quando l'app esegue attività che non devono essere sempre visibili, ma se devi comunque indicare lo stato.

  

  Usa i puntini di sospensione per indicare che l'attività è in corso. Se ci sono più attività o elementi, puoi indicare il numero di attività rimanenti. Quando tutte le attività vengono completate, rimuovi l'indicatore.

• Puoi usare il contenuto dell'operazione per visualizzare lo stato?

  Se sì, non mostrare un controllo di stato. Durante la visualizzazione di immagini caricate dal disco, ad esempio, le immagini appaiono sullo schermo una per una mentre vengono caricate. La visualizzazione di un controllo di stato non offrirebbe alcun vantaggio, ma ingombrerebbe l'interfaccia utente.

Non usare il cursore di attesa per indicare l'attività, perché gli utenti che usano il tocco per interagire con il sistema non lo vedrebbero, mentre agli utenti che usano il mouse non servono due elementi diversi (il cursore e il controllo di stato) per visualizzare l'attività.

Scelta dello stile più adatto per il controllo di stato

Esistono tre stili di controllo di stato:

• Stile barra di stato determinato

  

  Usa lo stile barra di stato determinato quando un'attività è determinata, ossia ha una durata ben definita o una fine prevedibile. Ecco alcuni esempi di attività determinate:

  • L'app sta scaricando una foto di 500 K e per il momento ha ricevuto 100 K.
  • L'app sta visualizzando un annuncio di 15 secondi e sono passati 2 secondi.

• Stile barra di stato indeterminato

  

  Usa questo stile per le attività non determinate e non modali, cioè quelle che non bloccano l'interazione dell'utente.

• Stile anello di stato indeterminato

  

  Usa questo stile per le attività non determinate e modali, cioè quelle che bloccano l'interazione dell'utente.

Considera le attività parzialmente modali come se fossero non modali. Alcune attività bloccano l'interazione dell'utente fino a quando lo stato non avanza un poco, dopodiché l'utente può ricominciare a interagire con l'app. Quando l'utente esegue una query di ricerca, ad esempio, l'interazione è bloccata fino a quando non viene visualizzato il primo risultato. Considera attività come queste come se fossero non modali e usa lo stile barra di stato indeterminato se lo stato modale dura meno di 2 secondi. Se lo stato modale può durare più di 2 secondi, usa l'anello di stato indeterminato per la fase modale dell'attività e poi la barra di stato indeterminato per la fase non modale.

Linee guida generali

Ecco alcune linee guida generali da seguire, indipendentemente dallo stile di controllo di stato usato.

• Mostra un singolo controllo di stato per più attività correlate. Se sullo schermo appaiono più elementi correlati che eseguono tutti attività contemporaneamente, non mostrare più controlli di stato. Mostrane invece solo uno quando viene completata l'ultima attività. Se l'app, ad esempio, scarica più foto, mostra un singolo controllo di stato e non uno per ogni foto.
• Non cambiare la posizione o le dimensioni del controllo di stato durante l'esecuzione dell'attività.

Linee guida per le attività determinate

Se puoi stimare la quantità di lavoro rimanente in tempo, byte, file o con altre unità di misura quantificabili, usa una barra di stato determinato. Ecco alcune linee guida per l'uso della barra di stato determinato:

Passaggio da uno stato indeterminato a uno determinato Se è necessaria una quantità di tempo o un'azione per iniziare a indicare uno stato determinato, usa prima la barra di stato indeterminato e poi passa alla barra di stato determinato. Se, ad esempio, il primo passaggio di un'attività di download è la connessione a un server, non puoi stimare quanto tempo sarà necessario. Dopo che viene stabilita la connessione, passa alla barra di stato determinato per indicare lo stato del download. Mantieni la barra di stato esattamente nella stessa posizione e con dimensioni identiche dopo il passaggio.
Visualizzazione in linea dell'avanzamento e dello stato Supponi di avere un elenco di elementi, ad esempio di stampanti, e che alcune azioni possano avviare un'operazione sugli elementi dell'elenco, come l'installazione di un driver per una delle stampanti. In questo caso e se l'operazione è determinata, mostra una barra di stato determinato accanto all'elemento. Mostra l'argomento (etichetta) dell'attività sopra la barra di stato e indica lo stato al di sotto. Non aggiungere testo dello stato, se quello che avviene è ovvio. Dopo il completamento dell'attività, nascondi la barra di stato. Usa il testo dello stato per comunicare il nuovo stato di un elemento.
Visualizzazione di più operazioni Quando vuoi mostrare un elenco di attività, allinea il contenuto in una griglia perché gli utenti possano visualizzare lo stato immediatamente. Mostra barre di stato per tutti gli elementi, anche per quelli in sospeso. Dato che lo scopo di questo elenco è indicare le operazioni in corso, rimuovi dall'elenco le operazioni non appena vengono completate.
Visualizzazione dello stato determinato modale dell'app nella barra dell'app Se un utente ha avviato un'attività dalla barra dell'app e l'attività blocca l'interazione dell'utente, mostra il controllo di stato nella barra dell'app. Se non ci sono dubbi sull'elemento per cui la barra di stato indica lo stato, puoi allinearla con la parte superiore della barra dell'app e omettere etichetta e stato. Altrimenti, aggiungi un'etichetta e il testo dello stato. Disabilita l'interazione durante l'attività disattivando i controlli nella barra dell'app e ignorando l'input nell'area del contenuto.

Cosa fare e non fare per le attività determinate

Linee guida per le attività indeterminate

Se l'attività è modale, cioè blocca l'interazione fino al suo completamento, usa lo stile anello di stato indeterminato. Se l'attività non è modale, usa lo stile barra di stato indeterminato.

Anello di stato indeterminato

Segui queste linee guida per la visualizzazione dell'anello di stato:

• Visualizza l'anello di stato nel contesto dell'azione, cioè accanto alla posizione in cui l'utente ha avviato l'azione o in cui verranno visualizzati i dati risultanti.
• Specifica il testo dello stato a destra dell'anello di stato.
• Usa per l'anello di stato lo stesso colore del testo dello stato.
• Disabilita i controlli con cui l'utente non deve interagire durante l'esecuzione dell'attività.
• Se l'attività produce un errore, nascondi l'indicatore di stato e il testo e visualizza un messaggio di errore al loro posto.

Ecco alcune linee guida per situazioni specifiche in cui viene usato un anello di stato:

In una finestra di dialogo un'azione viene eseguita prima di passare alla schermata successiva Posiziona l'anello di stato proprio sopra l'area dei pulsanti, allineato a sinistra con il contenuto della finestra di dialogo.
Visualizzazione dello stato in una finestra dell'app con controlli allineati a destra Posiziona l'anello di stato proprio sopra o a sinistra del controllo che ha causato l'azione. Allinea a sinistra l'anello di stato con il contenuto correlato.
Visualizzazione dello stato in una finestra dell'app con controlli allineati a sinistra Se un controllo che avvia l'azione modale è allineato a sinistra, posiziona l'anello di stato alla sua destra. Altrimenti, puoi posizionarlo sotto il controllo.	- oppure -
Visualizzazione dello stato in un riquadro a comparsa Usa un riquadro a comparsa se l'attività può procedere in background quando l'utente chiude il riquadro a comparsa toccando al suo esterno.
Visualizzazione di più elementi Posiziona l'anello di stato e il testo dello stato sotto il titolo dell'elemento. In caso di errore, sostituisci l'anello di stato e lo stato con il testo dell'errore.

Barra di stato indeterminato

Usa la barra di stato indeterminato per attività che non bloccano l'interazione dell'utente (non modali).

Ecco alcune linee guida per situazioni specifiche in cui viene usata una barra di stato indeterminato:

Visualizzazione dello stato in un riquadro a comparsa Posiziona la barra di stato indeterminato nella parte superiore del riquadro a comparsa e imposta la sua larghezza perché si estenda lungo tutto il riquadro a comparsa. Questa posizione riduce al minimo le fonti di distrazione ma comunica comunque l'attività in corso. Non dare un titolo al riquadro a comparsa, perché ti impedirebbe di posizionare la barra di stato nella parte superiore del riquadro.

In una finestra dell'app Posiziona la barra di stato indeterminato nella parte più in alto della finestra dell'app, per tutta la larghezza della finestra.

Linee guida per il testo dello stato

• Quando usi la barra di stato determinato, non mostrare la percentuale di completamento nel testo dello stato. Il controllo fornisce già queste informazioni.
• Se usi testo per indicare l'attività senza un controllo di stato, usa i puntini di sospensione per comunicare che l'attività è in corso.
• Se usi un controllo di stato, non usare i puntini di sospensione nel testo dello stato, perché il controllo di stato indica già che l'operazione è in corso.

Schemi di layout

Ecco le linee guida sui layout per diversi schemi comuni di uso dei controlli di stato:

• Barra di stato determinato con etichetta e stato

  

• Più barre di stato

  

• Anello di stato indeterminato con testo dello stato

  

• Barra di stato indeterminato

  

Argomenti correlati

Roadmap per la creazione di app con C#, C++ o VB