web-dev-qa-db-fra.com

Entrée d'adresse en tant que zone de texte unique

Je crée un flux de paiement de commerce électronique et je recherche les meilleures pratiques pour les entrées de facturation/expédition. Chaque site que j'utilise et chacun que j'ai consulté pour inspiration a les entrées d'adresse comme un champ séparé pour chaque partie de l'adresse. Je ne comprends pas pourquoi je ne vois aucun site permettant à l'utilisateur d'entrer son adresse dans une seule zone de texte de forme libre? J'imagine qu'une seule zone de texte serait beaucoup plus rapide et plus simple à utiliser.

J'envisage sérieusement d'utiliser la zone de texte unique pour mon flux de paiement, mais une préoccupation est qu'elle sera différente de l'approche multi-box commune et risque de confondre le client ou à tout le moins de le faire s'arrêter et réfléchir?

15
Steve Claridge

TL; DR: Utilisez un champ de texte unique, stockez-le comme une chaîne unique, affichez un aperçu de l'étiquette d'adresse.


Des champs séparés ont servi à des fins limitées, telles que l'identification en toute sécurité du pays, de la ville ou de la zone de code postal dans laquelle quelqu'un vit. Ils ont également permis d'imposer certaines contraintes, telles que la fourniture d'une liste fixe de pays. Ils permettaient également - en théorie - de "réduire le nombre de modifications apportées" en cas de modification d'un enregistrement client. À l'extrémité plus ésotérique, cela pourrait aider à déterminer le côté gauche de la route à partir du côté droit, en regardant les nombres pairs/impairs1.

C'est faux aujourd'hui pour deux raisons:


Notez qu'il s'agit en fait de deux problèmes:

  • La saisie de données doit-elle offrir un seul champ multiligne ou plusieurs champs?
  • Est-ce que l'adresse du magasin principal doit être un champ unique ou plusieurs champs?

Cependant, je dirais que les deux avantages ou du moins ne sont pas affectés par un seul domaine.

Justification

Un perçu avantage du multi-domaine est la validation.
En effet, il peut vous protéger contre les parties importantes manquantes (le "Wanka" de Tchétchov me vient à l'esprit). Pourtant, avec tous les schémas d'adressage disponibles, seul un être humain peut décider si une partie de l'adresse a une signification individuelle. Pour le traitement automatisé, l'adresse n'a de signification que dans son ensemble.

À mon avis, afficher un aperçu de l'étiquette d'adresse avec la mise en forme, le style et l'arrière-plan habituels ( "c'est ainsi que nous vous adresserions un paquet. Est-ce que ça vous va?") devrait suffire pour amorcer les utilisateurs afin de vérifier que l'adresse est correcte.

Une autre option serait d'utiliser un service de carte en ligne pour montrer l'emplacement que vous comprenez à partir de l'adresse entrée.

Avantages du champ unique

Un seul champ semble plus accessible qu'une demi-douzaine de champs individuels. Le multi-champ peut être intimidant si vous souhaitez couvrir toutes les possibilités ( Maintenant, que dois-je saisir dans l'extension du bâtiment?)

Bien que "l'adresse" soit rarement demandée lors de la première inscription, l'apparition d'un formulaire complexe peut affecter les taux de conversion et de fin.

On peut s'attendre à ce que la saisie soit plus rapide, car de nombreux utilisateurs basculent toujours entre la souris et le clavier lors de la sélection d'un nouveau champ (observation occasionnelle).

Un seul champ permet de copier et coller l'adresse dans son ensemble pour les utilisateurs avancés.

@phresnel fait apparaître des erreurs courantes dans la saisie des données, qui sont généralement corrigées par la société de livraison - ce qui rend encore plus quesitonable la qualité des données saisies.

Sur le backend, un seul champ réduit la complexité, même s'il est marginal. De plus, cela fait comprendre que l'adresse doit être traitée dans son ensemble, doit être considérée comme opaque à moins que vous ne sachiez vraiment ce que vous faites.

Ralentir les développeurs trop zélés de essayer une validation qui se révélera presque toujours incorrecte pourrait également être considéré comme un avantage tangible.

Historique

Nous avions de bonnes raisons de séparer les champs. Les premiers outils de traitement automatisé pouvaient s'attendre à des emplacements fixes pour certains champs. Nous ne disposions pas de conversions "d'adresse à l'emplacement" puissantes et facilement accessibles, et nous devions nous appuyer sur un champ individuel lors de la requête, par ex. pour les ventes par pays.

Bonnes raisons pour les champs multiples:

Vous pourriez ne pas avoir accès aux services Internet, vous devrez peut-être être compatible avec un équipement de traitement restrictif, vos utilisateurs pourraient compter sur des outils de remplissage automatique de formulaires qui ont des problèmes avec les adresses de champ unique. Vous pourriez être catieux et vouloir être préparé à un besoin futur de domaines séparés.


