本日はおなじみBaymard研究所のブログより、興味深いEFO関連記事を紹介させていただきます。
クレジットカードは、代引きや振込などの他の決済方法と比べ、ユーザーに手数料や手間をかけずに手続きが完了するということから、Eコマースサイトにおいて欠かせない決済方法だと言えます。
いっぽうで、入力情報だけで簡単に決裁できてしまうということから悪用のリスクもあり、信頼できないサイトには入力に抵抗を感じるユーザーも少なくありません。
もちろん、SSLによる暗号化など、技術的側面でのセキュリティを強化することは大切ですが、多くのユーザーにとっては、その安全性を理解することは難しいでしょう。
本日紹介する記事では、ユーザーに安全面での抵抗感を抱かせないために、クレジットカード入力欄を視覚的に強化するべきとの旨が述べられています。
さっそく、詳しく見て行きましょう。

89%が間違っていた

筆者は、2012年の調査において、代表的な100のEコマースサイトのうち正しくクレジットカードの入力欄を視覚的に強化できていなかったサイトは89%にものぼるとしています。
対して残り11%のサイトは、下記の方法を用いて正しく視覚的強化を実施していたとのことです。

  • 視覚的にフィールドを囲む
  • 近接してセキュリティバッジを配置する

これらの手法について、詳しく紹介させていただきます。

視覚的にフィールドを囲む

クレジットカード情報の入力欄のみ境界線を付けたりや背景色を変えるなどして視覚的に囲いをすることで、フォームの一部が他の部分に比べて堅牢に見えるようになると筆者は述べています。
下記にサンプルを作成してみました。

クレジットカード欄の視覚的強化による違い
クレジットカード欄の視覚的強化による違い

サンプルでは、クレジットカード欄の背景色を変えたのみですが、確かに、まわりと差別化することでそこが守られているような印象を受けるようにも思います。
筆者はこの方法の注意点として、他の箇所でも同じスタイルを流用すると一般的な装飾だと受け止められてしまうので、なるべくここにしか用いないスタイルで表現することが効果的だという旨を指摘していました。

近接してセキュリティバッジを配置する

次に挙げられていたのはセキュリティのバッチを隣接して表示するという方法です。

ベリサイン社のサイトシール
ベリサイン社のサイトシール

この方法はこのブログでも何度か取り上げていますし、多くのフォームでも用いられているユーザーの心理的障壁を下げるために効果的な手法として知られています。
ただし、多くのフォームがページのサイドバーやフッターにこれらバッジを表示していることに対し、筆者は隣接して配置するべきという点を強調しています。
確かに、ユーザーが送信の安全性を気にし始めるのは、実際にカード情報を入力し始めた瞬間であることが多いでしょう。
その場面でセキュリティを直接アピールできるということは理にかなっていると思います。
さきほどのサンプルにセキュリティバッジを追加しました。より安全なイメージがアップしました。
さきほどのサンプルにセキュリティバッジを追加しました。より安全なイメージがアップしました。

補足:アイコンなども効果的?

今回、記事内では目立って触れられていなかったのですが、鍵マークのアイコン表示など、安全性を直感的にアピールできるイメージの挿入も効果的なのではと個人的には思いました。

鍵アイコンの追加例
鍵アイコンの追加例

まとめ

いかがだったでしょうか。本日はクレジットカード入力欄の安全性をイメージさせるための「視覚的強化」のEFOテクニックについて、紹介しました。
どれも簡単に改善できるティップスですので、ぜひご担当のフォームでも試してみてはいかがでしょうか。
元記事も非常に参考になりますのでぜひご覧ください。
※参考記事:http://baymard.com/blog/visually-reinforce-sensitive-fields