こんにちは。新免です。
サイトの制作者や、サイトの運営者の方なら、
購入フォームや登録フォームって、みなさん気にされますよね。
商品の購入や、お問い合わせ、会員登録など、
サイトが目標としていることをゴールとすれば、
そのゴールにどうすればスムーズに到達するかを考えなければなりません。
その中でも、難しいのが購入フォームや登録フォーム。
購入フォームまで来たけど、入力項目の数が多すぎるのでフォームを
見た瞬間にそのサイトから離れたり、なんだかわからないけど、
エラーばかり出るので途中で購入を諦めたりと、
フォームにたどり着くまでは欲しいものがありテンションが上がってたけど、
フォームに来たとたんユーザーのテンションが下がったのでは
ゴールにたどり着けません。
いかにユーザーのテンションを下げずにゴールをさせるかが重要になり、
そのためにはユーザーに不安感を与えたり、ストレスを与えたりしてはいけません。
そこで今回は、ユーザーに不安感や与えたり、ストレスを与えないようにする
フォームにおいてのポイントをまとめてみました。
フォームに安心感や信頼感を与えるポイント
■入力項目を極力減らす
文字を入力したり、選択項目を選ぶ作業はユーザーにとって非常に面倒な作業です。
特に、PC初心者などはキーボードでの入力を嫌がる傾向があります。
しかし、企業側は反対に多くの顧客情報をほしがり、
ユーザーと企業の間に矛盾が生じてしまいます。
入力項目が増えればその分、ユーザーのテンションも下がり離脱が増えますので、
本当に必要な情報を吟味し絞り込む作業が必要が重要です。
■必要なもの以外は必須にしない
「できれば入力して欲しい」というものは必須にする必要はありません。
例えば「どうしてこの商品を知ったか？」などは、企業側が知りたい情報であり、
ユーザーが商品を購入したり、サービスを利用するには必要の無い情報です。
後から営業ができるからといって、余分なものまで必須にしないで、
その情報がないとサービスが利用できないという最低限の情報を選んで
必須にすると良いでしょう。
■いきなり入力させない
購入ページなどで、いきなりユーザーにフォームへ
入力させようとすると、ユーザーは身構えてしまいます。
フォームの上部、フォームへリンクするページなどに
・会員登録をすると何ができるのか？
・ユーザーにとってのメリットはなんなのか？
・有料なのか無料なのか？
など、購入や登録をすることのメリットなどを記載すると、
不安感の軽減、目的意識の向上、ゴールの明確化につながります。
■プライバシーポリシー（個人情報保護指針）
個人情報の漏洩を心配している消費者が多い。
法律上でWebサイトで個人情報を集めるページにはプライバシーポリシーへのリンクを載せないといけない。
日本企業は多くの場合そのリンクをフッターの目立たないところに配置している。
これでは、お客様の不安を取り除く役割を果たせていない。
個人情報を気にするのは個人情報を入力する時。
フォームの最初に設置するのがお客様の信頼を得るには最適。
■暗号化通信（SSL）のページにはその旨を明示する
鍵マークをつけたり、暗号化通信であることがわかる文章をつけるなどして、
個人情報を登録するユーザーに少しでも安心感をもってもらう。
購入時や登録時のミスを減らすポイント
■メールアドレスの入力ミス
メールアドレスは、英数字で細かく入力ミスの多い箇所になります。
そのため、メールアドレスを2回入力させ、入力ミスが無いか確認しますが、
メールアドレスを２回入力するのはどうせコピペされるし、
ユーザビリティ的にもよくないという意見もあります。
しかし、2回入力した方が入力ミスが減るという統計も
株式会社ビービットさんのユーザビリティテストで
とれているそうです。
また、メールアドレスやユーザーIDをコピー＆ペーストで入力した時に、
末尾にスペースが入ってしまってエラーになる場合があります。
これは先頭と末尾のスペースをシステム側で削除できるようにすると、
ミスも減り、親切かと思います。
■全角・半角英数字
メールアドレスが全角で入力された場合「半角英数字で入力してください」と
エラーが表示されますが、PC初心者の方はここで心が折れる場合が多いです。
サーバー側やJavascript自動変換してあげた方が親切です。
■ログインIDはメールアドレスで
サイト独自IDよりも普段使うメールアドレスの方が
覚えやすく記憶忘れ防止になります。
また、サイトの独自IDを無くすことでフォームの
入力項目も減り、一石二鳥です。
ユーザビリティの向上のポイント
■ボタン
フォームで一番重要なボタンは「進む」ボタンです。
サポートしたいのはクリアをする人ではなく次へ進む人ですので
クリアボタンはいらないかもしれません。
どうしてもクリアボタンなどが必要な場合は左下に目立たない形で設置するのが好ましいです。
※Webサイトの閲覧は通常左→右の順に行われるため。
また、次へスムーズに進んでもらうためには「進む」ボタンは大きく、
目立つ色にし、クリアボタンから離しはっきりわかるようにします。
そして、ボタンのテキストは「クリックしたらどうなるか」が分かるように
「購入」や「登録」といった単語だけにしないで、
「この商品を購入する」「この内容で登録する」のように
「そのボタンをクリックすることで何が起こるか」が
伝わりやすいような文章を設定するとユーザーもボタンがクリックしやすくなります。
■画面遷移
３画面以上の場合、現在位置とステップをナビゲーションで見せると、
フォームの一連の処理でどれだけのステップがあるかが
ユーザーが見た際に明確になります。
また現在、自分のいるページはステップのどの部分かをもわかりやすくなります。
■チェックボックス/ラジオボタン
チェックボックスやラジオボタンはfieldset,label要素でくくると、
チェックボックスやラジオボタン部分だけでなく、
テキスト部分をクリックしても選択されるようになります。
そうすることで、ユーザーは選択しやすくなります。
■生年月日
生年月日はセレクトボックスで選択させがちですが、
セレクトボックスにすると、非常に長くなり、選択が困難になります。
テキスト入力にすると4桁の入力で済むため、テキスト入力の方が早い場合もあります。
ただし、シニア向けのサイトの場合はユーザー層の年齢が高いために
入力が苦手なユーザーが多く、セレクトボックスの方が良い場合もあります。
その際はプルダウンの初期値をユーザーの平均値にあわせておけば選択が簡単になります。
また年の表示に関しても「1981（昭和56）」とすると非常にわかりやすくなります。
■入力例
例えば郵便番号の入力などの入力例では、
「－（ハイフン）」がいるのか、いらないのかを入力例で
わかりやすくする必要があります。
また、ユーザーが情報を入力している時は、入力欄に注目しています。
そのため入力例を入力欄の遠くに書いては意味がありません。
入力例は入力欄のすぐ近く（横や下）に表示しましょう。
■エラー画面
ページの上部にエラーメッセージが表示される場合、
ユーザーは実際に入力欄に目を向ける傾向があります。
ページ上部にエラーを出すと、気づかない場合が多かったり、
エラーを繰り返す場合があります。
フィールドのラベルに色をつけるだけでエラー箇所を示す場合は、
色覚障害のユーザーがエラー箇所を把握できませんので、
アクセシビリティ上の問題が生じてしまいます。
良い例としては、エラーだとわかる印とともに、
どう対処すればエラーから脱出できるのかを具体的に
記述することが重要です。
■郵便番号検索を付ける
あると無いとではかなり利便性が変わってきます。
あると非常に便利なので、設置する方が好ましいです。
上記のようにに長々とまとめましたが、
どれを改善すれば必ず成約数が上がるというものはありません。
しかし、ユーザーのテンションを下げず、離脱を減らすべき注意点が数多くあります。
また、サービスや製品により、狙うターゲット層も違い、
ターゲットにあわせたフォームが必要になりますので、
繰り返し仮説を立て、検証・改善しサイトにあったフォームを作ることが重要です。
関連した記事：
■ 「日本でいちばん社員満足度が高い会社の非常識な働き方」
ページの先頭に戻る
参考になりました。ありがとうございます。
コメントありがとうございます。
フォームは注意する点も多く、
全ての事項を頭で覚えておくことは難しいので、
まとめておきました。
取り扱う商品や、ターゲットによっても
絶対というものは無いので難しいですが、
ユーザーにとって優しいフォーム作りを心がけたいですね。