Codelab sulle best practice del modulo degli indirizzi

Sam Dutton

Come è possibile progettare un modulo che funzioni bene per diversi nomi e formati di indirizzi? Forma secondaria gli glitch irritano gli utenti e possono spingerli a uscire dal sito o a rinunciare a completare un acquisto o iscriviti.

Questo codelab ti mostra come creare un modulo facile da usare e accessibile, 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, con solo un'intestazione e un pulsante la propria. Dopodiché inizierai ad aggiungere input. (CSS e un po' di JavaScript sono già included.)

  • Fai clic su Remixa per modificare per rendere modificabile il progetto.

  • Aggiungi un campo 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 con il name o id di input. Il tocco o il clic su un'etichetta sposta lo stato attivo sul relativo input, rendendo molto più grande dell'input da solo, il che è ottimo per le dita, i pollici e i clic del mouse. Screen reader annuncia il testo dell'etichetta quando viene impostato lo stato attivo sull'etichetta o sull'input dell'etichetta.

E name="name"? Si tratta del nome (che è "nome"!) associato ai dati da questo input, che viene inviato al server quando il modulo viene inviato. Includere un attributo name significa anche che i dati di questo elemento sono accessibili tramite l'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 visualizzare la compilazione automatica i suggerimenti memorizzati dal browser e le ipotesi sono appropriate per questo input, date le sue Valori di 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, quindi tocca o fai clic sull'input Nome. Quali differenze vedi?

Dovresti notare una leggera variazione: con autocomplete="name", i suggerimenti sono ora specifici valori utilizzati in precedenza negli input del modulo che avevano anche autocomplete="name". Il browser non è solo indovinare ciò che potrebbe essere appropriato: hai il controllo. Vedrai anche il pulsante 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 se sono presenti valori di completamento automatico archiviati.
UI per la compilazione automatica con valori ipotizzati rispetto al completamento automatico.
di Gemini Advanced.

Ora aggiungi attributi di convalida del vincolo maxlength, pattern e required in modo che il codice inserito 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" significa che il browser non consente input più lunghi di 100 caratteri.

  • pattern="[\p{L} \-\.]+" utilizza un'espressione regolare che consente di utilizzare caratteri Unicode lettere, trattini e punti (punti). Ciò significa che nomi come Françoise o Jörg non sono classificati come "non valido". Questo non avviene se utilizzi il valore \w, che [consente solo i caratteri del Alfabeto latino.

  • required significa... obbligatorio. Il browser non consente l’invio del modulo senza i dati per questo campo e avviserà ed evidenzierà l'input se tenti di inviarlo. Nessun codice aggiuntivo obbligatorio.

di Gemini Advanced.

Per verificare come funziona il 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. Viene visualizzato l'avviso relativo alla funzionalità integrata del browser campo obbligatorio vuoto e impostare lo stato attivo su di esso.

Passaggio 3: aggiungi un campo dell'indirizzo flessibile al modulo

Per aggiungere un campo dell'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>

Il textarea è il modo più flessibile per inserire il proprio indirizzo ed è ideale per tagliare e incollare.

Evita di suddividere il modulo dell'indirizzo in componenti come il nome della via e il numero civico, a meno che di cui hai bisogno. Non costringere gli utenti a inserire l'indirizzo in campi non pertinenti.

Ora aggiungi i campi per CAP o codice postale e Paese o regione. Per semplicità, solo i primi cinque paesi sono inclusi qui. 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>

Il codice postale è facoltativo, in quanto molti paesi non utilizzano i codici postali. (Global Sourcebook fornisce informazioni su formati di indirizzi per 194 paesi diversi, inclusi indirizzi di esempio). L'etichetta Paese o regione al posto di Paese, in quanto alcune opzioni dell'elenco completo (ad esempio 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 ne richiede più di uno per la spedizione e la fatturazione, ad esempio? Prova ad aggiornare il modulo per consentire ai clienti di accedere gli indirizzi di spedizione e fatturazione. Come si fa a rendere l'inserimento dei dati il più facile e veloce possibile, soprattutto se i due indirizzi sono uguali? L'articolo associato a questo codelab spiega tecniche per la gestione di più indirizzi. Qualunque sia la tua scelta, assicurati di utilizzare i valori autocomplete corretti.

Passaggio 5: aggiungi un campo per il numero di telefono

Per inserire un numero di telefono, inserisci 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 unico input: non dividere il numero in parti. In questo modo è più facile agli utenti di inserire dati o copiare e incollare, semplifica la convalida e consente ai browser la compilazione automatica.

Esistono due attributi che possono migliorare l'esperienza utente nell'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 mostrare che questa è l'ultima e ora è possibile inviare il modulo (il valore predefinito è next).
di Gemini Advanced.
Due screenshot di un modulo su Android che mostrano in che modo l&#39;attributo di input Enterkeyhint modifica l&#39;icona del pulsante Invio.
Utilizza l'attributo Enterkeyhint per impostare l'etichetta del pulsante Invio: 'next' e infine "fine".
di Gemini Advanced. di Gemini Advanced.

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

  • Prova il modulo su dispositivi diversi. Quali dispositivi e browser vuoi scegliere come target? Come potrebbe migliorare il modulo?

Esistono diversi modi per testare il modulo su dispositivi diversi:

di Gemini Advanced.

Andamento successivo

  • Analisi e monitoraggio degli utenti reali: consentono di testare e monitorare le prestazioni e l'usabilità del design del modulo per gli utenti reali, e per verificare che le modifiche siano andate a buon fine. Dovresti monitorare le prestazioni del carico e altri Segnali web, nonché analisi delle pagine (la proporzione di utenti che abbandonano il modulo dell'indirizzo senza averli ? quanto tempo trascorrono gli utenti sulle pagine dei moduli per gli indirizzi?) e analisi delle interazioni (quale pagina componenti con cui gli utenti interagiscono o no?)

  • Dove si trovano i tuoi utenti? Come devono formattare l'indirizzo? Quali nomi usa per l'indirizzo come CAP o codice postale? Guida compulsiva agli indirizzi postali di Franco fornisce link utili e indicazioni dettagliate che illustrano i formati degli indirizzi in oltre 200 paesi.

  • I selettori del paese sono noti per la scarsa usabilità. È meglio evitare elementi selezionati per un lungo elenco di articoli e lo standard per il codice paese ISO 3166 attualmente include 249 paesi. Al posto di un <select>, potresti prendere in considerazione un'alternativa come Selettore del paese delBaymard Institute.

    Puoi progettare un selettore migliore per gli elenchi con molti elementi? Come ti assicureresti che il tuo design fosse accessibile su una vasta gamma di dispositivi e piattaforme? (L'elemento <select> non funziona bene per un 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à legata alla standardizzazione di un selettore del paese. La localizzazione dei nomi dei paesi può essere problematico. Gli elenchi di paesi offrono uno strumento per scaricare codici paese e nomi in più lingue e in più formati.