Codelab sulle best practice del modulo degli indirizzi

Sam Dutton

Come puoi progettare un modulo che si adatti bene a diversi formati di nomi e indirizzi? Lievi errori nella forma irritano gli utenti e possono indurli ad abbandonare il sito o a rinunciare a completare un acquisto o a registrarsi.

Questo codelab ti mostra come creare un modulo accessibile e facile da usare, adatto alla 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, il tutto in modo autonomo. A questo punto inizierai 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 nome all'elemento <form> con il seguente codice:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Potrebbe 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. Quando tocchi o fai clic su un'etichetta, lo stato attivo viene spostato sull'input, il che significa che l'obiettivo è molto più grande rispetto all'input da solo, il che è positivo per i clic di dita, pollici e mouse. Gli screen reader annunciano il testo dell'etichetta quando l'etichetta o l'input dell'etichetta viene attivato.

E name="name"? Si tratta del nome (che è "nome") associato ai dati provenienti da questo input che viene inviato al server quando viene inviato il modulo. L'inclusione di un attributo name significa anche che l'API FormData può accedere ai dati di questo elemento.

Passaggio 2: aggiungi attributi per aiutare gli utenti a inserire i dati

Che cosa succede quando tocchi o fai clic sull'input Nome in Chrome? Dovresti vedere suggerimenti di compilazione automatica memorizzati dal browser e supposizioni appropriate per questo input, in base ai suoi valori name e id.

Ora aggiungi autocomplete="name" al codice di input in modo che risulti come il seguente:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Ricarica la pagina in Chrome e tocca o fai clic nell'input Nome. Quali differenze riscontri?

Dovresti notare una leggera modifica: con autocomplete="name", i suggerimenti ora sono valori specifici che erano stati utilizzati in precedenza negli input di moduli che avevano anche autocomplete="name". Il browser non si limita a indovinare ciò che potrebbe essere appropriato: sei tu ad avere il controllo. Vedrai anche l'opzione Gestisci... per visualizzare e modificare i nomi e gli indirizzi memorizzati dal browser.

Due screenshot di Chrome su uno smartphone Android che mostrano un modulo con un singolo input, con e senza un valore di completamento automatico. Uno mostra i valori dei suggerimenti euristici dell&#39;interfaccia utente del browser, l&#39;altro mostra l&#39;interfaccia utente quando sono presenti valori di completamento automatico memorizzati.
Interfaccia utente per la compilazione automatica con valori suggeriti anziché per il completamento automatico.

