Esecuzione di comandi di base

In un'app di Windows gli elementi di comando sono gli elementi interattivi dell'interfaccia che permettono agli utenti di eseguire azioni come l'invio di e-mail o moduli o l'eliminazione di un elemento. Le interfacce di comando sono composte da elementi di comando comuni, dalle aree di comandi che li ospitano, dalle interazioni che supportano e dalle esperienze che forniscono.

Offrire la migliore esperienza di comando

L'aspetto più importante di un'interfaccia di comando è rappresentato dalle azioni che vuoi consentire all'utente di eseguire. Mentre pianifichi le funzionalità della tua app, tieni in considerazione i passaggi necessari per eseguire quelle attività e le esperienze utente che vuoi abilitare. Dopo aver completato una bozza iniziale di queste esperienze, potrai prendere decisioni sugli strumenti e le interazioni che servono per implementarle.

Ecco alcune esperienze di comandi comuni:

  • Trasmissione o invio di informazioni
  • Selezione di impostazioni e opzioni
  • Ricerca e filtro di contenuto
  • Apertura, salvataggio ed eliminazione di file
  • Modifica o creazione di contenuto

Progetta le esperienze di comandi in modo creativo. Scegli quali dispositivi di input sono supportati dall'app e il modo in cui l'app risponde a ogni dispositivo. Aggiungendo il supporto della più ampia gamma di funzionalità e preferenze, rendi la tua app usabile, portabile e accessibile ai massimi livelli. Per altre informazioni, vedi Progettazione di comandi per le app di Windows.

Scegliere gli elementi di comando giusti

L'uso degli elementi adeguati in un'interfaccia di comando può fare la differenza tra un'app intuitiva e facile da usare e un'app complicata e poco chiara. Un set completo di elementi di comando è disponibile nell'app di Windows. Ecco un elenco di alcuni degli elementi di comando UWP più comuni.

button image

Pulsanti

I pulsanti attivano un'azione immediata. Gli esempi includono l'invio di un'email, l'invio dei dati di un modulo o la conferma di un'azione in una finestra di dialogo.

list image

Elenchi

Gli elenchi presentano gli elementi in una griglia o un elenco interattivo. Si usano in genere quando ci sono molte opzioni o diversi elementi da visualizzare. Gli esempi includono gli elenchi a discesa, la casella di riepilogo a discesa, la visualizzazione elenco e la visualizzazione griglia.

selection control image

Controlli di selezione

Consentono agli utenti di scegliere tra un numero limitato di opzioni, ad esempio per la compilazione di un sondaggio o la configurazione delle impostazioni dell'app. Gli esempi includono la casella di controllo, il pulsante di opzione e l'interruttore.

Calendar image

Controlli per calendario, data e ora

I controlli per calendario, data e ora consentono agli utenti di visualizzare e modificare le informazioni su data e ora, ad esempio quando creano un evento o impostano una sveglia. Gli esempi includono la selezione data del calendario, la visualizzazione calendario, la selezione data e la selezione ora.

Predictive text entry image

Completamento del testo

Fornisce suggerimenti agli utenti durante la digitazione di testo, ad esempio quando immettono dati o eseguono query. Gli esempi includono la casella di suggerimento automatico.

Per un elenco completo, vedere Controlli e modelli dell'interfaccia utente.

Posizionare i comandi nell'area destra

Puoi posizionare gli elementi di comando in diverse aree dell'app, incluso il canvas o contenitori di comandi speciali, come una barra dei comandi, un riquadro a comparsa della barra dei comandi, la barra dei menu o una finestra di dialogo.

Fai in modo che gli utenti possano modificare il contenuto direttamente anziché tramite comandi che agiscono sul contenuto, ad esempio usando il trascinamento della selezione per ridisporre le voci di un elenco al posto dei pulsanti di comando Su e Giù.

Questo però potrebbe non essere possibile con alcuni dispositivi di input o quando devi tener conto di specifiche capacità e preferenze degli utenti. In questi casi fornisci quanti più inviti possibile all'esecuzione di comandi e inserisci questi elementi di comando in un'area di comandi nell'app.

Ecco un elenco di alcune aree di comandi più comuni.

app canvas image

Canvas dell'app (area del contenuto)

Se un comando è sempre necessario per consentire agli utenti di completare gli scenari di base, inseriscilo nel canvas. Poiché è possibile inserire comandi vicino (o su) gli oggetti che influiscono, l'inserimento dei comandi nell'area di disegno li rende facili e ovvi da usare. Tuttavia, scegliere con attenzione i comandi inseriti nell'area di disegno. Troppi comandi nel canvas dell'app occupano spazio prezioso sullo schermo e possono confondere l'utente. Se il comando non verrà usato spesso, è meglio collocarlo in un'altra area di comandi.

