web-dev-qa-db-fra.com

Création d'un stepper de progression cliquable

J'ai un éditeur de page qui donne aux utilisateurs la possibilité d'indiquer leur progression. J'ai quelques options que je considère illustrées ici, mais le problème indique à l'utilisateur qu'il doit choisir l'étape actuelle de sa progression. En plus de souligner les mots, que puis-je faire pour indiquer qu'il s'agit essentiellement de boutons radio.

enter image description hereenter image description here

1
Hawkee

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Vous pouvez afficher un bouton radio directement sous ces textes, ce qui semble plus approprié et adapté à votre illustration supérieure.

-------------- 1 ----------------------------- 2 ----- ----------------------- 3 ------------------

------- Radio Mockup --------- Radio In-Progres -------- Radio Complete -------

Edit: filaire de l'interface utilisateur ajouté car il ne s'appliquait pas avec l'ordinateur sur lequel je travaille pendant le temps de réponse.

1
Erhan Yaşar

Si je vous comprends bien, la progression est censée indiquer l'état actuel, plutôt que le type de progression que vous voyez sous une forme à plusieurs étapes (ce que votre conception de flèche implique). Dans ce cas, vous pouvez mettre en surbrillance l'état actuel de la page et permettre aux utilisateurs de la modifier librement.

enter image description here

Si vous pouvez aller et venir entre les pages (et les modifications de contenu), vous ne devez pas utiliser de coches. Cela implique que l'étape est terminée et ne peut pas être modifiée. La conception de votre flèche devrait suffire dans ce cas. Garder la flèche blanche et ne mettre en évidence que l'étape en cours devrait suffire à transmettre la cliquabilité. Si les étapes sont conditionnelles, grisez les étapes futures jusqu'à ce qu'il soit possible d'y revenir en arrière.

enter image description hereenter image description here

1
Wendy Wojenka

Je suis d'accord avec le commentaire de Mike, ajoutez quelques boutons qui indiquent que l'utilisateur peut progresser en les sélectionnant.

Ils peuvent sélectionner les boutons en bas ou la barre de progression . enter image description here

0
r8n5n