リアルタイムアラート（バリデーション）とは、ユーザーがフォームに入力した内容についてミスがないかを判定し、修正が必要な場合にその場でアラート表示する機能で、EFOに大きな効果をもたらすテクニックのひとつです。すでにご担当のフォームにリアルタイムアラート機能を導入しているという方も多くいらっしゃるかと思います。
その場で修正を促すことで、送信ボタン押下時にエラーがずらりと表示されるあのガッカリ感やイライラ、そしてそのストレスによる離脱までも防止してくれるリアルタイムアラートは、EFOになくてはならないもの。しかし、ただ導入すればいいというわけではなく、使い方を間違えれば、かえってユーザーのストレスを助長してしまう可能性も。
せっかく導入するならば、ぜひ正しく活用していただきたいリアルタイムアラート。今回は導入時に気をつけたいポイントをご紹介したいと思います。
デザインに関するポイント
まずはアラートの外観に関するポイントを紹介していきます。
インライン型と吹き出し型の２種類が主流
リアルタイムアラートの外観には大きく２種類あると思います。テキストを直接フォーム内に挿入する「インライン型」と、ポップアップして表示する「吹き出し型」です。
インライン型のリアルタイムアラート例
吹き出し型のリアルタイムアラート例
個人的には前者は海外サイトや外資系サービスで多く見られ、後者は国内のウェブサイトに多い印象ですが、どちらが良いというのはありませんので、ご担当のサイトのデザインやレイアウトにフィットする形を選ぶと良いのではないでしょうか。
毒々しい色はNG
アラートというと、ついつい目立たせようと毒々しい配色を行ってしまがちですが、あまりにも強い表現はユーザーの気分を害する可能性があります。
些細な入力形式の違いについてあまりにも大きく指摘されることは、いい気分かしませんし、否定されているように感じる人もいるかもしれません。
特に濃い赤色を大きく使うと、強すぎる表現になる可能性がありますので要注意です。
赤系のリアルタイムアラート表現の例。
目立たなさすぎるのも✖
ただし、当然エラーメッセージが目立たなさすぎても問題が。
優しい表現にするあまり本来の目的を果たせなければ、せっかくリアルタイム判定の機能を導入している意味がなくなってしまいます。
AirBnBのリアルタイムアラート。突然背景が黄色くなり、せっかくの機能ですが少しわかりづらい印象があります。
適度に目立たせるのが吉
外観については「何色にすれば良い」という正解はありませんので、ご担当のサイトの配色や雰囲気によって検討してみてください。
具体的には、やみくもに濃い赤色を使うのではなく、ページ全体の外観に応じて引き立つ色をチョイスすると良いのではないでしょうか。
また、色以外の演出（浮かび上がらせる、アニメーションする）などで引き立たせる方法もあると思います。
弊社のサイトでは、オレンジ色を基調としてサイトデザインであるために、反対色の青色を使い引き立つ吹き出し型アラートを実装しています。
グレーなどの無彩色をベースに使ったAppleのフォームでは、薄い黄色でも充分に引き立つ。吹き出しに影（ドロップシャドウ）を付けることで、浮かび上がっているような演出がある。
もちろん、ページ全体の色が赤系の場合、濃い赤系を使っても目立たない場合というのもあります。
ピンク色基調のサイトで濃い赤系の吹き出しを使った例。全体的に赤っぽいので引き立ちにくい
配置に関するポイント
次は、アラートの配置に関するポイントを紹介していきます。
ふきだしで隠さない
おもにふきだし型でリアルタイムアラートを実装している場合の注意点ですが、直前の項目やラベルを吹き出しが覆ってしまうことがあります。
リアルタイムアラートで、入力欄のラベルが覆い隠されてしまっている例。
入力しようとしている項目のラベルや入力欄が吹き出しで隠されてしまっている状態は、なかなかにストレスですので回避したいところ。
吹き出しを横側や右斜め上などにずらし、項目を完全に覆うことがないように位置を調整しましょう。
なお、数秒経過すると自動的に非表示になったり、ユーザーがドラックアンドドロップでふきだしの位置をずらしたり、消すことができるようにするなどの対応も有効です。
スマホの場合、項目の下に表示する
次はスマートフォンフォームでの注意点です。フォーム入力時の画面領域が極端に小さいスマートフォンでは、せっかく表示したリアルタイムアラートが見きれてしまうことがあります。
スマートフォンで、リアルタイムアラートが見きれてしまっている例
これを防ぐには、項目の下側にエラー内容を表示することが有効です。
文言に関するポイント
次に、エラーの文言に関するポイントです。
文言は具体的に、わかりやすく
その場で表示するリアルタイムアラート。具体的なエラー内容を表示することで、ユーザーが修正すべき内容を直感的に理解し、ただちに軌道修正できるようにしたいですね。
くれぐれもユーザーがどう修正すればよいかを考えこんでしまい、入力の流れを断ち切ってしまうことがないようにしましょう。
「短すぎます」という文言は抽象的。具体的に何文字以上にするべきかを表示するようにしたい。
また、海外発のサービスでたまにあるのは、エラー文言のローカライズが追いついていないケース。
下記は文面が英語のままという極端なケースですが、日本語が不自然だったり、なじみのないカタカナ語を使っているケースもよくあります。エラー文言というと見落としやすいですが、ユーザビリティに直結する部分ですのでぜひ精査していただきたいところです。
リアルタイムアラートのエラー文言が英語のままになっている例
文面にも配慮を
リアルタイムアラートにかぎらずエラー表現全般に言えることですが、下記の点にも気をつけて文言を検討したいですね。
- ネガティブトーン否定的の言葉を使用しない
- 専門用語を排除する
- 問題を解決するためのヒントを与える
- ユーザーではなく、自分自身に責任を置く
※詳しくは下記の記事で説明しています。
【保存版】エラー表示に関するEFOの鉄則15つ
https://f-tra.jp/blog/column/6900
条件に関するポイント
次は、アラートを表示する条件に関するポイントです。
フォーム内のすべての項目に実施する
フォーム内の一部の項目にだけリアルタイムのエラー判定を実施しているフォームは少なくありませんが、これは逆にユーザーにストレスを与えている場合も。
ユーザーとしては、リアルタイムアラートが出ていない＝エラーがない状態、という認識で送信ボタンを押下したのにもかかわらず、あるはずのないエラーが表示されているのですから当然です。
また、フォームが複数ページに分かれている場合に一部のページにのみ導入がない場合も同様です。
リアルタイムアラートを導入する場合は、ユーザーが体験する入力欄すべてに一律で機能搭載できることが理想です。
条件が複数の場合、すべての条件に対して対応する
例えばパスワード項目で「８文字以上」「英数字混在」などといった、１つの入力項目に対してエラー条件が複数存在するケースがあると思います。
存在する条件に対し、リアルタイムの判定も漏れ無く対応できることが理想です。
また反対に、明記している入力条件よりも厳しいバリデートを実施することもNGです。
ユーザーとしては、指示に忠実に入力しているのにエラーとなってしまうのですから、ストレスにならないはずがありません。
「５文字以上必須」と記載があるが、実際には記載の「5文字以上」の条件で入力してもエラーとなった。（英数字の混在が必要だった）
チェックリストのように表示する方法もgood
条件が多い場合は、入力中にチェックリストのように入力条件を示すと非常に親切です。
Appleのフォームが非常に使いやすくなっていましたので、ベンチマークにしていただければと思います。
Apple ID作成画面。
タイミングに関するポイント
最後に、アラートの表示タイミングに関してです。
表示のタイミング
リアルタイムアラートの判定のタイミングはいくつかあり、代表的なのは「入力を終えてフォーカスを外した瞬間」「入力した瞬間」の２種類です。
後者、キーボード入力の瞬間にエラー判定をするロジックの場合、少し注意が必要です。
まだ入力を完了していないだけのユーザーにエラー表示を行ってしまう可能性があるからです。
自分が間違っているわけではないのにエラーとして認識されると、誰しもイライラしてしまうのではないでしょうか。
入力の途中にアラートが表示されてしまっている例。
反対に、IDの作成フォームやパスワードの強度に関する内容であれば、いちいちフォーカスを外さないと判定されないことが煩わしく感じるユーザーもいるでしょう。
入力しながらパスワードの強度を確認できるリアルタイムアラート。
エラーの判定内容に応じて、適切な表示タイミングを選ぶようにしましょう。
非表示のタイミング
吹き出し型の場合は特に、表示だけでなく非表示にするタイミングも重要です。
例えば一度表示されたアラートが消えない仕様であると、フォームが吹き出しだらけになり邪魔…という状況になることがあります。
エラーを吹き出しで表示。一度表示されると☓マークを押すまで吹き出しが消えず、重なってしまう
上記の状態を引き起こさないためには、エラーはどこかのタイミングで自動的に消えるようにする必要があります。
よくあるのは表示の数秒後に消したり、ほかのアラートを表示したタイミングで消すなどです。
最後に
本日はフォームにリアルタイムアラート機能の正しい使い方について説明しました。
最後に紹介したポイントをまとめて結びとさせていただきます。
- 毒々しい色、地味すぎる表現はNG。ページ全体の外観に応じて引き立つ色をチョイスして
- 直前の項目やラベルを覆わないように注意
- スマホの場合、項目の下側に表示する
- 文言は具体的に、わかりやすく
- 文面にも配慮を
- すべての項目に漏れ無く実施する
- すべての条件に対して過不足なく実施する
- 適切な表示タイミングを検討するべき
- 表示後は、自動的に消えるように。
せっかくある程度のコストをかけて取り入れるのですから、リアルタイムアラートの効果を最大限に活かしていただければ幸いです。
