マルチステップフォームでユーザーに進捗状況をどのように示しますか？
私が用意した次のフォームデザインについてどう思いますか？
- 上部に進行状況バーがあります
- 右側にステップがリストされ、現在の状態が選択によって示されるたびに
代替テキストhttp://kepfeltoltes.hu/110210/form_progress_indicator_www.kepfeltoltes.hu_.jpg
他に何か使用しますか？これで十分ですか？ （この場合、フォームは銀行向けに設計されています）
...または、すでに十分ですか？自問してください：なぜ進捗インジケータが必要なのですか？
通常、進行状況を示すことで、ユーザーが一定の時間内に終了できるかどうか、ユーザーにかかる時間を見積もることができます。私は「コンテキスト」要素を最小化しようとします。
進捗バー
他のオプションと比較すると、次の場合にのみ意味があります。
- 個々のステップ/ページに必要な時間は大幅に異なり（たとえば、係数3以上）、その差異はユーザーに依存しません。
- ページごとの進行状況があります。どのラジオボタンが既に入力されているか。ほとんどの場合、それは単に素晴らしいギミックであり、実際には必要ありません。
ステップi/N
これは、ユーザーが個々のステップにジャンプする機会がなく、戻る/進むことができる場合はこれで十分です。
ジャンプリスト
個々のトピックのジャンプリストは、ユーザーが特定のステップをスキップできる場合、または非順次処理順序が一般的なユースケースである場合の決定的なプラスです。 （私は構築されたように聞こえないものを考えることができません）。
静的リスト
静的なリスト（つまり、ナビゲーションではなく、単なるインジケーター）でも、場合によっては役立ちます。まず、ステップi/Nやプログレスバーよりもはるかに優れている可能性のある見積もりをユーザーに提供します。次に、ユーザーがすべてのページを完了するために必要なものについてのヒントを提供します。最後から2番目のステップが「クレジットカードの詳細」の場合、クレジットカードが必要であることはわかっています。
不完全なシーケンスを保存して後で続行できない場合は、要件を知ることが特に重要です。静的なリストは、説明するページよりもわかりにくいです。
静的リストはプレビューとしてあまり意味がありません。ユーザーの入力によっては、重要な部分を分岐してスキップする場合があります。ジャンプリストは、その場合でも引き続き戻ることができれば、次のステップをプレビューできます。
税務フォームに記入するなど、一部のフィールドが欠落しているか無効であることを詳細にフィードバックする必要がある、より複雑なシナリオがあります。これは、進行状況インジケーターと非常にうまく組み合わせることができます。
私はこれを発見しました SmashingMagazineへの投稿 かなり啓発的です。 これは投稿の抜粋です：
進行状況トラッカーは、マルチステッププロセスを通じてユーザーを支援するように設計されており、ユーザーが現在どのセクションにいるか、どのセクションを完了したか、どのタスクが残っているかをユーザーに通知するために、そのようなトラッカーを適切に設計することが重要です。
進捗トラッカーの使用
オンライン注文：進行状況トラッカーのはるかに一般的なアプリケーションは、通常、複数のステップを含むため、オンライン購入と組み合わせて使用されます。
機能ツアーガイド：進行状況トラッカーは、次の例に示すように、オンライン製品およびサービスの機能をユーザーに案内するためにも使用されます。
マルチステップフォーム：フォームに多くのユーザー入力が必要な場合は、フォームを複数のステップに分割するのが最適な場合があります。
Progress Tracker設計のベストプラクティス
論理的な進行を示す：ほとんどの進行トラッカーは、左から右にステップを表示するように設計されています。ほとんどの土地では、人々は左から右に読むので、進捗トラッカーがそのパターンに従うのは理にかなっています。ただし、それだけでは十分ではありません。マルチステッププロセスを実行していることをユーザーに通知する必要があります。
位置情報をユーザーに知らせる：進行状況トラッカーの優れた設計の重要な側面の1つは、ユーザーがプロセスのどこにいるかをユーザーに通知し続けることです。これにより、論理的な進行が補完されます。これは、ユーザーが以前の場所との関係でどこにいるか、およびどのセクションが続くかがわかるためです。
配置：プログレストラッカーはナビゲーションの一種であるため、プライマリナビゲーションとセカンダリナビゲーション（パンくずなど）の下、およびコンテンツの上に配置するのが最適です。進捗トラッカーが関連していること。また、進行状況トラッカーはページタイトルとして機能できますが、現在のセクションのタイトルを進行状況トラッカーの下に配置して、現在の場所を補強することをお勧めします。
完全な投稿 を読んで回避すべき設計ミス、実装方法およびグラフィックの例。
コード例
あなたは 私が使用したhtml/css（jsfiddle） 以下をレンダリングしていることがわかります（画像は使用されていません）：
数学的にはパーセンテージプログレスバーは0から100までの実数の間隔を表すため、実行する必要のあるステップの数が控えめな状況には適していません。
パーセントの進行状況バーの代わりに、「ステップ1/6テーマ」に次のようなバリエーションを持たせることができます。
（o）----（x）----（o）----（o）----（o）----（o）
この場合、これがより適切だと思います。
もちろん、パーセンテージは実際には（完了したフィールドの数）/（合計フィールドの数）であると主張できます。その場合、フォームの位置が非常に正確に表示されます。ここでの唯一のことは、パーセンテージバーを50％で表示するときにユーザーを混乱させずに、ステップ1のままにすることです。
プログレスバーは、ユーザーがどれだけ進んでいるかをユーザーに知らせることを目的としています。私はあなたが「正確」すぎると思います。このようなものはどうですか：
「0％」と「100％」のラベルがないことに注意してください。
ユーザーにとって、問題は本当に進行していますか？または完全性？そのため、完了するまでの時間（進捗バー）を表示する代わりに、何をすべきか（完了アイコン）を表示します。金融サービス製品の最初のサインアップワークフローのために一連のワイヤに取り組み、完全性を示すことで解決しました。
この場合-ユーザーが手元に多くの外部情報を必要とする30分以内のプロセス-ユーザーが何をしたか（チェック済みのアイコン）と何を残したか（チェックなし）をユーザーに示すことがより重要でしたアイコン）、ユーザーのタスクを整理したタブのタイトルの横に表示されます。
あなたはバーと右側のステップを持っていることで、進行状況を過剰に指定しているように見えます。上または他で使用してください。おそらくこの場合、進行は連続的ではなく離散的であるため、ステップを使用する方が適切です。
また、ステップは左側にある必要があります。慣例では、左側のパネルは「上位の」情報（ナビゲーション、メニュー、またはその他の高レベルの情報）に使用され、右側は「詳細」の情報/エントリに使用されます。