Caselle di testo

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 di progettazione correnti.

Con una casella di testo, gli utenti possono visualizzare, immettere o modificare un testo o un valore numerico.

Casella di testo tipica.

Nota

Le linee guida relative al layout, ai tipi di carattere e ai palloncini sono presentate in articoli separati.

È il controllo giusto?

Per decidere, prendi in considerazione queste domande:

• È pratico enumerare tutti i valori validi in modo efficiente? In tal caso, prendere in considerazione un elenco a selezione singola, una visualizzazione elenco a discesa, un elenco a discesa modificabile o un dispositivo di scorrimento .
• I dati validi non hanno alcun vincolo? Oppure i dati validi sono vincolati solo in base al formato (lunghezza vincolata o tipi di caratteri)? In tal caso, usare una casella di testo.
• Il valore rappresenta un tipo di dati che dispone di un controllo comune specifico? Gli esempi includono data, ora o indirizzo IPv4 o IPv6. In tal caso, usare il controllo appropriato, ad esempio un controllo data anziché una casella di testo.
• Se i dati sono numerici:
  • Gli utenti percepiscono l'impostazione come quantità relativa? Se sì, usa un dispositivo di scorrimento.
  • L'utente trarrebbe vantaggio da un riscontro immediato sull'effetto delle modifiche dell'impostazione? In tal caso, usare un dispositivo di scorrimento, possibilmente insieme a una casella di testo. Ad esempio, gli utenti possono scegliere facilmente un colore usando un dispositivo di scorrimento perché possono visualizzare immediatamente l'effetto delle modifiche apportate ai valori di tonalità, saturazione o luminosità.

Concetti relativi alla progettazione

Anche se le caselle di testo hanno il vantaggio di essere molto flessibili, hanno lo svantaggio di avere vincoli minimi. Gli unici vincoli su una casella di testo modificabile sono:

• Facoltativamente, è possibile impostare il numero massimo di caratteri.
• Facoltativamente, è possibile limitare l'input solo ai caratteri numerici (0 9).
• Se si usa un controllo spin, è possibile limitare le scelte dei controlli di selezione a valori validi.

A parte la loro lunghezza e la presenza facoltativa di un controllo spin, le caselle di testo non hanno indizi visivi che suggeriscono i valori validi o il relativo formato. Ciò significa fare affidamento sulle etichette per trasmettere queste informazioni agli utenti. Se gli utenti immettono testo non valido, è necessario gestire l'errore con un messaggio di errore.

Come regola generale, è consigliabile usare il controllo più vincolato che è possibile usare. Usare controlli non vincolati come caselle di testo come ultima risorsa. Detto questo, quando si considerano i vincoli, tenere presente le esigenze degli utenti globali. Ad esempio, un controllo vincolato a Stati Uniti i codici POSTALI non è globalizzato, ma una casella di testo non vincolata che accetta qualsiasi formato di codice postale è.

Modelli di utilizzo

Una casella di testo è un controllo flessibile con diversi usi possibili.

Label	Valore
Input dei dati Casella di testo a riga singola e senza vincoli utilizzata per immettere o modificare stringhe brevi.	Casella di testo a riga singola, senza vincoli.
Input di dati formattato Set di caselle di testo a riga singola brevi e di dimensioni fisse utilizzate per immettere dati con un formato specifico.	Casella di testo utilizzata per l'input di dati formattato. Nota: La funzionalità di uscita automatica sposta automaticamente lo stato attivo dell'input da una casella di testo alla successiva. Uno svantaggio di questo approccio è che i dati non possono essere copiati o incollati come una singola unità.
Input di dati assistito Casella di testo a riga singola e senza vincoli usata per immettere o modificare stringhe, combinate con un pulsante di comando che consente agli utenti di selezionare valori validi.	In questo esempio, il comando Sfoglia consente agli utenti di selezionare valori validi.
Input testuale Casella di testo multilinea e senza vincoli utilizzata per immettere o modificare stringhe lunghe.	Casella di testo multilinea senza vincoli.
Input numerico Casella di testo a riga singola, solo numerica usata per immettere o modificare i numeri, con un controllo spin facoltativo per facilitare l'input basato sul mouse.	Casella di testo utilizzata per l'input numerico. La combinazione di una casella di testo e del controllo spin associato è detta casella di selezione.
Input della password e del PIN Casella di testo a riga singola e senza vincoli usata per immettere password e PIN in modo sicuro.	Casella di testo utilizzata per immettere le password.
Output dei dati Casella di testo a riga singola, di sola lettura, sempre visualizzata senza bordo, utilizzata per visualizzare stringhe brevi.	A differenza del testo statico, i dati visualizzati utilizzando una casella di testo possono essere scorrevoli (utile se i dati sono più ampi del controllo), selezionati e copiati. Casella di testo di sola lettura utilizzata per visualizzare i dati.
Output testuale Casella di testo multilinea di sola lettura utilizzata per visualizzare stringhe lunghe.	Casella di testo di sola lettura utilizzata per visualizzare i dati.

