Wizard component - état actuel vs état actif
Le système est utilisé pour exécuter des tests.
Chaque test doit passer par un certain nombre d'étapes qui incluent l'interaction de l'utilisateur avec le système, ce qui signifie que chaque étape dispose également d'un écran dédié.
Nous avons dans le système un composant assistant qui sert en fait à deux fins:
Fournit une indication de l'état actuel du test - à tout moment, le test est sous un seul état.
Permet de naviguer entre les différentes étapes pour visualiser leur contenu. L'utilisateur peut cliquer sur une étape terminée pour afficher les informations sans modifier l'état actuel du test, c'est-à-dire uniquement pour regarder. Par exemple, le test peut maintenant être à l'étape 3 sur 4, mais l'utilisateur peut cliquer sur l'étape 1 pour y voir les informations - le test sera toujours à l'étape 3 mais l'étape 1 sera active.
Le dilemme: Il existe un risque de confusion entre une étape active et une indication d'étape de test actuelle, car le composant est en fait utilisé à la fois comme assistant et comme une sorte de système d'onglets.
Des questions -
Quelqu'un connaît-il des études sur l'utilisation d'un composant d'interface utilisateur de l'Assistant pour naviguer d'une manière similaire aux onglets?
Je suppose que la distinction entre les deux états peut également être faite par une utilisation efficace de la conception visuelle - quelqu'un connaît-il de bons exemples de conception visuelle d'un tel composant?
D'autres pensées? Des alternatives?
Utilisez des étiquettes et des couleurs assorties
L'affichage de tâches incomplètes en gris met rapidement en évidence les tâches en cours de traitement et/ou terminées si elles sont affichées dans une couleur différente.
Voici quelques façons de connecter l'utilisateur à ce qui est sélectionné par opposition à fait:
- Faites correspondre la couleur de la tâche sélectionnée dans la chronologie à l'en-tête de la zone sur laquelle vous travaillez.
- Étiquetez la tâche dans la chronologie et faites-la correspondre au titre d'en-tête sélectionné (faites également correspondre les icônes pour plus d'accent)
- Déplacer la coche de fin à côté du libellé de l'étape
- Afficher le nombre d'étapes actives du nombre total d'étapes
Source: X Planet
À partir de votre exemple et de votre question, Material Design Steppers couvre vos questions. Il est clairement expliqué avec des exemples et tout dans Material Design est le produit des tests.
https://material.io/archive/guidelines/components/steppers.html#
Il couvre vos questions de navigation spécifiques.
Juste pour boucler la boucle - c'est ce que j'ai finalement fait.
Dans le 4ème exemple, vous pouvez voir l'état difficile où l'utilisateur visualise une étape complète (sélectionner la voie) alors que le test est déjà sur la 3ème étape.
