Elenchi a discesa e caselle combinate di Windows 7

Nota

Questa guida di progettazione è stata creata per Windows 7 e non è stata aggiornata per le versioni più recenti di Windows. Gran parte delle linee guida si applica ancora in linea di principio, ma la presentazione e gli esempi non riflettono le linee guida di progettazione correnti.

Con un elenco a discesa o una casella combinata, gli utenti fanno una scelta tra un elenco di valori che si escludono a vicenda. Gli utenti possono scegliere una e una sola opzione. Con un elenco a discesa standard, gli utenti sono limitati alle scelte nell'elenco, ma con una casella combinata possono immettere una scelta non presente nell'elenco.

screen shot of reminder time combo box

Casella combinata tipica.

I termini seguenti sono importanti da comprendere durante la lettura di questo articolo:

  • Una casella di riepilogo standard è una casella contenente un elenco di più elementi, con più elementi visibili.
  • Un elenco a discesa è un elenco in cui l'elemento selezionato è sempre visibile e gli altri sono visibili su richiesta facendo clic su un pulsante a discesa.
  • Una casella combinata è una combinazione di una casella di riepilogo standard o di un elenco a discesa e di una casella di testo modificabile, consentendo così agli utenti di immettere un valore che non si trova nell'elenco.
    • Un elenco a discesa modificabile è una combinazione di un elenco a discesa e di una casella di testo modificabile.
    • Una casella di riepilogo modificabile è una combinazione di una casella di riepilogo standard e di una casella di testo modificabile.

Nota

Le linee guida relative al layout vengono presentate in un articolo separato.

È il controllo giusto?

Per decidere, considerare queste domande:

  • Il controllo viene usato per scegliere un'opzione da un elenco di valori che si escludono a vicenda? In caso contrario, usare un altro controllo. Per scegliere più opzioni, usare invece un elenco standard a selezione multipla, un elenco di caselle di controllo, un generatore di elenchi o un elenco di aggiunta/rimozione.
  • I comandi delle opzioni sono? In tal caso, usare invece un pulsante di menu o un pulsante di divisione. Usare elenchi a discesa e caselle combinate per oggetti (sostantivi) o attributi (aggettivi), ma non comandi (verbi).
  • L'elenco presenta i dati, anziché le opzioni del programma? In entrambi i casi, un elenco a discesa o una casella combinata è una scelta adatta. Al contrario, i pulsanti di opzione sono adatti solo per un numero ridotto di opzioni di programma.

Elenchi a discesa

  • Esiste un'opzione predefinita consigliata per la maggior parte degli utenti nella maggior parte delle situazioni? La visualizzazione dell'opzione selezionata è molto più importante rispetto alla visualizzazione delle alternative? È consigliabile usare un elenco a discesa se non si vuole incoraggiare gli utenti a apportare modifiche nascondendo le alternative. In caso contrario, prendere in considerazione i pulsanti di opzione, un elenco a selezione singola o una casella di riepilogo modificabile, che dà maggiore enfasi alle scelte alternative.

    screen shot of highest quality as default button

    In questo esempio, la qualità dei colori più elevata è la scelta migliore per la maggior parte degli utenti, quindi un elenco a discesa è una buona scelta per riprodurre le alternative.

  • Vuoi attirare l'attenzione sull'opzione? In tal caso, prendere in considerazione i pulsanti di opzione, un elenco a selezione singola o una casella di riepilogo modificabile, che tende a attirare più attenzione prendendo più spazio sullo schermo. Poiché gli elenchi a discesa sono compatti, sono scelte valide per le opzioni da sottodimensionare.

  • Lo spazio sullo schermo è premium? In tal caso, usare un elenco a discesa perché lo spazio dello schermo usato è fisso e indipendente dal numero di scelte.

  • Sono presenti altri elenchi a discesa nella finestra? In tal caso, prendere in considerazione l'uso di un elenco a discesa per la coerenza.

Elenchi a discesa modificabili

