ECサイトなど項目数が多くなりがちなフォームで参考にしたい海外記事「ウェブフォーム最適化のための25のTips」のご紹介、今回が最後の回になります。こちらの記事はチャリティ支援を行うECサイト「sevenly」のディレクターJustin Palmer氏によって執筆されており、役に立つTipsがたくさん紹介されています。
※Tips1～8の第一弾はこちら
※Tips9～16の第二弾はこちら
- Cookieに情報を記憶させる
- カーソルの位置
- パスワードの条件設定に注意
- 進捗状況を表示する
- ページ数、スクロールを最小にする
- 送信ボタンは目立つように
- ラベルは常に表示されるようにする
- ボタンには優先順位を
- サンクスページを設ける
それぞれ、順番に見ていきましょう。
17.Cookieに情報を記憶させる
ログインフォームでCookieを使用して、一度訪れたユーザーのログイン情報を記憶させるとよいでしょう。
何度も入力を行うのは手間になりますし、IDやパスワードを思い出すことができずに再発行の手続きが必要になってしまうと面倒になり離脱してしまうユーザーは多いでしょう。
18.カーソルの位置
フォームのページを読み込んだ際、一番初めに入力する項目の入力欄がフォーカスされている状態にするとよいとのことです。簡単なJavaScriptで設定でき、ユーザーがカーソルを移動させて選択する手間が省けます。
amazonのサインイン画面。ページを読み込むと一番初めに入力するEメールアドレスの箇所がフォーカスされています。
19.パスワードの条件設定に注意
パスワードを設定する際、いくつか条件を課すサイトが増えてきています。例えば文字数の下限を設定したり、数字と記号と文字を使用してくださいなど、複雑なパスワードにすればするほどセキュリティーは厳しくなります。ただ、あまりにも複雑すぎるパスワードを要求すると、ユーザーは覚えられずに再訪できなくなる可能性も大きくなりますので条件設定の際は注意が必要です。
20.フローを表示する
フォームが複数のページに分かれている際は、画面上部などに全体でどれだけのフローがあり、現在どこまで入力が完了しているかを表示するとよいでしょう。入力ページがどれだけ続くかわからないとユーザーも不安になってしまいます。
楽天の会員登録フォーム
21.ページ数、スクロールを最小にする
Tips20のように、フォーム上でいくらフローを表示したとしてもページ数があまりに多いとユーザーは入力をためらってしまいますので、できる限りページ数を減らした方がよいでしょう。ただ、ページ数を減らすとどうしても1ページが長くなってしまいます。あまりにも1ページの入力数が多いのもストレスの原因となります。ページ数と1ページのボリュームに関しては「こうするべき」と一概に言いきれないのでABテストを繰り返し、そのフォームに適したバランスを見つけるのが良いかと思います。
22.送信ボタンは目立つように
送信ボタンに限らず、アクションボタンはユーザーの行動を引き起こさなければならないので、目につきやすい位置やデザインにするべきでしょう。
23.項目名は常に表示されるようにする
入力欄に「お名前」「電話番号」などの項目名を表示しているフォームを見かけます。フォームのスペースを小さくすることはできますが、入力欄をフォーカスした際に項目名が消えてしまい、何を入力するのかわからなくなってしまう可能性があります。入力欄の横などに常に表示しておくのがよいでしょう。
入力欄の隣に表示する分には、そこまでスペースをとらずに済みますね。
24.ボタンには優先順位を
一つのページに二つ以上のボタンがある場合、優先順位を付け、重要なボタンを目立つように表示するとよいでしょう。例えば注文の最終ページに「注文ボタン」と「修正ボタン」の二つがあるとすれば目立たせるのはどちらか明白ですね。もちろん「注文ボタン」です！
AppleStoreの注文画面。「ショッピングを続ける」「カートを保存」「注文手続きへ」の三つのボタンがある中、一番重要な「注文手続きへ」が目立つデザインになっていますね。
25.サンクスページを設ける
ユーザーがフォームを完成し送信ボタンを押した際、まっさらなフォーム画面が表示されたらどうでしょうか。ちゃんと送信ができているか不安になってしまいますね。送信が正しく行われたことを伝えるためにもサンクスページはできる限り設置をした方がよいでしょう。
まとめ
三回にわたってご紹介しました「ウェブフォーム最適化のための25のTips」ですが、いかがでしたでしょうか。すぐに全部は難しいでしょうが、できることから取り入れていきたいですね。また導入して終わりではなく、ABテストを行うなどして数値面で効果を測定できるとよいかと思います。
