フォームを作る時、説明やヘルプ、利用規約などのコンテンツを表示させなくてはならない場合があります。
そんな時、つい便利な「別タブ表示」を使いがち。
しかし、この方法をとることでユーザーが混乱してしまう場合があるため、なるべく「別タブ表示」以外での表示方法を考えたいところ。
今回は別タブ表示を使わず、フォームからコンテンツを参照するEFOアイディア7選（前編）の続きです。
前回に引き続き、説明や補足コンテンツの見せ方をどのように工夫するべきかのアイデアをご紹介していきたいと思います。
目次
1～4については前編でお伝えしましたので、今回は残りの5～7についてご紹介していきます。
- デザインを工夫する
- レイアウトを工夫する
- ツールチップや吹き出しで表示する
- 折りたたむ
- スクロール領域を利用する
- ポップアップウィンドウを使う
- モーダルウィンドウを使う
5. スクロール領域を利用する
こちらは、利用規約への同意など、必ず目を通す必要があるコンテンツにおいて、取り入れやすい手法です。
「個人情報の取扱いについて」「利用規約」への同意に関するEFOのコツの
なかでも推奨の表示法として取り上げました。
ページをわけずに入力ページ内に文章を表示してしまうという方法。
文章量が多いためスクロール可能な小さな領域を作成し、その中に文章を表示します。
ただし、ある程度スペースを割くことにはなりますので、ファーストビューにはいれず、ボタンの直前などに表示するのが良いでしょう。
良い点
- 文章量が多い場合でも対応可能
注意点
- コンテンツが必ずしも閲覧する必要がない場合は、ある程度のスペースを無駄に割くことになる
6. ポップアップウィンドウを使う
Amazonのフォーム内での利用規約の表示
別タブ表示と違うのは、ウィンドウのサイズを親ウィンドウよりも小さく指定することで、親ウィンドウも後ろに見ることができて、新しいウィンドウが出たことが分かりやすい点。
ただし、ブラウザの設定によってはポップアップブロックが機能することがありますので、注意が必要です。
良い点
- 新しいウィンドウが出たことが直感的に理解できる（別タブに比べ、混乱を招きにくい）
- コンテンツの量がどんなに多くてもほぼ対応できる
注意点
- ポップアップブロックされる可能性がある
7. モーダルウィンドウを使う
ポップアップではなく、モーダルウィンドウで表示するという手もあります。
モーダルウィンドウの例（スマートフォンフォーム）
この場合、ポップアップのようにブロックされる心配がありません。
ただし、モーダルウィンドウの特徴として、新しく開いたウィンドウを閉じない限り、親ウィンドウの操作はできない為、これがユーザーにとってストレスになりうる場合もあります。
モーダルの中身とフォームの内容を照らしあわせたいような場合には不向きですので注意しましょう。
良い点
- ブロックがかかる心配なく、ボリュームの多いコンテンツを表示できる
- 閉じるとフォーム画面に戻り、迷うことがない
注意点
- モーダルを出している間は元の画面を確認できない
最後に
いかがだったでしょうか。
今回は比較的ボリュームが大きいヘルプ・規約の表示方法についてまとめました。
前編・後編と合わせた一覧は下記のとおり。
説明書きや補足の多さに悩むWEB担当者のみなさまの参考となれば幸いです。
