Codelab sulle best practice del modulo degli indirizzi

Sam Dutton

Come puoi progettare un modulo che funzioni bene per una serie di 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>

Potrebbe sembrare complicato e ripetitivo per un solo campo del nome, ma è già molto utile.

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 annuncino il testo dell'etichetta quando l'etichetta o l'input dell'etichetta acquisiscono 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 gli attributi per aiutare gli utenti a 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 nell'input 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: sei tu a decidere. 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 campo di immissione, con e senza un valore di completamento automatico. Uno mostra i valori suggeriti in modo euristico nell&#39;interfaccia utente del browser; l&#39;altro mostra l&#39;interfaccia utente quando sono presenti valori di completamento automatico memorizzati.
UI per la compilazione automatica con valori indovinati, rispetto al completamento automatico.

Ora aggiungi gli attributi di convalida dei vincoli 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 \w che consente solo i caratteri dell'alfabeto latino.

  • required significa… obbligatorio. Il browser non consentirà l'invio del modulo senza dati per questo campo e avviserà ed 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 input 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>

Un textarea è il modo più flessibile per consentire agli utenti di inserire il proprio indirizzo ed è ideale per il taglio e il copia e incolla.

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 l'indirizzo completato.

<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. L'etichetta Paese o regione viene utilizzata al posto di Paese, 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 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 in modo che i clienti possano inserire gli indirizzi di spedizione e fatturazione. Come puoi velocizzare e semplificare al massimo l'inserimento dei dati, 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).
Due screenshot di un modulo su Android che mostrano come l&#39;attributo input enterkeyhint modifica l&#39;icona del tasto Invio.
Utilizza l'attributo enterkeyhint per impostare l'etichetta del pulsante Invio: 'Avanti' e 'Fine'.

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

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

Esistono diversi modi per testare il modulo su dispositivi diversi:

Per saperne di più

  • 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 formattano 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 dei paesi 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 gran numero di elementi, ma almeno è utilizzabile su quasi tutti i browser e dispositivi per la disabilità.

    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.