web-dev-qa-db-fra.com

Quand les utilisateurs comprennent-ils qu'une barre de navigation de l'assistant est cliquable?

Dans mon application Web, j'utilise une barre de navigation de l'assistant comme celle de l'image:

example of a wizard navigation bar

Tout en obtenant les commentaires d'un collègue designer, il m'a demandé si la barre de progression était cliquable. Dans mon esprit, la plupart des barres de navigation de l'assistant sont cliquables. Existe-t-il une bonne pratique pour s'assurer que les utilisateurs savent que les barres de navigation de l'assistant sont cliquables? Y a-t-il des recherches à ce sujet? Avez-vous des suggestions sur la conception actuelle pour que l'utilisateur puisse comprendre qu'il peut cliquer sur la barre de navigation de l'assistant?

Pour info, j'utilise également un bouton de navigation en bas de l'écran, comme le montre l'image suivante:

bottom navigation

J'ai ajouté quelques idées supplémentaires sur la barre de navigation de l'assistant:

Other ideas

45
Dimitra Miha

En partant de la réponse de Simon Richter et du commentaire de O. R. Mapper, qu'en est-il de quelque chose qui ressemble à un onglet pour aider à indiquer qu'il est cliquable, mais a une forme de flèche communiquant le flux des étapes de l'assistant?

Exemple grossier: directional tabs

21
Josiah Keller

Remarque: lorsque cette réponse a été écrite, la question parlait d'une "barre de progression". La question a ensuite été modifiée pour signifier "assistant". Je laisse cette réponse telle quelle car elle est toujours régulièrement votée; ainsi , cela semble également être une réponse quelque peu appropriée pour une forme de style "assistant".

Jamais

Avec tous les exemples de la question et les réponses jusqu'à présent, je n'aurais jamais, en tant qu'utilisateur, l'idée de cliquer dessus. Au contraire; surtout s'il s'agit d'une application web, je porte généralement beaucoup d'attention à pas cliquer sur quoi que ce soit lorsqu'une page importante est toujours en cours de chargement - par exemple sur le bouton final d'une opération de paiement.

Je suggère donc de placer les parties cliquables bien en dehors de la barre de progression et de les faire ressembler à ce qu'elles font toujours (liens, boutons, tout ce que vous avez dans votre application).

Perspective

Si vous voulez une expérience un peu plus agréable pour les travaux importants et de longue durée, vous éviterez probablement complètement une barre de progression "normale". C'est-à-dire montrer à l'utilisateur la progression côté serveur et indiquer clairement à 100% que l'utilisateur est libre de s'en aller et de revenir plus tard (peut-être même dans une nouvelle session de navigateur). Pour ce faire, ignorez la métaphore de la barre de progression et affichez simplement quelque chose comme "Progression: 77%; cela a déjà pris 44 minutes et peut prendre un certain temps, il est sûr de fermer cette fenêtre et de revenir plus tard. Cliquez sur ici pour abandonner l'opération. ". Si l'utilisateur ferme effectivement la fenêtre (c'est-à-dire la session) et vient plus tard, votre serveur devrait en effet avoir les résultats de l'opération prêts, bien sûr.

64
AnoE

Je pense que vous devez vous fier aux icônes dans ce cas.

Le crayon est associé à l'action d'édition qui, si j'ai bien compris, est la raison pour laquelle l'étape est cliquable, tandis qu'une icône de vérification implique que l'étape est terminée et il n'y a pas de modification possible:

L'idée derrière est que les étapes qui ont déjà été remplies n'ont plus besoin d'un numéro et elles sont soit modifiables soit non modifiables (et terminées). Les pas à pas peuvent être linéaires ou non linéaires .


Source: Conception matérielle - Steppers

35
Alvaro

Beaucoup a déjà été discuté ici, et je pense que nous pouvons tirer parti du modèle mental de l'utilisateur by en utilisant border-bottom qui indiquera que l'étape de l'assistant est cliquable .

Je ne l'ai jamais utilisé dans mon travail, mais ce serait une excellente option pour la recherche.

enter image description here

33
DPS

Une très bonne discussion se passe ici. Quelques réflexions et idées ci-dessous.

enter image description here

Considérez la conception ci-jointe et les multiples scénarios mentionnés:

1) L'introduction d'un message d'état qui suggère que les données sont enregistrées et que la section peut être revisitée peut aider.

2) Il pourrait agir comme une mesure de confiance et un élément d'information, qui pourrait aider les utilisateurs à mieux comprendre et se sentir en contrôle .

3) Les messages d'état peuvent être rédigés avec soin et, en outre, une fenêtre contextuelle/info-bulle peut être mise en place pour compléter les informations sur le survol des barres/onglets.

4) La numérotation des étapes peut être ignorée , car cela donne une indication que vous ne pouvez pas revenir en arrière. Comme en 1-2-3 c'est ok, mais le modèle mental ne permet pas de penser qu'on peut facilement aller 3-2-1.

29
Amit Jain

La Deutsche Bahn utilise une interface à onglets, ajoutant des onglets à mesure que l'utilisateur progresse le long de l'assistant, et avec des lignes vertes indiquant que les pages respectives contiennent des données valides. L'utilisateur peut revenir en arrière en sélectionnant un ancien onglet.

rapport (allemand) avec photos .

18
Simon Richter

Si vous souhaitez informer l'utilisateur du fait que la barre de progression est cliquable, montrez-la lui par ex. changer le curseur de la souris tout en survolant une certaine zone de la barre de progression.

L'ajout d'un message contextuel de bulle peut également aider. Assurez-vous de ne pas mettre trop d'informations dans le ballon, car cela pourrait devenir illisible et encombré.

4
Mike