web-dev-qa-db-fra.com

Formulaire d'adresse - Meilleures pratiques

Dans ma candidature, j'ai un formulaire web pour créer un objet "New Company". Chaque entreprise a un nom et un champ d'adresse.

Le champ d'adresse doit (mais pas nécessairement) être composé de ces champs:
- Pays
- État/Région
- Code postal
- Ville
- Rue
- Numéro de rue
- Toute information supplémentaire peut être incluse (entrée, étage, etc.)

Ma question quelle est la meilleure pratique pour les formulaires d'adresse? Chaque champ doit-il être sur sa propre ligne? ou peut-être que certains champs peuvent partager une ligne? Dois-je utiliser "État" dans mon formulaire, car de nombreux pays n'ont pas d'État? Dois-je utiliser des listes déroulantes pour certaines valeurs ou les zones de texte sont une bonne solution? Dois-je ajouter une validation de formulaire? Toute information supplémentaire, réflexion sera très appréciée.

1
Gil Epshtain

Je vais aborder quelques-uns des problèmes ici, bien que ce soit en fait un sujet assez important:

Disposition des champs

Un champ par ligne est préférable pour les mobiles. Mais si de nombreux utilisateurs utiliseront un écran plus grand (ordinateur de bureau, ordinateur portable ou tablette de taille décente), la ville, l'État et le code postal peuvent généralement être placés sur la même ligne.

Rue, numéro de rue et (facultativement) Apt./Suite #, sont généralement combinés en un seul champ. Aux États-Unis et dans de nombreux autres pays, c'est 123 Main Street, Apt. 3G *, mais la séquence varie dans certains pays. Sauf si vous avez un besoin spécifique, il est généralement préférable de laisser l'utilisateur y entrer comme bon lui semble. La seule grande utilisation que je connaisse pour le numéro de rue est pour la validation de carte de crédit, mais les systèmes avec lesquels j'ai travaillé peuvent généralement prendre toute la première ligne du adresser et analyser eux-mêmes.

Pays et champs spécifiques au pays

Le pays doit être une liste de sélection/liste déroulante. Vous pouvez utiliser la sélection de cette liste pour:

  • Fournissez une liste sélective/déroulante des États/Provinces - ou si vous avez un pays où vous ne connaissez pas les États/Provinces, fournissez un champ de texte à la place.
  • Déterminez la nécessité et la taille du champ Code postal, mais vous pouvez simplement utiliser à la place un champ de texte suffisamment long pour partout.

Séquence

Je commence généralement par 2 ou 3 lignes d'adresse générale, suivies de la ville, car ces champs s'appliqueront partout. Ensuite, j'énumère le pays car le changement de pays modifiera la liste des États/provinces. La liste est l'État/la province et le code postal.

D'autres choses

  • Il existe différents formats d'envoi préférés, donc si vous envoyez régulièrement des envois physiques régulièrement, vous devriez y réfléchir. Cependant, le schéma typique est le plus spécifique en haut, le moins spécifique (pays) en bas.

  • Si vous connaissez vos pays les plus populaires, définissez le pays le plus populaire (et la liste des États/provinces associés) par défaut et essayez de configurer des listes d'États/provinces pour les prochains pays les plus populaires. Bien sûr, s'il s'agit d'un nouveau système, vous n'avez peut-être aucune idée de ce que seront les pays les plus populaires et vous ne pourrez jamais (pratiquement) couvrir tout. S'il s'agit d'un site centré sur les États-Unis (mais non limité aux États-Unis), les États/provinces des États-Unis, du Canada et du Mexique peuvent suffire pour 90% à 99% de vos utilisateurs.

Premièrement, à moins que vos utilisateurs n'entrent toujours des adresses aux États-Unis, la meilleure pratique consiste à utiliser les champs suivants:

  • Adresse 1
  • Adresse Ligne 2
  • Ligne d'adresse 3
  • Ligne d'adresse 4
  • Pays

Cela permet aux utilisateurs ayant des adresses dans d'autres pays d'entrer les informations les concernant et leur format, pas seulement au format américain.

Deuxièmement, il est probablement préférable de les diviser en zones de texte séparées sur de nouvelles lignes. Comme ceci .

J'espère que cela t'aides!

1
Jessica