Il tuo visitatore scorre il modulo in due secondi, prima di scrivere un solo carattere. Legge le dimensioni dei campi, la spaziatura, il layout. Un campo per il CAP largo quanto l'intero modulo urla confusione. Una textarea di una sola riga per un feedback dettagliato manda il messaggio che non ti aspetti molto.
La larghezza del campo dice all'utente quanto testo ti aspetti che inserisca. Una casella minuscola dice "dammi il tuo nome". Una textarea alta dice "raccontami la tua storia". Se sbagli, ti ritrovi con confusione, fatica di scrittura e abbandono del modulo.
Il tuo modulo contiene due tipi di campi di testo: il campo a riga singola e la textarea a più righe. Hanno un aspetto diverso, si comportano in modo diverso e risolvono problemi diversi. Scegliere quello giusto non è complicato, ma conta per come gli utenti percepiscono il modulo e per la loro scelta di compilarlo.
Che cos'è un campo di testo
Un campo di testo è una casella a riga singola in cui gli utenti scrivono un testo breve. Non va a capo quando arrivi al bordo. Non supporta più paragrafi. Premi Invio e il modulo viene inviato (oppure passa al campo successivo). È pensato per dati brevi e limitati.
Un campo di testo stabilisce un patto mentale con l'utente. Gli stai chiedendo qualcosa di rapido. Un nome. Un'email. Un CAP. Una data. Una sola informazione.
Che cos'è una textarea
Una textarea è una casella di testo a più righe che si espande mentre gli utenti scrivono. Premi Invio e vai a capo. Scorre in verticale quando il contenuto supera l'area visibile. Segnala all'utente che ti aspetti più di poche parole. I paragrafi sono benvenuti. Ci si aspettano pensieri dettagliati.
Una textarea toglie il vincolo. L'utente sa di poter scrivere quanto gli serve senza stringere la risposta in una sola riga.
Quando usare un campo di testo a riga singola
Usa un campo di testo quando la risposta prevista sta su una riga e l'utente può rispondere con poche parole o meno.
Informazioni di contatto
Nome, email, numero di telefono. Questi campi sono sempre a riga singola. L'utente si aspetta di scrivere un nome e andare avanti, non di aprire un editor di testo per il suo numero di telefono.
Identificativi brevi
Nome utente, numero di conto, CAP, password. Hanno lunghezze definite o ci si aspetta che siano brevi. Un campo a riga singola ha senso.
Campi di luogo e logistica
Città, stato, paese, indirizzo (prima riga). Di solito sono voci a riga singola. Puoi dividere l'indirizzo in più campi a riga singola invece che in un'unica grande textarea.
Ricerca e filtri
Caselle di ricerca. Filtri dei prodotti. Intervalli di date. Si aspettano un inserimento rapido, non un paragrafo. I campi a riga singola sono quelli giusti.
Date e numeri
Qualsiasi campo in cui l'utente inserisce una data, un'ora, una quantità o un prezzo specifici. Campo a riga singola. A volte conviene un tipo di input specializzato per le date (come un selettore di date), ma il modello di interazione resta a riga singola.
Quando usare una textarea
Usa una textarea quando ti aspetti che l'utente scriva più di una frase o quando la risposta è naturalmente più lunga di una riga.
Commenti e feedback
Se chiedi "Che feedback hai?", l'utente pensa in paragrafi, non in singole parole. Una textarea segnala che c'è spazio per il suo pensiero completo. Non si sentirà stretto.
Moduli per messaggi e richieste
Quando un visitatore compila un modulo di contatto con un campo messaggio, ha bisogno di spazio per spiegare la sua situazione. La quantità di testo varia molto. Una textarea accoglie sia una domanda veloce di due frasi sia una richiesta dettagliata di due paragrafi.
Campi di descrizione e dettagli
Descrizioni di prodotti, brief di progetto, requisiti di servizio. Qualsiasi campo che chiede all'utente di dare contesto o dettagli. Una textarea invita a darli.
Note e istruzioni speciali
Un campo che dice "Aggiungi eventuali richieste speciali" o "Note per la consegna" spesso ha bisogno di una textarea perché non puoi prevedere se l'utente ha da aggiungere due parole o due paragrafi.
Il principio della dimensione: la larghezza del campo suggerisce la lunghezza attesa
La dimensione del campo manda un messaggio prima che l'utente scriva un solo carattere. Un campo CAP largo quanto l'intero modulo crea confusione. L'utente vede tutto quello spazio e pensa "ho capito male cosa mi stai chiedendo?"
Usa questa regola: la dimensione visiva del campo deve corrispondere alla lunghezza attesa della risposta.
Campi di testo brevi
Per un CAP, rendi il campo stretto. Magari 80-120 pixel di larghezza su desktop. Questo segnale visivo dice all'utente "scrivi cinque cifre, non un paragrafo".
Per un campo nome, usa una larghezza media. Magari 200-300 pixel. Abbastanza lungo per "Alexander Thompson" ma non così largo da invitare a scrivere una biografia.
Textarea
Le textarea si espandono sia in orizzontale sia in verticale. Una textarea alta quattro righe segnala una risposta più ampia di una alta due righe. Fai in modo che la textarea corrisponda all'impegno che ti aspetti.
Se ti aspetti qualche frase, parti con tre-cinque righe visibili. Se chiedi un feedback dettagliato, parti con sei-otto righe. Gli utenti possono ridimensionare il campo se serve più spazio, ma la dimensione iniziale fissa le loro aspettative.
Regole di design per i campi di testo
Abbinali sempre a un'etichetta
Non usare mai il testo segnaposto al posto di un'etichetta visibile. Il testo segnaposto sparisce quando l'utente comincia a scrivere, compromette l'accessibilità e lascia l'utente a indovinare che cosa voleva il campo. Usa un'etichetta chiara sopra o accanto al campo e il testo segnaposto solo come suggerimento discreto.
Esempio sbagliato: un campo senza etichetta, solo con un testo segnaposto grigio che dice "Inserisci il tuo nome".
Esempio giusto: un'etichetta "Nome" sopra il campo, con un eventuale testo segnaposto come "John Doe".
Segnala chiaramente i campi obbligatori
Segna i campi obbligatori con un asterisco (*) o con la parola "(obbligatorio)" tra parentesi. Non lasciare gli utenti a indovinare se un campo è facoltativo.
Valida presto, recupera con garbo
Se un utente inserisce un indirizzo email non valido o un numero di telefono formattato male, non cancellare ciò che ha scritto. Mostra un messaggio di errore che spieghi il problema in modo specifico e conserva quello che ha scritto, così può correggerlo invece di riscrivere tutto da capo.
Supporta il tipo di input previsto
Per l'email usa type="email", così gli utenti mobile ricevono una tastiera ottimizzata per le email. Per il telefono usa type="tel". Per i numeri usa type="number". Questi tipi di input specializzati migliorano l'esperienza su mobile senza aggiungere lavoro da parte tua.
Regole di design per le textarea
Lascia che la textarea cresca con il contenuto
Se un utente scrive un messaggio lungo e la textarea resta di dimensione fissa, deve scorrere dentro il campo mentre scrive. Questo rovina l'esperienza di scrittura. Usa CSS o JavaScript in modo che la textarea si espanda da sola man mano che l'utente aggiunge righe. Scrive in modo naturale, il campo cresce e non c'è bisogno di scorrere dentro il campo stesso.
Mostra chiaramente la dimensione iniziale
Una textarea deve avere abbastanza altezza visibile da segnalare che ti aspetti più di una riga. Mostra almeno tre-cinque righe di spazio vuoto, così gli utenti capiscono che non è un campo da una riga.
Imposta un limite di caratteri ragionevole, se serve
Alcune textarea hanno dei limiti. Un modulo per l'assistenza clienti può limitare il feedback a 5.000 caratteri. Se hai un limite, mostra il conteggio dei caratteri rimanenti mentre l'utente scrive. Lascia che veda quanto spazio gli resta, senza scoprirlo quando sbatte contro il limite.
Usa un carattere monospazio per codice o input tecnico
Se la textarea serve per frammenti di codice o dati tecnici, usa un carattere monospazio, così spaziatura e allineamento contano visivamente. Per il testo normale, come messaggi o feedback, usa il carattere sans-serif predefinito in linea con il tuo brand.
Errori comuni con i campi di testo
Dare a tutti i campi di testo la stessa larghezza
Se ogni campo del modulo ha la stessa larghezza, perdi il segnale visivo sulla lunghezza attesa. Un campo CAP non deve essere largo come un campo nome. Lascia che sia la dimensione a comunicare l'aspettativa.
Usare il testo segnaposto al posto delle etichette
Ne abbiamo già parlato, ma è fondamentale. Il testo segnaposto è utile come suggerimento, non come etichetta. Chi usa uno screen reader non vedrà il testo segnaposto. Chi ha compilato alcuni campi e poi torna indietro dimenticherà che cosa voleva il campo.
Non mostrare gli errori di validazione nel contesto
Se l'utente scrive un'email non valida e il messaggio di errore compare in cima al modulo mentre il campo email è in fondo, deve scorrere per trovare il problema. Tieni i messaggi di errore vicini al campo che li ha causati, a colori (rosso o arancione) e con un'icona che segnali "c'è qualcosa che non va".
Non permettere di annullare una cancellazione
Se l'utente cancella un campo per sbaglio o il modulo ha un pulsante "Cancella" che azzera tutto, assicurati che possa annullare l'azione. Un solo tocco su un pulsante non dovrebbe distruggere cinque minuti di lavoro di compilazione.
Errori comuni con le textarea
Textarea a dimensione fissa che non si espandono
Una textarea che resta della stessa dimensione mentre il contenuto trabocca e richiede lo scorrimento obbliga l'utente a scrivere in una finestra minuscola. L'esperienza sembra rotta. Fai in modo che la textarea si espanda con il contenuto.
Nessuna indicazione chiara del limite di caratteri
Se la tua textarea ha una lunghezza massima, l'utente deve saperlo prima di raggiungerla. Mostra un contatore di caratteri che si aggiorna mentre scrive. "Restano 500 caratteri" o "2 di 5000 caratteri" gli dice subito quanto spazio ha.
Partire troppo piccoli
Una textarea alta una sola riga non comunica "voglio il tuo feedback dettagliato". Sembra ancora un campo a riga singola. Parti con almeno tre-quattro righe visibili, così l'utente capisce che può scrivere di più.
Esempi: campo di testo o textarea nel contesto
Un modulo di contatto
Campo nome: campo di testo a riga singola. Abbastanza largo per un nome lungo ma abbastanza stretto da segnalare "solo il tuo nome".
Campo email: campo di testo a riga singola con type="email".
Campo telefono: campo di testo a riga singola con type="tel".
Campo messaggio: textarea, abbastanza alta per qualche paragrafo.
Un modulo per le recensioni di un prodotto
Il tuo nome: campo a riga singola.
La tua email: campo a riga singola con type="email".
Valutazione (da 1 a 5 stelle): un tipo di input specializzato, ma non una textarea.
La tua recensione: textarea.
Lo consiglieresti ad altri: un checkbox, non un campo di testo.
Un modulo di checkout
Nome, cognome, email, telefono: tutti campi a riga singola.
Indirizzo di spedizione (via, città, stato, CAP): di solito più campi a riga singola, non un'unica textarea per l'indirizzo completo.
Istruzioni speciali per la consegna: textarea. L'utente può avere una frase o tre frasi a seconda delle sue esigenze.
Moduli WEMASY: creare campi di testo e textarea
Il creatore di moduli di WEMASY include sia i campi di testo sia le textarea. Quando aggiungi un campo al modulo, scegli il tipo di campo in base a ciò che stai chiedendo.
Per un modulo di contatto in WEMASY aggiungeresti un campo di testo per nome ed email del visitatore, poi una textarea per il messaggio. WEMASY gestisce da solo lo stile, così campi di testo e textarea seguono i colori e la tipografia del tuo brand. Tu pensi a fare le domande giuste. Il creatore di moduli gestisce layout e comportamento dei campi.
Se ti serve un input specializzato (come un selettore di date o la validazione dell'email), WEMASY supporta anche quello. Dimensione del campo, comportamento e validazione lavorano insieme per guidare l'utente fino alla fine.