Oltre ai principi appena forniti per gli elenchi a discesa, si applicano anche gli elementi seguenti:

  • Le possibili scelte sono vincolate? In tal caso, usare invece un elenco a discesa normale. Le caselle combinate sono per l'input non vincolato, in cui gli utenti potrebbero dover immettere un valore non attualmente nell'elenco. Poiché l'input non è vincolato, se gli utenti immettono testo non valido, è necessario gestire l'errore con un messaggio di errore.

  • È possibile enumerare le scelte più probabili in anticipo? In caso contrario, usare una casella di testo.

  • L'elenco a discesa usato per elencare l'input dell'utente precedente? A meno che gli utenti non debbano esaminare l'elenco completo dell'input precedente, usare una casella di testo con l'opzione di completamento automatico.

    screen shot of run dialog box with drop-down list

    In questo esempio, gli utenti potrebbero dover esaminare l'input precedente, quindi un elenco a discesa modificabile è una scelta ottimale.

    screen shot of outlook to line and auto-complete

    In questo esempio una casella di testo con completamento automatico è una scelta ottimale.

  • Gli utenti avranno bisogno di assistenza per la selezione di valori validi? In tal caso, usare una casella di testo con un pulsante Sfoglia.

    screen shot of outlook to line and browse button

    In questo esempio, gli utenti possono fare clic su "A" per aiutarli a selezionare valori validi.

  • È importante incoraggiare gli utenti a esaminare le scelte alternative o a invitare il cambiamento? In tal caso, prendere in considerazione l'uso di una casella di riepilogo modificabile. Con un elenco a discesa modificabile, gli utenti non saranno a conoscenza delle alternative fino a quando l'elenco non viene eliminato.

  • Gli utenti devono individuare rapidamente un elemento in un elenco di grandi dimensioni? (solo Win32) In tal caso, usare una casella combinata perché gli utenti possono selezionare un elemento digitandone il nome completo. Al contrario, l'elenco a discesa Win32 seleziona gli elementi basati solo sull'ultimo carattere digitato (quindi digitando "Jun" in un elenco di mesi corrisponde a novembre, non giugno). In questo caso, usare una casella combinata anche se le possibili scelte sono vincolate.

Caselle di riepilogo modificabili

  • Le possibili scelte sono vincolate? In tal caso, usare invece un elenco a selezione singola o un elenco a discesa normale. Le caselle combinate sono per l'input non vincolato, in cui gli utenti potrebbero dover immettere un valore non attualmente presente nell'elenco. Poiché l'input non è vincolato, se gli utenti immettono testo non valido, è necessario gestire l'errore con un messaggio di errore.
  • È possibile enumerare le scelte più probabili in anticipo? In caso contrario, usare una casella di testo.
  • È importante incoraggiare gli utenti a esaminare le scelte alternative o a invitare il cambiamento? In caso contrario, prendere in considerazione un elenco a discesa modificabile.
  • Vuoi attirare l'attenzione sull'opzione? In caso contrario, prendere in considerazione un elenco a discesa modificabile. Poiché gli elenchi a discesa sono compatti, sono scelte valide per le opzioni da sottodimensionare.
  • Lo spazio sullo schermo è premium? In tal caso, usare un elenco a discesa modificabile perché lo spazio dello schermo usato è fisso e indipendente dal numero di scelte.

Per gli elenchi a discesa, il numero di elementi nell'elenco non è un fattore nella scelta del controllo perché vengono ridimensionati da migliaia di elementi fino a uno. Gli elenchi a discesa modificabili vengono ridimensionati da migliaia di elementi fino a nessuno, perché gli utenti possono immettere un valore non incluso nell'elenco. Poiché gli elenchi a discesa possono essere usati per i dati, il numero di elementi potrebbe non essere noto in anticipo e forse non può essere garantito. Includere sempre almeno tre elementi nelle caselle di riepilogo modificabili per giustificare lo spazio aggiuntivo dello schermo.

Modelli di utilizzo

Gli elenchi a discesa e le caselle combinate hanno diversi modelli di utilizzo:

Utilizzo Esempio
Elenco a discesa un elenco a discesa standard, con un set fisso di valori predeterminati.
Se chiuso, solo l'elemento selezionato è visibile. Quando gli utenti fanno clic sul pulsante a discesa, tutte le opzioni diventano visibili. Per modificare il valore, gli utenti possono aprire l'elenco e fare clic su un altro valore.
screen shot of drop-down list, options hidden
In questo esempio l'elenco è nello stato normale.
screen shot of drop-down list, options displayed
In questo esempio l'elenco è stato eliminato.
Elenco a discesa Anteprima un elenco a discesa che visualizza in anteprima i risultati della selezione per aiutare gli utenti a scegliere.
screen shot of color and text options
In questi esempi l'elenco a discesa visualizza in anteprima i risultati della selezione.
Elenco a discesa modificabile una casella combinata a discesa, che consente agli utenti di immettere un valore che non si trova nell'elenco a discesa.
aa511458.dropdownlists27(en-us,msdn.10).pngscreen shot of editable font-size combo box
Esempi di un elenco a discesa modificabile in modalità di modifica ed eliminazione.
Usare questo controllo quando si vuole offrire la flessibilità di una casella di testo, ma si vuole aiutare gli utenti fornendo un elenco pratico di scelte probabili.
Caselle di riepilogo modificabili una normale casella combinata, che consente agli utenti di immettere un valore che non si trova nell'elenco sempre visibile.
screen shot of drop-down list of font options
In questi esempi, le caselle di riepilogo modificabili vengono sempre visualizzate.
Questo controllo è una scelta migliore rispetto all'elenco a discesa modificabile quando è importante incoraggiare gli utenti a esaminare le scelte alternative o a invitare la modifica.

Linee guida

Generali

  • Non usare la modifica di un elenco a discesa o di una casella combinata per:
    • Eseguire i comandi.
    • Visualizzare altre finestre, ad esempio una finestra di dialogo per raccogliere più input.
    • Visualizzare dinamicamente altri controlli correlati al controllo selezionato (le utilità per la lettura dello schermo non possono rilevare tali eventi).

Presentazione

  • Ordinare le voci di elenco in un ordine logico, ad esempio raggruppando opzioni altamente correlate, posizionando prima le opzioni più comuni o usando l'ordine alfabetico. Ordina i nomi in ordine alfabetico, numeri in ordine numerico e date in ordine cronologico. Gli elenchi con 12 o più elementi devono essere ordinati alfabeticamente per semplificare la ricerca degli elementi.

    Risposta corretta:screen shot of logical drop-down list

    In questo esempio gli elementi dell'elenco vengono ordinati in base alla relazione spaziale.

    Risposta errata:screen shot of disorganized drop-down list

    In questo esempio, ci sono così tanti elementi di elenco che devono essere ordinati in ordine alfabetico.

    Risposta corretta:screen shot of alphabetized drop-down list

    In questo esempio, gli elementi dell'elenco vengono ordinati in ordine alfabetico, ad eccezione dell'opzione che rappresenta tutti gli elementi.

  • Posiziona le opzioni che rappresentano Tutti o Nessuno all'inizio dell'elenco, indipendentemente dall'ordinamento degli elementi rimanenti.

  • Racchiudere le meta-opzioni tra parentesi.

    Screenshot that shows a drop-down list with '(None)' selected.

    In questo esempio "(None)" è una meta-opzione perché non è un valore valido per la scelta, ma descrive che l'opzione stessa non viene usata.

  • Quando si disabilita un elenco a discesa o una casella combinata, disabilitare anche eventuali etichette associate e pulsanti di comando.

  • Quando viene usato un singolo elenco a discesa per modificare la visualizzazione di un controllo associato, modificare la visualizzazione immediatamente dopo la selezione anziché richiedere un pulsante di comando separato. Usare un pulsante di comando separato solo se l'elenco richiede molto tempo per il rendering. Tuttavia, le intestazioni di elenco e i pulsanti di menu sono i controlli preferiti a questo scopo.

  • Non avere vocidi elenco vuote usa invece le meta-opzioni. Gli utenti non sanno come interpretare gli elementi vuoti, mentre il significato delle meta-opzioni è esplicito.

    Risposta corretta:screen shot of drop-down list with none selected

    Risposta errata:screen shot of drop-down list with blank selected

    Nell'esempio errato il significato dell'opzione vuota non è chiaro.

