【海外EFO】92%のフォームが陥っている!?ラベルの説明不足パターン15種(後編)

本日は、前回の記事【海外EFO】92%のフォームが陥っている!?ラベルの説明不足パターン15種(前編)に引き続き、デンマークBaymard社のJamie Appleseed氏が公開した、「説明文」に着目したフォーム改善に関する記事を紹介させていただきます。

陥りがちな説明不足、15パターン

記事中で列挙されていた説明不足の15パターンは以下のとおりでした。
後編では10~15のパターンと、記事の終わりに触れられていた説明の表示方法3種についても紹介させていただきます。

では、順に見ていきます。

どこから情報を得ればよいかわからないケース

ユーザーがフォームに入力する場合、例えばクレジットカードの情報や、メール内に書かれた内容など、物理的なものから情報を入力するという場面が多くあると思います。
そのような場合に、どこに必要な情報が書かれているかを正確に伝えることができれば誤入力や迷いを軽減することが可能ですね。
筆者はよくある例として以下の3パターンを紹介していました。

10.クレジットカードのセキュリティコード

クレジットカードは両側に数字が印刷されているため、セキュリティコードがどの数字を指すのかを見つけにくくしていると筆者は指摘します。
またカードのタイプにもよって印刷されている場所も異なるようです。

11.クーポンコード

クーポンコード等が存在する場合、どこにその情報が書かれているかを正確に示しましょう。

12.識別コード

その他には、オンライン購入にオフラインデータを結びつけるために使用される識別コードがあるようです。
日本でよくあるのは、「注文番号」「予約番号」「会員ID」のようなパターンが考えられますね。こちらも、ユーザーに入力させる場合はどこに情報が記載されているかを明示するようにしたいですね。

なぜ必要なのかが不明瞭なケース

フォームがどんな情報を求めているかがたとえ明確な場合であっても、なぜ必要なのかが明確でない場合、ユーザーは疑問を感じてしまうと筆者は述べています。
何のためにこの情報を取得しているのかという記述があれば、プライバシーの問題を憂慮することなく、ユーザーは入力に望むことができますね。

筆者は冒頭で、意図がわからない情報取得例としてメールアドレスを取り上げ、そのほかにも下記のようなパターン考えられるとしています。

13.生年月日

サービスによっては、法令を遵守するために、顧客の生年月日の情報が必要な場合があります。
例えば弊社で運営している合宿免許のメディアでは、免許を取得するための年齢制限があるために、生年月日の入力欄を設けていたことがあります。

できれば生年月日を入力したくないユーザーもいるかもしれませんね。
ですのでこのような場合、情報を取得するまっとうな理由を記載しておくようにしましょう。

14.電話番号

理由のない電話番号欄は、ユーザーが入力を躊躇しがちです。セールス電話がかかってくるのではないかと考えるユーザーも少なくないでしょう。
しかし購入フォームなどで、発送のために電話番号が必要なケースは大いにあると思います。
そんな時でも、入力欄のそばにひとことその旨説明があれば、ユーザーは安心して入力を進められますね。

15.クレジットカード情報の記憶

アカウントを作成する際にクレジットカード情報を登録する必要のあるフォームが存在します。そのような場面ではストレージポリシーを表記するようにすると良いと筆者は述べています。

補足説明の表示3パターン

説明の表記は、適切なタイミングで適切な場所にある必要がありますが、説明の種類やサイトのデザインに応じて、さまざまな表示方法を採用してもよいとのことです。
筆者は一般的な例として以下の3パターンの表記方法を取り上げています。

インラインの説明

まずは最も簡単な方法として、インライン記述を取り上げています。
インラインと言うと馴染みがないかもしれませんが、下記の図をご覧頂くとわかりやすいのではないでしょうか。
ラベルや入力欄に近接して一緒に配置され、”永久的に顧客に表示されて”います。

Yahooの会員登録フォームより、インラインの説明文

Yahooの会員登録フォームより、インラインの説明文

筆者はこのインラインの説明が”永久に表示”されるため、これらの記述は非常に簡潔であるべきであるとアドバイスしています。

ツールチップ

次に取り上げているのはツールチップです。
ツールチップは、その情報が必要になるまで詳しい説明を非表示にしておける巧妙な方法です。

カゴメ様フォームのツールチップ

カゴメ様フォームのツールチップ

ツールチップは多くの場合、疑問符のアイコンや「詳細を見る」というリンクの形をとっており、一般的にクリックやマウスホバーによって活性化することができます。

ツールチップによる説明は、情報の用途や必須である理由、また情報の表示場所などを示すのに理想的だと筆者は述べます。

動的な説明

よりきれいなフォームデザインを維持するならば、動的なアプローチが有効としています。
EFO機能でいうところの、リアルタイムアラート入力成功サイン入力形式事前指示初期表示文言(プレースホルダー)などがこの動的なアプローチに該当しそうです。

実際の所は、情報の種類に応じて3つの表示方法を組み合わせて活用するのが良さそうですね。

まとめ

筆者は次のように記事を締めくくっています。

フォームのフィールドの説明は確かにこの世界で最もエキサイティングなことではないが、その重要性を過小評価しないでください。
短いヘルプ文言が、フォームのあいまいさを解消し、顧客が立ち往生することを減らし、カスタマーセンターが何度も同じ質問に答えることを防いでくれるでしょう。

「何が求められているかがわからない」「入力フォーマットが不明」「どこから情報を得ればよいかわからない」「なぜ必要なのかが不明瞭」それぞれのケースにおいて巧みな対処することで、ちょうどいい場所にちょうどいい時に顧客の懸念のすべてに答えることができます。

たかが説明、されど説明。ユーザーが疑問に思うかもしれない点を先回りして、必要な情報にアクセスできるように心がけることが、結果フォームからの離脱を減らしてくれます。
ご担当のフォームも、(92%のフォームが陥っているように)説明不足な点がないかを今一度チェックして、さらなるユーザビリティの向上に努めたいものですね。

参考記事:
http://baymard.com/blog/checkout-form-field-descriptions

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です