Relation entre le bouton Précédent d'un assistant et le bouton Précédent de l'historique

Question

J'ai un formulaire Web divisé en 3 écrans/pages. Un utilisateur peut se déplacer entre l'avant et l'arrière entre les écrans via les boutons étiquetés Suivant et Précédent respectivement.

Lorsque l'utilisateur appuie sur un bouton précédent, doit-il agir comme le bouton de retour de l'historique, ou doit-il "avancer dans l'historique" en accédant à la page précédente?

Pour clarifier le deuxième scénario:

L'utilisateur A remplit les deux premières pages de l'assistant (Historique: page 1> page 2> page 3).
L'utilisateur A clique sur le bouton précédent pour revenir à la page 1 (Historique: page 1> page 2> page 3> page 2> page 1).
Lorsque l'utilisateur appuie sur le bouton de retour du navigateur, il le renvoie à la page 2 (dans ce scénario).

Je crois que le bouton précédent devrait agir comme le bouton de retour de l'historique; cependant, je demande confirmation.

Bennett McElwee · Accepted Answer

Le bouton Précédent ne doit pas agir comme le bouton Précédent. Le bouton Précédent signifie "passer à l'étape numérotée suivante"; le bouton Retour signifie "allez à l'écran sur lequel vous étiez avant celui-ci". Dans un contexte donné, ils peuvent avoir le même effet ou des effets différents.

Voici donc deux chemins que l'utilisateur pourrait emprunter.

Étape 1 Next→ Étape 2 Next→ Étape 3 Previous→ Étape 2 Back→ Étape 3

Étape 1 Next→ Étape 2 Next→ Étape 3 Previous→ Étape 2 Previous→ Étape 1

C'est ainsi que les boutons Suivant et Précédent et les boutons Précédent et Suivant ont toujours fonctionné. Ne les changez pas sauf si vous avez vraiment, vraiment, vraiment une bonne raison.

thesash · Answer

Réponse courte: le bouton précédent ne doit pas servir de bouton de retour à l'historique (si je comprends bien votre terme). Le suivant et le précédent doivent naviguer de haut en bas dans la séquence numérique des étapes.

Dans des scénarios comme celui-ci, vous devez généralement essayer de maintenir la cohérence des attentes de l'utilisateur quant au fonctionnement du système. Dans le cas d'une série linéaire d'étapes dans un assistant, l'utilisateur sera amené à s'attendre à ce que le bouton "suivant" accède à l'étape suivante de la séquence, tandis que le bouton "précédent" accède à l'étape précédente de la séquence, quel que soit le point de départ de l'utilisateur.

robmclarty · Answer

Je comprends votre idée du bouton previous faisant essentiellement la même chose que le bouton back du navigateur (cela a un sens logique du point de vue de la navigation), mais soyez prudent avec la façon dont vous gérez la programmation côté des choses: si vous remplissez un formulaire sur une page, puis appuyez sur le bouton back, le comportement par défaut du navigateur serait d'abandonner tout ce qui a été rempli sur la page qui vient d'être laissée (par exemple, remplir la page 3 et frapper back à la page 2, peut perdre les données du formulaire de la page 3). Cela dépend de la façon dont vous implémentez les fonctions de navigation, bien sûr, mais je pense qu'une perte de données a un impact UX plus important que tout schéma de navigation auquel je peux penser.

Je peux imaginer quelques méthodes pour gérer cela:

Le formulaire est en fait une seule page, et javascript/css peut être utilisé pour activer et désactiver les différentes étapes (sections de page) comme s'il s'agissait d'onglets et enfin le formulaire entier est soumis au serveur en une seule fois.
Votre serveur enregistre un enregistrement de la page de référence et en appuyant sur previous enregistre réellement toutes les données déjà remplies (temporairement) afin qu'elles ne soient pas perdues, et l'utilisateur peut rebondir entre les étapes sans frustration ( mais maintenant le bouton back réel se comportera légèrement différemment du bouton previous en ce que presser back pas sauvera les données temporaires).
N'utilisez pas de modèle d'assistant. Personnellement, je trouve beaucoup plus facile de naviguer, de comprendre et d'utiliser une longue page unique qui ne nécessite que de déplacer ma molette de défilement (mais je ne sais pas quelle est la taille de votre formulaire car cela a des limites pratiques). Le défilement vertical d'une seule page est la chose la plus simple possible pour un utilisateur d'interagir et doit être sérieusement pris en compte. En pratique, l'utilisateur peut parcourir les sections au toucher et sans regarder, tandis que cliquer sur les éléments du bouton nécessite un contrôle moteur fin et un mouvement et un clic précis du curseur (ce que tout le monde peut évidemment faire, mais c'est plus difficile que de simplement faire défiler).

Enfin, la validation est une autre considération. La validation se produit-elle côté client et à chaque étape (à chaque fois qu'un utilisateur clique sur next) ou se produit-elle uniquement à la toute fin côté serveur? Je serais frustré si je parcourais chaque étape d'un long formulaire pour découvrir que quelque chose que j'avais fait à l'étape # 1 était incorrectement formaté tout le temps. Je pense qu'à l'heure actuelle des moteurs javascript super rapides, tous les formulaires devraient fournir une rétroaction instantanée en cas de problème côté client.