フォームのユーザビリティを改善する

フォームの重要性

　今回はWebサイトの「使い方」からユーザビリティを改善する方法を探っていきます。

　多くのWebサイトでは、ユーザーにフォームから何らかの情報を送信してもらうことが非常に大きな目的となります。ブログやSNSに代表される、ユーザー自身がコンテンツを作成するような場合では、フォームの操作がWebサイトの基本操作となります。また、ECサイトではフォームを操作して、購入のアクションを完了してもらうことが最大の目的です。

　一方で、フォームはユーザーに対する負担が非常に大きい部分でもあります。純粋な操作量も多くなりますし、ユーザー自身が何らかの情報を送信するということに対する意識的なハードルもあります。

　ですから、フォームのユーザビリティを高め、ユーザーの離脱を少しでも防ぐことはWebサイトを制作・運営する上で非常に重要な課題となります。

　今回はそんなフォームのユーザビリティを改善する方法、中でもフロントエンドに関する施策を紹介します。

フォームの表記に関するTips

　ここでは表記に関する4つのTipsを紹介します。

　1つ目は、「入力可能な文字種を明示する」ことです。

　「半角（全角）しか受け付けない」など入力値に制限がある場合は、そのことを事前にユーザーに明示するべきです（図1-1）。半角で入力して送信したら「全角で入力してください」というエラーが出たりすると大きなストレスになります。また、その項目が入力必須の場合はその旨を記載しましょう。

　2つ目は、「入力例を表示する」ことです。

　具体例を提示することは、特にWebに不慣れなユーザーが多い場合、入力に対する不安を取り除くことにつながります（図1-1）。

　3つ目は「複数画面に渡る操作は全体のフローを見せる」ことです。

　簡単なフォームであれば必要ありませんが、ECサイトで支払い情報や送付先の入力を別画面で行うような、複数画面に渡るフォームでは、完了までのフローと現在位置をユーザーに伝えるようにしましょう。例えば、Amazon.co.jp（http://www.amazon.co.jp/）では注文完了までの流れを図1-2のように見せています。

　4つ目は「送信ボタンのラベルは、押すとどうなるかが予想できるようにする」ことです。

　送信ボタンのラベルはできるだけ具体性のある記述にしましょう。「○○を××する」のように記述しておくと、そのボタンをクリックした時に何が起こるかが予想できます。

　例えば、ブログの記事を保存するボタンに「編集」というラベルが付けられていたらどうでしょう。「編集」という行為はフォームの内容を変更することであって、送信ボタンをクリックすることではないはずです。

　こういった場合は、新規作成なら「記事を保存する」、既存記事の編集なら「記事を更新する」のようにするのが適当でしょう。開発の都合で作成と更新は同じテンプレートを使い回しがちですが、作成と更新で意味が異なる場合はラベルも変更するべきです。