I campi di input, o input field, sono componenti di base di ogni design system che si rispetti.
Subito dopo i pulsanti, possiamo affermare che siano uno degli elementi più utilizzati. Nessun sito, app o piattaforma può farne a meno.
Essenziali per la raccolta di informazioni dagli utenti, se progettati con tutti i dovuti crismi, possono migliorare notevolmente l’usabilità dei nostri layout.
I campi di input sono un elemento molto standard, a livello di rappresentazione.
Come sempre, va bene utilizzare la creatività, ma con i dovuti limiti. Quando si progetta questo tipo di componente la funzionalità deve essere messa al primo posto.
Nella mia carriera ne ho viste di ogni, campi strutturati a zig zag, campi disposti a caso, campi che non sembrano input, il tutto impaginato con UI ad “effetto wow”, feticcio sessuale di troppi clienti. Vi prego, non fatelo.
L’obiettivo principale di questi componenti è uno e deve essere estremamente immediato: permettere di inserire agevolmente dati.
Per non confondere gli avventori dei nostri layout, è nostro compito progettare questi campi in modo chiaro e funzionale, dato che disegnarli senza criterio potrebbe causare vari problemi di usabilità.
Oggi vediamo insieme come progettare dei campi di input a prova di bomba.
Anatomia generale
Per creare campi di input efficaci, è importante partire dalle basi, cercando di capire in che modo sono strutturati e perché.
Come fatto per le call to action, analizziamo più nel dettaglio l’anatomia di un campo di input:
- label: posizionata per consuetudine in alto a sinistra, indica ciò che deve essere inserito nel campo di compilazione
- placeholder: testo temporaneo contenuto nel campo, aiuta ad indicare il tipo di informazione richiesta
- testo di supporto: breve testo, di solito di piccole dimensioni, che fornisce ulteriori indicazioni su come compilare il campo. Per consuetudine, posizionato sotto il campo o in un tooltip
- asterisco: simbolo più utilizzato per indicare i campi obbligatori. Molti lo posizionano alla fine della laberl, anche se posizionato sulla sinistra facilita maggiormente la scansione dei contenuti
- icone: opzionali, ma molto utili per migliorare la comprensione di messaggi e tipologia di campo (es. icona di errore o icona per visualizzare la password)
- alert di errore: testo che indica dove e perché si è verificato un problema
Best practice per i campi di input
Ci sono alcune buone pratiche da seguire per migliorare l’usabilità dei campi di input.
Poche, ma buone, quindi non avete scuse.
Ecco di seguito le regole d’oro per dei campi di input da veri professionisti.
Label
La label deve essere sempre visibile e non scomparire durante la compilazione e/o quando il campo è compilato, per evitare confusione all’utente e tenerlo sempre informato sullo stato del sistema.
La posizione migliore è quella in alto a sinistra rispetto al campo.
Per quanto possa essere forte la tentazione, non scrivete le label completamente in uppercase. Il testo tutto maiuscolo risulta più difficile da leggere.
Evitate di allineare orizzontalmente label e campo, per non dare vita a scanning pattern caotici ed inusuali. Per una scansione ottimale, label sopra e campo sotto.
Se proprio volete a tutti i costi risparmiare spazio, potete optare per delle label fluttuanti, come quelle proposte da Google Material Design.
Testi di supporto e feedback
Quando necessario, inserite sempre testi di supporto per dare spiegazioni ulteriori e feedback di errore.
È importante posizionare questi testi in prossimità del campo a cui fanno riferimento. Mi raccomando, la legge della prossimità, per questo punto (ma anche per la label), è molto importante.
Ad esempio, se chiedo il numero di telefono, in prossimità del campo, solitamente sotto, dovrò specificare il motivo per cui sto chiedendo quel tipo di dato e per cosa potrebbe essere utilizzato.
Stesso discorso per i feedback di errore che dovranno essere posizionati sotto al campo in cui si è verificato un qualche tipo di problema, specificando il tipo di errore e suggerendo il modo in cui risolvere.
Per una maggiore immediatezza, è consigliato utilizzare il colore rosso e aggiungere un’icona.
L’icona ha il compito di rafforzare ulteriormente il messaggio e di migliorare l’accessibilità del componente.
Dettagli del campo
- Quando necessario, utilizzate maschere di input. Queste maschere aiutano a identificare e inserire correttamente i tipi di dati.
- includete le unità nei campi di input, specificando in questo modo il tipo di valore richiesto
- utilizzate icone che siano descrittive dell’azione richiesta: se è richiesto di selezionare una data, ad esempio, verrà utilizzata l’icona del calendario.
- bellissimi i campi tutti lunghi uguali, ma è sempre meglio scegliere la lunghezza del campo di input in base alla dimensione del dato da inserire.
- sempre a proposito di dimensione, occhio all’altezza. Cercate di non andare sotto ai 44px, il campo deve dare la possibilità di interagire agevolmente.
Stati dei campi di input
Progettare i vari stati di un campo di input (ed inserirli nel design system) offre all’utente un’esperienza più intuitiva.
Ogni stato comunica informazioni specifiche sull’interazione corrente, guidando l’utente su cosa può o cosa deve fare.
Un campo di input può avere i seguenti stati:
- default: è il campo vuoto di partenza, prima della compilazione
- attivo: è lo stato a cui passa il campo dopo essere stato cliccato per iniziare la compilazione dei dati
- completato: è il campo che è già stato compilato, è lo stato che si presenta quando l’utente ha inserito un dato e ha cliccato fuori dal campo
- errore: è quello che mostra un alert di errore quando la risposta è errata o mancante
- successo: indica con un indicatore di successo se la risposta è stata inserita correttamente
- disabilitato: è il campo con cui non è possibile interagire e che, quindi, non può essere compilato
- solo visualizzazione: è un campo che risulta compilato, le informazioni possono solo essere visualizzate, ma non modificate
- focus: è lo stato del campo con cui si interagisce con strumenti come la tastiera, per migliorare l’accessibilità del form
Applicare tutte queste informazioni al vostro progetto vi garantirà la creazione di form di contatti funzionali, intuitivi e semplici da usare.
Basta poco per dare vita a campi di input a prova di utente distratto!
