ユーザーとの距離を縮めるエラーメッセージ仕様&5事例

Pocket

error01そもそもWebサイトでユーザーが離脱しやすいのは購入フローなどの入力フォームである。それは入力が面倒なサイトが多いからだ。だから入力フォームのユーザビリティ設計は細心の注意を払って改善すると結果(売上UP)に直結する。

「入力フォーム最適化(EFO)」とあるように入力フォームの具体的な改善策は様々あるが、つい見過ごしてしまうのが「エラーメッセージ」である。エラーメッセージはサイト上に常に表示されているものではないので改善するためには担当者が故意にエラーメッセージを表示して検証する必要がある。それは日々の忙しいあなたの仕事の中ではなかなか難しいと思う。実際にはサイトを作った時から一度も見直したことのないサイトも多いだろう。

【参考】スマホ用EFO改善方法|最大離脱率が45%下がったノウハウ
※引用:ミナクル(2014年12月2日)

基本的な考え方はパソコンサイトの入力フォームも同じであるがパソコンよりもスマホサイトのほうが離脱しやすい特色があることに加えて、アクセス数が増えていることも踏まえて、優先したいのはスマホサイトの改善だ。

離脱するユーザーを減らすためにぜひスマホサイトの「エラーメッセージ」の見直しをして欲しい。エラーの分岐が正しくなければ一部システム改修も必要になるが、基本的にはテキストや色合いなどの改善で実装できることも多いと思う。

■目次
[1] 最高のエラーメッセージとは?
[2] 大手スマホECサイト4つの事例
 2-1 ベルメゾンネット
    2-2 楽天
    2-3 ニッセン
    2-4 Amazon
[3] エラーメッセージで大切な3つの要素

[1]最高のエラーメッセージとは?

スマホECサイトのエラーメッセージの中で一番よいのはQVCジャパンだ。

error02
特に未入力項目の表示を工夫しており、ユーザーが未入力のまま次の項目へ進もうとすると、次の項目を選択した瞬間に「必ず入力してください」と赤文字で吹き出しが表示される仕様だ。

一般的にエラーメッセージはページ最下部の「確認ボタン」をタップした時に「エラーがあります」とエラーが発生した項目を赤くするなどで表示されるサイトも少なくありませんが、QVCのようにひとつの項目ごとにエラー判定を行っているのはスマホユーザーの心理に合致しています。

「確認ボタン」をタップした時のユーザーの気持ちは入力が終わり早く注文完了に至りたいのですが、そこでエラーが出るとテンションはかんたんに下がってしまいます。

また「フリガナ」は片仮名で登録する必要のある項目ですが漢字など他の書体で入力すると、即時に「全角カナで入力してください」と表示されるなど、未入力時以外のエラーも親切だ。

これは他のサイトでも実装しているのを見掛けるが、必須項目が未入力だった場合や、入力ミスがあった場合には、「確認ボタン」は表示されず、「未入力または入力ミスの項目があります」と書かれたボタンがページ最下部に大きく表示されるのも便利だ。正しく入力しないと次のページに進めないようにしている。

QVCジャパン以外にも4つのサイトのエラーを紹介したい。いずれもよい点があるので参考にできるところもあると思います。

[2]大手スマホECサイト4つの事例

2-1 ベルメゾンネット

ベルメゾンの新規会員登録画面ではページ最下部の「確認ボタン」をタップした時にエラーかどうか判定される仕様だ。

error03
エラーがあるとページ最上部に「下記項目に誤りがあります」と大きく赤い背景で表示されるのは目立つという視点ではメッセージ性は強いと思います。

どの項目でエラーが発生したかは入力ボックスやプルダウンが赤枠で表示されているので迷うことはありません。しかし、ページ最上部にはどの項目でエラーが起きているか書かれていない点に不便さを感じます。

一度エラーが発生して、正しい入力をしても、「確認ボタン」をクリックするまではエラー表示を示す赤枠が消えないので、まだエラーが発生しているかのように見えてしまう点も残念です。

2-2 楽天

楽天では会員登録画面の最下部の「確認ボタン」が必須項目を入力しないでもタップできてしまいます。ここは未入力項目があるとタップすることのできないQVCジャパンの仕様のほうが便利に感じます。

error04
エラーが発生すると、ページ上部に「どこでエラーが発生したか」が各項目ごとに表示され、確認ボタンをクリックしたタイミングでユーザーはエラーに気付く仕様です。

エラーが発生した項目のテキストボックスは赤く色が塗られるので、一目で分かりますが、各項目の下に表示されるエラー内容のメッセージが赤文字で書かれており、[必須]の表示や、「ログインするときに使用します」などの注釈も赤文字なので、具体的なエラーメッセージは直感的に感じるものではないと思います。

楽天の場合、サイトカラーが赤なのでエラーメッセージの赤やエラー項目の赤枠が目立たないというのも工夫しないといけないポイントだと思います。

2-3 ニッセン

ニッセンの会員登録画面は何も入力されていない状態ではテキストボックスの背景が赤くなっています。
error05
正しく入力されると赤背景が消えるので正しく入力されたことが瞬時に分かって便利です。エラーのままだと赤のままです。

またQVCジャパンと同様に正しく入力しなかった場合は、入力中に「全角カタカナ以外の文字は使用できません」などと赤く吹き出しが表示されるのも工夫しています。「確認ボタン」をクリックしないでも項目ごとにエラー判定をしているので便利だ。

必須項目が未入力であっても「確認ボタン」をクリックできてしまう点や、エラーが発生した時に次の画面でエラーを確認して、1画面戻って再入力させる点は、より使いやすく改善できると思います。

2-4 Amazon

Amazonの会員登録画面のエラーはエラーが発生したことには気付きますが、他のサイトで見られるような赤い背景で大きくエラーと表示したり、各項目ごとにエラーメッセージを出すようなことはなく、入力画面の最上部にエラーのメッセージがシンプルに出てくる表示です。未入力のテキストボックスの背景に色が塗られることも行っていません。
error06

エラーメッセージの内容はエラーのパターンに合っていないように思います。何も入力せずにエラーを発生させたところ、「一致するEメールアドレスが見つかりません。修正し、やり直してください」と表示されました。修正するメールアドレスはないはずなのに修正を求めるメッセージである点が正しくありません。

発生したエラーとエラーメッセージが整合していない場合は、ユーザーに違和感を与えてしまう理由になり、結果的に離脱に繋がってしまう可能性があるため、システム改修を行い、行動と表示を合わせることをしましょう。

[3]エラーメッセージで大切な3つの要素

事例を見てきたようにエラーメッセージで重要な要素は、まとめると3つある。

  • エラーが発生したことをユーザーに瞬時に伝えること
  • エラーが発生した理由をユーザーが瞬時に理解できること
  • エラーをどのように解消し何をすればよいかユーザーは分かること

ベルメゾンや楽天スマホサイトで見るようにページ最上部にエラーが発生したことを大きく目立つように表示し、さらにエラーが発生した項目の入力項目を赤くし、項目の下にメッセージ(何が間違っているか)をテキスト表示しないとユーザーに正しいナビゲーションが出来ません。

必須項目が未入力だった場合には「確認ボタン」が押せない構成や確認ボタンを押さないでもエラーが分かることもユーザーの操作性をよくする工夫だろう。

エラーメッセージの見直しはサイト運営担当者には気付きにくいかもしれないがユーザーの気持ちになってエラー表示を確認してみてください。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*