入力フォームのバリデーションを見直しefo対策をする

会員登録や申し込みフォームにおいて、そのステップの多さや分かりづらさは、ページからの離脱を招き、結果として期待しているコンバージョン率を低下させてしまうおそれがあります。それゆえ、フォーム周りのユーザビリティーは他のページに比べ一層の注力が求められるのかもしれません。

ここでは、入力されるデータが正当なものかを判定する手段、いわゆるバリデーションに関するefo対策を中心に紹介していきます。

入力画面のユーザビリティを改善してefo対策をする


バリデーションの種類

基本的なバリデーションの種類として、サーバー側で行うものとクライエント側で行うものの2種類が挙げられます。まず、サーバー側でしかできないバリデーションの1つに、DB(データベース)との照合が必要なものが考えられます。

つまり、与えられたデータが正当なものか、DBに保存される値と比べるまでは分からないようなデータの判定です。具体的には、ウェブサービスで単一のユーザー名しか登録できない(名前の重複が許されない)場合に行うバリデーションがその類でしょう。

このような入力データを用いる際は、一度データを送信し、サーバー側で処理を行い、返された結果を元にクライエント側で応答ことになります。一方、クライエント側で処理が可能なバリデーションとして、文字数や文字のフォーマットの正当性を判定するものが挙げられます。

もちろん、これらはサーバー側でも行うことができますが、送信して結果を見るまでユーザーに入力ミスが分からないというのは、あまりユーザービリティが良いとは言えません。それゆえ、なるべくリアルタイムに、すぐさまミスを認知させられるよう、できうる限りはクライエント側のバリデーションを設ける必要があると言えるでしょう。

なお、クライエント側でバリデーションを実装しているからと言って、サーバー側のバリデーションが不要という訳ではありません。サーバー側のバリデーションは、より確実な判定を行うために、バリデーションが必要なすべてのデータを対象に行うべきです。


Ajaxを用いたバリデーション

サーバ側とクライエント側、それぞれのバリデーションの良いとこどりをできるのが、Ajaxを用いたバリデーションです。DBとの照合が求められるデータ、例えば、単一のユーザー名しか登録できないような場合、基本的にはサーバー側でデータを受け取り、その正当性を判定し、結果を新たにロードしたページへと表示をすることになるでしょう。

もちろん最終的なデータの送信はそれでも良いですが、すべてのフォームへの入力が済むまで入力値の正当性が分からないままでいるのは、あまりユーザーに優しいとは言えないのかもしれません。しかし、Ajaxを用いてバリデーションを行えば、ページ全体の読み込みは不要となり、ユーザーの目にはさながらクライエント側で処理がなされたように感じさせることができます。

Ajaxはクライエント側でjavascriptを走らせることでデータを送信し、その結果を受け取ることができる技術であり、この際にページのロードは不要となります。なお、実行のタイミングとしては、対象の入力フォームからフォーカスが外れた時などが考えられるでしょう。

この際には、フォームの横などにプログレスダイアログを表示し、何か処理をしている旨を明示するとなお良いかもしれません。

入力フォームのエラー表示

バリデーションを行い、入力に不備がある場合にはその旨をエラーとして表示する必要があります。まず、サーバー側でバリデーションを行う場合は、どのデータに対しどのような入力不備があるのかという情報を返却します。

そして、その情報を元に、各フォームの近くに赤字などの目立つ配色でエラーを表示します。また、サーバー側からデータが返され、ページが再表示されると、基本的にフォーカスがページ最上部へ戻ってしまいますが、これではどの入力フォームにエラーがあったのかすぐに判別することができません。

それゆえ、そのような手間を省くため、エラーが生じた各フォームのうち、最上部のフォームへと自動でフォーカスが当たるようにできれば最善でしょう。これはHTMLタグのアンカーリンクを用いれば容易に実装できます。

一方、クライエント側のバリデーションやAjaxを用いたバリデーションでエラーが見つかった場合は、入力時にすぐにエラーを表示させることができるので、フォーカスの移動は不要と言えます。また、フォームに長い文字を入力する際には、文字数カウンターをフォームの近くに設けることで、ユーザービリティーをさらに向上させることが可能でしょう。

現在何文字を入力していて、残り何文字なのかが一目で分かるようにするためには、キー入力毎に処理を走らせることが必要です。

入力データの再表示

サーバー側のバリデーションでエラーが見つかった際に、そのエラーに関する情報だけではなく、エラーの生じていないものも含むすべての入力データを返却し、再度入力フォームへ表示させる必要があります。送信後にエラーがあり、再び入力し直さなければならないようなフォームに出会うがありますが、やはりこれではあまりユーザービリティーが良いとは言えないでしょう。

入力されたデータは保持し、少しでも次の入力の手間を省くことが大切です。ただし、そのような再表示に不向きのデータもあります。その代表的なものはパスワードです。パスワードの多くは入力時に伏字となり、エラーが生じた際に再表示されたとしても、どの部分にエラーが生じているのか判断が付きづらいためです。

もちろん、再表示の時に伏字をやめることも可能ですが、それではセキュリティ的に最善とは言い難いです。また、人間かボットかを判別するためのキャプチャ認証なども、ページの表示毎に入力内容も変わるので、データの再表示には不向きと言えるでしょう。

これらの特殊なデータのフォームについては、その都度入力を求める必要があります。

高度なバリデーション

フォームに入力された文字列がメールアドレスの形式をしているか、キーワードの間にカンマやスペースなどが挟まれているか、はたまた、絵文字などの特殊文字が用いられていないかなど、より高度で複雑なバリデーションが求められる場合があります。

このようなバリデーションの実装に欠かせないのが、正規表現です。正規表現をマスターすれば、文字の種類や並べ方など、様々な条件の正当性を判定することができるでしょう。また、正規表現は文字列を特殊な記号で表す「式」であり、これをうまく使いこなすには、各記号の意味を覚えていく必要があります。

そして、その記号のも種類も多様なものが用意されています。それゆえ、一度に全てを把握しようとするのではなく、今必要なものをその都度調べ、少しずつ記号を覚え、表現を学んでいくことが大切かもしれません。