EFO(エントリーフォームの最適化)のまとめ
2009年8月7日
フォームのユーザービリティーの改善がコンバージョンレートの向上に一役買っているようです。
WEBサイトの最終的な受け皿であるお問い合わせフォームやショッピングカートといったフォームは他のコンテンツに比べて制作の際にないがしろにされがちですが、アクセス解析を見るとサイト内でもかなり上位の閲覧数のあるページとなります。
コンテンツできっちり情報を伝えて、アクションをおこしてもらってもフォームの操作性ひとつで機会損失につながることだってあります。
そこで最近ではEFO(エントリーフォームの最適化)としてフォームの改善対策が注目をあびています。
致命的な改善すべき項目
1.入力の訂正をする際に以前に入力した内容が消えないようにする
せっかく入力したのに書き直しやエラー訂正の時に入力した内容が消えているとモチベーションがいっきに落ちる。タイピングに不慣れなユーザーにとって入力という作業はとても労力のいる作業なんだと認識すべき。
2.入力項目を必要以上に複雑にしない
入力項目が複雑でわかりにくいと、どこに何を入力すればいいかわからなくなる。
間違った内容を送るくらいならまた後日改めようと思って離脱してしまう。
3.正規表現チェックやＩＤの重複などエラー内容がわかるようにする
バリデーションを行うのはいいことだが、入力した項目が何で間違えているのかきっちりと表示してあげないとユーザーはどう訂正すればいいのかわからなくなる。
そういう経験をするときっとユーザーは離脱してしまうだろう。
できるなら改善したほうがいい項目
1.必須項目をアスタリスク「＊」だけにしない
必須項目をアスタリスク「＊」だけにしてしまうと不慣れなユーザーには伝わらないので、日本語で「必須」と表示し、できれば赤色などを使用して伝えてあげる。
逆に必須でない項目は「任意」と表示してあげると親切かもしれない。
2.入力例を用意する
全角なのか半角なのか、郵便番号や電話番号などハイフン「-」がいるのかいらないのか、住所をどこまで正確に書けばいいのかわからないなど些細な事でも気なる人は気になるので入力してて気持ちの悪いものだ。
半角と全角の違いも分からない人だっているのだからテキストフィールドの下にきっちりと「例」を入れてあげると間違いも起こりにくくなり、気持ちよく入力していくことができる。
3.エラー項目を見つけやすくする
項目の多い入力フォームで小さなテキストだけでエラー項目を示している、もしくはフォームの上部にまとめてテキストでエラー項目を表示している場合、どこを修正していいのかとてもわかりにくい。tableでフォームを組んでいるのであれば、tr全体をclass=”error”などをつけて背景色を変化させて視認性を高めてあげるべき。
エラー内容もテキストフィールドの「上」に表示して伝えてあげると親切。なぜ上かというとユーザーの目線は基本上から下なのでかならず訂正しなければいけないエラー内容はテキストフィールドの「上」が望ましいと考える。「例」はあくまで補助的役割なので、テキストフィールドの下でも良いと考える。
4.現在位置がわかるようなナビゲーションを用意する
買い物カゴのように数ページにまたがって画面遷移するフォームの場合はフォームの上部に現在位置をわかりやすく表示してあげると親切である。
5.ラベルをクリックして選択できるようにする
ラジオボタンやチェックボックスはfieldset,label要素を活用してラベルをクリックしたらチェックが入るようにしてあげたい。ヘビーユーザーはかなりこれを活用しているし、不慣れなとくに高齢者のユーザーはきちんとチェックを入れれない方もいるだろう。もちろんテキストフィールドにもラベルを活用しよう。
6.入力している箇所は色を変えてわかりやすくする
間違った項目に入力するのを避けるためにもCSSやJavascriptを使ってフォーカスしているテキストフィールドの背景やボーダーの色を変えてあげよう。
7.定型文で対応できる項目はプルダウンにする
たとえば、「年収」という項目があるとする。これがフリーのテキストフィールドだと「年収452万」と正確にかけばいいのかアバウトでいいのか、「452」と数字だけでいいのかなど色々悩んでしまう。こういうケースではプルダウンなどで定型文を用意してあげて対応できないか検討したほうがいい。
8.重要な項目は重複して項目を作る
メールアドレスやパスワードなど間違えて登録すると困るような項目は重複して確認用の項目を作るほうが良い。コピー＆ペーストを禁止にしていると結構ストレスが溜まる。できればコピー＆ペーストでも入力できるようにしてあげよう。最近だとiphoneのパスワードの入力フォームの「＊＊＊＊d」のように最後の1文字を表示させることで間違ったコピー＆ペーストをしていないか確認することができると非常に親切だ。
9.ログインフォームはページ読み込み時にフォーカスさせる
Mixiのような最初にまずログインを行うサイトなどではページが表示された際に自動的にテキストフィールドにフォーカスしている状態にしてあげるのが親切だと思います。
ヘビーユーザーはこれが当たり前と思っている節があるので、フォーカスしていなければストレスがたまる事もあるでしょう。
10.前後のスペースは必要に応じて削除する
メールアドレスやID、パスワードをコピー＆ペーストで入力した時に、末尾にスペースが入ってしまってエラーになる場合があります。これが意外と気付かない事が多い。
そんなケースのためにシステムで末尾のスペースを削除するようにしてあげたい。
11.フォーム要素の幅はCSSで指定する
size属性やcols,rows属性は設定する必要がありますが、この属性だけで幅をコントロールするのは難しいのでCSSで適正な横幅に設定するようにしたほうが良いでしょう。
ここまでやったら素晴らしいと思う項目
1.半角/全角を自動で変換してあげる
意外と半角/全角の違いを知らないユーザーというのは多いです。エラー表示で「半角で入力してください。」と表示しても半角の入力の仕方を知らないユーザーも多いと思います。そんな方のために全角で入力しても半角に変換してあげるようなシステムの配慮はとても親切だと思いますし、離脱防止にも一役買うのではないでしょうか。
2.二重submit防止対策をする
単純な操作ミスで押せてないと思ったら、サーバーが重いだけで2重送信になるケースがたまにある。Javascriptなどを利用して2重送信を防ぐ対策も重要だと考える。
3.Submitボタンは大きくする
これは意見が分かれるところですが、Submitボタンは画像でわかりやすくしてあげると視認性があがって良いと思います。
しかし、ローソンのタッチパネルディスプレイのボタンがわからないケースのようにあまりに大きくわかりやすくすると逆に目に入らないなんてケースもあるようです。
4.ツールチップで詳しい例を表示させる
JSライブラリを活用してリアルタイムでツールチップを表示させて入力サポートしてあげるととても親切だと感じます。
5.残り文字を表示させる
たとえば、入力文字制限を設けている場合、Javascriptで残り文字数などを表示させているとユーザーにとってとても親切です。
6.必要な部分だけ表示させる
ラジオボタンにチェックを入れるとその項目の必要事項だけを表示させる機能を搭載するとフォーム自体がシンプルになり非常にわかりやすくなります。
時間ができたら画像のサンプル付でまた紹介していきたいと思っています。