Indicazioni

Generale

• Quando si disabilita una casella di testo, disabilitare anche eventuali etichette associate, etichette di istruzioni, controlli di selezione e pulsanti di comando.

• Usare il completamento automatico per consentire agli utenti di immettere i dati che è probabile che vengano usati ripetutamente. Gli esempi includono nomi utente, indirizzi e nomi di file. Tuttavia, non usare il completamento automatico per caselle di testo che possono contenere informazioni riservate, ad esempio password, PIN, numeri di carta di credito o informazioni mediche.

• Non rendere gli utenti scorrere inutilmente. Se si prevede che i dati siano più grandi della casella di testo e si può facilmente ingrandire la casella di testo senza danneggiare il layout, ridimensionare la casella per eliminare la necessità di scorrimento.

  Non corretto:

  

  In questo esempio, la casella di testo deve essere resa molto più lunga per gestire i dati.

• Barre di scorrimento:

  • Non inserire barre di scorrimento orizzontali nelle caselle di testo a più righe. Usare invece lo scorrimento verticale e il ritorno a capo automatico.
  • Non inserire barre di scorrimento nelle caselle di testo a riga singola.

• Per l'input numerico, è possibile usare un controllo spin. Per l'input testuale, usare invece un elenco a discesa o un elenco a discesa modificabile.

• Non usare la funzionalità di uscita automatica, ad eccezione dell'input di dati formattato. Lo spostamento automatico dello stato attivo può sorprendere gli utenti.

Caselle di testo modificabili

• 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 di testo numerica limitata a tre caratteri. Tutte le parti delle caselle di testo che usano l'input dati formattato devono avere una lunghezza breve e fissa.

• Essere flessibili con i formati di dati. Se gli utenti possono immettere testo usando un'ampia gamma di formati, provare a gestire tutti i più comuni. Ad esempio, molti nomi, numeri e identificatori possono essere immessi con spazi facoltativi e punteggiatura e la maiuscola spesso non importa.

• Se non è possibile gestire i formati probabili, richiedere un formato specifico usando l'input dati formattato o indicare i formati validi nell'etichetta.

  Accettabile:

  

  In questo esempio una casella di testo richiede l'input in un formato specifico.

  Meglio:

  

  In questo esempio viene usato il modello di input dati formattato per richiedere un formato specifico.

  Miglior:

  

  In questo esempio una casella di testo gestisce tutti i formati probabili.

• Valutare la flessibilità del formato quando si sceglie la lunghezza massima di input. Ad esempio, un numero di carta di credito valido può usare fino a 19 caratteri, in modo da limitare la lunghezza a qualsiasi più breve sarebbe difficile immettere i numeri usando i formati più lunghi.

• Non usare il modello di input dati formattato se gli utenti sono più probabili incollare dati lunghi e complessi. Invece, riservare il modello di input dati formattato per situazioni in cui gli utenti sono più probabili digitare i dati.

  

  In questo esempio il modello di input dati formattato non viene usato, in modo che gli utenti possano incollare gli indirizzi IPv6.

