コーポレートサイトの画面設計チェックリスト【問い合わせフォーム】【守るべきこと】
これまで、webディレクター、プロデューサーとしてそれなりに多くのwebサイト制作に関わってきました。webサイト制作は複数の工程に別れますが、自分は特に設計部分に携わる事が多いです。
そのwebサイトの設計をするなかで自分が意識していることをリストアップしておきます。
今回はwebサイトのお問い合わせフォームについてです。
今後、他のページ種別についてもまとめていこうかなって思っています。 多分網羅性があるわけでもないので、随時この記事もアップデートしていければと思っています。
※結構自分用の備忘チェックリストにも近いですかね。
問い合わせフォームの画面設計で意識・注意すること。していること。
入力必須項目を明確にする。
入力必須項目には、直接「必須」という文字を書いた方がわかりやすいです。 「※」印を書いて、上の方に「※は入力必須項目です」という形式はあまり好きじゃないです。 直感的じゃないし、その情報を認識せずに「※」を見たときに「※」を探さないといけないから。
可能な限り入力必須項目を少なくする。
入力必須項目は出来るだけ少なくします。 入力前にユーザーはどの程度の入力が必要なのか、入力画面をざっとスクロールして確認します。 その時に、あまりにも入力項目数が多すぎると、離脱の要因になります。
その入力項目、本当に必要なのか？という観点でチェックします。
入力必須項目だけ入力1画面目に表示をして、必須ではない項目は2画面目に表示し、「アンケート」的な形で提示するのも入力項目を少なく見せる一つの手です。
問い合わせフォームページから余計な導線は消す。
「入力フォームにヘッダーやフッターは不要、フォームの途中に別ページへのリンクを置かない。」
離脱の要因になりますし、一度誤って離脱してしまうと、「戻る」ボタンでページに戻ってきた際に、「オートコンプリート」をオンにしていても、フォームの実装方法次第で、入力履歴がすべて消えてしまうことがありますから。
入力例を予め入力欄に入れておく。
どのような内容を入れるのかを予め入れておいたほうが、入力の心理的負担は低いと思います。 ただ、実際にユーザーが入力するために入力欄にフォーカスを当てた時は、その入力例のテキストは自動的に消えるように設定しておくべきです。
入力の形式や注意事項は入力欄の近くに表示しておく。
入力の形式や注意事項は入力欄の近くに表示しておきましょう。
例えば、以下のようなものですね。
- 半角カナで入力ください。
- 電話番号は半角数字でご入力ください。
この辺は普通に対応することが多いとは思います。
その他、入力の形式だけではなく、項目名だけではパッと理解しづらいものについては、補足的なテキストも表示してあげると親切です。
たとえば、ゲーム機の不具合に関する問い合わせフォームをイメージすると以下のような感じでしょうか。
項目名：問題の発生箇所
補足テキスト：コントローラー、本体、画面表示等、どのような点に不具合が生じているかお分かりでしたら以下から選択ください。
「問題の発生箇所」だけだとちょっと突き放した感じが出てしまいますが、「もしお分かりでしたら・・・」等の補足を付けられるとより心理的ハードルを下がれられるかな、、と思います。
とはいえ、あくまで補足できることが「あれば」程度で大丈夫です。 選択や入力に躊躇が起きそうな項目にそっと添えるレベルのものです。
入力エラーは、入力欄の近くにエラーと分かる形で表示する。
入力エラーは入力欄の近くにエラーと分かる形で表示しておくべきと思います。 エラーが有る場所をユーザーにすぐ分かって欲しいためです。
※エラー内容をページの最後、もしくは最初にずらずらっとリスト形式で表示されているケースを見ることがたまにありますが、それだとエラー場所が見つけにくいので、オススメしません。
文字数制限を設ける場合は、入力欄の項目次第で対応を検討する。
文字数制限を設ける場合は、その文字以上の入力は出来ないようにしておくべきと思います。 「問い合わせ内容」など入力文字数が多いところは、文字の入力はできるが「超過文字数」を表示する形式もあると思います。こちらの実装ができるのであればその方が良さそうです。
例えば、問い合わせ内容の本文を別のテキストエディタでまとめ、それを問い合わせ内容の入力欄にペーストする、というケースも考えられますから。そういう時に入力欄に一定文字数以上入れられない形だと、ユーザーが気づくことなく、問い合わせ完了まで行ってしまう可能性が上がってしまいます。
個人情報の取扱に関する情報と、それに同意するチェックボックスを付ける。
メールアドレスやお名前等、個人情報を取り扱う場合、問い合わせフォームには「個人情報の取扱に関する情報」を表示すべきです。たまにそれが表示されたページへのリンクだけを表示させているケースを見ますが本来はNGのはずです。
一応確実に、ユーザーがその内容に同意してもらってから、問い合わせを行うステップが必要だからです。
厳密にユーザーにオプトインしてもらうのであれば、以下の実装が確実です。
- 個人情報の取扱に関する情報を確認してもらう。
- 「個人情報の取り扱いに同意する」というチェックボックスにチェックを入れてもらう。
- チェックが入ると「入力内容を確認する」ボタンをアクティブにして、それを押してもらう。
ただ、問い合わせフォームに表示する「個人情報の取扱に関する情報」については、企業ごとで内容が異なることが多いです。
- 個人情報保護方針ページの内容をそのままコピー
- 表示しているフォームにおける個人情報の利用目的
個人的には後者にしておいた方が親切で分かりやすいかなと思います。
入力ステップの表示は、ステップが多い場合はマスト。入力、確認、完了程度のものであれば不要（かも）。
問い合わせフォームは、概ね
- 入力画面
- 確認画面
- 完了画面
の3画面に分かれます。
昔は、問い合わせフォームの画面上部に、上記を表示し、今どのステップにいるのか明示するのが一般的でしたが、上記ほどのステップの場合は、表示しないことが増えているように感じます。
一方・・例えば、自動車保険のオンライン申し込みなど、入力項目がとても多いフォームについては、入力画面が多いと思うので、そういう場合は、ステップ表示はマストです。
一般的なコーポレートサイトでは、ステップ表示はマストではないかな、というところです。
入力エリアはスマホファーストで設計。
入力エリアはスマホファーストで設計しておいた方が、汎用的に使えそうと思っています。 具体的には、入力欄の「項目名」と「入力欄」は横並びではなく縦並びの方が作りとしては楽かな、、と。余計なレスポンシブデザインの実装工数を考えなくて良いので、その方が使いやすい気がしています。
セオリーがあるものはそれに則ったほうが、ユーザー理解も早い。
今回は、webサイトの問い合わせフォームを設計するにあたり、押さえておいたほうが良さそうなポイントを整理しました。
