Modelli d'uso dei comandi

Nella tua app dello Store puoi posizionare comandi e controlli su varie superfici, tra cui il canvas dell'app, i popup, le finestre di dialogo e le barre dell'app. La scelta della superficie corretta al momento giusto può fare la differenza tra un'app intuitiva e una scomoda da usare.

Nelle app dello Store i comandi sono gli elementi interattivi dell'interfaccia utente che gli utenti possono usare per eseguire azioni. Il comando è diverso da un elemento di spostamento, in quanto quest'ultimo permette all'utente di passare a una pagina diversa, mentre un comando permette di eseguire un'azione nella pagina corrente. Gli elementi di spostamento rendono un'app utilizzabile. I comandi la rendono utile.

Per altre info sulle diverse superfici per i comandi nelle app, vedi Creazione del layout dell'interfaccia utente.

Tipi di comandi

Filtro

I comandi di filtro consentono di rimuovere o nascondere contenuto all'interno di un set di dati sulla base di determinati criteri. Un utente potrebbe scegliere, ad esempio, di visualizzare solo i giochi di Windows Store nella categoria "Avventura".

 

 

Pivot

I comandi pivot consentono di riorganizzare il contenuto all'interno di un set di dati e offrire una visualizzazione dei dati diversa in base all'elemento pivot. Un utente potrebbe scegliere, ad esempio, di organizzare i brani in base ad album o artista.

 

 

Ordinamento

I comandi di ordinamento consentono di modificare l'ordine di visualizzazione del contenuto all'interno di un set di dati. Un utente potrebbe scegliere, ad esempio, di visualizzare le destinazioni in un'app per i viaggi in base alla popolarità.

 

 

Visualizzazione

I comandi di visualizzazione consentono di modificare lo stile o il metodo di visualizzazione del contenuto. In un'app per la ricerca di hotel, ad esempio, un utente potrebbe scegliere di visualizzare gli hotel in una mappa invece che in un elenco.

 

 

Suggerimento

Puoi posizionare comandi di suggerimento sul canvas se ritieni che possano essere utili per gli utenti. Nell'app Mail in Windows 8.1 ad esempio è disponibile un comando "puntini di sospensione" che implica opzioni aggiuntive. Facendo clic su di esso viene visualizzata la barra dell'app. Questo metodo si aggiunge ai metodi tradizionali di Windows per visualizzare una barra dell'app.

 

 

Puoi progettare questi suggerimenti in modo che corrispondano allo stile dell'app. Questa app di news usa lo stesso suggerimento per la barra dell'app, oltre a un contrassegno con un'icona di menu che visualizza una pagina di voci di menu.

 

 

Altri

Qualsiasi elemento di interfaccia utente interattivo che consente all'utente di eseguire un'azione nella visualizzazione corrente è un comando. Ecco alcuni esempi.

 

 

Posizionamento dei comandi

Nel canvas

Se un comando (o un menu di comandi) è fondamentale ed è sempre necessario per consentire all'utente di completare gli scenari di base, inseriscilo nel canvas. Nell'app Mail di Windows 8.1, ad esempio, i comandi di base come Rispondi, Nuovo ed Elimina vengono visualizzati nel canvas quando si seleziona un messaggio.

 

 

Barra dell'app inferiore

A volte, è preferibile evitare di inserire troppi comandi nel canvas e limitare in questo modo la possibilità dell'utente di usare il contenuto dell'app. Usa la barra dell'app per visualizzare i comandi su richiesta degli utenti. Sulla barra dell'app inferiore vengono visualizzati comandi pertinenti al contesto dell'utente, in genere la pagina o la selezione corrente.

La barra dell'app inferiore è una soluzione efficace sia per i comandi a selezione singola che multipla. Puoi programmare l'app in modo che la barra dell'app venga visualizzata quando un utente seleziona oggetti.

 

 

Linee guida per il posizionamento dei comandi

Anche se puoi scegliere diversi tipi di posizionamento per i comandi all'interno dell'app, tieni presente quanto segue:

• Prevedibilità Per quanto possibile usa interazioni e posizioni coerenti per i comandi in tutte le visualizzazioni della tua app.
• Ergonomia Valuta se il posizionamento di comandi specifici può velocizzare o semplificare l'accesso a un comando.
• Estetica Limita il numero di comandi per evitare che la barra dell'app diventi troppo complicata. Scegli icone facilmente comprensibili. Non usare etichette troppo lunghe.

È consigliabile attenersi alle linee guida seguenti per il posizionamento dei comandi:

Inserisci i comandi persistenti o predefiniti sul lato destro della barra dell'app. Se i comandi sono pochi, è possibile che sulla barra dell'app vengano visualizzati solo quelli sulla destra. In questo esempio per il comando Sfoglia, il set di comandi di visualizzazione e quelli di filtro/ordinamento sono persistenti.

 

Usa i bordi. Se i comandi sono numerosi, suddividili in set distinti a sinistra e a destra per bilanciare la barra dell'app e rendere i comandi più facilmente accessibili in base a criteri di ergonomia. In questo caso abbiamo deciso di spostare il set di comandi di visualizzazione sulla sinistra e di mantenere quello di filtro/ordinamento sulla destra. Quando è attiva la visualizzazione mappa, i relativi comandi vengono visualizzati a destra del set di comandi di visualizzazione.

 

Visualizza/nascondi i comandi disabilitati. In alcuni casi determinati comandi non sono pertinenti. Quando vengono visualizzati, non devono influire sull'ordine dei comandi persistenti. In questo esempio la visualizzazione mappa è attiva e i relativi comandi vengono visualizzati a destra del set di comandi di visualizzazione.

 

