Conception de formulaire et placement des boutons d'action
Cette question implique un formulaire de saisie de données dans une application Web. Le formulaire sera utilisé uniquement dans un environnement de bureau; il n'est pas nécessaire de prendre en compte les mobiles. Un seul utilisateur de cette application Web pourrait remplir ce formulaire des centaines de fois par jour.
Bien que le contenu du formulaire soit dynamique, la liste des questions sera toujours d'environ 20 environ. Je dis "questions", mais plus précisément le test "question" ne serait qu'une brève légende de données de quelques mots. Dans ces circonstances, le formulaire sera juste un peu plus long que la fenêtre du navigateur, activant ainsi la barre de défilement du navigateur.
Ma question est: quel serait le meilleur endroit pour placer des boutons d'action, principalement le bouton "Enregistrer", et quelles recherches ont été effectuées sur le sujet?
Quelques possibilités d'implémentation:
Option 1: incluez les boutons d'action dans la navigation supérieure ou la navigation supérieure secondaire, et placez cette navigation supérieure dans une position fixe. Un exemple de ceci est la structure que nous voyons dans Gmail. (Bien que Gmail et une application de saisie de données ne soient pas exactement identiques, ils sont similaires.)
Option 2: placez les boutons d'action au bas de la page dans une position fixe, afin que les boutons aient un z-index plus élevé que les questions du formulaire et conservent une visibilité à tout moment.
Option 3: n'utilisez aucun positionnement fixe. Placez le bouton "Enregistrer" au bas du formulaire et laissez l'utilisateur accéder au bouton pendant qu'il remplit les champs de saisie des données.
Option 4: disposer d'un ensemble de boutons qui défile automatiquement jusqu'à la position où vous vous trouvez dans le formulaire.
Option 5: placez les boutons en haut et en bas dans des positions fixes.
J'ai lu une partie de le travail de Luke W , mais je ne pense pas avoir rencontré un examen de cet aspect particulier de la conception de formulaires.
Je me penche vers les boutons en haut dans une position fixe, où la seule barre de défilement est la barre de défilement du navigateur, pas la barre de défilement d'un élément interne. Cela semblait être la direction prise dans le question sur le placement des boutons d'enregistrement et d'annulation , mais les réponses à cette question étaient courtes sur les raisons pour lesquelles une approche particulière fonctionnerait mieux.
Je n'utiliserais les boutons qui suivent la position de défilement de l'utilisateur que s'il est nécessaire d'enregistrer par intermittence, si les utilisateurs doivent toujours remplir le formulaire, il suffit de mettre les boutons en bas du formulaire.
La seule fois où j'ai essayé de mettre des boutons de sauvegarde dans une barre en haut de la page, les utilisateurs ne savaient pas où chercher pendant quelques secondes. Des frustrations et des plaintes s'en sont suivies.
Je recommande l'option 3 sur la base des informations que vous avez fournies. Lorsque l'utilisateur remplit le formulaire et descend la page, il s'attend à trouver le bouton d'action suivant les champs du formulaire en ligne avec les actions de l'utilisateur. À tout le moins, les boutons d'action seront situés au point de focalisation de l'utilisateur à la fin du formulaire.
L'option 1 est gênante dans la mesure où l'utilisateur ne s'attend pas à ce que des boutons d'action soient placés au début d'un formulaire. Leur point de focalisation sera l'endroit où ils finiront, et les boutons seront situés ailleurs. De plus, si l'utilisateur entre principalement via le clavier, il devra s'arrêter, saisir la souris, la placer sur le bouton d'action supérieur et cliquer. Si le bouton d'action se trouve à la fin du formulaire, l'utilisateur peut appuyer sur Entrée après avoir cliqué sur le bouton d'action. De plus, en bloquant l'espace vertical pour la zone contenant les boutons fixes, vous réduisez l'espace disponible pour les champs du formulaire.
L'option 2 peut amener les utilisateurs à manquer les champs du formulaire qui sont "en dessous du pli", en supposant qu'ils sont terminés car ils ont atteint le bouton d'action. Encore une fois, si vous avez un pourcentage élevé d'utilisateurs de clavier lourds, les boutons d'action peuvent ne pas être dans l'ordre de tabulation correct.
L'option 4 peut introduire de l'incertitude dans le flux de travail de l'utilisateur, car il pourrait ne pas savoir à quel moment il est censé l'utiliser.
L'option 5 réduit davantage l'espace disponible sur l'écran, aggravant les problèmes potentiels avec l'option 2.