非常に大きなフォームをユーザーフレンドリーにする
私たちは現在、ユーザーがフォームに記入する必要がある段階でアプリの設計段階にあります。
フォームは3つのセクションに分割できます。次に、ユーザーにステッププロセスを使用して3つのセクションすべてに記入してもらいます
例えば。
ステップ1（メンバーの詳細）
ステップ2.（受益者の詳細）
ステップ3（取引詳細）
これらの各セクションには、約15の入力が含まれています
名前から連絡先の詳細、婚姻状況などに及ぶ.
すべてを1つの画面に収め、ユーザーが下にスクロールしてすべてを完了するのは、あまり良い習慣ではありません。また、アコーディオンアプローチを使用すると、フォームが非常に壊れたように見えるため、理想的ではありません。
モバイルのみのプラットフォームで大きなフォームを作成しようとする場合、どのようなアプローチが適切でしょうか。これを十分に組み込んで、インスピレーションを得ることができる会社はありますか。
Material Design Stepper 。を調べてみてください。
ステッパーは、連続したステップの進行のために設計されています。これは、フォームの3つのセクションになります。 ステップのタイプ セクションを確認して、これらがモバイルプラットフォームでどのように使用されているかを確認してください。
私は、長いフォームが複数のページ/複数のステップの1つよりも優れていることを示す多くの研究を読みました。また、「単一ページまたは複数ページのフォーム？」という質問で、より詳細な回答を見ることができます。 ここ 。
私が提案すること：
フィールドはすでにセクションにグループ化されています。これは役立ちます。セクションが区切られて表示されることを確認してください。
フィールドをフィールドセットにグループ化し、行に2〜3つの入力を持つように設計を変更します。
明確で短いラベルを使用します。
「ウィザード」アプローチを使用する
- この場合、ウィザードアプローチを使用することをお勧めします
- フォーム要素を論理的にグループ化することがここで重要なポイントです
- インライン検証（ぼかし時）
- すべての必須フィールドに入力し、エラーがなければ、ユーザーを自動的に次のステップに進めます。
- エラーが発生しやすいメカニズムを統合し（フォーム要素を適切に選択）、ミスを修正し、ぼかし時にフィールドを検証します。
ステップについてはすでに説明しました。そう
1：ステップがあることをユーザーが理解できることを確認します。シンプルなアコーディオンは、このメッセージを伝えない場合があります。トリーがマテリアルデザインから提案したように、インタラクティブにする必要があります。
2：15個のフィールドがあるとおっしゃったように、マテリアルデザイン形式の入力ボックスも用意します。スペースを節約するテキスト自体にラベルを付けることができ、1つの折り目にさらに多くの入力を表示できます。このリンクを確認してください： https://material.google.com/components/text-fields.html#text-fields-single-line-text-field
3：大きな形式では、グループ化が最も必要な要素です。それらのいずれかがうまくいかない場合、ユーザーはイライラする可能性があります。
4：一部のフィールドを削減できるかどうかを確認します。
5：エラーメッセージを直接処理します。色（赤と緑）で表示するか、入力フィールドの横にあるぼかしのような通知で、入力ボックス自体で試すことができます。
6：カーソルを自動的に次の入力フィールドに移動すると、ユーザーのモーター負荷を軽減できます。
大きなフォームの場合は、ステップではなく小さなサブフォームのセットとして考えます。フォームに記入するとき、後で入力するためにいくつかのフィールドを残して、準備ができたら単にフォームに戻ることができます。そして、ステップを踏むと、ステップバックを行うことが難しくなります。これは、複数回戻る場合に「ダンス」になります。
それでは、サブフォームのセットを作成しましょう。 3つ以上のサブフォーム（セクション）を持つことができます。留意する必要がある最も重要な考えは、入力の検証です。一部の入力が別のフィールドに影響を与える場合は、同じセクションに入力することをお勧めします。一部の入力は、別のセクション全体にも影響を与える可能性があります-表示または非表示にします。言い換えると、相互検証メッセージを表示するとき、その参照フィールドは近くに表示される必要があります。
セクションのタイトルとセクションの有効性マークをアコーディオンで使用してサブフォーム（またはセクション）を表示する場合、入力および検証されたすべてのサブフォームを折りたたみ、他のサブフォームを展開できます。記入済みのサブフォーム内でアクションは不要であることをタイトルにマークで明確に示してください。また、すべてのサブフォームが展開されているときに、ユーザーが（必要な場合は）1ページのフォームを提供することもできます。