• Se gli utenti hanno maggiore probabilità di immettere nuovamente l'intero valore, selezionare tutto il testo sullo stato attivo dell'input. Se gli utenti sono più probabilità di modificare, posizionare il cursore alla fine del testo.

  

  In questo esempio gli utenti sono più probabilità di sostituire rispetto alla modifica, quindi l'intero valore viene selezionato sullo stato attivo dell'input.

  

  In questo esempio gli utenti sono più probabili aggiungere parole chiave rispetto a sostituire il testo, quindi il caret viene posizionato alla fine del testo.

• Usare sempre una casella di testo a più righe se i caratteri di nuova riga sono input validi.

• Quando la casella di testo è per un file o un percorso, specificare sempre un pulsante Sfoglia.

Caselle di testo numeriche

• Scegliere l'unità più comoda ed etichettare le unità. Ad esempio, prendere in considerazione l'uso di millilitri anziché litri (o viceversa), percentuali anziché valori diretti (o viceversa) e così via.

  Corretto:

  

  In questo esempio, l'unità viene etichettata, ma richiede agli utenti di immettere numeri decimali.

  Meglio:

  

  In questo esempio la casella di testo usa un'unità più comoda.

• Usare un controllo spin ogni volta che è utile. Tuttavia, a volte i controlli spin non sono pratici, ad esempio quando gli utenti devono immettere molti numeri di grandi dimensioni. Usare i controlli di rotazione quando:

  • L'input è probabilmente un numero ridotto, in genere inferiore a 100.
  • È probabile che gli utenti facciano una piccola modifica a un numero esistente.
  • È più probabile che gli utenti usino il mouse rispetto alla tastiera.

• Allinea a destra il testo numerico ogni volta che:

  • C'è più di una casella di testo numerica.
  • Le caselle di testo sono allineate verticalmente.
  • Gli utenti potrebbero aggiungere o confrontare i valori.

  Corretto:

  

  In questo esempio il testo numerico è allineato a destra per semplificare il confronto dei valori.

  Non corretto:

  

  In questo esempio il testo numerico non è allineato correttamente a sinistra.

• Allinea sempre i valori monetari a destra.

• Non assegnare significati speciali a valori numerici specifici, anche se tali significati speciali vengono usati internamente dall'applicazione. Usare invece caselle di controllo o pulsanti di opzione per una selezione esplicita dell'utente.

  Non corretto:

  

  In questo esempio il valore -1 ha un significato speciale.

  Corretto:

  

  In questo esempio, una casella di controllo rende esplicita l'opzione.

Input password e PIN

• Usare sempre il controllo comune della password anziché crearne uno personalizzato. Le password e i PIN richiedono un trattamento speciale da gestire in modo sicuro.

Per altre linee guida ed esempi, vedere Palloncini.

Output testuale

• È consigliabile usare il colore del sistema di sfondo bianco per testo di sola lettura multilinea di grandi dimensioni. Uno sfondo bianco semplifica la lettura del testo. Un sacco di testo su uno sfondo grigio scoraggia la lettura.

Per altre informazioni sui colori di sfondo, vedere Font.

Output dei dati

• Non usare un bordo per caselle di testo a riga singola e di sola lettura. Il bordo è un indizio visivo che il testo è modificabile.
• Non disabilitare caselle di testo a riga singola e di sola lettura. Ciò impedisce agli utenti di selezionare e copiare il testo negli Appunti. Impedisce inoltre agli utenti di scorrere i dati se supera le dimensioni dei limiti.
• Non impostare una tabulazione nella casella di testo a riga singola, di sola lettura, a meno che l'utente non debba scorrere o copiare il testo.

Convalida di input e gestione degli errori

Poiché le caselle di testo in genere non sono vincolate ad accettare solo l'input valido, potrebbe essere necessario convalidare l'input e gestire eventuali problemi. Convalidare i vari tipi di problemi di input come indicato di seguito:

• Se l'utente immette un carattere non valido, ignorare il carattere e visualizzare un palloncino di input che spiega i caratteri validi.

  

  In questo esempio un palloncino segnala un carattere di input non corretto.

