入力フォームにおけるユーザビリティ

離脱率90%は当たり前!?最後の難関『入力フォーム』の離脱を改善する (1/3):MarkeZine(マーケジン)

なんかピントがずれているような・・・(特に動画でのフォロー。いちいちそんなの見ないと思う)。
ただ、フォームページではグローバルナビゲーションを例外的にOFFにするという部分については完全に同意。


フォームからの離脱は、ユーザビリティ上の欠陥によるものと、信頼性への不安による離脱の2種類あると思う。

ユーザビリティ上の欠陥は、主にPC初心者のフォーム入力における壁となり、買う気のあるお客さんまで逃げてしまう。
技術的に直せる部分も多いのでどうせなら配慮したい。

ボタンの連打の防止

<INPUT TYPE="submit" name="btn" VALUE="次へ" onClick='document.form.btn.disabled = true; document.form.btn.value="処理中"; submit();'> 

1回押すともう押せなくなるボタン。

IMEの制御(IEのみ)

IMEを自動的にONにする

<input type="text" name="hurigana" style="ime-mode: active">

IMEを自動的にOFFにする

<input type="text" name="phone_num" style="ime-mode: inactive">

1行フォームにおけるEnterキーでの次画面遷移禁止

<INPUT NAME="test" type="text" OnKeyPress="if (event.keyCode == 13) {event.returnValue = false;}">

時間のかかる処理にはwaitアイコンを表示する

http://hatena.ne.jp/statics/images/indicator.gif
こんな感じの。

極力1画面内で済ませる

プライバシーポリシーなどの、重大だけど煩雑になりがちなテキストは、フォームページ内にテキストボックスなりインラインフレームを使って表示するべきだと思う。

郵便番号からの住所の自動入力はAjaxを使い、ポップアップなどの初心者ユーザーを混乱させる要素を排除する

その他、パスワードの強固さのチェックなど、Ajaxの方が明らかにユーザビリティ上有利な部分はたくさんある。
Gmailのアカウント登録フォームは非常によくできている。
Google アカウントの作成

ラジオボタンはテキスト部分でも選択できるようにする

 <input type="checkbox" id="10" name="test" value="10" checked>
 <label for=10>チェックする</label>

半角カタカナぐらい自前の処理でなんとかする

Perlの場合
半角カタカナ->全角カタカナへの変換
PHPの場合
http://search.net-newbie.com/php/function.mb-convert-kana.html
「半角カタカナを入力しないでください」なんて書くぐらいなら自前で変換しましょう、というお話。

全角英数字ぐらい以下略

Perl
全角英数字->半角英数字への変換
PHP
同上

色を使ってエラー個所を強調させる

エラー個所があっても、今までに入力できた内容については保持される

このあたりはYahoo!IDの登録ページが優秀。
https://edit.yahoo.co.jp/config/eval_register?.intl=jp&new=1&.done=http%3A//www.yahoo.co.jp&.src=www&.v=0&.u=&partner=&.p=&promo=&.last=

信頼性への不安による離脱

こっちは単純な話で、ホームページビルダー丸出しのページデザインに比べれば、やっぱりある程度ブランディングを意識したデザインの方が信頼性が高いであろう、という話。

ブランディングとは言っても、実際にデカい企業が運営しているかどうかという話ではなく、あくまでも見た目上ある程度の綺麗さがあるデザインが必要ということ。
高いブランド物の服である必要は無いが、あまりにも不潔感のある汚れた服じゃまずいよな、という感じ。


離脱者の数割は、おそらく競合サイトとの比較のための離脱。
単純な価格での比較ではなく、送料や納期の早さなどを含めた総合的な判断で生き残った方にのみ注文が入る。

身も蓋も無い事を言ってしまえば、SSLの採用とかは玄人が意識するもので、初心者に対しての信頼性のアピールにはならないと思っている。