Come è possibile progettare un modulo che funzioni bene per diversi nomi e formati di indirizzi? I piccoli bug dei moduli irritano gli utenti e possono indurli ad abbandonare il tuo sito o a rinunciare a completare un acquisto o a registrarsi.
Questo codelab mostra come creare un modulo accessibile e facile da usare che funzioni bene per la maggior parte degli utenti.
Passaggio 1: sfrutta al meglio gli elementi e gli attributi HTML
Inizierai questa parte del codelab con un modulo vuoto, solo un'intestazione e un pulsante da soli. A questo punto, potrai iniziare ad aggiungere input. CSS e un po' di JavaScript sono già inclusi.
Fai clic su Remix per modificare per rendere il progetto modificabile.
Aggiungi un campo del nome all'elemento
<form>con il seguente codice:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Può sembrare complicato e ripetitivo per un solo campo del nome, ma fa già molto.
Hai associato label a input abbinando l'attributo for di label a name o id di input. Un tocco o un clic su un'etichetta sposta lo stato attivo sul relativo input, creando un target molto più grande rispetto all'input da solo, il che è perfetto per dita, pollici e clic del mouse. Gli screen reader annunciano il testo dell'etichetta quando l'etichetta o l'input dell'etichetta diventa lo stato attivo.
Che ne dici di name="name"? Si tratta del nome (che in questo caso è "nome") associato ai dati di questo input, che vengono inviati al server quando il modulo viene inviato. L'inclusione di un attributo name significa anche che i dati di questo elemento sono accessibili all'API FormData.
Passaggio 2: aggiungi attributi per consentire agli utenti di inserire i dati
Cosa succede quando tocchi o fai clic nell'input Nome in Chrome? Dovresti vedere i suggerimenti di compilazione automatica memorizzati dal browser e le supposizioni sono appropriate per questo input, dati i valori name e id.
Ora aggiungi autocomplete="name" al codice di input in modo che abbia il seguente aspetto:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Ricarica la pagina in Chrome e tocca o fai clic nel campo di immissione Nome. Quali differenze noti?
Dovresti notare una piccola differenza: con autocomplete="name", i suggerimenti ora sono valori specifici che in precedenza venivano utilizzati negli input dei moduli che contenevano anche autocomplete="name". Il browser non fa solo supposizioni su ciò che potrebbe essere appropriato: hai il controllo. Sarà disponibile anche l'opzione Gestisci...
per visualizzare e modificare i nomi e gli indirizzi memorizzati dal browser.
Ora aggiungi attributi di convalida del vincolo
maxlength, pattern e required in modo che il codice di input sia simile al seguente:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"indica che il browser non consente input più lunghi di 100 caratteri.pattern="[\p{L} \-\.]+"utilizza un'espressione regolare che consente caratteri alfabetici Unicode, trattini e punti. Ciò significa che nomi come Françoise o Jörg non sono classificati come 'non validi'. Non è così se utilizzi il valore\wche consente solo i caratteri dell'alfabeto latino.requiredsignifica… obbligatorio. Il browser non consentirà l'invio del modulo senza dati per questo campo e avviserà e evidenzierà l'input se provi a inviarlo. Non è richiesto alcun codice aggiuntivo.
Per testare il funzionamento del modulo con e senza questi attributi, prova a inserire i dati:
- Prova a inserire valori che non corrispondono all'attributo
pattern. - Prova a inviare il modulo con un campo vuoto. Vedrai l'avviso della funzionalità del browser integrata relativo al campo obbligatorio vuoto e lo stato attivo verrà impostato su questo campo.
Passaggio 3: aggiungi un campo indirizzo flessibile al modulo
Per aggiungere un campo indirizzo, aggiungi il seguente codice al modulo:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
L'textarea è il modo più flessibile per inserire l'indirizzo ed è ideale per tagliare e incollare.
Evita di suddividere il modulo dell'indirizzo in componenti come nome e numero civico, a meno che non sia strettamente necessario. Non costringere gli utenti a inserire il proprio indirizzo in campi che non hanno senso.
Ora aggiungi i campi per CAP o codice postale e Paese o regione. Per semplicità, sono inclusi solo i primi cinque paesi. Un elenco completo è incluso nel modulo per gli indirizzi compilato.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
Vedrai che il campo Codice postale è facoltativo: questo perché molti paesi non utilizzano i codici postali.
Il Global Sourcebook fornisce informazioni sui formati degli indirizzi per 194 paesi diversi, inclusi indirizzi di esempio. Al posto di Paese viene utilizzata l'etichetta Paese o regione, perché alcune opzioni dell'elenco completo (ad esempio il Regno Unito) non sono singoli paesi (nonostante il valore autocomplete).
Passaggio 4: consenti ai clienti di inserire facilmente gli indirizzi di spedizione e fatturazione
Hai creato un modulo per l'indirizzo molto funzionale, ma cosa succede se il tuo sito richiede più di un indirizzo, ad esempio per spedizione e fatturazione? Prova ad aggiornare il modulo in modo che i clienti possano inserire gli indirizzi di spedizione e fatturazione. Come si fa a rendere l'inserimento dei dati il più
semplice e veloce possibile, soprattutto se i due indirizzi sono uguali? L'articolo associato a questo codelab illustra le tecniche per gestire più indirizzi.
Qualunque cosa tu faccia, assicurati di utilizzare i valori autocomplete corretti.
Passaggio 5: aggiungi un campo per il numero di telefono
Per aggiungere un campo di immissione del numero di telefono, aggiungi il seguente codice al modulo:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
Per i numeri di telefono, utilizza un singolo input: non suddividere il numero in parti. In questo modo, gli utenti possono inserire più facilmente i dati o copiarli e incollarli, la convalida è semplificata e i browser possono eseguire la compilazione automatica.
Esistono due attributi che possono migliorare l'esperienza utente durante l'inserimento di un numero di telefono:
type="tel"garantisce agli utenti di dispositivi mobili la tastiera giusta.enterkeyhint="done"imposta l'etichetta del tasto Invio della tastiera mobile per indicare che si tratta dell'ultimo campo e che il modulo può essere inviato (il valore predefinito ènext).
Il modulo completo dell'indirizzo ora dovrebbe avere il seguente aspetto:
- Prova il modulo su dispositivi diversi. Quali dispositivi e browser hai scelto come target? Come potremmo migliorare il modulo?
Esistono diversi modi per testare il modulo su dispositivi diversi:
- Utilizza la modalità Dispositivo di Chrome DevTools per simulare i dispositivi mobili.
- Invia l'URL dal computer al tuo telefono.
- Utilizza un servizio come BrowserStack per eseguire test su una serie di dispositivi e browser.
Andamento successivo
Analytics e monitoraggio degli utenti reali: consente di testare e monitorare il rendimento e l'usabilità del design del modulo per gli utenti reali, nonché di verificare se le modifiche sono state apportate correttamente. Devi monitorare il rendimento del caricamento e altri Indicatori web, nonché le analisi delle pagine (qual è la percentuale di utenti che abbandona il tuo modulo di indirizzo senza completarlo? Quanto tempo trascorrono gli utenti sulle pagine del modulo di indirizzo?) e le analisi delle interazioni (con quali componenti della pagina interagiscono o meno gli utenti?)
Dove si trovano i tuoi utenti? Come devono formattare l'indirizzo? Quali nomi vengono utilizzati per i componenti dell'indirizzo, ad esempio il codice postale? Frank's Compulsive Guide to Postal Addresses fornisce link utili e indicazioni dettagliate sui formati degli indirizzi in oltre 200 paesi.
I selettori del paese sono noti per la scarsa usabilità. È meglio evitare di selezionare elementi per un elenco lungo di articoli e lo standard ISO 3166 per i codici paese attualmente elenca 249 paesi. Anziché un
<select>, ti consigliamo di valutare un'alternativa come il selettore di paesi del Baymard Institute.Puoi progettare un selettore migliore per gli elenchi con molti elementi? Come faresti ad assicurarti che il tuo design sia accessibile su una serie di dispositivi e piattaforme? L'elemento
<select>non funziona bene per un numero elevato di elementi, ma almeno è utilizzabile su praticamente tutti i browser e i dispositivi di assistenza.Il post del blog <input type="country" /> discute la complessità della standardizzazione di un selettore di paesi. Anche la localizzazione dei nomi dei paesi può essere problematica. Elenchi di paesi contiene uno strumento per scaricare i codici e i nomi dei paesi in più lingue e in più formati.