• Se i dati di input hanno un valore o un formato non valido, visualizzare un palloncino di input quando la casella di testo perde lo stato attivo di input.

• Se i dati di input non sono coerenti con altri controlli nella finestra, assegnare un messaggio di errore al completamento dell'intero input, ad esempio quando gli utenti fanno clic su OK per una finestra di dialogo modale.

Non cancellare i dati di input non validi, a meno che gli utenti non siano in grado di correggere facilmente gli errori. In questo modo gli utenti possono correggere gli errori senza iniziare. Ad esempio, è consigliabile cancellare password e PIN non corrette perché gli utenti non possono correggerli facilmente.

Per altre linee guida ed esempi, vedere Messaggi di errore e palloncini.

Prompt

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

Richiesta tipica.

Usare un prompt quando:

• Lo spazio dello schermo è ad un livello premium che usa un'etichetta o un'istruzione indesiderata, ad esempio su una barra degli strumenti.
• Il prompt è principalmente per identificare lo scopo della casella di testo in modo compatto. Non devono essere informazioni cruciali che l'utente deve visualizzare durante l'uso della casella di testo.

Non usare le richieste solo per indirizzare gli utenti a digitare qualcosa o a fare clic su pulsanti. Ad esempio, non scrivere testo del prompt che indica Immettere un nome file e quindi fare clic su Invia.

Quando si usano le richieste:

• Disegna il testo del prompt in grigio corsivo e il testo di input effettivo 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 le maiuscole/minuscole come nelle frasi comuni.
• Non usare la punteggiatura finale o i puntini di sospensione.
• Il testo della richiesta non deve essere modificabile e deve scomparire una volta che gli utenti fa clic in o scheda nella casella di testo.
  • Eccezione: Se la casella di testo ha lo stato attivo di input predefinito, viene visualizzata la richiesta e scompare dopo l'avvio della digitazione dell'utente.
• Il testo del prompt viene ripristinato se la casella di testo è ancora vuota quando perde lo stato attivo dell'input.

Dimensioni e spaziatura consigliate

Dimensioni consigliate e spaziatura per le caselle di testo.

La larghezza di una casella di testo è un indizio visivo delle dimensioni di input previste. Quando si ridimensionano le caselle di testo:

• Scegliere una larghezza appropriata per i dati validi più lunghi. Nella maggior parte delle situazioni, gli utenti non devono scorrere la stringa più lunga probabilmente immessa o visualizzata.
• Includere un 30% aggiuntivo (fino al 200 % per il testo più breve) per qualsiasi testo (ma non numeri) che verrà localizzato.
• Se l'input previsto non ha dimensioni specifiche, scegliere una larghezza coerente con le altre caselle di testo o controlli nella finestra.
• Dimensioni delle caselle di testo a più righe per visualizzare un numero integrale di righe di testo.

Etichette

Etichette casella di testo

• Tutte le caselle di testo richiedono etichette. Scrivere l'etichetta come parola o frase, non come frase, terminando con due punti e usando testo statico.

  Eccezioni:

  • Caselle di testo con prompt che si trovano in cui lo spazio è premium.

  • Per l'etichettatura, un gruppo di caselle di testo usate per l'input dati formattato deve essere considerato come una singola casella di testo.

  • Se una casella di testo è subordinata a un pulsante di opzione o a una casella di controllo e viene introdotta dalla relativa etichetta che termina con due punti, non inserire un'etichetta aggiuntiva nella casella di testo.

  • Omettere le etichette di controllo che rimettono l'istruzione principale. In questo caso, l'istruzione principale accetta i due punti (a meno che non sia una domanda) e la chiave di accesso.

    Accettabile:

    

    In questo esempio, l'etichetta della casella di testo è solo una riassenneszione dell'istruzione principale.

    Meglio:

    

    In questo esempio l'etichetta ridondante viene rimossa, quindi l'istruzione principale accetta i due punti e la chiave di accesso.

• Assegnare una chiave di accesso univoca. Per le linee guida per l'assegnazione delle chiavi di accesso, vedere Tastiera.

• Usare le maiuscole/minuscole come nelle frasi comuni.

