フォームを作る時、どうしても説明すべき箇所が多くなったり、フォームからヘルプや利用規約などのコンテンツを参照させなくてはならない場合があると思います。
そういったフォーム内のコンテンツは、少なすぎても多すぎてもフォームのユーザビリティを落とす可能性があることは以前にもお伝えしました。
参考記事：適切な【補足文】があれば、フォームはもっと使いやすくなる！
本日のエントリーでは、説明や補足コンテンツの見せ方をどのように工夫するべきかのEFOアイデアをご紹介していきたいと思います。
別ウィンドウ/タブ表示、安易に使うべからず！最適な方法とは？
まず、見せたいコンテンツが多い時によく使いがちなのが、ページの別タブ表示(厳密にはtarget=”_blank”を使った別ウィンドウ／タブ表示）。
一見、別タブにすることでフォームからの離脱を上手く防げているようにみえるのですが、
この手法では、新しいタブ（またはウィンドウ）を元の画面と同じサイズで開くため、ユーザーがクリック後に少し目を離したすきに迷子になってしまったりと、非常にユーザビリティを落としてしまう場合があります。
ですので、この別タブ表示を使わずに、コンテンツを参照する方法について考えていきたいと思います。
目次
具体的には、下記の7つの方法について順番に触れていきます。
- デザインを工夫する
- レイアウトを工夫する
- ツールチップや吹き出しで表示する
- 折りたたむ
- スクロール領域を利用する
- ポップアップウィンドウを使う
- モーダルウィンドウを使う
今回は「前編」として、上に挙げた方法の1～4について説明していきます。
1. デザインを工夫する
以前の記事適切な【補足文】があれば、フォームはもっと使いやすくなる！でもお伝えしましたが、デザインを工夫するだけでも文章のボリュームが少なく見えたり、入力を邪魔しない程度の見た目に収まる場合もあります。
ハウス食品様（housefoods.jp/）通販登録フォーム
具体的には、
- 文字サイズを小さくする
- 文字の色を薄い色にする
などの方法で説明の文字が目立ち過ぎないようにすることがポイントです。
ただし完全に目立たなくなって誰も見てくれないようでは困りますので、補足の中で特に重要な部分にだけメリハリをもたせて目立たせると良いでしょう。
良い点
- 手軽に実装できる
注意点
- 文章そのものが読まれない可能性がある
- 文章量によっては対応に限界がある
2. レイアウトを工夫する
上で挙げたデザインのほか、レイアウト上の工夫でもボリューミーな説明／補足を上手く見せることが可能です。
実際に具体例をご覧ください。
下記の２つのフォームはともに、＜複数存在するメールマガジンを選択させる場面で、それぞれのメルマガの内容を紹介している＞というシチュエーションです。
島津製作所様（http://www.shimadzu.co.jp/）の会員制サイト登録フォームより
キリングループのWEBサービス（https://m.kirin.co.jp/）の会員登録フォームより
いかがでしょうか？キリンのフォームのほうがフォーム内の説明の量が多いのですが、表組みで仕切ることでスッキリと見やすくなっていますね。
またこの場合、メルマガのテーマ毎に別ページを参照するのは少々面倒であるため、多少文章量が多くなってもフォーム画面内に概要を記載したほうがストレスがないでしょう。
このようにレイアウトを工夫することで、かなり見やすさが変わってきます。
良い点
- 必要な情報をユーザーが確認しやすい
- 一覧性が担保される
注意点
- 文章の多さは変わらない
- 文章量によっては対応に限界がある
3. 吹き出しやツールチップで表示する
次に紹介するのは「エフトラ EFO」ではおなじみ、吹きだし表示。
入力に際する補足情報を、項目にフォーカスした時のみ表示するという動きになっており、EFOツールでは定番です。
また、吹き出し系で次によく見るのが下記のようなヘルプ系の用途のもの。
エフトラEFOの管理画面
ラベルや固有名詞など、ユーザーが疑問を感じそうな箇所にマウスをあてたりクリックしたりすると、吹き出しや小窓が現れ説明が記入されています。
ヘルプが参照できる箇所にクエスチョンマークなどのアイコンを用意しておくとわかりやすいですね。
また「ツールチップ」とは、ユーザがカーソルを何かの項目に合わせたときに表示される補足情報が綺麗された小さな枠のことを指します。
wikipedia「ツールチップ」より（http://ja.wikipedia.org/wiki/ツールチップ）
一度は見たことがあるのではないでしょうか。上に挙げた吹き出しとも似ていますね。こちらはマウスオーバーのみで表示します。
良い点
- 必要な時のみ文言を表示できる
- 場所をとらず、スマート
注意点
- たくさんの文章を挿入するのは難しい
- マウスオーバーやフォーカスなど、表示に条件があるため気づかれない場合がある
4. 折りたたむ
フォーム内の文章ではなぜか見かけることが少ないのですが、シンプルに長い文章を折りたたんで表示（非表示にしておき、クリックすると全文を表示する）することも、手法としてはありえるのではないでしょうか。
レビュー欄などでよく見る「続きを読む」
ただし、コンテンツ量が多すぎる場合には、コンテンツ展開時に展開部分以下が下方向にずれるため、ユーザビリティを損なう可能性があり、注意が必要ですね。
良い点
- （文章を頭出しすれば）必要と感じたユーザーのみ詳細を確認することができる
- 場所をとらず、スマート
注意点
- コンテンツ量によってはユーザビリティーを損なう場合あり
最後に
いかがだったでしょうか。
本日は別タブを使わずにフォームからコンテンツを参照するEFOアイデアについて４つお伝えしました。
ぜひ、状況によってうまく使い分けてみてください。
今回ご紹介した手法は、比較的コンテンツのボリュームの少ない場合に有効な方法でしたので厳密に別タブの代替として使えるものは少ないかもしれませんね。
後編ではボリュームの多いコンテンツにも使える手法を中心に紹介していきますので、お楽しみにお待ちください。
