長いフォームのセクションを非表示にするときに利用できる空白をどうするかに関するアイデア
現在、個人の詳細とアカウントの詳細の2つのセクションを含む新しいユーザー登録ページに取り組んでいます。アカウントの詳細セクションは、個人の詳細セクションが完了するまで非表示のままにしておく必要があります。アカウントの詳細セクションを個人の詳細セクションと同時に表示できないのにはさまざまな理由がありますが、非表示になっているにもかかわらず、本来あるべき場所に大量の空白があります。
UX（および開発）の観点から、空白を単に隠すのは良い習慣ですか？スペースを使用して製品情報を表示することをお勧めしますが、登録の上にそれを行うセクションが約3つあります。
ここでは全体のコンテキストはわかりませんが、通常、ユーザーがフォームに入力するとき、「製品情報」について読むことに興味はありません。マーケティングチームからの提案のように聞こえます。 :)
空白は目的を果たさないので、絶対に隠しておきます。ただし、新しいフォームフィールドを公開する場合は、意図的で明白なプロセスにします。おそらくアニメーションやフェードインなどを使用します。
ただし、問題は、新しいフォームフィールドの表示をトリガーするものですか。
これを複数ステップのプロセスにする方が理にかなっています。 「次へ」ボタンがあります。このページに記入し、次にNEXTに記入し、次に新しい追加のアカウントの詳細に記入します。
追加情報を追加せずに空白スペースを非表示にします。これは、人々にサインインさせるために重要です。目の前のタスク以外に邪魔されたくないでしょう。
半自動で機能する表示/非表示機能を実装できます。追加の詳細が必要な場合-フォームを表示します。そうでない場合-それを非表示にします。ただし、必要に応じてユーザーがフォームを開いたり閉じたりできるようにします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
質問の数にもよりますが、プロセスを段階的に分けてみませんか？このようにして、質問を明らかにすることなく、ユーザーに次に何を期待するかを説明します。
5分間のモックアップで、「一部」の詳細が欠落しています。
サインアップページには、製品のような他のものを入れないことをお勧めします。ユーザーはこのページでそれを見たくありません。ユーザーが個人の詳細を投稿し、[送信]をクリックするとデータが保存され、ユーザーの詳細フォームがフェードインフェードアウトアニメーション形式で表示されるように、フォームを2レベルのフォームとして作成できます。フォームの中央をページに揃えます。
「隠しフィールド」と言うと、2つの解釈があります。
情報の異なるセクションに属するフィールド。そのセクションが処理されていない限り表示されません。もしそうなら、セクションの詳細をまとめて表示しない場合です。フィールドをさまざまなセクションにグループ化し、一度に1つのセクションを開くことができるアコーディオンの使用をお勧めします。ベニーが上で述べたことに似た何か。完全な情報を表示するために「expand all」という明示的なオプションを使用して、一度に1つのセクションのみを開くことで、デフォルトの動作を維持できます。
セクションに入力された情報に基づいて表示されるフィールド。その場合、1つのセクションに入力された情報は、後で表示されるフィールドを直接駆動し、情報は特定の順序で入力する必要があります。 たとえば、性別を男性として選択した場合、ユーザーにお気に入りのスポーツを入力するように依頼し、女性の場合はお気に入りの音楽を依頼することができます。ここで決定ポイントは、情報を表示するかどうかですユーザーが別のセクションに移動すると、前のセクションも同じ画面に表示されます。
- 以前の情報を即時画面に表示しない場合は、オンラインショッピング中に表示される「支払いとチェックアウト」サイクルのようなレイアウトを使用できます。各セクションは、前のセクションの情報にアクセスするためのクイックリンクとともに次々に表示されます。
- 以前の情報をイミディエイト画面に表示する場合は、次/詳細オプションを使用して、アクション（サインアップ）ボタンを下にスライドさせ、そのセクションのフィールドを表示できます。これにより、動的な生成効果も作成されます。