長いウィザードをメインステップとサブステップに分割する場合とその方法は？
私は、ユーザーが彼が計画/構築した技術的なインストールに関する多くの情報を入力するように要求する長いWebフォームをデザインするタスクを与えられました。必要なデータの性質（異なるチャンクがあり、ほぼすべてのフィールドが必須であり、特定の順序を示唆する依存関係がいくつかある）を考えると、ウィザードに編成しました。ただし、プロセスを明確な主な手順（簡単な部分）に分割した後も、グループ化を正当化するのに十分な入力フィールドが残っていました。
ただし、この「第2レベル」のデータ入力では、チャンクは必ずしも順序付けされているわけではなく、依存しているわけでもありません（多くのユーザーはグループからグループへ進むだけですが）。その結果、私は考えました
a）標準の手順として上から下へのアプローチを示唆しながら、「フリー」ジャンプを可能にするタブ構造
b）もう1つの「サブステップ」のセットを備えた、より堅固な2次ウィザード
編集：c）別の可能性は、サブステップを説明するためにウィザード内にセカンダリレベルを作成することです。 b）と同じように機能しますが、これを別のビジュアルで伝えます。
これは this one と同様の質問であり、基本的に私の提案は、受け入れられた回答の2つのアプローチの組み合わせですが、それらは組み合わせではなく、選択肢として提示されています。これも回答するための1つのアプローチです 長いウィザードに関するこの質問 ですが、そこでは議論されませんでした。
私の質問は：
- この種の2層アプローチの経験はありますか？私が認識しなければならない可能性のある落とし穴はありますか、またはこれについてまったくお勧めできないものがありますか？ （一部の読書はタブとウィザードを混在させないことを提案していますが、これは主に「機能がウィザードの場合はタブを使用しない」ことを指します）
- タブの代わりに、セカンダリレベルのアコーディオンスタイルも検討しました（ このjQueryの例 または この答えはこちら によく似ています）。ただし、ここで読んだ他のコメントでは、アコーディオンは「不自由」または「旧式」または「モバイルのみ」であり、それ以上の詳細はありません。それで、この与えられた状況で実際の欠点は何でしょうか？
- 私は現在、かなり厳格な2レベルのウィザードに傾いています。私が言ったように、ほとんどのフィールドは必須で重要であり、私はまだ先にジャンプする必要を見つけていません。この場合、前方/後方ナビゲーションをどのように設計するか疑問に思います。現在の[次へ]ボタンは次のサブステップにジャンプすることになっていますが、最後のステップには[次のメインステップへ]ボタンが含まれています。ただし、ユーザーを混乱させる可能性があるため、まだ満足していません。アイデア、経験はありますか？
私が選択しなければならなかった場合、提示されたオプションの3番目に投票します。 （あなたが提示した一連の提案の中で）最も自然に感じる、より直感的な進行状況インジケータがあります。
長いウィザードの問題へのアプローチを提案する必要がある場合は、次のことを提案します関係を逆にする：必要なすべての情報を入力するように強制せず、インストール情報エントリを追加できるようにします完了していないとしてマーク（ "インストール情報は10％完了しています"）。これにより、ユーザーは一度にすべての情報を入力するのではなく、情報の完成に向けて引っ張られている間、ピースごとに情報を入力できます。また、インストールの「プロファイル」ページの設計も簡素化されます。
アコーディオンはオールドスタイルだと誰が言うのですか？私は、質問を徐々に明らかにし、すでに与えられた答えについてのフィードバックも提供するアコーディオンスタイルのウィザードを非常に気に入っています。
私はクライアントの財務質問票のためにこれらの1つを行いました： 
それらは harrods や John Lewis のようなよく設計された多くのチェックアウトでも使用されます。
利点は次のとおりです。
- 回答に応じて段階的に質問を公開できます（そのため、ウィザードを使用して進行状況を変更できます）。
- ユーザーは常に自分のいる場所をよく理解しています。
- ユーザーはすでに与えられた答えの概要を持っているので、簡単にそれらに戻ることができます。これはあなたの前方/後方ナビゲーション問題をカバーすると思います。
- 質問はすべて1つのページに表示されるため、ウィザードの長さが短く感じられます。
上記のワイヤーフレームに基づいて、私はあなたがすでに正しい方向に進んでいると信じています。ただし、ページの一貫性を保つために、プライマリウィザードバーの下に同様の小さなサブウィザードを作成することをお勧めします。以下に示すいくつかの微調整により、単純な矢印を使用して、ユーザーが現在プロセスのどこにいるかをさらに明確にすることができます。異なるステップ間のナビゲーションを許可するには、各ステップのタイトルをリンクに変更します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
