最近、ユーザーにフォーム入力でユーザーに負担を感じさせず、
申し込みのコンバージョン率を上げようという傾向が強まってきました。
いわゆる『エントリーフォーム最適化(EFO)』という概念です。
携帯サイトでフォーム入力を行なうのはPCサイトに比べてユーザーに精神的負担を与えやすいので
フォームのユーザービリティにもより気を付けないといけません。
そこで今回携帯サイトでフォームを設置する際のポイントを挙げていきます。
1. フォームには入力例をなるべく付ける
一般的に入力例は「フォームに何を入力すればいいか？」の説明機能と思われがちですが、
入力例があることによってユーザーのフォーム入力に対する抵抗感を取り除く効果もあります。
2.フォームの項目を減らす
携帯でフォームを入力するのはPCに比べて非常に時間が掛かります。
パッと見で入力フォームがズラっと並んでいると
ユーザーは入力する気がうせ、そのままサイトを閉じてしまいます。
入力してもらう項目は果たして本当に必要かを考え、必要最低限の数にするべきです。
3. 入力文字種を限定する
テキストフォームではistyle属性で「全角かな」「半角カナ」「英文字」「数字」の文字種を選択することが出来ます。
例えばメールアドレスなどは英数字だけの構成ですので
初期の入力文字を「漢字」にするのではなくて「isytle = “3” 」にしておきましょう。
※ソフトバンクの場合はmode属性になります。詳しくは下記ページをご確認下さい。
Development Reference – モバイルサイトにおけるinput要素の初期入力モード指定
4. 英字が使えるパスワードではpassword属性は使わない
パスワードを英文字も含めて設定してもらう場合には、
テキストエリアには「INPUT type=”password”」ではなく「INPUT type=”text”」を使うことをお勧めします。
password属性を使うと、フォーム上の表記が「*****」のようになります。
機種によっては入力している部分だけ文字が見えるものもありますが、
逆に何を押しても*のままで何を入力したのか分からない機種もあります。
やって見ると分かるのですが*の表示のままで英字を入力するのは困難です。
一番良いのは携帯サイトでパスワード入力が前提の場合、数字のみでパスワードを構成させることでしょう。
5. 電話番号・郵便番号の入力ボックスは分割しない
携帯電話の電話番号表記は「09012345678」などハイフンを使わないものが基本です。
090-1111-2222 という番号があったとします。
よく
と入力させるフォームがありますが携帯の場合、
まず一つの目のフォームを選択してクリック、数字を入力してクリック、2つ目のフォームを選択してクリック、数字を入力して・・・
とやたらユーザーのクリック回数が増えてしまいます。
というように一つのフォームで入力出来るようにしましょう。
6. サーバー側で直せる文字はサーバー側で直す
これはPCでもいえる事ですが住所を入力する際など、
よく「全角で入力してください」という説明書きされたフォームがあり、
半角で入力した場合エラーと表示されるものがあります。
私もそうなのですが普段、英数字は半角で入力が基本の身からすると全角で入力するのはストレスを感じます。
プログラム側で全角、半角はすぐ置き換え出来ますので、プログラム側で置き換えてあげましょう。
