Salut, j'ai un assistant plein écran qui, comme de nombreux assistants, a les boutons Précédent, Annuler et Suivant. Quelle est la meilleure façon de positionner ces boutons sur l'écran?
Y a-t-il des études qui se sont penchées sur cette question.
Ce sont quelques-unes des options, mais n'hésitez pas à me dire si elles sont toutes fausses:
Ceci est un bon article sur le wizard pattern
http://ui-patterns.com/patterns/Wizard
La meilleure est votre troisième option, d'avoir les boutons Next
et Back
en bas à droite, car l'utilisateur les utilisera généralement, il utilisera principalement le bouton Next
, et il utilisera le bouton Back
s'il a oublié quelque chose ou veut vérifier quelque chose. Le bouton Cancel
doit être en bas à gauche car il est prévu comme exception (c'est-à-dire que l'utilisateur souhaite annuler le processus).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il est très important d'avoir le bouton Annuler; imaginez que vous avez un assistant à plusieurs étapes, que vous n'avez pas le bouton Annuler et que vous souhaitez revenir à votre point de départ, puis vous devez cliquer sur tout le chemin en cliquant sur les boutons Back
plusieurs fois, ce qui est une expérience horrible pour l'utilisateur.
Je voudrais éviter l'étiquette Retour et la remplacer par Précédent pour éviter toute confusion avec le bouton Retour. Cela est particulièrement vrai lorsque les pages de l'assistant ne correspondent pas à l'historique de navigation.
Et parce que Annuler n'est pas très clair pour les pages Web, je vous recommande de le renommer comme Annuler et revenir à abc
Quant à la mise en page, je préférerais votre 3ème option où la navigation de page est colocalisée et le lien d'annulation un peu flou.
Voici un article que vous avez probablement à un moment donné concernant le positionnement des boutons là où vous avez des actions principales et secondaires. http://www.lukew.com/ff/entry.asp?571
Je pense que votre exemple justifie une approche légèrement différente car il s'agit d'un assistant multi-pages et a 2 boutons secondaires.
Donc, quelque chose comme ça pourrait fonctionner.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je suppose que votre exemple est une application Web qui s'exécute dans un navigateur contrairement à une application de bureau. Si cela est vrai, la confusion liée à la disposition des boutons peut provenir d'une mauvaise compréhension de ce qui va se produire lors d'un clic sur un bouton.
Cela étant dit, "Annuler" dans une application Web est relativement difficile à comprendre car les utilisateurs ne savent souvent pas ce qui va se passer après avoir cliqué sur "Annuler". Nous avons effectué plusieurs tests utilisateur et plus de 95% des utilisateurs ne savaient pas ce qui allait se passer après avoir cliqué sur "Annuler".
En ce qui concerne les boutons "Précédent" et "Suivant". Ceux-ci fonctionnent mieux lorsqu'il existe un indicateur de la position actuelle de l'utilisateur dans le processus.
Comme suggestion personnelle, si un formulaire n'est pas excessivement grand, je recommanderais de l'avoir sur une seule page avec des indicateurs visuels clairs des sections. Pensez que des sous-titres et des lignes clairs pourraient bien fonctionner.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups