非常に複雑なフォームを処理する最良の方法は何ですか？
非常に巨大なシステム（CRMなど）のユーザーに最高のエクスペリエンスを提供しようとしています。これには多くの形式があり、これらの多くには多くのフィールドがあります。私の疑問は、1列のフォーム（垂直スクロールが多すぎる）、または2列のフォーム（垂直スクロールが少なく、水平方向の余白が多い）と4列のフォーム（ほとんどない）を使用する必要があるかどうかです。スクロールし、ほとんどすべてのフィールドをスクロールせずに見えるようにするために、ほぼ空白全体を使用します）。
クライアントがスクロールを嫌うと言うことは重要であり、1列のフォームを表示するときに水平の空白を使用しない理由を常に尋ねられます）。
多くのUXの研究と優れた実践では複数列フォームを使用/回避しないことを推奨していますが、クライアントはほとんどの場合複数列フォームを要求するので、私はそれについて少し混乱しています。
私たちのクライアントはデスクトッププログラムに非常に慣れており、誰もがWebベースのシステムに精通しているわけではありません。
以下に、システムでの複雑なフォームの例を説明するために共有したいいくつかの可能性を示します。
上記の例では、1列形式を使用しています（UXの研究で最も推奨されています）が、非常に長い垂直スクロールを使用しています。
2番目の例では、2列を使用して垂直方向のスペースを削減しようとしました。
これはクライアントのお気に入りの1つであり、空白を使用し、スクロールせずに見える範囲をすべて維持しようとする4列です。
- フィールドの長さは、各フィールドの文字数の平均に基づいています。
このケースへの最善のアプローチについてのあなたの意見を知りたいのですが。
アイフローとワークフローが壊れるので、複数のカラムに対してAGAINSTを強くお勧めします。ただし、複数の入力を同じ行にグループ化すると、ロジックによりとなり、使いやすさを実現できる+++となり、スペースを大幅に節約できます。
ここで私は私が意味することの簡単な例を作りました：
さらに、次のことができます。
- 入力フィールドの数を最小限に減らします（フォームの下にある展開可能なボックスでオプションのフィールドを非表示にするか、側面の追加のパネルに移動します）
- 一部の論理的に接続された入力をグループボックスまたはタイトルでグループ化します（スペースを節約しませんが、ナビゲーションを容易にします）
- 通常は無効にする入力フィールドを完全に非表示にします
- ラベルを左側に配置します（フォームが小さいほど上に配置されますが、フォームが大きい場合は左側に配置することをお勧めします）。
- ポップアップを使用するか（単純なドロップダウンでは不十分）、独自のドロップダウンコンテナーコンポーネントを作成します。
列を使用せずに大きなフォームを画面の幅に合わせる方法
少し前に私のプロジェクトの1つで使用した便利な方法の1つは、2つのパネルを使用することです。2つのパネルは、小さい画面では垂直方向に自動整列し、広い画面では水平方向に整列します。
アイデアの一部が使いやすさ+または使いやすさ-のどちらかになるか疑問がある場合は、外部のUIデザイナーにreal-contentモックアップをレビューしてもらいます。
スクロールして複雑なフォームをモデル化する方法は他にもいくつかあり、すべてのフィールドを1つの画面に押しつぶすよりも良い結果が得られると思います。スクロールの自明性を低下させる方法、またはスクロールを完全に削除する方法、および余白を管理しやすくし、目立たなくする方法。
以下の戦略を検討することをお勧めします（単一の列が最適であることを強くお勧めします）。
複数のページ-続行ボタンとインテリジェントなデータ保存により、複雑なフォームを複数のページに分割できます。ステップ数は、ナビゲーションと、プロセスのどこにいるかをユーザーに示すのに役立ちます。大きなフォームから認知の重みの一部を取り除きます。
complexity-フォームの使用を分析し、一般的に使用される入力がより目立つようにし、フォームが他の部分を公開/アクティブ化することによって特定の選択に反応できることを確認します形。
タブインデックス-タブインデックスに注意してください。タブのようなアクションによって選択されるフィールドの順序です。タブキーですべての要素にアクセスできるようにし、フォームがフォーカスにインテリジェントに対応するようにします。タブインデックスを使用すると、正しく入力されたときにキーボードだけでフォームに入力できます。 （ http://ui-patterns.com/blog/Input-contexts-switching-from-mouse-to-keyboard ）。フィールド間をタブで移動すると、スクロールが発生するだけなので、ユーザーがスクロールを無視するのに役立ちます。マウスに手を伸ばし続ける必要はありません（スクロール疲労のかなりの部分を補うと私は仮定します）。
defaults-ユーザーの観察から構築された適切なデフォルトを提供し、上級ユーザーが独自のデフォルトを設定できるようにします。複製/コピー機能を使用して、既存のレコードからの事前入力を許可します。実際の入力はできるだけ避けてください。
scrolling-複雑な入力を提示する必要がある場合に、スクロールを回避することに慣れてはいけません。 （最初の3つのポイントで説明されている）優れたタブの順序と複雑さの管理は、これに役立ちます。 （また、誰かがボンネットの中に「フォールドの上」についてミツバチを見つけているかもしれません）。
feedback-フィールドエントリのフィードバックに空白を使用します。これは、単一列フォームの扱いにくい空白に対処するのに役立ち、フィールドエントリデータの迅速な検証もユーザーに提供します。複雑で通常のフィールドもアドバイスの恩恵を受けるかもしれません。これにより、ページと有益な情報のバランスをとることができます。
undo-変更をロールバックするための取り消し機能をユーザーに提供します。
単一の列のフォームが最も簡単に入力できるという主張を裏付けるアイトラッキングとフォームの研究に関連する多くの証拠があります。
編集...
提示された研究と経験豊富なメンバーからの寄稿により、フィールドの左側にある右揃えのラベルは、フォームをマークアップするための有効で使用可能な方法であり、OP固有の使用をサポートするという追加の利点があると述べています場合。詳細については、コメント内のリンクを参照してください。 @Rashaと@ DA01に感謝
...編集を終了
以下は、より詳細なリンクです。
https://www.cxpartners.co.uk/our-thinking/web_forms_design_guidelines_an_eyetracking_study/
ユーザーテストでは、より客観的な結果が得られるはずです。とにかく、複雑なフォームへの私の提案は、現在のフィールドの視覚的なインジケーターを提供することです、画像を参照してください。
それは可能です：
- 現在の分野により集中し、
- 中断または休憩後、より早く仕事に戻るため。
各セルは入力フィールドであるため、Excelで見ることができるのと同じアプローチ、つまり複雑なフォームのエッジケースです。
フォームのコンテキストとユーザーの意図は、アプローチの非常に重要な資格です...
ユーザーのデザインとモチベーションによるデザインのカテゴリー
1。Transactional Forms-意図はユーザーを引き付けることです。あなたは彼らに次の質問をする許可を求めており、最良の関与形態はクリックです。意思決定ツリーの最初またはベースにある最も単純な質問から始めます。関係がない限り、連絡先情報から始めないでください。お客様に価値を示す質問をします。ハンバーガーを販売している場合は、「お気に入りのハンバーガーは何ですか？」次に、連絡先情報を要求して配信することができます。長い形式であっても、ユーザーとの関係がない場合は、最初にバイインを取得します。
次に、質問の範囲を広げることができますが、徐々に行うことをお勧めします。圧倒しないでください。フォームのレイアウトには常識を使用してください。最初のルール：一貫している。同じフィールドサイズ、場所、グラフィックスタイル。連絡先情報を要求できる場合は、検討してテストすることをお勧めします。価値を提供するためにこれが必要な場合-連絡先情報をより早く求める方が簡単です。
期待を管理し、強い信頼を維持するプロセスを可視化します。 
2。複雑なデータ収集フォーム私が知っている最も複雑なフォームを見つけました。これは、複数の家、車両、ドライバー、およびその他の貴重な資産を持つクライアントの保険適用範囲です。
注：
a。予想される所要時間を人々に知らせることをお勧めします。 b。フォームを視覚的にセクションに分割しますc。進行中に回答が調整される可能性がある場合、人々がスクロールできるようにします。それ以外の場合は、おそらくページとしてより良いでしょう。 d。ユーザーが進むたびに保存できるようにするe。定期的にデータを自動的に保存する（今すぐ登録する必要があります）f。残すオプションのウィンドウは閉じていますが、表示されています-クリックすると開きますg。可能な場合は、情報アーキテクチャに基づいて動的フォームフィールドを作成し、質問を並べ替えます。使用しているバックエンドシステムによっては、複数のページが必要になる場合があります。 h。フィールドをTabキーで移動し、Enterキーを押してチェックボックスをオンにします（チェックボックスのプログラミングはJavaScriptで実行できます）。
SEAGE：誰もこのようなフォームに記入したくありません。彼らはやる気を起こさせる必要があります。この場合、彼らは彼らが必要とするカバレッジを取得します、そしてそれでも、私たちはエージェントが電話でプロセスを彼らに説明しなければならないことがしばしばありました。
MULTIPAGE OPTION：最初からページ数を表示し、各サブセクションで保存します。
これがお役に立てば幸いです。以下のフォームは完全ではありません。スライダーバーと動的コンテンツを使用する必要がありますが、少なくとも堅牢です。
純粋にあなたが持っているものと視覚的に再配置したものに基づいて、私はラベルを上から始めることをお勧めします：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
左のラベルに：
幅は広くなりますが、高さは約半分なので、スクロールが大幅に減少します。
あるいは、ウィザードやタブスタイルのレイアウトはどうですか？フォームを1つの長い画面ではなく、2つまたは3つの「画面」に論理的にグループ化できますか？
答える必要があるいくつかの質問があります：
- このCRMシステムは、クライアントの従業員のみを対象としていますか？
- もしそうなら、彼らはこのCRMを一日中使用することに専念していますか？
- これらのユーザーの画面サイズは均一ですか？
- これらはどのような形ですか？彼らはほとんどのフィールドに入力していますか（半分未満）？
- ユーザーが新しいフォームに最初から入力する頻度は、単に表示する頻度と比べてどれくらいですか。
- これらのフォームページには、個別の「表示専用/参照」モードがありますか？
キャプティブオーディエンスを持つ内部アプリケーションを設計する場合、消費者中心のアプリケーションを設計する場合とは異なるUXルールのセットが適用されます。答えによっては、スクロールせずに見える範囲にフィールドを詰め込むことの利点があります。
@ジョン・リーの答えを見てみるべきだと思います。
私の考えでは、UXは異なるコンテキストに異なる方法で適用する必要があります。また、クライアントには常に忘れている障壁があります。クライアントは常に正しいと言われているので、クライアントが十分頑固である場合は、最終的に彼らが製品に支払っている最終的に彼らが望むものに同意する必要があります（最初に彼らを説得しようとします）。
あなたの場合、私は彼らに1列レイアウトの利点を伝え、実際のスタジオやデータでそれをバックアップします。
また、[〜＃〜] huge [〜＃〜]の利点があり、実際の最終ユーザーが到達し、「類似のターゲット人口統計テスター」ではありません。決定的に最も効果的な方法は、従業員がフォーム（または同様の設定）をX回記入し、使用した時間の記録をフィードバックとともに保持してから決定することです。
これはWebベースのクライアントサーバーデータ入力フォームであるため、少なくとも3つの主要な使用例があります。
- 新記録
- 更新記録
- レコードを表示
あなたの質問とほとんどの答えは＃1にのみ焦点を当てています。これが新しいレコードのみを入力するグループの場合でも、最終的にはビューと更新にも使用されることがほぼ保証されており、スクロールが本当に大きな問題になります。
データエントリの場合、スクロール付きの単一列の方が悪いケースです
スクロール付きの単一の列は、カジュアルなデータ入力（ユーザーを登録するためのほとんどのWebフォームなど）および表示に対してのみ機能します。それでも、スクロールホイールは必須です。
ソースドキュメント（他のオンラインフォームまたは画面上のフォームである可能性があります）には、フォームと同じ順序のフィールドが含まれないため、単一列は新しいレコードの追加に適していません。ユーザーがソースドキュメントのフィールドを順番に移動するとき、対応するフォームフィールドを探して常に上下にスクロールする必要があります。画面外のフィールドが多いほど、スクロールが多くなり、フィールドに入るのを忘れてミスしやすくなります-非常に悪いです。データを更新するときに目的のフォームフィールドを見つけるのはさらに遅く、イライラします。
データ入力/更新に最適なスクロールなしのマルチカラム/マルチタブ
フィールドのデータ入力（ケース＃1および＃2）は次のようになります...
- ソースドキュメントフィールドを指定してください
- 可能であれば、フィールドを選択してコピーします
- 対応するフォームフィールドを検索
- 可能であれば、選択したデータをフィールドに貼り付けます。そうでない場合は、入力してください。
ステップ＃3に必要な時間は、多くの場合、他の3つのステップを組み合わせると小さくなります。
すべてのフォームフィールドが1つの画面上にある場合、ユーザーの目は水平方向と垂直方向（2次元）の両方をスキャンして、正しいフィールドをすばやく見つけることができます。 関連するフィールドが同じ行に表示される場合、精度と速度が向上します。ユーザーがよく知っているグループ化と順序がある場合（郵便名や住所形式など）、それを使用すると生産性がさらに向上します。
1つの画面にフィールドが多すぎて、ユーザーがよく知っている論理的なグループがあり、短いタイトルで識別できる場合、それらのタイトルを持つタブ（タブが十分にサポートされていない場合は、代わりに単一レベルのメニューである可能性があります）次善のアプローチ。
ユーザーが期待することを最適化することがすべてです。ソースフィールドを識別すると、宛先フォームのどこにあるかをすぐに見つけることができるはずです。
マウスを離します...
データ入力は、ユーザーがキーボードから手を離さない場合に最も生産的です。データ入力ユーザーにあなたを愛してもらいたい場合（または少なくとも2度考えてください）リンチモブの形成について）、タブ順序が論理的に設定されていることを確認してください（西、左から右、上から下）すべてのアクション、特にタブの切り替えなどのナビゲーションアクションには簡単なショートカットキーがありますレコードを提出する。これらのショートカットのリストも、1回のキーストロークで離れているはずです。
[〜＃〜]リソース[〜＃〜]
複数の行を持つフォームを表示する必要がある場合は、 http://Datatables.net または http://flexigrid.info/ などの無料のオープンソーステーブルプレゼンテーションフレームワークを検討する必要があります。 =最高のプレゼンテーションを実現します。単一のユーザー/単一のアイテムテーブルしかない場合は、それらを気にしないでください。ただし、異なる顧客または他の複数行のテーブルレイアウトのニーズごとに複数の行をリストする管理用のテーブルがある場合は、UIが豊富になります。少しの努力で。それらのいくつかは、ボックスの「カードビュー」をサポートしていることに注意してください。これは、積み重なった一連の入力ボックスとして幅が広すぎる可能性がある1行のデータを表示する方法です。理想的なプレゼンテーションでは、顧客データの入力に使用するのと同じように、複数の顧客の両方の管理プレゼンテーションで同じレイアウトを使用して、同じデータを複数の形式で表示することに関連する認知負荷を減らすことができます。
私のスレッドが閉じている間、私はこのスレッドが議論する問題のいくつかをほのめかしました。
https://ux.stackexchange.com/questions/39760/multi-column-form-design-is-there-a-consensus
個人的には、マルチページシステムまたは「ステップ」システムが好きです。それは長いプロセスを一見、より管理しやすいチャンクに分割し、ユーザーがプロセス全体のどこまで進んでいるかを簡単に示すこともできます。
また、フォームが正しく送信されず、もう一度すべて入力しなければならない場合もあります。これが発生する場合は、全体ではなくフォームの1/5だけの方が良いでしょう。
ラベルを表示する代わりにプレースホルダーを使用できます。高さを節約します。
4Columnフィールドは悪い考えです。高さを保存することを考えている場合、ユーザーがフォームを表示/入力するのにイライラすることがあります。
最初のものと同様に、フォームには正しい余白が多すぎます。これを回避するには、フォームを中央揃えにします。ユーザーはセンターに注目されます。
ステッププロセスなどのフィールドに応じて、2ページまたは3ページに分割できます。
特にフォームのデザインには注意が必要です。それらはまったく簡単ではありません。フォームの最後までスムーズにユーザーを受け入れなければなりません。そのためには、色、フォントサイズ、仕切り、いくつかの相互作用などを処理する必要があります。例は、Yahoo登録、ebay登録、
製品またはWebサイトの広告/提案/機能をフォームの右側または左側に表示できます。Ref：Google Registration。
ここで説明されているすべての良いアドバイスとシナリオを本当に楽しんだ。また、引用された視線追跡研究を長年の参照ポイントとして使用していました。しかし、2009年の論文をガイドラインとして使用し続けていること（そして正式に複製されていないこと）が非常に不満であることを私は言わなければなりません。それ以来、多くのことが変わりました。インターネットは別のものであり、ユーザーの期待と経験は大きく変わりました。さらに、研究は非常に単純な形で行われました。私はいくつかのより最近の研究を見たいです。
別のこと-ウィザードなど-良いアドバイスですが、常にですか？多くのコンテキストでは、ユーザーがフォーム全体を一度に表示できることは非常に価値があると思います-スクロールしながら、単一のビューで。