Ora aggiungi gli 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 Unicode, trattini e punti (punti). Ciò significa che nomi come Françoise o Jörg non sono classificati come "non validi". Questo non avviene se utilizzi il valore \w che [consente solo caratteri dell'alfabeto latino.

  • required significa... obbligatorio. Il browser non consente l'invio del modulo senza dati per questo campo e segnala ed evidenzia l'input se tenti di inviarlo. Non è necessario codice aggiuntivo.

Per verificare come funziona il modulo con e senza questi attributi, prova a inserire i dati:

  • Prova a inserire valori che non rientrano nell'attributo pattern.
  • Prova a inviare il modulo con un input vuoto. Verrà visualizzato un avviso relativo alla funzionalità integrata del browser relativo al campo obbligatorio vuoto e all'impostazione dello stato attivo.

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>

textarea è il modo più flessibile per consentire agli utenti di inserire il proprio indirizzo ed è ideale per tagliare e incollare.

Dovresti evitare di suddividere il modulo dell'indirizzo in più parti, come il nome della via e il numero civico, a meno che non sia necessario. Non costringere gli utenti a inserire il proprio indirizzo in campi non pertinenti.

Ora aggiungi i campi per Codice postale e Paese o regione. Per semplicità, qui sono inclusi solo i primi cinque paesi. Un elenco completo è incluso nel modulo completo dell'indirizzo.

<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>

Il codice postale è facoltativo, perché molti paesi non utilizzano i codici postali. Global Sourcebook fornisce informazioni sui formati degli indirizzi per 194 paesi diversi, inclusi indirizzi di esempio. Viene utilizzata l'etichetta Paese o regione al posto di Paese, perché alcune opzioni dell'elenco completo (come il Regno Unito) non riguardano 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 gli indirizzi altamente funzionale, ma cosa succede se il tuo sito richiede più di un indirizzo, ad esempio per la spedizione e la fatturazione? Prova ad aggiornare il modulo per consentire ai clienti di inserire gli indirizzi di spedizione e fatturazione. Come puoi rendere l'inserimento dei dati il più semplice e veloce, soprattutto se i due indirizzi sono gli stessi? L'articolo associato a questo codelab spiega le tecniche per la gestione di più indirizzi. Qualunque cosa tu faccia, assicurati di utilizzare i valori autocomplete corretti.

Passaggio 5: aggiungi un campo per il numero di telefono

Per inserire un 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 dividere il numero in parti. In questo modo è più facile per gli utenti inserire dati o copiare e incollare i dati, la convalida è più semplice e i browser possono essere compilati automaticamente.

Esistono due attributi che possono migliorare l'esperienza utente nell'inserimento di un numero di telefono:

  • type="tel" garantisce che gli utenti dei dispositivi mobili utilizzino la tastiera giusta.
  • enterkeyhint="done" imposta l'etichetta del tasto Invio della tastiera mobile per indicare che questo è l'ultimo campo e che ora è possibile inviare il modulo (l'impostazione predefinita è next).
Due screenshot di un modulo su Android che mostrano come l&#39;attributo di input Enterkeyhint modifica l&#39;icona del pulsante del tasto Invio.
Utilizza l'attributo Enterkeyhint per impostare l'etichetta del pulsante Invio: "next" e "done".

Il modulo completo per l'indirizzo ora dovrebbe avere il seguente aspetto:

  • Prova il modulo su diversi dispositivi. Quali dispositivi e browser hai scelto come target? Come si potrebbe migliorare il modulo?

Esistono diversi modi per testare il modulo su dispositivi diversi:

Ulteriori informazioni

  • Monitoraggio di Analytics e utenti reali: consente di testare e monitorare le prestazioni e l'usabilità del design del modulo per utenti reali e per verificare se le modifiche hanno esito positivo. Dovresti monitorare le prestazioni di caricamento e altri Segnali web, nonché l'analisi delle pagine (quale proporzione di utenti rimbalza dal modulo dell'indirizzo senza completarlo, quanto tempo trascorrono gli utenti sulle pagine dei moduli degli indirizzi?) e analisi delle interazioni (con quali componenti di pagina interagiscono o meno gli utenti?)

  • Dove si trovano i tuoi utenti? Come formatta l'indirizzo? Quali nomi usano per le componenti dell'indirizzo, come CAP o CAP? La Guida compulsiva di Frank agli indirizzi postali fornisce link utili e indicazioni dettagliate in merito ai formati degli indirizzi in oltre 200 paesi.

  • I selettori dei paesi sono noti per l'usabilità scadente. È meglio evitare di selezionare elementi per un lungo elenco di articoli. Lo standard per i codici paese ISO 3166 al momento ne elenca i 249. Invece di un <select>, ti consigliamo di prendere in considerazione un'alternativa, ad esempio il selettore del paese del Baymard Institute.

    Puoi progettare un selettore migliore per gli elenchi con molti elementi? Come ti assicurerai che il tuo progetto sia accessibile su una vasta gamma di dispositivi e piattaforme? L'elemento <select> non funziona bene per un numero elevato di elementi, ma almeno può essere usato praticamente su tutti i browser e i dispositivi di assistenza.

    Il post del blog <input type="country" /> illustra la complessità della standardizzazione di un selettore del paese. Anche la localizzazione dei nomi dei paesi può essere problematica. Gli elenchi dei paesi includono uno strumento per scaricare i codici paese e i nomi in più lingue e in più formati.