Caselle di testo

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

Una casella di testo tipica.

Questo è il controllo giusto?

Per decidere, considerare queste domande:

• È pratico enumerare tutti i valori validi in modo efficiente? In tal caso, considerare un elenco a selezione singola , visualizzazione elenco, elenco a discesa, elenco a discesa modificabile o dispositivo di scorrimento.
• I dati validi non sono completamente vincolati? 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 con un controllo comune specializzato? 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? In tal caso, usare un dispositivo di scorrimento.
  • L'utente può trarre vantaggio dal feedback immediato sull'effetto delle modifiche all'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 ai valori di tonalità, saturazione o luminosità.

Concetti di progettazione

Anche se le caselle di testo hanno il vantaggio di essere molto flessibili, hanno lo svantaggio di avere vincoli minimi. Gli unici vincoli di 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 di selezione , è possibile limitare le scelte del controllo di selezione a valori validi.

A parte la lunghezza e la presenza facoltativa di un controllo di selezione, le caselle di testo non contengono 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 controlli non vincolati come caselle di testo come ultima risorsa. Detto questo, quando si considerano i vincoli, tenere presenti le esigenze degli utenti globali. Ad esempio, un controllo vincolato ai codici POSTALI degli Stati Uniti 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.

Etichetta	Valore
di input dati Casella di testo senza vincoli a riga singola utilizzata per immettere o modificare stringhe brevi.	Casella di testo senza vincoli a riga singola.
di input dei dati formattati Set di caselle di testo a riga singola brevi e 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 Una casella di testo a riga singola e senza vincoli usata per immettere o modificare stringhe, combinata 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.
di input testuale Casella di testo multilinea non vincolata utilizzata per immettere o modificare stringhe lunghe.	Casella di testo multilinea senza vincoli.
input numerico Casella di testo a riga singola, solo numerica utilizzata per immettere o modificare i numeri, con un controllo di selezione 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 di selezione associato viene chiamata casella di selezione .
password e input PIN Casella di testo senza vincoli a riga singola 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, è possibile scorrere i dati visualizzati usando una casella di testo (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.

Istruzioni

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 le 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 aumentare la casella di testo senza danneggiare il layout, ridimensionare la casella per eliminare la necessità di scorrimento.

  risposta errata:

  

  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 di dati formattato devono avere una lunghezza fissa breve.

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

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

  accettabile:

  

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

  migliore:

  

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

  migliore:

  

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

• Prendere in considerazione 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 valore più breve renderebbe difficile immettere i numeri usando i formati più lunghi.

• Non usare il modello di input dei dati formattato se è più probabile che gli utenti incollare dati lunghi e complessi. Riservare invece il modello di input dei dati formattato per le situazioni in cui è più probabile che gli utenti digitano i dati.

  

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

• Se è più probabile che gli utenti reimmetteranno l'intero valore, selezionare tutto il testo sullo stato attivo per l'input. Se è più probabile che gli utenti modifichino, posizionare il cursore alla fine del testo.

  

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

  

  In questo esempio, gli utenti hanno maggiori probabilità di aggiungere parole chiave rispetto a sostituire il testo, quindi il cursore 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à. Si consideri, ad esempio, l'uso di millilitri anziché litri (o viceversa), percentuali anziché valori diretti (o viceversa) e così via.

  risposta esatta:

  

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

  migliore:

  

  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 elevati. Usare i controlli spin quando:

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

• testo numerico allineato a destra ogni volta che:

  • È presente più di una casella di testo numerica.
  • Le caselle di testo sono allineate verticalmente.
  • È probabile che gli utenti possano aggiungere o confrontare i valori.

  risposta esatta:

  

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

  risposta errata:

  

  In questo esempio il testo numerico non è allineato a sinistra in modo errato.

• Valori monetari sempre allineati 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.

  risposta errata:

  

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

  risposta esatta:

  

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

Input di password e PIN

• Usare sempre il controllo comune delle password invece di crearne uno personalizzato. Password e PIN richiedono un trattamento speciale per essere gestito in modo sicuro.

Per altre linee guida ed esempi, vedere Balloons.

Output testuale

• È consigliabile usare il colore del sistema di sfondo bianco per testo di sola lettura su più righe 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 Tipi di carattere.

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 dell'input e gestione degli errori

Poiché le caselle di testo in genere non sono vincolate ad accettare solo 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 problema di input che spiega i caratteri validi.

  

  In questo esempio, un fumetto segnala un carattere di input non corretto.

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

• Se i dati di input non sono coerenti con altri controlli nella finestra, inviare un messaggio di errore al termine 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 ricominciare. Ad esempio, è consigliabile cancellare password e PIN non corretti perché gli utenti non possono correggerli facilmente.

Per altre linee guida ed esempi, vedere messaggi di errore e balloon.

Richiede

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

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 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 sui pulsanti. Ad esempio, non scrivere il testo del prompt che indica Immettere un nome file e quindi fare clic su Invia.

Quando si usano le richieste:

• Disegnare il testo della richiesta in corsivo e il testo di input effettivo 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 su o tabulazione nella casella di testo.
  • Eccezione: Se la casella di testo ha lo stato attivo di input predefinito, viene visualizzata la richiesta e scompare quando 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.

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 dei casi, gli utenti non devono scorrere la stringa più lunga probabile che immetteranno o visualizzeranno.
• Includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) che verranno localizzati.
• Se l'input previsto non ha dimensioni particolari, scegliere una larghezza coerente con le altre caselle di testo o i controlli nella finestra.
• Dimensioni 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 necessitano di 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 utilizzate per di input dei dati formattati 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 riformularità dell'istruzione principale.

    migliore:

    

    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 dei tasti di scelta, vedere Keyboard.

• Usare la maiuscola in stile frase.

• 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 è a sinistra, allineare verticalmente il testo dell'etichetta al testo della casella di testo.

  risposta esatta:

  

  

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

  risposta errata:

  

  

  In questi esempi non corretti, l'etichetta in alto è allineata al testo nella casella di testo e l'etichetta a sinistra è allineata con la 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 di caratteri arbitrariamente ridotto, è possibile specificare l'input massimo nell'etichetta. Anche la larghezza della casella di testo dovrebbe 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 più elementi, chiarire come separare gli elementi nell'etichetta.

  

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

• Per indicazioni sull'input richiesto, vedere Input obbligatorio nelle finestre di dialogo .

Etichette di istruzioni

• Se è necessario aggiungere testo informativo su una casella di testo, 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 la casella di testo.

  

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

Etichette prompt

• 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.
• Se il prompt indica agli utenti di 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 il testo della richiesta, trascinare un file e quindi fare clic su Invia).

Documentazione

Quando si fa riferimento a caselle di testo:

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

• Usare select per fare riferimento a una voce in una casella di testo di sola lettura.

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

• Quando 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, documentare solo il formato accettabile più comunemente usato. Consentire agli utenti di individuare tutti gli altri formati autonomamente. Si vuole essere flessibili con i formati di dati, ma questa operazione non dovrebbe comportare una documentazione complessa.

  risposta esatta:

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

  risposta errata:

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

  1234567890

  1234-56-7890

  1234 56 7890