はじわかデザイン編、最後はお問い合わせフォームについて。
使いやすいフォームについて考えていきましょう！
EFO（エントリーフォーム最適化）という言葉があるほど、お問い合わせフォームには注目するポイントが多いので、情報設計からしっかり考えていけると良いですね。
お問い合わせフォームのポイント
デザイン編と言いつつ今回も考え方が多いですが、以下の点に気を付けて設計しています。
- 必要最低限の項目
- エラー表示、バリデーション
- 自動化や入力補助
- ストレスのないデザイン
必要最低限のフォーム項目
利用するフォームシステムの仕様の影響が多い箇所ですが、お問い合わせに適切に返答ができる最低限の項目が望ましいと考えています。
項目が少ない方がユーザーの手間が減りますし、あまりに項目が多いと途中で離脱する原因になります。
項目の見直しポイント
- 姓名や電話番号の項目が分かれていないか
- フリガナは必要か
- 必須項目は適切か
名字と名前を別で登録する顧客管理システムを利用している場合に分かれていることがありますが、項目はひとつの方が入力しやすいです。
電話番号も同様で、ハイフンごとに項目を分けずにひとつにまとめましょう。
電話での返答をする場合に失礼のないようフリガナの入力を促す場合もあると思います。
ただ、特に理由がなければ無理にフリガナ項目を用意することはありません。
必須項目についても多ければ多いほど面倒に感じるものです。
問い合わせの対応に必要な項目だけにすると良いですし、スムーズな対応に必要ですと注意書きすることも入力の補助になります。
エラー表示やバリデーションの設定
入力内容が正しくない場合や未入力の際にエラー表示がでるフォームが一般的ですが、エラーのタイミングやエラーが出ないようにアシストすることも大切です。
なぜエラーになるのかを分かりやすく表示する
項目が未入力です、お名前を入力してください、メールアドレスを入力してください
言葉の表現で再入力のしやすさが段違いです！
日付が未入力です、カレンダーから希望の日付を選択してください
メールアドレスが未入力です、返信に必要になりますので受信可能なメールアドレスを入力ください
エラーメッセージの表現ひとつで離脱を抑えられることもありますので、予めエラー表示も考えておきましょう！
バリデーションはリアルタイムでおこなう
未入力がある場合、項目に適切な情報が入っていない場合、などに「送信ボタン」を押したタイミングではなく、フォーカスが外れたタイミングでエラー表示が出ると親切です。
フォームのシステムの仕様上難しいこともありますが、ひとしきり入力を終えた後にエラーが出るのは離脱の原因になります。
エラー時に入力内容がまっさらになるケースもありますので、特に気にしたい箇所です。
自動化や入力補助も活用する
フォーム項目をすべて手入力していくと大変ですが、入力補助や自動化の仕組はユーザーの手間を減らすとともに、入力データの統一化も図れます。
よく使われる項目
- 郵便番号から住所を表示
- カレンダーから日付を表示
- 名前入力からフリガナを表示
- オートコンプリート機能
フォームオートコンプリート（自動入力機能）は、Webブラウザに登録した情報をもとに、フォームに入力する際に候補を表示して自動入力する機能です。
プレイスホルダーも大事にする
フォームの入力エリアに予め薄い色で入力内容が入っていることがあります。
これをプレイスホルダーと呼びますが、意外と侮れないポイントです！
入力例を表示するアシスト機能ですので、例も適当に作らずに具体的に書いておきましょう。
ストレスのないデザインは「迷わないフォーム」
ストレスがなく使いやすいフォームは定義が難しいですが、迷わないフォームかなと思っています。
入力途中で疑問が生まれない、迷わずに入力できればエラーも出ないのでストレスもありません。
- 項目は大きく見やすく
- フォントサイズも大きく見やすく
- 入力例はサンプル感がなく、ちゃんと補助になるように
- プルダウンやチェックボックスのあしらいも適切なサイズで
- 次のステップが分かる
ステップステータスを設置できるなら、どのくらいで送信完了するのかが分かるようになりますので、項目が多いフォームでは大活躍すると思います。
お問い合わせは不安が多い
基本的なことですが、お問い合わせ後に〇営業日には返事をしますよ、とテキストが添えてあってもいいですね。
入力する情報が何に使われるのか、電話番号を入れたら営業が来るんじゃないか、
「問い合わせをするのは不安が多い」と思いますので、安心して送信ができることが大事です。
実際に自分でもフォームを利用する時は電話番号はためらいます。
特に個人の番号の場合は気になりますよね。
必須であれば、何時ごろに折り返してもらえるか、時間が入力できると有難かったりします。
必要最低限の項目が理想ですが、業務上そうはいかない場面もありますが、
受け取る側は情報がたくさん欲しいと考えますし、送る側はできるだけ少ない情報が安心なはずです。
業務フローも見直してみる
必要なフォーム項目を精査し、バランスを取って取捨選択できると良いですよね。
問い合わせを受け取った後に聞いても問題のない情報は後にまわしてもよいかもしれません。
業務フローを調整することで問い合わせのハードルを下げられるケースも多くあります。
サンクスページにも気を遣う
お問い合わせフォームは送信したら完了、ではあるのですが、いわゆるサンクスページにも気を遣うことでさらに安心感を持ってもらったり、次のアクションを伝えることが可能です。
- テキストをしっかり考える
- 会社概要やよくある質問を掲載する
- お問い合わせ後のフローを掲載する
フォーム送信後も不安が残るものですので、サンクスページのテキストもしっかり作っておきましょう。
サンクスページのテキスト
例えば、〇営業日には返信があることを記載したり、控えメールが届くので確認してくださいと伝えたり、と無事に送信できていることを伝えます。
定型文が入っていることが多い印象のサンクスページですが、丁寧に作っておくとユーザーも安心です。
後押しのコンテンツを掲載
サンクスページは「問い合わせありがとうございました」のテキストだけ掲載するサイトが多いですが、会社をもっと知ってもらう意味で「会社概要」を掲載したり、送信後の不安を減らすために「よくある質問」を掲載することを提案しています。
お問い合わせ後の流れを掲載
ウェブサイトやランディングページには「〇〇の流れ」というコンテンツがありますが、実際に問い合わせをするとフローが進んでいきますので、途中経過が分かると親切です。
次は何をすればいいのか、待てばいいのか、を分かるようにしておくと安心ですし、もし準備するものがあればスムーズに次のステップに進めると思います。
お問い合わせフォームは改善点がいっぱい
デザイン編ですが、情報設計の話になりました。
お問い合わせフォームは気にしたい箇所が多いですね！
フォームシステムの仕様によって対応が難しいこともありますが、ユーザー目線で迷わずに進めるフォームを意識してデザインを進められると良いと思います。
また、フォームぺージやサンクスページは効果測定の基本ポイントになりますので、解析タグの設置なども忘れないように対応しておきましょう！
次回からはマークアップやCMS構築について書いていきたいと思います。
