web-dev-qa-db-fra.com

Wizard avec étapes facultatives

Je suis en train de concevoir une boîte de dialogue d'assistant pour enregistrer une recherche. Il y a trois étapes dont la première est requise (fournir un nom) et les deux suivantes sont facultatives. J'aimerais que l'utilisateur puisse enregistrer (et fermer) l'assistant à tout moment, tant qu'un nom est donné, mais il est important que les autres étapes ne passent pas inaperçues. Les autres étapes doivent pouvoir être ignorées. Maintenant, je me demande comment y arriver ...

  1. ... afin que l'utilisateur n'oublie pas les étapes facultatives (en cliquant simplement sur "Enregistrer" juste après avoir nommé la recherche)
  2. ... sans avoir trop de boutons et de préférence sans obliger l'utilisateur à cliquer sur toutes les étapes
  3. ... sans que les boutons changent de position tout au long du flux (pour éviter les mauvais clics lorsque les utilisateurs assument des boutons)
  4. ... sans que l'utilisateur clique sur les mauvais boutons (par exemple, `` sauter '' qui se transforme en `` suivant '' lorsqu'une étape facultative est utilisée - les utilisateurs ne lisent souvent pas l'étiquette)

Je me demande comment vous y feriez face. Jusqu'à présent, je ne pouvais pas vraiment trouver une solution qui coche toutes les cases - la plupart du temps avec quels boutons. Voici ce que j'ai actuellement:

  • Toutes les étapes ont un bouton "Annuler" en bas à gauche de la boîte de dialogue
  • L'étape 1 a les boutons "Enregistrer" et "Continuer" en bas à droite (dans cette séquence)
  • Les étapes 2 et 3 ont "Retour", "Suivant" (désactivé si aucune information n'est donnée) et "Ignorer" (toujours activé)
  • L'étape 4 fournit un résumé de toutes les informations fournies avec les boutons "Retour" et "Enregistrer".

c'est-à-dire qu'il y a beaucoup de possibilités sur lesquelles cliquer, et le bouton `` Enregistrer '' à l'étape 4 est commandé différemment de l'étape 1. Des idées meilleures?

3
carlo

Si vous pouvez ignorer l'idée d'un assistant pendant un certain temps, je vous proposerai une autre approche. Jetez un œil à l'image:

enter image description here

L'idée est d'afficher un champ de requête et un bouton d'enregistrement. Il y aura un lien juste en dessous du champ de requête. En cliquant sur ce lien, une nouvelle section sera affichée/masquée qui contient les champs facultatifs. enter image description here

De cette façon, vous pouvez éviter tous les boutons, étapes et présenter toutes vos options de manière plus conventionnelle. Vous pouvez consulter la démo ici: http://jsfiddle.net/lotusgodkk/GCu2D/2168/

1
K K