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

2008年9月16日(火)
三宅 涼

フォームの重要性

 今回は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つ目は「送信ボタンのラベルは、押すとどうなるかが予想できるようにする」ことです。

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

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

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

1978年生まれ、京都出身。ウノウ株式会社などを経て、現在はフリーランスとして活動中。「選択も集中もせず」を信条に、サーバ構築・アプリ開発からデザインまで一人で日々奮闘中。ブログ:Lism.in * blog(http://d.hatena.ne.jp/studio-m/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています