Windows 7 elenchi & a discesa Caselle combinate

Nota

Questa guida alla 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 correnti sulla progettazione.

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

screen shot of reminder time combo box

Una tipica casella combinata.

I termini seguenti sono importanti per comprendere come si legge 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 agli utenti di immettere un valore non incluso 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, prendi in considerazione queste domande:

  • Il controllo viene usato per scegliere un'opzione da un elenco di valori reciprocamente esclusivi? Se non è così, usa un altro controllo. Per scegliere più opzioni, usare invece un elenco di selezione multipla standard, un elenco di caselle di controllo, un generatore di elenchi o un elenco aggiungi/rimuovi.
  • I comandi delle opzioni sono? In tal caso, usare 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 di programma? In entrambi i casi, un elenco a discesa o una casella combinata è una scelta appropriata. 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 di selezione singola o una casella di riepilogo modificabile, che danno maggiore enfasi alle scelte alternative.

    screen shot of highest quality as default button

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

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

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

  • Esistono altri elenchi a discesa nella finestra? In tal caso, è consigliabile usare un elenco a discesa per la coerenza.

Elenchi a discesa modificabili

Oltre ai principi appena forniti per gli elenchi a discesa, si applicano anche quanto segue:

  • 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 che 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 viene usato per elencare l'input utente precedente? A meno che gli utenti non debbano esaminare l'elenco completo dell'input precedente, usare una casella di testo con l'opzione completa automaticamente.

    screen shot of run dialog box with drop-down list

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

    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 rivedere le scelte alternative o invitare a cambiare? In tal caso, prendere in considerazione l'uso di una casella di riepilogo modificabile. Con un elenco a discesa modificabile, gli utenti non saranno consapevoli delle alternative finché l'elenco non verrà 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 digitando 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 corrisponderebbe 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 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 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 rivedere le scelte alternative o invitare a cambiare? 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 compattati, sono scelte valide per le opzioni che si desidera sottodimensionare.
  • Lo spazio dello 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é ridimensiona 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 dello schermo aggiuntivo.

Modelli di utilizzo

Elenchi a discesa e caselle combinate hanno diversi modelli di utilizzo:

Utilizzo Esempio
Elenco a discesa elenca 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 si trova nello stato normale.
screen shot of drop-down list, options displayed
In questo esempio l'elenco è stato eliminato.
Elenco a discesa anteprima 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 elenca in anteprima i risultati della selezione.
Elenco a discesa modificabile di una casella combinata a discesa, che consente agli utenti di immettere un valore non incluso 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 nelle 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 casella combinata regolare, che consente agli utenti di immettere un valore che non è nell'elenco sempre visibile.
screen shot of drop-down list of font options
In questi esempi vengono sempre visualizzate le caselle di riepilogo modificabili.
Questo controllo è una scelta migliore rispetto all'elenco a discesa modificabile quando è importante incoraggiare gli utenti a esaminare le scelte alternative o invitare la modifica.

Indicazioni

Generale

  • 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.
    • Visualizza 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 le opzioni altamente correlate, inserendo 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.

    Corretta:screen shot of logical drop-down list

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

    Errato:screen shot of disorganized drop-down list

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

    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.

  • Posizionare le opzioni che rappresentano All o None 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 e pulsanti di comando associati.

  • 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 il rendering dell'elenco richiede una quantità significativa di tempo. Tuttavia, le intestazioni di elenco e i pulsanti di menu sono i controlli preferiti a questo scopo.

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

    Corretta:screen shot of drop-down list with none selected

    Errato:screen shot of drop-down list with blank selected

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

Elenco a discesa Anteprima

  • 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.

    Errato: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 si trovano nell'elenco, le caselle combinate non devono elencare tutte le opzioni, solo le scelte probabili o un esempio rappresentativo.

    screen shot of drop-down list of font sizes

    In questo esempio, molte scelte valide non sono elencate, ad esempio 15 o tipi di carattere di dimensioni medie, 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 quando 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.
  • La richiesta è 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, le richieste come Selezionare un'opzione o Immettere un nome file e quindi fare clic su Invia non sono necessarie.

Quando si usano le richieste:

  • Disegnare il testo della richiesta in corsivo grigio e testo reale in nero normale. Il testo del prompt non deve essere confuso con il testo reale.
  • Mantenere conciso il testo del prompt. È possibile usare frammenti anziché 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 su o tabulazione nella casella di testo.
    • Eccezione: La richiesta viene visualizzata se la casella di testo ha lo stato attivo per l'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.

Errato: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 del prompt è 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, in modo che gli utenti possano visualizzare solo ciò che è visibile nel controllo. Si noti, tuttavia, che le caselle combinate possono avere la funzionalità AutoScroll abilitata.
  • Includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) che verrà localizzato.
  • 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 le linee guida, vedere Tastiera.

  • Usare la maiuscola in stile frase.

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

    Corretta:screen shot of drop-down list label alignment

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

    Errato:screen shot of drop-down list incorrectly aligned

    In questo esempio, l'etichetta è allineata in modo non corretto con il 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 unità) parte di una frase, perché non è localizzabile.

Testo dell'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 circa la stessa 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 altro punto, 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 altre documentazioni tecniche, 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 desidera utilizzare.