Anteprima elenchi a discesa

  • Usare le anteprime nelle voci dell'elenco quando è preferibile visualizzare con le immagini rispetto all'uso di testo da solo.

    screen shot of drop-down list of fonts previewed

    In questo esempio, l'anteprima illustra le opzioni molto meglio del testo da solo.

  • Non usare icone inutili e inutili nelle anteprime.

    Risposta errata:screen shot of drop-down list of labels with icons

    In questo esempio le icone di anteprima non sono necessarie perché non comunicano informazioni.

Caselle combinate

  • Limitare la lunghezza del testo di input quando è possibile. Ad esempio, se l'input valido è un numero compreso tra 0 e 999, usare una casella combinata limitata a tre caratteri.

  • Se sono disponibili molte opzioni possibili, concentrarsi sul contenuto dell'elenco sulle opzioni più probabili. Poiché gli utenti possono immettere valori che non sono presenti nell'elenco, le caselle combinate non devono elencare tutte le scelte, solo le scelte probabili o un campione rappresentativo.

    screen shot of drop-down list of font sizes

    In questo esempio, molte scelte valide non sono elencate, ad esempio 15 o caratteri di mezza dimensione, ad esempio 9,5.

Valori predefiniti

  • Selezionare l'opzione più sicura (per evitare la perdita di dati o l'accesso al sistema) e l'opzione più sicura per impostazione predefinita. Se la sicurezza e la sicurezza non sono fattori, selezionare l'opzione più probabile o conveniente.
    • Eccezione: visualizzare un valore predefinito vuoto se il controllo rappresenta una proprietà in uno stato misto, che si verifica quando si visualizza una proprietà per più oggetti che non hanno la stessa impostazione.

Prompt

Un prompt è un'etichetta o un'istruzione breve inserita all'interno di un elenco a discesa modificabile come valore predefinito. A differenza del testo statico, le richieste scompaiono dalla schermata dopo che gli utenti digitano qualcosa nella casella combinata o ottengono lo stato attivo per l'input.

screen shot of a search box

Richiesta tipica.

Usare un prompt quando:

  • Lo spazio sullo schermo è così premium che l'uso di un'etichetta o di un'istruzione è indesiderato, ad esempio su una barra degli strumenti.
  • Il prompt è principalmente per identificare lo scopo dell'elenco in modo compatto. Non devono essere informazioni cruciali che gli utenti devono visualizzare durante l'uso della casella combinata.

Non usare le richieste solo per indirizzare gli utenti a selezionare un elemento dall'elenco o a fare clic sui pulsanti. Ad esempio, prompt come Selezionare un'opzione o Immettere un nome file e quindi fare clic su Invia non sono necessari.

Quando si usano le richieste:

  • Disegnare il testo del prompt in grigio corsivo e il testo reale in nero normale. Il testo della richiesta non deve essere confuso con il testo reale.
  • Mantenere conciso il testo della richiesta. È possibile usare frammenti invece di frasi complete.
  • Usare la maiuscola in stile frase.
  • Non usare la punteggiatura finale o i puntini di sospensione.
  • Il testo della richiesta non deve essere modificabile e deve scomparire dopo che gli utenti hanno fatto clic o tabulazione nella casella di testo.
    • Eccezione: il prompt viene visualizzato se la casella di testo ha lo stato attivo di input predefinito e scompare solo dopo che l'utente inizia a digitare.
  • Il testo della richiesta viene ripristinato se la casella di testo è ancora vuota quando perde lo stato attivo per l'input.

Risposta errata:screen shot of six editable drop-down lists

In questo esempio lo spazio dello schermo non è premium; una volta compilato un elenco a discesa modificabile, è difficile per gli utenti ricordare ciò che è per; e il testo della richiesta è modificabile e disegnato allo stesso modo del testo reale.

screen shot of drop-down list and specifications

Dimensioni consigliate e spaziatura per elenchi a discesa e caselle combinate.

  • Scegliere una larghezza appropriata per i dati validi più lunghi. Gli elenchi a discesa non possono essere scorrevoli orizzontalmente, quindi gli utenti possono visualizzare solo ciò che è visibile nel controllo. Si noti, tuttavia, che le caselle combinate possono avere la funzionalità Di registrazione automatica abilitata.
  • Includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) che verranno localizzati.
  • Scegliere una lunghezza dell'elenco che elimina lo scorrimento verticale non necessario. Poiché gli elenchi a discesa vengono visualizzati su richiesta, gli elenchi devono essere visualizzati fino a 30 elementi. Le caselle di riepilogo modificabili (quelle che non hanno un pulsante a discesa) devono essere visualizzate tra 3 e 12 elementi.

