第17回 フォームのユーザビリティの重要性 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

タイトル画像、Webユーザビリティ―信頼を生む“使いやすさ”のデザイン

第17回 フォームのユーザビリティの重要性


Webサイトの通常の閲覧部分は、クリックなどの簡単な操作が中心ですが、登録や注文のフォームになると、入力、選択などの面倒な操作が多くなり、ミスも起こりがちです。このため、Webサイトを訪れて商品 やサービスに興味を持ったユーザーが、いざ購入という段階で断念してしまうケースが多くみられます。フォームはユーザーの最終目的達成のための重要な部分ですから、きめ細かな配慮を心がけるようにしましょう。

(解説:石田優子)

著者プロフィール用イラスト [プロフィール]
いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。
(イラスト:MIKAさん)
クロッシングフィンガーズ:http://www.crossingfingers.org/
KeiYu HelpLab:http://www.keiyu.com/


フォームの項目はできるだけ減らす


PC操作に慣れているWeb業界の人たちは忘れがちな場合が多いですが、一般のユーザーにとって、入力や選択といった操作は手間のかかるものです。自分のメールアドレスを覚えていないユーザーが多く、メールアドレスの入力ですら、時間がかかります。さらに姓名や連絡先の入力など、ユーザーにとってはわずらわしい作業の連続です。

このため、フォームが表示されると、それだけで引き返してしまうユーザーもいます。ましてや、数ページにわたるフォームなどでは、最初のページから完了までの到達率が10%に満たないケースもあります。

また、たいていのフォームには入力必須と任意の項目がありますが、任意項目は本当に必要でしょうか? 実店舗で商品を買って配達を頼む場合に聞かれるのは、住所、氏名、電話番号くらいです。このような配達に必要な情報は、オンラインの注文フォームでも必要でしょう。しかし、性別、生年月日なども入力しなければならないケースもあります。さらに会員登録や資料請求フォームとなると、趣味、既婚/未婚、職業といった情報まで根ほり葉ほり聞かれることもあります。

最近は個人情報漏えいが大きな問題になっていることもあり、個人情報を必要以上に聞かれるとユーザーに警戒心を持たれます。フォームの本来の目的に関係のないアンケート項目は、できれば入れないようにしてください。フォームの項目を1つでも減らせば、それだけユーザーの完了率が高まるのです。

ユーザーが入力しやすく、ミスしにくい工夫を


住所を市町村名、番地、建物名に分けて全角20文字以内で入力といったように細かな入力制限があるフォームをよく目にしますが、これは非常にやっかいなものです。

まず、全角/半角という制限は多くのユーザーを戸惑わせます。特に住所の場合は困りものです。PCを使い慣れていて数字とハイフンをテンキーで半角入力する癖がついているユーザーは、つい間違って半角入力してエラーを起こします。

一方、初心者には全角と半角という言葉の意味がわからないユーザーもいます。私の知る例では、全角とは英語の大文字のことだと思い込んでいた人もいました。

また、入力文字数の制限も、「姓(全角5文字以内)」のように記載するのはあまり意味がない上に、全角の意味がわからない人がとまどいます。長い建物名の場合など、文字数を超えて入力できない場合もあります。

全角/半角はシステム側でどちらで入力されても処理できるようにすれば済む問題ですし、文字入力数は最大全角126文字ぐらいに項目の長さを設定しておければ、入力制限の表記などしなくても対応できます。

DHCサイト、ユーザー登録ページ
DHCのWebサイト内にある入力フォーム。郵便番号を入力した後、[郵便番号を入力してクリック]ボタンを押すと、都道府県と市区郡・町村がそれぞれの欄に自動入力される。続きの住所は下の入力欄に全角でも半角でもまとめて入力できるため、入力操作が楽でミスを起こしにくい

これらの制限は、バックエンドのシステムの仕様書段階で、ユーザーの利便性を考えていれば防げる問題ですので、表面だけでなく、その背後の部分から見直しを考えてください。また、入力項目には具体的な例を添えると、ユーザーが入力に迷いにくくなります。

エラー表示で画面を切り替えない、エラー箇所を明確にする


フォームに入力して最後にボタンをクリックすると、エラー画面に切り替わり、エラー項目一覧が表示されるフォームがあります。

ユーザーはエラー内容を覚えた上で再度入力画面に戻って修正しなければなりません。さらに悪いシステムになると、最初にエラーをひとつだけ表示し、ユーザーが前の画面に戻ってその箇所を修正してから、再度ボタンをクリックすると、次に見つかったエラーを表示してまた訂正することを要求するフォームもあります。

フォームの入力エラー例
入力後に、このようなエラー画面に切り替わり、エラー内容がよくわからないメッセージが表示されると、ユーザーが操作を続ける気持ちをなくす

この場合、エラー画面と入力画面を行いったり来たりの繰り返しが延々と続きます。エラー画面に切り替えず、入力した画面にエラー表示することでユーザーの負担を減らすようにしましょう。

また、同一画面でも、画面の先頭にエラーをまとめて表示する方式が多数いのですが、入力するためにフォームに下スクロールするとエラー表示が見えなくなり、修正内容がわからなくなります。

画面上部と問題箇所の両方に目立つようにエラーを表示し、さらに、「姓名がエラーです」といったあいまいな表示でなく、「姓名が漢字で入力されていません」というように、なぜエラーになっているのか具体的に表示するのが親切です。操作ミスをしたという不安感やイライラを起こさせることがないよう、フォームには十分配慮してください。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在