• Posizionare l'etichetta a sinistra o sopra la casella di testo e allineare l'etichetta con il bordo sinistro della casella di testo. Se l'etichetta si trova a sinistra, allineare verticalmente il testo dell'etichetta con il testo della casella di testo.

  Corretto:

  

  

  In questi esempi l'etichetta in alto si allinea al bordo sinistro della casella di testo e l'etichetta a sinistra si allinea al testo nella casella di testo.

  Non corretto:

  

  

  In questi esempi non corretti, l'etichetta in alto si allinea al testo nella casella di testo e l'etichetta a sinistra si allinea alla parte superiore della casella di testo.

• È possibile specificare unità (ad esempio secondi o connessioni) tra parentesi dopo l'etichetta.

• Se una casella di testo accetta un numero massimo massimo arbitrariamente ridotto di caratteri, è possibile specificare l'input massimo nell'etichetta. La larghezza della casella di testo deve anche suggerire la dimensione massima.

  

  In questo esempio l'etichetta fornisce il numero massimo di caratteri.

• Non rendere il contenuto della casella di testo (o la relativa etichetta di unità) parte di una frase, perché non è localizzabile.

• Se la casella di testo può essere usata per immettere diversi elementi, rendere chiaro come separare gli elementi nell'etichetta.

  

  In questo esempio viene specificato il separatore di elementi nell'etichetta.

• Per linee guida sull'indicazione dell'input richiesto, vedere Input obbligatorio nelle finestre di dialogo.

Etichette di istruzione

• Se è necessario aggiungere testo istruzioni su una casella di testo, aggiungerlo sopra l'etichetta. Usare frasi complete con punteggiatura finale.

• Usare le maiuscole/minuscole come nelle frasi comuni.

• Altre informazioni utili ma non necessarie devono essere mantenute brevi. Inserire queste informazioni tra parentesi tra l'etichetta e i due punti o senza parentesi sotto la casella di testo.

  

  In questo esempio le informazioni aggiuntive vengono posizionate sotto la casella di testo.

Etichette del prompt

• Mantenere conciso il testo del prompt. È possibile usare frammenti anziché frasi complete.
• Usare le maiuscole/minuscole come nelle frasi comuni.
• Non usare la punteggiatura finale o i puntini di sospensione.
• Se il prompt indirizza gli utenti a immettere informazioni che verranno eseguite da un pulsante accanto alla casella di testo, è sufficiente posizionare il pulsante accanto alla casella di testo. Non usare il prompt per indirizzare gli utenti a fare clic sul pulsante (ad esempio, non scrivere testo del prompt che indica, Trascinare un file e quindi fare clic su Invia).

Documentazione

Quando si fa riferimento alle caselle di testo:

• Usare il tipo per fare riferimento alle interazioni utente che richiedono la digitazione o il incollamento; in caso contrario, usare invio se gli utenti possono inserire informazioni nella casella di testo usando altri mezzi, ad esempio selezionando il valore da un elenco o usando un pulsante Sfoglia.

• Utilizzare la selezione per fare riferimento a una voce in una casella di testo di sola lettura.

• Usare il testo dell'etichetta esatta, inclusa la maiuscola e includere la casella di parole. Non includere il carattere di sottolineatura o i punti di sottolineatura della chiave di accesso. Non fare riferimento a una casella di testo come casella di testo o un campo.

• Se possibile, formattare l'etichetta usando il testo grassetto. In caso contrario, inserire l'etichetta tra virgolette solo se necessario per evitare confusione.

  Esempio: digitare la password nella casella Password e quindi fare clic su OK.

• Se la casella di testo richiede un formato specifico, documento solo il formato accettabile usato più comunemente. Consente agli utenti di individuare tutti gli altri formati personalizzati. Si vuole essere flessibili con i formati di dati, ma in questo modo non dovrebbe risultare una documentazione complessa.

  Corretto:

  Immettere il numero di serie della parte usando il formato 1234-56-7890.

  Non corretto:

  Immettere il numero di serie della parte usando uno dei formati seguenti:

  1234567890

  1234-56-7890

  1234 56 7890