Positionnement de champs de saisie de formulaire supplémentaires pour éviter un flux naturel de saisie
Je suis en train de réorganiser un formulaire d'inscription sur le site d'un client qui est principalement destiné aux utilisateurs britanniques uniquement. Le site fournit une recherche de code postal pour une identification facile de l'adresse postale de l'utilisateur final. Cependant, ne voulant pas aliéner complètement les utilisateurs de l'extérieur du Royaume-Uni, il est nécessaire de rassembler le pays d'origine pour ces utilisateurs de cas Edge.
Dans cette situation, ces utilisateurs activeraient une case à cocher pour révéler un champ déroulant contenant une liste de pays.
Où positionner au mieux cette case à cocher? Nous avons envisagé deux options. La première consiste à placer cette case à cocher directement sous les champs de texte où l'utilisateur entre son code postal (voir ci-dessous)
Cela semble le plus naturel, mais il existe une légère préoccupation qu'un tel positionnement rompt le flux naturel de remplissage du formulaire. En outre, cela peut être un élément du formulaire que les utilisateurs ressentiront qu'ils doivent saisir - ou au moins investir du temps dans la lecture, bien qu'ils ne soient pas préoccupants pour la majorité d'entre eux.
L'observateur parmi vous remarquera la bulle "aide" à droite de l'image. Au fur et à mesure que l'utilisateur parcourt les différentes sections du formulaire, ces "bulles" sont révélées pour informer l'utilisateur de ce qui doit être entré et pour le rassurer sur l'utilisation des données. La position alternative pour la case à cocher se trouve dans le coin supérieur droit de la section, comme indiqué dans l'écran ci-dessous
Bien que cette solution résout notre inquiétude concernant le flux de saisie de formulaire, elle soulève certaines idées selon lesquelles elle pourrait bien manquer à ceux qui en ont besoin et, en tant que telle, frustrer l'utilisateur final.
Sommes-nous trop sensibles à des problèmes avec la première option, ou la solution crée-t-elle simplement des problèmes supplémentaires plus difficiles?
Je pense qu'une légère variation sur le premier projet fonctionnerait mieux:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Comme il n'y a pas de case à cocher décochée, les utilisateurs ne la modifieront pas simplement en mode "pilote automatique".
Il vous permet également de récupérer gracieusement lorsque quelqu'un le change réellement - vous pouvez afficher une superposition qui permet de définir le pays, mais également saisir l'adresse complète (car vous en aurez besoin, je suppose). J'ai dit superposition parce que cela semble être un moyen très courant de gérer les ambiguïtés dans le scénario numéro/nom + code postal au Royaume-Uni. Par conséquent, vous pouvez utiliser le même mécanisme pour les utilisateurs britanniques (à choisir dans la liste) et étrangers (saisissez la rue/la ville/l'état).
Soit dit en passant, je pense que vous pouvez réduire considérablement la zone d'informations (voir maquette). En supprimant le texte supplémentaire qui est déjà impliqué dans la façon dont le formulaire lui-même est présenté, vous pouvez le rendre beaucoup plus rapide pour l'utilisateur à obtenir. Vous ne communiquez également que la partie réellement précieuse.
Je n'opterais que pour la disposition verticale, pas d'éléments de forme horizontaux côte à côte ou pire encore, une disposition mixte.
De plus, la bulle pourrait alors être plus visible + vous avez des avantages sur les plateformes mobiles qui sont généralement plus étroites.