1) cela m'a en fait été suggéré il y a une quinzaine d'années comme une bonne raison pour laquelle un numéro de rue devrait être un champ séparé. Je ne sais pas si cela a jamais eu une utilité pratique.

2) Pendant que vous y êtes, voyez également l'excellent "Les faussetés ... sur les noms" . Les conclusions qui en résulteraient seraient encore plus avancées.

17
peterchen

C'est une question intéressante. Merci d'avoir posé la question.

J'ai eu exactement la même idée l'année dernière, et après quelques recherches et même un test A/B, j'ai choisi de m'en tenir à l'approche sur le terrain. Ceci est basé sur ma propre expérience avec une boutique en ligne qui en fait expédie des articles de mode. Il s'agit donc de l'adresse de livraison; pas l'adresse de facturation.

  1. Les utilisateurs qui passent des commandes en ligne sont habitués aux formats d'adresse. Ils savent que le champ de l'adresse postale 2 n'est généralement pas un champ obligatoire et ils peuvent utiliser leur code postal alphanumérique à 6 caractères au Royaume-Uni même si le champ "Code postal" américain avec un espace pour le champ de saisie à 5 chiffres. Leur donner une zone de texte peut parfois les confondre s'ils doivent écrire des instructions précises ou simplement le nom de leur ville. De grandes zones de texte peuvent parfois entraîner des pertes de conversion importantes.

  2. Du point de vue du développeur, il n'est pas difficile de donner un champ d'adresse spécifique au pays (défini). Voir la norme xNAL. Nous mettons la liste de sélection des pays en haut (avec la résolution geoIP et quelques devinettes), et créons un champ d'adresse précis sous le champ du pays. La plupart de nos clients ont rempli le formulaire correctement et nos rapports et travaux de livraison sont beaucoup plus faciles. Vous pouvez déterminer la ville exacte, l'état et d'autres informations à l'aide de l'API Google Maps ou d'un tel service de géocodage inversé, mais c'est un travail supplémentaire et la précision n'est pas garantie.

  3. Autocomplétion du navigateur. Double-cliquez simplement sur la zone de texte libre "Ville" la prochaine fois que vous verrez un champ d'adresse. Il y a de fortes chances que votre navigateur ait l'historique de ce champ afin que vous puissiez le sélectionner rapidement. Maintenant, double-cliquez sur une zone de texte: aucune suggestion de saisie semi-automatique. Safari et quelques autres (probablement avec des addons) peuvent stocker les adresses dans un format structurel.

  4. Correct tab la navigation. Après la xNAL, nous avons une navigation correcte dans les onglets pour permettre aux utilisateurs avancés (?) De passer au champ d'adresse suivant. Rue, ville, état, puis code postal.

  5. Fins de vérification: si vous ne pouvez pas expédier dans une zone donnée, vous pouvez vérifier instantanément l'adresse saisie lors de la soumission. En outre, l'OMI, les utilisateurs sentiraient que vous êtes sérieux au sujet de l'expédition quand ils voient un ensemble de champs d'adresse.

7
Ayesh K

D'un point de vue UX, la question la plus importante est de savoir si le "remplissage automatique" enregistré par l'utilisateur remplira votre formulaire. Vous devez vraiment vérifier si votre zone de texte unique fonctionnera avec de telles fonctionnalités. Si ce n'est pas le cas, vous avez potentiellement perdu un utilisateur/client/signataire de pétition/peu importe. Surtout avec la prévalence des utilisateurs de téléphones/tablettes, entrer une adresse manuellement est un énorme problème, et j'ai souvent repensé mon choix d'acheter/signer/quoi que ce soit et appuyer simplement sur le bouton de retour lorsque le remplissage automatique ne fonctionne pas.

J'imagine que la séparation des adresses se résume à ce qui suit:

  • Stockage dorsal, utile pour diverses raisons telles que la création de rapports
  • Validation des éléments individuels de l'adresse pour garantir l'exactitude (sans, imaginez l'analyse que vous auriez à faire)
  • Impression d'étiquettes

La dernière chose que vous voulez, ce sont les informations de carte de crédit de quelqu'un dans un fichier, traitées, sans aucun moyen de leur expédier leur produit. Cela seul peut être une raison pour séparer les champs - donc la livraison et la facturation correspondent.

Notez également que de nombreux formulaires peuvent désormais être créés pour tirer parti d'une forme de saisie semi-automatique, de sorte que l'approche proposée ne déclenchera probablement aucune de cette saisie semi-automatique, ce qui nuirait à l'expérience de vos utilisateurs. Cela, et comme vous l'avez dit, la nature hors champ de votre pratique, peut inciter un acheteur à chercher ailleurs.

3