commandbar image

Barre dei comandi e barre dei menu

Le barre dei comandi semplificano l'organizzazione dei comandi e li rendono più facilmente accessibili. Le barre dei comandi possono essere posizionate nella parte superiore, nella parte inferiore e sia nella parte superiore che inferiore dello schermo. È anche possibile usare un controllo MenuBar quando la funzionalità dell'app è troppo complessa per una barra dei comandi.

context menu image

Menu e menu di scelta rapida

I menu e i menu di scelta rapida consentono di risparmiare spazio organizzando i comandi e nascondendoli fino a quando l'utente non ne ha bisogno. Gli utenti accedono in genere a un menu tradizionale o di scelta rapida facendo clic su un pulsante o clic con il pulsante destro del mouse su un controllo.

Il riquadro a comparsa della barra dei comandi è un tipo di menu contestuale che combina i vantaggi di una barra dei comandi e di un menu di scelta rapida in un unico controllo. Offre collegamenti per le azioni frequenti e consente l'accesso a comandi secondari che sono pertinenti solo in determinati contesti, ad esempio gli Appunti o comandi personalizzati.

La piattaforma UWP fornisce anche un set di menu tradizionali e di scelta rapida. Per altre informazioni, vedi la panoramica di menu e menu di scelta rapida.

Fornire feedback sui comandi

Il feedback sui comandi comunica agli utenti il rilevamento di un'interazione o di un comando, il modo in cui il comando è stato interpretato e gestito e se il comando è stato eseguito correttamente o meno. Questo aiuta gli utenti a capire cosa hanno fatto e cosa possono fare dopo. Il feedback dovrebbe integrarsi in modo naturale nell'interfaccia utente, per evitare che gli utenti vengano interrotti o debbano eseguire un'ulteriore azione, se non è strettamente necessario.

Nota

Fornisci feedback solo quando necessario e solo se non è disponibile altrove. Tieni pulita e ordinata l'interfaccia utente dell'applicazione, a meno che ciò che aggiungi non abbia un reale valore.

Ecco alcuni modi per fornire feedback nell'app.

commandbar content area image

Barra dei comandi

L'area del contenuto della barra dei comandi è un'area intuitiva in cui comunicare informazioni di stato agli utenti che desiderano vedere il feedback.

Flyout image

Riquadri a comparsa

I riquadri a comparsa sono popup contestuali leggeri che possono essere chiusi toccando o facendo clic in un punto esterno.

Dialog image

Controlli della finestra di dialogo

I controlli della finestra di dialogo sono sovrapposizioni dell'interfaccia utente modale che offrono informazioni contestuali per l'app. Nella maggior parte dei casi, le finestre di dialogo bloccano le interazioni con la finestra dell'app fino a quando non vengono ignorate in modo esplicito e spesso richiedono un tipo di azione da parte dell'utente. I dialoghi possono essere problematici e devono essere usati solo in determinate situazioni. Per altre info, vedi la sezione Quando confermare o annullare le azioni .

Suggerimento

Prestare attenzione a quanto l'app usa le finestre di dialogo di conferma; possono essere molto utili quando l'utente commette un errore, ma sono un ostacolo ogni volta che l'utente sta tentando di eseguire un'azione intenzionalmente.

Quando confermare o annullare le azioni

Per quanto l'interfaccia utente della tua applicazione possa essere ben progettata, prima o poi tutti gli utenti fanno qualcosa che non avrebbero voluto fare. Per evitare queste situazioni, progetta la tua app in modo da richiedere conferma di un'azione o da consentire in qualche modo di annullare le azioni recenti.

Per le azioni che non possono essere annullate e avere conseguenze importanti, è consigliabile usare una finestra di dialogo di conferma. Esempi di queste azioni includono:

  • Sovrascrittura di file
  • Non salvare un file prima della chiusura
  • Conferma dell'eliminazione permanente di un file o di dati
  • Effettuare un acquisto (a meno che l'utente non esegua esplicitamente la richiesta di conferma)
  • Invio di un modulo, ad esempio l'iscrizione a un elemento

Per le azioni che possono essere annullate, l'offerta di un semplice comando di annullamento è in genere sufficiente. Esempi di queste azioni includono:

  • Eliminazione di un file in corso
  • Eliminazione di un messaggio di posta elettronica (non permanente)
  • Modifica del contenuto o modifica del testo
  • Ridenominazione di un file

Ottimizzare per tipi di input specifici

Per altre informazioni sull'ottimizzazione delle esperienze utente su un tipo di input o un dispositivo specifico, vedere Informazioni di base sull'interazione.