20フィールドのオンラインフォームをよりユーザーフレンドリーにする方法は？
データベースを構築するためにオフィスワーカーが使用するデータ入力用のかなり基本的なフォームを作成しました。このフォームは、実際には組織が使用してきた数十年分のExcelファイルの複合体です。これが、非常に多くのフィールドがある理由の1つです。もう1つの問題は、フォームが2つの異なるタイプのエントリをカバーしていることです。「サブスクライバー」と「コントリビューター」がいますが、マネージャーは、両方を処理するフォームは1つだけであり、すべてのフィールドが編集可能なままであること（つまり、非表示にしないこと）を強く要求しています。フィールドが必要になるまで）。
したがって、現在、2列のフィールドがあります。1列には物理的な情報（名前、住所、ファックス番号など）があり、1列にはメタ情報（電子メールアドレス、アカウントノートなど）があります。
私の制限を考慮した場合、これは最適なレイアウトですか？
ここに私がこれまでに得たものへのリンクがあります：
HTMLのフォームのバージョンをモックアップして、いくつかの点で改善すると思います（ただし、私はあなたではなく、特定のドメインの問題を知らないため、すべてではありません）。
http://newlyminted.handcraft.com/
私が行った変更の一部：
- グループ関連フィールド。名、ミドルネーム、姓は同じフローの一部であるため、視覚的にグループ化します。住所なども同様です。
- フォームをフィールドセットに分割します。これにより、問題が解消され、一度にフォームの一部を処理できるようになります。同時に、すべてを一度に処理する必要がないため、フォームが長く感じられなくなります。
- 状態のドロップダウンを使用します。これによりエラーが防止され、全体的に簡単になります。また、郵便番号フィールドは5文字を超えることはないため、サイズも小さくしました。ここの1つの利点は、フィールドが純粋にサイズに基づいてZipコードフィールドとして直感的に識別できるため、フィールドが現在、ある種のアフォーダンスを持っていることです。
- 適切な入力コントロールを使用します。上記の状態の選択と同様に、「ノート」は本質的に単一の入力フィールドに収まるよりも多くの情報を入力する必要があるため、ノートフィールドをテキスト領域にし、それらを前後にスクロールする必要があるためです。
お役に立てば幸いです。自由に再利用してください。
あなたの制約について聞いて申し訳ありません。このフォームの使いやすさの最大の問題は、2つのワークフローを1つのフォームにマージしたいマネージャです。
状況を少し緩和するために必要なことは次のとおりです。
- フォームを複数のステップに分割します（少なくとも「連絡先情報」と「支払い情報」）。それが不可能な場合は、1つのページに視覚的に分離したセクションを作成し、ラベルを付けて番号を付けます：「連絡先の詳細-1/4」（または何でも）。
- 縦長のフォームなので、ラベルを上揃えして、完成速度を上げます。
- 現在2行のラベル名を短くします。
- ドロップダウンからデフォルト値を削除します-それらはロード時に空白でなければなりません。
- ドロップダウンが3つ以下のオプションである場合は、それらをラジオボタンに変更して垂直に配置します-認識が速くなります。
- 「送信」ボタンをラベルではなくテキストフィールドに揃えます。
フォームデザインに関する一般的な情報については、Smashing Magazineの「 Webフォームの使いやすさに関する広範なガイド 」と、それにリンクされている記事と本を参照してください。
最初に思い浮かぶのは、コントリビューターとサブスクライバーの両方に1つのフォームがあることです。
フォームを3つの部分に分割します。
- 一般的なフィールド
- 加入者フィールド
- 寄稿者フィールド
理想的には、そのタイプのユーザーが選択されている場合にのみサブスクライバーまたはコントリビューターのフィールドを表示し、フォーム上のフィールドの数を大幅に削減します。ただし、それが本当に不可能な場合は、グループボックスまたは異なる背景色を使用して別の領域に配置し、非アクティブなフィールドをグレー表示できるかどうかを確認してください。
あなたが探すことができる他のもの：
- 住所フィールドを折りたたみ、郵便番号/郵便番号検索フィールドを使用して、ユーザーの値を入力します。
フォームをCommon/Subscriber/Contributorフィールドに分割するだけでなく、カラーヒントを使用することもできます。サブスクライバーとコントリビューターのフィールドには、2つの明るい背景色を使用します。サブスクライバー/コントリビューターの選択を共通フィールドの直後に移動し、該当しないテキストボックスには明るい灰色の前景色を使用します。 （もちろん、彼らはすべき無効にされますが、それはあなたのマネージャーの頑固さです）。
「Add。Email」などの「追加」フィールドでは、小さいフォントを使用することをお勧めします。これは、通常スキップされる視覚的なヒントとして機能します。