skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォームのユーザビリティを再考してコンバージョンを向上

｜ ｜ ｜ ｜ ｜ ｜ ｜

お問い合わせフォーム、エントリーフォームなどは、ユーザーが能動・積極的に行動する数少ない場です。
このような潜在一隅の機会を逃していませんか？
フォームについて以下のようなデータがあります。

「申し込みフォームに入力し始めた人の54％が入力を途中でやめている」
（引用：申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】）

ターゲット層のITリテラシーなども考慮して、サイトのフォームについて考える必要があるのではないでしょうか。
今回はそんな感じでフォームについて考えてみたいと思います。

フォームの長さ
フォームが長いのを見るだけで、ページから離脱する人もいます。
項目を減らしたり、必須項目をなくすなど配慮が求められます。
極端な話で言えば、E-mailアドレスのみ入力させ、サンクスメールに記載したURLで本登録を行うという、2段階方式もあります。
ただし、ユーザーによっては、メールの受信が完了と勘違いしてしまうケースもあるので、注意が必要です。
アマゾンのようにページ分割し、今何ページ目を入力していて、あと何ページ残っているかを明記することで、多くの情報を得ながらユーザービリティにも配慮できるでしょう。
【参考記事】
[Think IT] 第3回：フォームのユーザビリティを改善する (1/3)
ユーザー視点
フォームを利用する人が全員、サイト制作者のように賢くありません。
特にさまざまな人が訪れるであろうECサイトなどでは、多様な切り口でフォームに不備がないか確認しましょう。
時にはユーザーテストを行う必要もあるかもしれません。
また、事前に用意しておくべき情報を知らせておくこと、あるいは入力項目の近くに説明ページへのリンクやヒントを記載することも場合によっては求められるでしょう。
【参考記事】
フォームでのちょっとした配慮の例
フォームの離脱を防ぐ心遣い
【海外事例に学ぶ】入力フォームにおける、ヘルプテキストの効果的な表示方法
フォーム項目
ユーザー視点と重なる部分は多いですが、入力項目にも気をつけましょう。
全角なのか半角なのか、必須項目か、エラーメッセージは表示しているか・・・考える部分はたくさんあります。
そして最後のsubmitにはどのような文言を使用していますか。
確認？送信？次へ？それが本当に遷移にあった文言なのか再考しましょう。
また、デザイン面でも配慮できる部分は多く、マウスオーバー効果や色味などの調整でユーザーがどこを入力しているのか認識させることができます。
【参考記事】
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】
第0回　その気になった客を逃さないフォーム設計術
フォームのインタフェースデザインを考える（1)
入力完了後
冒頭でも書いたように、フォームはユーザーが積極的に行動する場です。
つまり、あなたのサイトに興味をもってくれたということです。
では、完了ページに何らかの情報を表示したら引き続き、サイトを回遊してくれるのではないでしょうか。
多くのサイトが、「お申し込みありがとうございました。」としか記述しないのは非常にもったいない気がします。
完了ページやログアウト画面の効果的な使い方
まとめ記事
フォームのユーザビリティを改善する10のTips
ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
英語記事
LukeW: Primary & Secondary Actions in Web Forms
※アイトラッキングなど非常に参考になる情報です。
Login Forms Design Showcase | Elements of Design
※フォームのデザインサンプルがあります。
Useful tips to enrich your HTML Forms
※JavaScriptでユーザービリティを上げましょう的な記事です。

JavaScriptでフォームのユーザービリティをあげる
さて、上記のうちいくつかはJavaScriptを利用することで、ユーザービリティの向上につなげられるほか、リッチなフォームが作成できます。
・JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
・パスワード強度を視覚的に明示するjavascript「Password Strength」
・入力方法を指定するjavascript「Mask JavaScript API」
・javascriptライブラリSpryで作成するフォームチェック
・文字カウントjavascript「jCountDown」
・フォームに吹き出しでヒントを出すjavascript「Hints.js」

記事作成：2009年02月19日

前の記事：パンクズを綺麗に見せるJavaScript「jBreadCrumb」
次の記事：JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」