Inserisci i comandi di selezione. I comandi che vengono visualizzati in seguito a una selezione dell'utente devono essere posizionati all'estrema sinistra, occupando il posto di eventuali comandi già presenti. In tal modo i comandi di selezione sono più evidenti e facilmente accessibili. In questo esempio il set di comandi di visualizzazione viene spostato verso destra per fare posto al set di comandi di selezione.

 

Posizionamento dei comandi comuni

Alcuni comandi sono comuni e vengono visualizzati in molte app. Per garantire una maggior coerenza e trasmettere fiducia, ti consigliamo di seguire queste linee guida quando scegli dove inserire i comandi comuni nella barra dell'app.

Posiziona i comandi di selezione all'estrema sinistra, sia che si tratti di comandi contestuali visualizzati dopo una selezione o di comandi che influiscono sulla selezione. In questo esempio prima della selezione dell'utente a sinistra è presente il comando "Seleziona tutto". Dopo la selezione sulla sinistra appaiono gli altri comandi di selezione.

 

Posiziona i comandi per i nuovi elementi sul bordo destro della barra. Questi comandi possono essere di tipo Aggiungi, Crea, Componi o di qualsiasi altro tipo che consenta di creare una nuova entità. I comandi per i nuovi elementi devono essere facilmente accessibili con i pollici. In questo esempio il comando "Nuova recensione" consente agli utenti di creare una nuova recensione per il ristorante. Altri comandi correlati a "Nuova revisione" vengono posizionati accanto a questo sulla sinistra. Il glifo + deve essere usato solo per rappresentare il comando "Nuovo" e non può comparire in nessun altro punto di una barra dell'app.

 

Posiziona i comandi di eliminazione a sinistra dei comandi per i nuovi elementi. Usa Elimina/Nuovo se la tua app consente di gestire singole entità che possono essere persistenti all'esterno dell'applicazione specifica, ad esempio in un'app di posta o della fotocamera. Usa Elimina/Nuovo sempre in quest'ordine.

 

Posiziona i comandi di rimozione ai sinistra dei comandi di aggiunta. Usa Rimuovi/Aggiungi se l'app consente di gestire un elenco, ad esempio un elenco attività, un elenco di città in un'app meteo o un elenco di ristoranti segnalati. Usa Rimuovi/Aggiungi sempre in quest'ordine.

 

Posiziona i comandi di cancellazione a sinistra dei comandi per i nuovi elementi. Usa Cancella se vuoi eseguire un'azione distruttiva su tutti i possibili elementi. L'etichetta del comando ti consente di essere esplicito sull'azione svolta dal comando stesso, come nel caso di "Cancella selezione".

 

Per vedere degli esempi del posizionamento dei comandi nella barra inferiore dell'app, vedi Raccolta di app di Windows Store.

Raggruppamento di comandi in menu

A volte risulta più efficiente raggruppare più comandi in un menu. I menu ti consentono di presentare più opzioni in meno spazio. Possono inoltre includere contenuti interattivi.

In questo esempio il comando Ordina visualizza un semplice menu che consente all'utente di scegliere facilmente un'opzione di ordinamento. Il comando Filtro visualizza un set di controlli in un menu che consente all'utente di filtrare gli elementi in base a criteri più complessi.

 

Menu di scelta rapida

I menu di scelta rapida contengono spesso azioni degli Appunti, ad esempio Taglia, Copia e Incolla. Possono inoltre contenere comandi che si applicano a contenuto non selezionabile, ad esempio un'immagine o una pagina Web. Il sistema fornisce alle app menu di scelta rapida predefiniti per testo e collegamenti ipertestuali. Per il testo, il menu di scelta rapida predefinito mostra i comandi degli Appunti. Per i collegamenti ipertestuali mostra invece i comandi per copiare e aprire il link.

Per richiamare i menu di scelta rapida, gli utenti tengono premuto il contenuto sui dispositivi con touchscreen oppure fanno clic con il pulsante destro del mouse.

 

 

  

Sfruttare gli accessi

Quando progetti un'app di Windows Store, hai a disposizione quattro comandi molto utili negli accessi: Ricerca, Condivisione, Dispositivi e Impostazioni. Per richiamare gli accessi, gli utenti fanno scorrere rapidamente un dito dal bordo destro dello schermo o spostano il cursore del mouse verso l'angolo superiore o inferiore destro dello schermo.

 

 

Ricerca: consenti ai tuoi utenti di cercare velocemente contenuto dell'app da qualsiasi punto del sistema, anche da altre app.
Condivisione: consenti ai tuoi utenti di condividere il contenuto dell'app con altre persone o app e di ricevere contenuto condiviso.
Start: questo accesso porta l'utente nella schermata Start. Le app non interagiscono con questo accesso. Il comportamento è automatico e sempre lo stesso.
Dispositivi: consenti ai tuoi utenti di riprodurre contenuti audio, video o immagini trasmessi dall'app ad altri dispositivi della propria rete locale.
Impostazioni: consolida tutte le impostazioni in un'unica superficie e consenti agli utenti di configurare l'applicazione mediante un meccanismo comune che già conoscono.

 

Evita di duplicare la funzionalità dei contratti per app nel canvas o nella barra dell'app.

Linee guida per le barre dell'app

Linee guida per i menu di scelta rapida

Linee guide per i comandi degli Appunti

Accessi e contratti