こんにちは！RABIMAX管理人、らびです。
本日の記事はWebサイトにとっては欠かすことのできないフォームについて考えていきたいと思います。
みなさんも一度は使ったことがあると思われるフォーム。
サイトによって項目が違ったり、
必須事項が違ったりといろいろありますよね。
一体どのようなフォームがよいのかを考えてみます！！
先ず、フォームは対話です。
PCと人の、スマホと人との対話なのです。
対話をする上に先ず、わかりやすく伝えること。
これが一番大切ですよね。
1.本当に必要なことだけを入力させる
フォームに一つ項目を増やすたびにコンバージョン率は下がります。
フォームを作成する前になぜその項目が必要なのか、
その情報を何に使うのかを考える必要があります。
2.論理的な順序でフォームを並べる
論理的な順序ってなんだ？と思われる方も多いかもしれません。
しかし、考えてみてください。
例えば名前のフォームの前に住所の項目があるとどうでしょうか？
何か違和感を感じませんか？
変わったことをしようとして、
一般的なフォームから離れた構造にすることは論理的な順序から離れる行動になるので、注意が必要です。
3.関連する情報をグループに分ける
関連している情報をグループに分けることによって、入力すべき情報をユーザーの方が理解してくれるようになります。
例えば、個人情報(名前、誕生日、性別)、ログイン情報(Eメール、パスワード、秘密の質問など)、
4.フィールドの数を最小限に
上でも触れましたが、入力フィールドが一つ増えるたびにコンバージョン率は下がります。
そのため、なるべくフィールドは最小限にしましょう。
例えば、ドロップダウンでXX年、XX月、XX日といったようにするのではなく、
テキストフィールドでまとめて入力できるようにしてあげることが望ましいのです。
5.任意入力のフィールドは避ける
こちらもフィールドを増やさない、ということに当てはまりますが、
任意の入力フォームは出来うる限り避けるのがベストです。
任意であるということは、そのフォームを扱うユーザーにとってなくても問題ないものということであり、
コンバージョン率が下がるかもしれないそのフォームを置くことはリスクでしかないのです。
ただ、どうしても設置しなければいけない場合は、
最低でも*を使用する、任意とわかるようにデザインするのが最低条件でしょう。
6.デフォルト値の設定を避ける
ユーザーがフォームのあるページの注意事項を熟読してくれるとは限りません。
読み飛ばされる可能性も多いにあります。
そのため、デフォルトで値をいれておくことは避けましょう。
入力した気になって、そのまま送信ボタンを押してしまうこともあるでしょう。
7.(PCに限る)キーボード入力に配慮したフォームにする
ユーザが全てのフィールドにキーボードだけでアクセスし編集することができるようにしておくことが大切です。
キーボードから手を離すことなく、タブのみで移動し入力していけるフォームが理想的です。
8.入力フィールドにオートフォーカスを設定する
視覚的にどこを選択しているのかをわかるようにしてあげると優しいフォームになります。
Amazonの入力フォームでは、自身が選択しているフォームはオートフォーカスでオレンジの枠になるようになっています。
9.(モバイルのみ)表示するキーボードを絞る
例えば郵便番号を入力するとき、
郵便番号のフィールドが選択された時に日本語のキーボードを表示する必要はありません。
郵便番号は必ず数字だからです。
10.無駄のない文字数、ラベル付けを意識する
ラベルはヘルプ文とは違います。
そのためだらだらと長いラベルをつけるのは誤りです。
ラベルは出来うる限り、無駄を省きましょう。
11.ラベルの位置を意識する
左揃え、右揃え、フォームのすぐ上とパターンがあると思います。
縦並びが最もよいとされていましたが、現在ではあまり関係がないということが判明しています。
上に置くラベルの利点は、ラベルのサイズがまちまちな場合やローカライズする場合でもUIになじみやすいということがあげられます。
レスポンシブデザインに最もマッチしているといえます。
12.プレースホルダのテキスト
ユーザー名とパスワードだけのようなシンプルなフォームの場合、
ラベルを使うのではなく、プレースホルダで簡潔に説明してあげるのがよいでしょう。
ただし、長々とプレースホルダを書くのは禁物です。
13.その他
・入力フォームの縦幅はファーストビュー（1000×550px）内に収める
※これは一目で入力フォーム全体が見渡せるため
・クリアやキャンセルを置かない
※間違えてクリア、キャンセルをクリックすることを防止するため
・プライバシーポリシーを明示する
※以外と気にする人が多いとのこと
・OpenID(Twittter、FacebookなどのSNS)を利用して登録手続きを簡単にする
などがあります。
まとめ
フォームは入力を避けられる可能性があります。
それは面倒だからに他なりません。
多く入力してもらうためにはなるべく簡単で使いやすいフォームを作成することが大切です。
というわけで！！
以上、RABIMAX管理人らびでした！
コメント