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.
Creazione di interfacce facili da usare
La compilazione di moduli può essere un'attività dispendiosa in termini di tempo e frustrazione. Non deve esserlo. Per garantire un'esperienza utente ottimale, assicurati che sia intuitiva. Assicurati di offrire struttura e design grafico ottimali del modulo (layout, spaziatura, dimensioni del carattere e colore) e un'interfaccia utente logica (ad esempio testo delle etichette e tipi di input appropriati). Vediamo come migliorare il modulo e facilitarne l'utilizzo.
Etichette
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 modulo.
Utilizzare un'etichetta per ogni controllo del modulo
Vuoi aggiungere un nuovo controllo al modulo? Inizia aggiungendo l'etichetta per il nuovo campo. In questo modo non dimenticate di aggiungerlo.
Anche l'aggiunta delle etichette ti aiuta a concentrarti sugli obiettivi del modulo. Di quali dati ho bisogno qui? Una volta chiariti questi dati, puoi concentrarti sull'aiutare l'utente a inserire i dati e a compilare il modulo.
Parole delle etichette
Supponiamo che desideri descrivere un campo email. A tale scopo, procedi nel seguente modo:
<label for="email">Enter your email address</label>
Oppure puoi descriverlo in questo modo:
<label for="email">Email address</label>
Quale descrizione scegli?
Per il nostro esempio, è preferibile la formulazione "Indirizzo email", poiché le etichette brevi sono più facili da leggere, riducono il disordine visivo e aiutano gli utenti a capire più rapidamente quali dati hanno bisogno.
Posizione etichetta
Con CSS, puoi posizionare un'etichetta in alto, in basso, a sinistra e a destra di un controllo modulo. Dove lo posizioni?
Le ricerche dimostrano che la best practice consiste nel posizionare l'etichetta sopra il controllo del modulo, in modo che l'utente possa analizzare rapidamente un modulo e vedere quale etichetta appartiene a quale controllo del modulo.
Progettare moduli
Una buona progettazione dei moduli può
ridurre notevolmente i tassi di abbandono dei moduli.
Aiuta gli utenti a inserire dati utilizzando l'elemento e il tipo di input appropriati
Puoi scegliere tra vari
elementi del modulo e tipi di input.
Per offrire la migliore UX, utilizza l'elemento e il tipo di input più adatti al tuo caso d'uso.
Se l'utente deve compilare più righe di testo, usa l'elemento <textarea>.
Se è necessario accettare i termini e condizioni del tuo sito, utilizza <input type="checkbox">.
Inoltre, dovresti differenziare visivamente i diversi tipi di controlli del modulo. Un pulsante dovrebbe avere l'aspetto di un pulsante. Un input come un input. Consenti agli utenti di riconoscere facilmente lo scopo di un controllo modulo. Ad esempio, se si fa clic su un link, si apre una nuova pagina e non si invia un modulo.
Aiuta gli utenti a navigare nei moduli
Un layout stravagante può essere divertente, ma potrebbe ostacolare la compilazione di un modulo.
In particolare, le ricerche mostrano che è meglio utilizzare una sola colonna. Gli utenti non vogliono perdere tempo a cercare dove si trova il controllo modulo successivo. Se utilizzi una colonna, puoi seguire una sola direzione.
Aiuta gli utenti a interagire con i moduli
Per evitare tocchi e clic involontari
e aiutare gli utenti a interagire con il modulo, imposta i pulsanti su una dimensione sufficientemente grande.
La dimensione target dei tocchi consigliata di un pulsante è di almeno 48 px.
Inoltre, devi aggiungere spazio sufficiente tra i controlli del modulo utilizzando la proprietà CSS margin per evitare interazioni accidentali.
La dimensione predefinita dei controlli del modulo è troppo piccola per essere davvero utilizzabile. Dovresti aumentare le dimensioni utilizzando padding e modificando il valore predefinito di font-size.
Puoi definire dimensioni diverse per dispositivi di puntamento diversi, ad esempio un mouse, utilizzando la funzionalità dei contenuti multimediali 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 funzionalità dei contenuti multimediali CSS pointer.
Mostra gli errori dove si verificano
Per consentire agli utenti di scoprire facilmente quale controllo dei moduli richiede la loro attenzione, mostra i messaggi di errore accanto al controllo dei moduli a cui fanno riferimento. Quando visualizzi gli errori al momento dell'invio del modulo, assicurati di andare al primo controllo non valido.
Chiarisci agli utenti quali dati inserire
Assicurati che gli utenti capiscano come inserire dati validi. La password deve essere impostata su almeno 8 caratteri? 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>
Chiarisci agli utenti quali campi sono obbligatori
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Se un campo è obbligatorio, indicalo chiaramente. La struttura dei moduli accessibili spiega le alternative per indicare i campi obbligatori. Se la maggior parte dei campi di un modulo è obbligatoria, ti consigliamo di indicare campi facoltativi.
Come puoi collegare i messaggi di errore ai controlli del modulo per renderli accessibili agli screen reader? Scopri di più nel modulo successivo.
Verifica la tua comprensione
Verifica le tue conoscenze sulla progettazione di moduli
Come descriveresti un controllo modulo?
<description>.<label>.description.placeholder.Quali sono le dimensioni consigliate per il target dei tocchi?
Dove devi inserire i messaggi di errore?
<form>.