Emplacement des actions suivantes, précédentes et complètes du formulaire
Nous avons un formulaire en sept étapes que l'utilisateur doit suivre, à chaque étape, il y a une condition qui affecte l'étape suivante.
Ceci est un projet gouvernemental, donc le formulaire comporte de nombreux champs et il faut un certain temps pour le remplir, nous avons donc décidé d'ajouter une action "Remplir le formulaire plus tard" dans le formulaire - lorsque l'utilisateur clique dessus, il apparaîtra que tous leurs les informations ont été enregistrées et "Veuillez compléter votre formulaire ultérieurement".
Mais je suis confus au sujet du placement.
Je pense à quelque chose comme ça:
Mon formulaire est aligné à gauche et libellé du champ supérieur.
Je veux indiquer clairement l'action principale, qui est Next , mais ils peuvent remplir le formulaire plus tard.
Toute recommandation m'aidera beaucoup.
TL; DR:
- Ajoutez un autre Terminez plus tard en bas et déplacez vos boutons Retour et Suivant ensemble.
Ajoutez un autre Terminer plus tard bouton en bas
J'ai souvent constaté qu'un utilisateur faisait défiler vers le bas du formulaire avant de décider s'il avait le temps de le remplir ou non.
Pour cette raison, l'ajout d'un autre bouton Terminer plus tard en bas de la page bénéficiera à l'utilisateur.
La plupart des sites du gouvernement britannique le font:
Visibilité
Mais vous devez également garder le bouton Terminé plus tard en haut également , pour augmenter la visibilité.
Comme le note Don Norman dans The Design of Everyday Things :
Dans chaque état du système, l'utilisateur doit facilement voir et pouvoir effectuer les actions autorisées. La visibilité agit comme une suggestion rappelant à l'utilisateur les possibilités.
Pour la même raison, vous pouvez également envisager de placer vos boutons Retour et Suivant l'un à côté de l'autre.
De cette façon, l'utilisateur doit rechercher une zone plus petite pour pouvoir voir les actions autorisées .
Cartographie naturelle vs visibilité
Vous pourriez faire valoir que le fait d'avoir les boutons Retour et Suivant de chaque côté est supérieur car il adhère à la cartographie naturelle .
Mais cela se fait au détriment de la visibilité, et la cartographie naturelle devient hors de propos si la cartographie n'est pas visible :)
Mais comme toujours, les tests utilisateurs sont le seul moyen d'obtenir une réponse définitive quant à la meilleure solution.
Je l'aime. Vous avez beaucoup de choses pour vous. Pour certains, je peux fournir des sources de recherche externes. D'autres seulement sont basés sur ma propre opinion.
La chose avec le bouton "terminer plus tard" est; c'est important pour toi? Voulez-vous que vos utilisateurs terminent le formulaire maintenant, ou voulez-vous qu'ils le terminent plus tard? Sur le plan hiérarchique, le bouton sur lequel vous souhaitez cliquer doit être le plus élevé (dans votre cas, remplissez-le en bleu). Le bouton secondaire a une bordure bleue (basée sur votre image).
Pensez à l'action principale de votre formulaire. Je crois que c'est pour le compléter maintenant. Compléter plus tard est une fonctionnalité supplémentaire si la fonctionnalité principale ne peut pas être terminée pour le moment.
- Le bouton de retour à gauche, le bouton suivant à droite.
Lorsque vous regardez le diagramme de Gutenberg, il est logique de placer le bouton suivant à la fin de votre flux (en bas à droite). Encore une fois, uniquement si vous souhaitez que vos utilisateurs cliquent sur Suivant plutôt que de terminer plus tard.
- Formulaire aligné à gauche avec des étiquettes en haut du champ.
Placer une étiquette juste au-dessus de son champ de saisie a permis aux utilisateurs de capturer les deux éléments avec un seul mouvement des yeux. De plus, si une étiquette indiquait des données très familières aux utilisateurs - par exemple, leur prénom ou leur nom de famille - les utilisateurs ne fixaient pas l'étiquette séparément pour les lire. Ils ont pu visualiser à la fois l'étiquette et le champ de saisie dans la même zone fovéale; éliminant ainsi le besoin de fixations et de saccades supplémentaires.
Source: Placement des étiquettes dans les formulaires
Indication claire de la position actuelle avec la navigation supérieure.
Disposition à une seule colonne
Présentez les champs dans une disposition à une seule colonne. Plusieurs colonnes interrompent l'élan vertical de déplacement vers le bas du formulaire. Plutôt que d'obliger les utilisateurs à se réorienter visuellement, maintenez-les dans le flux en respectant une seule colonne avec une ligne distincte pour chaque champ. (Exceptions à cette règle: les champs courts et/ou logiquement liés tels que la ville, l'État et le code postal peuvent être présentés sur la même ligne.)