Nella prima sezione hai imparato a creare un modulo di base. Questa sezione riguarda le best practice. In questo modulo scoprirai l'esperienza utente (UX) e perché un'interfaccia utente (UI) ben implementata può fare una grande differenza.
Creare interfacce intuitive
Compilare i moduli può essere frustrante e richiedere molto tempo, ma non deve essere per forza così. Per creare un'esperienza utente ottimale, assicurati che l'interfaccia sia intuitiva. Assicurati di fornire una struttura del modulo e un design grafico ottimali (layout, spaziatura, dimensioni e colore del carattere) e un'interfaccia utente logica (ad esempio, formulazione delle etichette e tipi di input appropriati). Scopri come migliorare la postura e renderla più facile da usare.
Etichette
Ti ricordi a cosa serve l'elemento <label>?
Un'etichetta descrive un controllo modulo.
Un'etichetta visibile e ben scritta aiuta l'utente a comprendere lo scopo di un controllo del modulo.
Utilizzare un'etichetta per ogni controllo modulo
Vuoi aggiungere un nuovo controllo modulo al tuo modulo? Per iniziare, aggiungi l'etichetta per il nuovo campo. In questo modo, non dimenticherai di aggiungerlo.
L'aggiunta delle etichette ti aiuta anche a concentrarti sugli obiettivi del modulo: quali dati mi servono qui? Una volta chiarito questo aspetto, puoi concentrarti sull'aiuto all'utente per l'inserimento dei dati e il completamento del modulo.
Formulazione dell'etichetta
Dichiara di voler descrivere un campo email. Puoi farlo nel seguente modo:
<label for="email">Enter your email address</label>
Oppure potresti descriverlo così:
<label for="email">Email address</label>
Quale descrizione scegli?
Per il nostro esempio, è preferibile la dicitura "Indirizzo email", in quanto le etichette brevi sono più facili da scansionare, riducono il disordine visivo e aiutano gli utenti a capire più rapidamente quali dati sono necessari.
Posizione etichetta
Con CSS, puoi posizionare un'etichetta in alto, in basso, a sinistra e a destra di un controllo modulo. Dove lo posizioni?
La ricerca mostra che la best practice è posizionare l'etichetta sopra il controllo del modulo, in modo che l'utente possa scansionare rapidamente un modulo e vedere a quale controllo del modulo appartiene l'etichetta.
Progettare moduli
Un buon design del modulo può
ridurre significativamente i tassi di abbandono dei moduli.
Aiuta gli utenti a inserire i dati utilizzando l'elemento e il tipo di input appropriati
Esistono vari
elementi del modulo e tipi di input tra cui scegliere.
Per offrire la migliore esperienza utente, utilizza l'elemento e il tipo di input più adatti al tuo caso d'uso.
Se l'utente deve compilare più righe di testo, utilizza l'elemento <textarea>.
Nei casi in cui è necessario accettare i termini e condizioni del tuo sito, utilizza <input type="checkbox">.
Dovresti anche distinguere visivamente i diversi tipi di controlli del modulo. Un pulsante deve avere l'aspetto di un pulsante. Un input come un input. Rendere più facile per gli utenti riconoscere lo scopo di un controllo modulo. Ad esempio, se un elemento sembra un link, quando ci fai clic sopra dovrebbe aprirsi una nuova pagina e non inviare un modulo.
Aiutare gli utenti a navigare nei moduli
Un layout stravagante può essere divertente, ma potrebbe ostacolare la compilazione di un modulo.
In particolare, la ricerca mostra che è meglio utilizzare una sola colonna. Gli utenti non vogliono perdere tempo a cercare il controllo del modulo successivo. Se utilizzi una sola colonna, c'è una sola direzione da seguire.
Aiutare gli utenti a interagire con i moduli
Per evitare tocchi e clic accidentali e aiutare gli utenti a interagire con il modulo,
ingrandisci i pulsanti. Le dimensioni del target di tocco consigliate per un pulsante sono almeno
48 px. Devi anche aggiungere uno spazio sufficiente tra i controlli del modulo utilizzando la proprietà CSS margin per evitare interazioni accidentali.
La dimensione predefinita dei controlli dei moduli è troppo piccola per essere davvero utilizzabile. Devi aumentare le dimensioni utilizzando padding e modificando il valore predefinito font-size.
Puoi definire dimensioni diverse per diversi dispositivi di puntamento, ad esempio un mouse, utilizzando la funzionalità media CSS pointer.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Scopri di più sulla
pointer funzionalità dei contenuti multimediali del CSS.
Mostra gli errori dove si verificano
Per consentire agli utenti di individuare facilmente il controllo del modulo che richiede la loro attenzione, mostra i messaggi di errore accanto al controllo del modulo a cui si riferiscono. Quando visualizzi gli errori all'invio del modulo, assicurati di passare al primo controllo del modulo non valido.
Indica chiaramente agli utenti quali dati inserire
Assicurati che gli utenti sappiano come inserire dati validi. Devono inserire almeno otto caratteri per una password? Diglielo.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Indica chiaramente agli utenti quali campi sono obbligatori
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Se un campo è obbligatorio, rendilo evidente. The Anatomy of Accessible Forms spiega le alternative per indicare i campi obbligatori. Se la maggior parte dei campi di un modulo è obbligatoria, potrebbe essere meglio indicare i campi facoltativi.
Come puoi collegare i messaggi di errore ai controlli del modulo per renderli accessibili ai lettori di schermo? Puoi scoprire di più su questo argomento nel modulo Accessibilità.
Verifica la comprensione
Metti alla prova le tue conoscenze sulla progettazione di moduli
Come descriveresti un controllo modulo?
<description>.<label>.description.placeholder.Quali sono le dimensioni consigliate del target di tocco?
Dove devi inserire i messaggi di errore?
<form>.