Emplacement des boutons pour les actions Précédent, Suivant et Enregistrer le brouillon
Je conçois un formulaire en cinq étapes. L'utilisateur peut quitter le formulaire et y revenir plus tard. J'ai donc une action Précédent, Suivant et Enregistrer le brouillon.
Quel est le placement idéal des boutons/éléments?
Je veux qu'ils soient alignés à gauche sous les champs du formulaire, et je veux indiquer clairement l'action principale: Suivant.
Jusqu'à présent, j'ai trouvé ceci:
Toutes les pensées ou solutions sont appréciées.
Des boutons alignés à gauche sous les champs fourniraient un chemin clair vers l'achèvement. Luke Wroblewski discute du chemin clair vers l'achèvement dans son livre "Web Form Design" ( PDF qui contient certaines des images ).
Voici un exemple tiré du livre sur la façon dont l'alignement peut rendre le chemin de l'achèvement plus clair:
Semblable à l'exemple ci-dessus, vous pouvez envisager d'avoir "Next" comme seule action principale, et d'avoir "Previous" et "Save Draft" comme actions secondaires (liens).
Bien que vous n'ayez pas posé de questions directement à ce sujet dans votre question et que vous envisagiez peut-être déjà de mettre en œuvre cette technique, je recommanderais également d'utiliser ceci dans votre formulaire:
Cela indiquerait clairement à l'utilisateur à quelle étape il se trouve et combien il reste d'étapes. Ils pourraient également cliquer sur n'importe quelle étape du formulaire, plutôt que d'avoir à cliquer plusieurs fois sur l'action précédente pour revenir à une seule étape.
L'approche de conception que vous avez adoptée est bonne, mais quelques points à considérer:
L'approche pas à pas pourrait être
- Simplement organiser - ici
Previousfonctionne bien Une étape affecte la suivante. Cela signifie-t-il que l'utilisateur perd - Cela fait de
Previousune fonction potentiellement dangereuse, dans le sens où l'utilisateur peut perdre certaines données.Dans ce cas, je ne voudrais pas donner autant d'importance à
Previouset je ne pourrais même pas l'avoir. Au lieu de cela, je montrerais une liste des 5 étapes et les rendrais cliquables. Les étapes terminées afficheraient une coche. De cette façon, vous pouvez avoir des indications visuelles sur ces étiquettes pour montrer que la sauvegarde à l'étape 2 de l'étape 4 peut affecter les données des étapes 3 et 4.
La deuxième chose à considérer est ce qui doit arriver quand on clique sur Save as Draft, l'utilisateur quitterait-il l'assistant ou resterait-il dans le formulaire lui-même. Par exemple, si le Save as Draft est là car l'utilisateur entre beaucoup de données et ne doit pas les perdre pendant qu'il y travaille, alors l'utilisateur reste sur le formulaire. Si c'est parce que l'utilisateur peut terminer le processus sur une période de temps, il quittera probablement le formulaire. Dans le premier cas, vous devriez considérer l'enregistrement automatique car cela garantit que les données ne sont pas perdues et que vous n'avez pas besoin du bouton.
Alignement des boutons
Les boutons alignés à gauche présentent plusieurs avantages:
- s'adapte aux formulaires structurés avec des étiquettes alignées à gauche ou en haut
- sans deviner où positionner le bouton sur un grand écran
- fonctionne bien sur mobile
Priorité des boutons
- en supposant que la plupart des utilisateurs terminent l'ensemble du processus en une seule session
Nextest l'action principale et doit être mise en évidence comme telle Previousest secondaire , c'est-à-dire devrait être gris (ou même un lien)
Enregistrer le brouillon
- Peut être une fonctionnalité intéressante et pratique si le formulaire est très long ou si les utilisateurs souhaitent enregistrer
- L'enregistrement nécessite également une réflexion: comment les utilisateurs enregistrent-ils, ce qui s'affiche lors de l'enregistrement de l'entrée et ce qui s'affiche comme une confirmation? Peuvent-ils économiser à nouveau? Comment accèdent-ils ensuite à un formulaire enregistré?
- Si vous pouvez vous le permettre, je suggérerais d'envisager d'enregistrer automatiquement le formulaire (voir l'exemple de la composition d'e-mails dans Gmail)
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je recommande toujours d'adopter une approche de carte mentale.
En tenant compte des utilisateurs de droite - Précédent/RETOUR est toujours à gauche et Suivant est toujours à droite, et surtout Enregistrer/Brouillon/.. etc., sont des actions contextuelles, donc devraient être dans la zone de barre d'outils de l'écran ( en haut, en bas - je préfère en bas).
REMARQUE: En outre, lorsque vous n'utilisez pas onglets [~ # ~] [~ # ~], vous devez fournir le composant train pour afficher la position/navigation actuelle.
Trouvez l'image ci-dessous portant la description de mon explication plus en détail.
Il y a de graves défauts d'utilisation dans le placement de vos boutons qu'aucune de ces réponses ne corrige.
Vos boutons Suivant et Précédent sont trop proches l'un de l'autre. Les utilisateurs peuvent cliquer sur l'un lorsqu'ils signifient l'autre en cas d'accident. Vous devez utiliser la cartographie directionnelle et placer le bouton suivant à droite. C'est ce à quoi les utilisateurs s'attendent et auxquels ils sont habitués lorsqu'ils paginent et cela permet d'éviter les erreurs de clic.
Votre bouton précédent semble désactivé. Je ne sais pas s'il est désactivé dans l'image, mais un bouton précédent non désactivé devrait avoir plus de contraste de couleur pour qu'il semble actif.
Votre lien Enregistrer le brouillon ressort comme un pouce endolori. Il semble que vous ayez manqué d'idées où le mettre, alors vous l'avez giflé au hasard à la fin.
Cliquer sur le bouton Suivant devrait amener les utilisateurs à la page suivante, mais aussi enregistrer automatiquement la progression de l'utilisateur sans forcer l'utilisateur à cliquer manuellement sur Enregistrer le brouillon. Vous pouvez laisser l'utilisateur sait que cela se produit en affichant une notification "Vos informations ont été enregistrées" chaque fois que l'utilisateur appuie sur Suivant.
Il n'est pas nécessaire de proposer un bouton Enregistrer le brouillon si vous disposez des éléments ci-dessus. Vous pouvez inciter les utilisateurs à accéder à la page suivante avant de quitter le formulaire.
Mais si chacune de vos pages de formulaire comporte de nombreux champs, un utilisateur devra peut-être laisser au milieu du formulaire avant de cliquer sur Suivant. Dans ce cas, vous pouvez proposer un bouton Enregistrer le brouillon. Il doit s'agir d'un bouton neutre placé à côté du bouton Suivant.
Voici un article sur les boutons que chaque designer devrait lire: http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
Si vous guidez quelqu'un à travers un processus, le bouton suivant agira comme une sauvegarde en arrière-plan. Vous devrez stocker les données pour qu'ils y retournent de toute façon.
À moins qu'ils n'écrivent une copie en bloc et qu'ils souhaitent enregistrer le brouillon avant de passer à l'étape suivante. Est-ce le cas?
Concernant le placement des boutons, si Save Draft (peu importe comment vous décidez de l'appeler) va quitter le flux de travail, vous devriez peut-être le placer plus loin des autres - ce serait perturbant si quelqu'un secouait accidentellement sa souris de quelques pixels vers la droite avant de cliquer, et se faisait expulser de l'assistant (même s'ils ne perdront pas de données).
Je m'attends à ce que les sites enregistrent les données saisies (sauf pour les mots de passe) dans les pages suivantes si je veux revoir un onglet Previous, ce sera probablement le cas ici (sinon vous ne vous souciez pas assez des utilisateurs pour les laisser enregistrer à mi-chemin;)
Next peut être remplacé par Finish pour la dernière étape. De plus, pour la première étape si Previous est masqué, vous préférerez peut-être conserver le bouton Next au même emplacement relatif au lieu de le déplacer.
Comme vous avez envisagé de changer le titre de Save Draft dans les commentaires sur les autres réponses, quelques suggestions alternatives:
Save and Exit: uniquement s'il s'agit d'une popup séparée qui sera fermée automatiquementComplete Later: Implicite que vous enregistrerez les informations lorsque le workflow est suspendu