FREENANCE Ad

EFO対策が裏目にでる9の間違い!凝った入力フォームがUXの低下を招く!

入力がすべて完了してからエラーが表示される
FREENANCE Ad
DESIGNER
EFO対策とは、入力フォームのデザインを改善して、入力率や使いやすさを向上させる取り組みのことをさします。間違った内容が入力されると送信ボタンが押せなくなったり、自動で入力されたりと、そのアイディアはさまざま。
なかでも登録フォームの入力や購入手続きの際に、入力漏れをチェックして指摘し、リアルタイムでユーザーが修正することができるバリデーション機能は、今や当たり前に使われています。

今回は、バリデーション機能をはじめEFO対策をする際の12個の間違いを紹介していきます。

1. 最低文字数に到達しない場合のエラー表示が早すぎる

GIF-入力

最低文字数が決まっている項目を入力している場合、一文字入力しただけでエラーが通知されることがあります。早い段階で警告が表示されるので、入力し直さなければいけないというプレッシャーを与えます。

たとえばパスワードの入力だと6文字以上でなければならない、という制限はよく見ますね。入力し始めてすぐにエラーメッセージが表示されるため、先に進む前に離脱につながる可能性があります。

2. 入力がすべて完了してからエラーが表示される

入力がすべて完了してからエラーが表示される

最初の記述とは真逆ですが、すべて入力し終えてからエラーメッセージが表示されるのでは遅いです。

ひとつの項目を入力して次の項目に移ろうとしたときになって出てくる赤字の注意コメント。もっと早くに指摘してくれればいいのにと思ったことはありませんか。

ユーザーはもう次の項目を入力し始めているかもしれません。そんなときに、最初の項目に戻ってエラーを修正しようとすると、次の項目が中途半端になるため結局両方の項目でエラーが出てしまうことになります。

ひとつひとつの項目を確実に入力できているかわからないと、行って戻って、の繰り返しになってしまいます。

3. 画面の切り替わりが激しい

入力がすべて完了してからエラーが表示される

エラーを通告するときに入力エリアが振動したり、真っ赤に色づいたり、オーバーなアクションをとる場合があります。小さなことですが、ストレスとなり積み重なります。

エラーメッセージは、ユーザーがキーボードを操作している段階ではまだ表示させない方がいいでしょう。

4. サーバー側によるバリデーションが遅い

サーバ側

通常、バリデーションはクライアント側とサーバー側の双方でチェックします。なぜならクライアント側でのチェックのみではセキュリティ面で弱いと考えられています。一方で、ユーザーへのレスポンスはクライアント側の方がスピーディーです。日付や他のシステムと連動する項目の場合は、サーバー側でしか確認できないこともあります。

バリデーションが遅い

問題なのは、ユーザーのログイン履歴の検証などをするサーバーのバリデーションが、フォームの入力がすべて完了したときにしかか行われないこと。項目が多いほど、クライアント側とサーバー側のバリデーションの不一致なども起こりやすいのです。

5. 誤判定のリスク

項目を入力し終えたとき、横に緑色のチェックマークがつくと人は正確に認識されたと感じます。改めて見直すこともなく、そのまま手続きを完了させようと思うでしょう。

しかし、バリデーションでは半角と全角などの形式が間違っているというエラーを察知できないことがあります。内容は間違っていないはずなのに、完了ボタンを押した途端にエラーになってしまうといい気はしないでしょう。

数字を書くべきところに文字を書いたりしたら、しっかり認識されませんよね。どのような形式で書くべきなのかはっきりと記述しておかない限り、こういった不一致が起きてしまうことも。

6. エラーメッセージに気付かれない可能性がある

キーボード入力に夢中だったり、バリデーションに慣れてしまっているユーザーは、エラーメッセージに気付かないことがあります。

7. ユーザーの入力リズムを崩してしまう

リアルタイムで入力に対する指摘が入るということは、入力と間違いの修正を入力中にひたすら切り替えなくてはいけないということです。

人は、同じことを連続して行うことに関しては一定のリズムで効率よくできるのですが、そこに「修正」という手間が入ることによって、スピードも満足度も下がってしまいます。

8. チェックマークの信頼性

緑のチェックマークは通常、情報が正確に入力されたことを認識して表示されるものです。

ですが、偽名や適当な数字を入力してもチェックマークがついてしまうのは、バリデーションではユーザーの情報を正確に知ることはできないということ。端的にいうと、チェックマークがついていても情報が誤っている可能性もあるのです。

チェックマークがつくと、入力情報を再度チェックする必要がないという誤った印象を与えがちですが、実際はユーザー自身が誤字のないよう見直さなければなりません。

9. スクリーンリーダー使用中の注意

目の不自由なユーザーの場合、文字を読み上げてくれるスクリーンリーダーを使っている人もいるでしょう。ユーザーは入力前にどのような質問がされるのかまず知りたいと思ったら、上から下まですべての項目を選択することになります。すると、入力前から大量のエラーメッセージを抱えることになってしまうでしょう。

まとめ

便利でユーザーの満足度にも貢献すると思われがちなバリデーション機能ですが、誤判定や入力と修正の切り替えなどまだまだ課題は多いです。

こうした問題点に対して、デザイナーがやるべきことは以下の5つです。

  1. 無駄な項目は置かず、最小限にとどめる
  2. どのような形式で入力したらいいのかわかりやすく表記する
  3. エラーメッセージで不快にさせない努力を
  4. One Thing Per Pageを参考にする
  5. Errors-only approachを参考にする

いかがでしたでしょうか。どのフォームにもやみくもにバリデーション機能を使用するのではなく、ユーザーの不満を取り除くようなデザインを考えられたらベストですね。

(翻訳:Klara)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship