長くて複雑なフォームの情報密度を改善するにはどうすればよいですか？
可能な限り多くのフィールドがページに表示されるように、長くて複雑なフォームをレイアウトする方法はありますか。
見積もりを作成するときに5つのセクションに合計30倍のフィールドがあり、見積もりの状態に応じて10〜20倍のフィールドが追加されるエンタープライズWebアプリを再設計しています。
クライアントは、スクロールせずに各画面内でできるだけ多くのフォームフィールドを表示することを強く希望しています（このリクエストは理にかなっているようですが、まだテストしていません）。
フォームは次のようになります。
私の最初の試みは、より明確な階層を導入し、入力をさらに別のサブセクションにグループ化することでした：
しかし、UXは、水平+垂直ではなく、各タブ内のコンテンツを垂直に（およびサイドバーを使用して要約を表示して）フローすることでさらに改善できると思います。
ここで適切な他のパターンはありますか？
多数のフォームフィールドを表示したままにするには、他にどのような方法がありますか？
タブ（階段状のセクション）内とタブのコンテンツ（フォーム全体の現在の部分）内の両方で、依存関係と順序を明確にしてください。
私があなたを正しく理解していれば、これは多段階のプロセスです。ここにはいくつかの側面があります：
- 完成に必要なものの全体を伝える
- 順序と依存関係（セクション間およびセクション内の両方）に関する明確性
- 要件を順守するために多くの作業を行うユーザーへの共感
1.タブを順序付けられたセクションに分割します。番号付きリストとサブテキストを使用して、遭遇する内容を明確にすることができます。
タブは多くの場合、関連データのグループ化に使用されますが、の順序付けられたデータまたは依存データを分割およびグループ化するためにはあまり使用されません。
降順（下が最後）を示す垂直セクションを使用し、番号付きリストを使用してさらにエンコードすると、次のようになります。
- 総ステップ数
- オーダー
- 各セクションで必要となる可能性があることをユーザーに説明する説明
2.各セクション内で、垂直方向のパスを使用して補完を行い、ユーザーが順序を認識できるようにします。また、ユーザーが上のセクションで選択した内容に応じて、下のセクションを柔軟に変更できます。
依存関係（つまり、後続のセクションで情報を変更または公開する条件付きドロップダウン）があるため、垂直形式を使用すると、完了する必要がある順序が強調されます。
すべての入力のラベルが表示されるように、顧客がスキャンして垂直方向にスクロールするのも簡単です。
トレードオフ：コンパクトなデータと順序の明確さ
「スクロールせずに見える範囲」で情報を保持することの間にはトレードオフがありますが、ユーザーのビューポートを制御できない可能性があります。彼らは、30インチのモニター、または11インチのMacbook Airを使用している可能性があります。
3.フォームデータがすべて揃っていなくても、最初からやり直したくないので、保存して終了します。
実装モデルに準拠する必要があることでユーザーを罰しないでください。
あなたは複雑なマルチステップフォームを持っているので、顧客が入力するALOTのデータを持っていると仮定します。
保存して終了することを許可するので、最初からやり直す必要はありません。
更新：タブとステッパーに関するメモ
@plainclothesが指摘したように、このソリューションは水平ステッパーでも機能します。私は効果的な両方の例を見てきました：
Materialをフレームワークとして使用している場合、それらは horizontalまたはvertical の使用を提供します。
