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