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 dei moduli può essere un'attività lunga e frustrante. Non deve essere necessariamente così. Per garantire un'esperienza utente ottimale, assicurati che l'UI sia intuitiva. Assicurati di offrire una struttura e un design grafico ottimali per il modulo (layout, spaziatura, dimensione e colore del carattere), e logica UI (come la formulazione delle etichette e i tipi di input appropriati). Vediamo come migliorare il modulo e renderlo 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 modulo.
Utilizza un'etichetta per ogni controllo del modulo
Vuoi aggiungere un nuovo controllo modulo al modulo? Per iniziare, aggiungi l'etichetta per il nuovo campo. In questo modo, non dimenticare di aggiungerlo.
Aggiungere prima le etichette ti aiuta anche a concentrarti sugli obiettivi del modulo: di quali dati ho bisogno? Una volta chiarito questo aspetto, puoi concentrarti sull'aiutare l'utente a inserire i dati e a compilare il modulo.
Formulazione dell'etichetta
Supponiamo di voler descrivere un campo email. Per farlo:
<label for="email">Enter your email address</label>
In alternativa, potresti descriverlo in questo modo:
<label for="email">Email address</label>
Quale descrizione scegli?
Nel nostro esempio, la dicitura "Indirizzo email" è preferibile, poiché le etichette brevi sono più facili da consultare, riducono il disordine visivo e aiutano gli utenti a capire più velocemente quali dati sono necessari.
Posizione etichetta
Con CSS, puoi posizionare un'etichetta in alto, in basso, a sinistra e a destra di un controllo del modulo. Dove lo posizioni?
Programmi di ricerca la best practice prevede posiziona l'etichetta sopra il controllo del modulo, in modo che l'utente possa analizzare rapidamente un modulo e vedere a quale etichetta appartiene ogni controllo.
Progettare moduli
Un buon design del formato può
ridurre notevolmente 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 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 il cliente deve accettare i Termini e condizioni del tuo sito, usa <input type="checkbox">.
Dovresti anche distinguere visivamente i diversi tipi di controlli del modulo. Un pulsante deve essere simile a un pulsante. Un input come un input. Consenti agli utenti di riconoscere facilmente lo scopo di un controllo modulo. Ad esempio, se un elemento sembra un link, facendovi clic si apre una nuova pagina, e non inviare un modulo.
Aiutare gli utenti a navigare tra i moduli
Un layout stravagante può essere divertente, ma potrebbe ostacolare la compilazione del modulo.
In particolare, programmi di ricerca che è preferibile utilizzare una sola colonna. Gli utenti non vogliono perdere tempo a cercare dove si trova il successivo controllo modulo. Se utilizzi una sola colonna, devi seguire una sola direzione.
Aiutare gli utenti a interagire con i moduli
Per evitare tocchi e clic involontari,
e aiutano gli utenti a interagire con il modulo, assicurati
che i pulsanti siano sufficientemente grandi.
Il tipo di
la dimensione del tocco di un pulsante sia di almeno 48 px.
Devi anche aggiungere una spaziatura sufficiente tra i controlli del modulo utilizzando il margin
Proprietà CSS per evitare interazioni accidentali.
Le dimensioni predefinite dei controlli del modulo sono troppo piccole per essere davvero utilizzabili. Dovresti aumentare le dimensioni utilizzando padding e modificando il valore predefinito di font-size.
Puoi definire dimensioni diverse a seconda del dispositivo di puntamento,
ad esempio con 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ù sulle
pointer funzionalità dei contenuti multimediali del CSS.
Mostra gli errori nel punto in cui si verificano
Per permettere agli utenti di scoprire facilmente quale controllo del modulo richiede la loro attenzione, visualizzare messaggi di errore accanto al controllo modulo a cui fanno riferimento. Quando visualizzi errori all'invio del modulo, assicurati di passare al primo controllo del modulo non valido.
Spiega chiaramente agli utenti quali dati inserire
Assicurati che gli utenti comprendano come inserire dati validi. Devono inserire almeno otto caratteri per la password? Dillo a tutti.
<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>
Comunica agli utenti quali campi sono obbligatori
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Se un campo è obbligatorio, fai in modo che sia ovvio. La sezione Anatomia dei moduli accessibili spiega le alternative per indicare campi obbligatori. Se la maggior parte dei campi di un modulo è obbligatoria, indicare i campi facoltativi.
Come si fa a collegare i messaggi di errore ai controlli del modulo per renderli accessibili agli screen reader? Puoi approfondire l'argomento nel modulo successivo.
Verifica le tue conoscenze
Verifica le tue conoscenze della 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>.