
ユーザビリティのヒント(1)
多くのユーザーは
一度に1本しかジュースを買わない
「自動販売機での不要な動作から考える」
ソシオメディア 上野 学
2006/6/2
| Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。(編集部) |
- - PR -
複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダウン、今回からのTips編はボトムアップとして、デザイン活動に役立てていただければと思います。
| 不必要な情報をユーザーから求めない |
フォームへの入力は、ユーザーがシステムに対して積極的にアクションを起こしている場面です。それと同時に、多くのユーザーにとってストレスの大きい行為でもあります。そのため、フォームではできるだけ入力項目を減らして、ユーザーが速やかに作業を完了できるようにすることが大切です。一連の作業として入力しなければならない項目数が多いほど入力ミスが発生する恐れが増えますし、入力ミスが起きたときのエラーを解消するための作業も複雑になってしまいます。
例えば会員登録のフォームにおいて、登録内容とは直接関係のないアンケート項目などが多く提示される場合がありますが、これはユーザーにとって「会員登録する」という目的達成までのハードルが高くなることを意味します。サービス利用の主体はユーザーであって、ここぞとばかりに個人情報を収集しようとする運営者の姿勢は歓迎されません。仮にそのアンケートの目的として「ユーザーの属性や趣向を手掛かりにサービスを改善する」というものがあったとしても、ユーザーにとって妥当性が感じられない項目は大きなストレスになります。
また、Eメールアドレスの入力フィールドの次に、「確認のためもう一度入力してください」というラベルとともにもう1つ入力フィールドが用意されている場合がありますが、このインタラクションの有効性にも疑問があります。
![]() |
| 図1 Eメールを2度入力させることの有効性はどれほどか |
これはEメールアドレスを正確に入力させることを目的としていますが、ユーザーの行動を観察すると、非常に多くの場合、ユーザーは1つ目に入力した内容をコピーして2つ目にペーストしています。これでは単に手間が増えているだけ。
また、ほとんどの場合システムは、2つの値が一致しているかどうかをバリデートするだけで、そのアドレスが有効かどうかを調べているわけではありません。もし1つ目のフィールドに正しく入力できても、2つ目のフィールドで間違えればエラーになってしまいますし、逆の場合もエラーになります。人は正確な作業を繰り返すことが苦手ですから、かえってエラーを増やしていることになります。仮にユーザーが90%の確率で自分のアドレスを正しく入力できるとした場合、
・フィールドが1つの場合、90%の確率で正しく登録できる
・フィールドが2つの場合、81%の確率で正しく登録できる
という計算ができ、フィールドを増やすことでかえって「登録する」という目的を達成するハードルが高くなってしまうといえるのです。
このような理屈を述べると、人によっては「ユーザーの手間が増えたりエラーが増えたりしたとしても、正しいEメールアドレスを確実に取得することの方が大切なのだ」というかもしれません。しかし、もしユーザーが間違った同じアドレスを(コピー&ペーストするなどして)両方に入力してしまった場合には、エラーにならないのです。
ユーザーのタイプミスを絶対に防ぐことができない以上、デザイナーは、ユーザーにとって正しいアドレスを一度だけ入力することの方が2度続けて入力するよりもよほど簡単であるということに着目するべきです。そして少しでもタイプミスを減らすために、「間違いのないよう特に注意して入力してください」といった注意書きを入力フィールドのそばに加えたり、サンクス画面において「X時間以内に完了通知のEメールが届かない場合には○○○に連絡してください」といった注意書きをしたりしておきます。その方が、多くのユーザーにとっての優しいシステムとなるはずです。
![]() |
| 図2 タイプミスを防ぐための試み |
![]() |
| 図3 タイプミスがあった場合のサポートの試み |
| 1/6 |
|
INDEX |
||
| ユーザビリティのヒント(1) | ||
| Page1<不必要な情報をユーザーから求めない> | ||
| Page2<エッジケースを過大視しない> | ||
| Page3<ユーザーインターフェイスにゲームを持ち込まない> | ||
| Page4<複雑なマウス操作を要求しない> | ||
| Page5<マウスとキーボードのコンビネーションを減らす> | ||
| Page6<スプリング式の操作をできるだけ排除する> | ||
ユーザビリティのヒント バックナンバー
- 第1回 多くのユーザーは一度に1本しかジュースを買わない
- 第2回 「メールは送信されました」伝えるのなら、控えめに
- 第3回 虫眼鏡のアイコンは『検索』か『拡大』か?
- 最終回 「OK」と「キャンセル」、どちらが有効か
関連記事
Webアプリケーションのユーザーインターフェイス
従来のデスクトップアプリケーションでのGUIやインタラクションの原則から、Webアプリケーションのデザインを考えよう
- 第1回 ユーザーにとって “インターフェイス”が製品そのもの
- 第2回 ユーザーが選びやすいフォームのカタチを考えよう
- 第3回 UCD=利用者中心設計のプロセスとは?
- 第4回 お金を下ろせないATMの画面デザインを考える
- 第5回 入力情報を預かる責任を果たせる画面デザインとは?
- 第6回 「戻る」で入力データが消えてしまうフォームはいらない
- 第7回 すでに入り口にいるのに、ホームに導くボタンは親切か
- 第8回 ユーザーが間違えても間違えずともエラーは回避せよ
- 最終回 売りたいなら、“販売”でなく“購入”ツールを準備せよ
- 5分で絶対に分かる、「Webマーケティング」とは (2010/7/27)
その概要や、「Webマーケター」の役割、Webマーケティングを行う際の流れ、歴史、ツール、PCとケータイの違いなどを5分で解説 - Windows 7でも「おばかアプリ選手権」は大爆笑でした (2010/7/26)
ARや3D、脳波センサ、Wiiボード、マルチタッチなど、今回も個性的なアプリがおばか度を競いあった。極め付けは貧乏ゆすりセンサで高橋名人が連射対決!? - Xcode/Interface BuilderでUI設計+イベント処理 (2010/7/23)
BMI計算アプリをサンプルに、1つのiPhoneアプリが完成する過程を、デザインとコーディングの仕方を交えて解説します - Flashで怒涛のごときイベント処理を捌きまくる3技 (2010/7/22)
インタラクティブコンテンツ制作に必須の「イベント」の仕組みを解説し、具体的な高速化の技をサンプルを交えながら3つ紹介
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報











