web-dev-qa-db-ja.com

分岐ウィザードを実装する方法は?

JQueryプラグイン SmartWizard をいじって、Webアプリケーションの分岐ウィザードを実装しています。私が現在苦労している問題は、後続のワークフローに影響するユーザーの選択と、ウィザードの進行状況メーターのコンテンツと再順序付けをどのように処理するかです。

今のところ、私は3つの選択肢を考えることができます。

  1. 静的解:
    可能なすべての手順を事前にレイアウトします。ただし、一部のステップは、ユーザーが適切な選択をした場合にのみアクティブになります。それ以外の場合、ウィザードは次の有効なステップに進みます。例として:誰かが「フライト転送オプション」を必要としない場合、ウィザードは単にその選択に関係するすべてのステップを省略します。

  2. 流体ソリューション:
    デフォルトまたは必要な手順のみをレイアウトします(ハッピーパスシナリオ)。たとえば、ある時点でユーザーが可視パスから分岐することを選択した場合(転送オプションが必要です)、ウィザードは視覚的な更新とその進行状況メーターを取得します。ここで、すべての追加手順を示します。 (ただし、これが視覚的に魅力的かどうかはわかりません。)

  3. 1と2の組み合わせ:
    これは、1)および2)への拡張を意味します。ここでは、すべての選択が、短い問い合わせのように前もって行われます(第1ステップ)。これらの選択に基づいて、ウィザードは対応するワークフローの視覚的な更新を取得します。ユーザーが選択を変更したい場合は、最初のステップに再度アクセスする必要があります(これにより、既に入力されているデータが失われないという潜在的な複雑さが生じます)。

7
simou

静的ソリューションは通常、最も効果的に機能し、明確に定義された静的ステップ内で分岐を実行できるように、通常は分解できると思います。

ウィザードの主要な要素の1つは、進行状況とその場所の表示です。ユーザーのアクションに基づいてステップが追加または削除されると、予測可能性と「信頼性」の要素が失われます。

例として、ユーザーにプロフィール写真を追加するように求めるウィザードのステップを考えます。
ステップ自体はそれだけです-「プロフィール写真を追加」ですが、ユーザーはさまざまなレベルの労力と時間を表すさまざまなオプションから選択できます。

  • Facebookプロフィール写真を使用(Facebookと接続)
  • 既存の写真をアップロード
  • ウェブカメラ/フロントカメラで写真を撮ります

ユーザーには、同じ手順で写真を編集するオプションが表示され、スキップしてデフォルトを使用することもできます。
それでも、これらすべての選択肢と「内部」パスは、まだ明確に定義されたステップに存在します。

4
Dan Barak

以下の図のように、ウィザードの各ステップ内に分岐ロジックを含めることができます。

しかし、特にウィザードがステップ数を増やす場合は、ウィザード自体を分岐ロジックに変えません。

分岐ロジックの選択によってステップ数が変更されなくなるまで、ウィザードでステップ数を統合することで問題を解決できるように思えます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

3
Jung Lee

別の方法として、誰かがすでに分岐ウィザード ここ を作成しています。

1
Bil Simser