Etichette

Etichette di controllo

  • Scrivere l'etichetta come parola o frase, non come frase, e terminarla con due punti. Eccezioni:

    • Elenchi a discesa modificabili con prompt che si trovano in cui lo spazio è premium.
    • Se un elenco a discesa o una casella combinata è subordinato a un pulsante di opzione o a una casella di controllo e viene introdotto dalla relativa etichetta che termina con due punti, non inserire un'etichetta aggiuntiva nel controllo.
  • Assegnare una chiave di accesso univoca per ogni etichetta. Per linee guida, vedi Tastiera.

  • Usare la maiuscola in stile frase.

  • Posizionare l'etichetta a sinistra o sopra il controllo e allineare l'etichetta al bordo sinistro del controllo. Se l'etichetta è a sinistra, allineare verticalmente il testo dell'etichetta al testo del controllo.

    Risposta corretta:screen shot of drop-down list label alignment

    In questo esempio l'etichetta è allineata correttamente al testo del controllo.

    Risposta errata:screen shot of drop-down list incorrectly aligned

    In questo esempio l'etichetta è allineata in modo non corretto al testo del controllo.

  • È possibile specificare unità (secondi, connessioni e così via) tra parentesi dopo l'etichetta.

  • Non rendere il contenuto dell'elenco a discesa o della casella combinata (o la relativa etichetta di unità) parte di una frase, perché non è localizzabile.

Testo opzione

  • Assegnare un nome univoco a ogni opzione.
  • Usare la maiuscola in stile frase, a meno che un elemento non sia un sostantivo corretto.
  • Scrivere l'etichetta come parola o frase, non come frase e non usare punteggiatura finale.
  • Usare la formulazione parallela e provare a mantenere la lunghezza uguale per tutte le opzioni.

Testo informativo

  • Se è necessario aggiungere testo informativo su un elenco a discesa o una casella combinata, aggiungerlo sopra l'etichetta. Usare frasi complete con punteggiatura finale.

  • Usare la maiuscola in stile frase.

  • Informazioni aggiuntive utili ma non necessarie devono essere mantenute brevi. Inserire queste informazioni tra parentesi tra l'etichetta e i due punti o senza parentesi sotto il controllo.

    screen shot of drop-down list with added data

    Questo esempio mostra informazioni aggiuntive posizionate sotto il controllo .

Documentazione

Quando si fa riferimento a elenchi a discesa:

  • Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere il carattere di sottolineatura o i due punti della chiave di accesso; includere un elenco o una casella, indipendentemente dal fatto che sia più chiaro.
  • Per le opzioni di elenco, usare il testo esatto dell'opzione, inclusa la relativa maiuscola.
  • Nella programmazione e in altri documenti tecnici fare riferimento agli elenchi a discesa come elenchi a discesa. In qualsiasi altra posizione, usare un elenco o una casella, indipendentemente dal fatto che sia più chiaro.
  • Per descrivere l'interazione dell'utente, usare clic.
  • Quando possibile, formattare le opzioni di etichetta e elenco usando il testo in grassetto. In caso contrario, inserire l'etichetta e le opzioni tra virgolette solo se necessario per evitare confusione.

Esempio: nell'elenco Dimensioni carattere fare clic su Tipi di carattere di grandi dimensioni.

Quando si fa riferimento a caselle combinate:

  • Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere il carattere di sottolineatura o i due punti della chiave di accesso; includere la casella di parole.
  • Per le opzioni di elenco, usare il testo esatto dell'opzione, inclusa la relativa maiuscola.
  • Nella programmazione e in altri documenti tecnici fare riferimento alle caselle combinate come caselle combinate. Ovunque, usa box.
  • Per descrivere l'interazione dell'utente, usare invio.
  • Quando possibile, formattare le opzioni di etichetta e elenco usando il testo in grassetto. In caso contrario, inserire l'etichetta e le opzioni tra virgolette solo se necessario per evitare confusione.

Esempio: nella casella Tipo di carattere immettere il tipo di carattere che si vuole usare.