Webアプリケーションのユーザーインターフェイス[4]

お金を下ろせないATMの画面デザインを考える
「利用者体験における本質的な問題と表層的な問題」

ソシオメディア　上野 学
2005/9/16

表層的な問題と 　解決策

　このATMのユーザーインターフェイスとインタラクションでは、表層的な問題もたくさんあります。まず前述のとおり、1万円単位でしか下ろせないということがユーザーにきちんと伝わっていません。どうすればもっと伝わりやすくなるでしょうか。次のようなことが考えられます。

・画面2の注意書きを大きな文字にする。

　

　特に「1万円単位」というところを強調して、ユーザーの目に留まりやすくします。ただし、タスクに集中しているユーザーは、画面周辺の注意書きのたぐいはあまり読まないので、効果はそれほど期待できません。文字による注意書きや説明によって正しい操作方法を伝えるよりも、ユーザーインターフェイス要素のデザインによって現在行うべき妥当な操作が示唆されているべきです。

・画面1の「引き出し」ボタンに部分に、「1万円単位のみ」といった補足の文言を表示する。

　そうすれば、千円単位で下ろせないのなら利用する意味がないという状況のユーザーが、画面2まで進んでしまってその労力がすべて無駄になるのを防ぐことができます。

　最後のエラー画面にも問題があります。エラーメッセージでは、エラーの状況と考えられる原因を説明し、次にユーザーが何をすればよいか、どうすれば同じエラーを起こさずに済むのかを分かりやすく伝えることが望まれます。

　今回のエラー画面では、なぜ操作が受け付けられなかったのかが説明されていないため、もしユーザーがやり直しても、同じ問題が発生するでしょう。さらに、このエラー画面には「終了」ボタンしかなく、これを押すと一から操作をやり直さなければならないため、非常に大きな労力をユーザーに負担させることになってしまいます。こういった問題を解決するためには、次のような方法が考えられます。

・画面3では、「1万円単位でしか下ろせないのに、あなたは千円単位の金額を指定したため、操作を受け付けられなかった」ということが分かるようなメッセージを表示する。

　そうすれば、ユーザーは問題の原因が分かり、もう一度やり直して1万円単位の金額を下ろすか、利用を中止するか、判断できます。

・画面3から画面2に戻れるようにする。

　最初からやり直すのではなく、金額だけを再度指定できるように、前の画面に戻るボタンがあるべきです。

・画面3で金額を再入力できるようにする。

　「引き出し金額の指定」画面に戻るよりも、このエラー画面ですぐに金額の再入力ができるようになっていた方が、操作が少なくて済みます。これは別のいい方をすれば、エラー画面を表示するのではなく、入力画面の中にエラーメッセージを表示するということです。

　しかしそもそも、エラーとは何でしょうか。無効な値が入力されたためにエラーメッセージが表示されるということは、開発者が事前にそのような状況を想定していたことを意味しています。開発者は、引き出せる金額が1万円単位に限定されるという状況でユーザーが千円単位の入力をしてしまう可能性を認識し、その際に無効なリクエストがメインシステムに送られないよう、エラーメッセージを出すようにプログラムしておいたのです。しかしユーザーにとっては、「下ろしたい金額を指定する」という正当な操作をしたにすぎず、その行為は間違いでもなんでもないのです。

　このように、ユーザーと開発者の間で操作の有効性に関する意識のギャップが大きいと、ユーザーはそのシステムをうまく使うことができません。無効な値が入力される可能性を事前に知っていたのであれば、開発者は、そういった操作がそもそもできないようなユーザーインターフェイスを用意するべきです。ボタンが見えていて、それが押せるということは、その操作は有効であるという意味になってしまいます。後から数値が無効であるといわれても、ユーザーにはそれを事前に回避するすべが分かりません。この問題を解決するためには、次のようなことが望まれます。

・画面2で「千」のボタンをなくす（あるいはディスエーブルにする）。

　そうすればユーザーは無効な数値を入力しようがなくなります。

・あるいは、画面2で千円単位の値が入力された場合に「確認」ボタンをディスエーブルにする。

　入力値が千円単位になった瞬間に「確認」ボタンをディスエーブルにすれば、ユーザーは自分の取った行動と値の有効性にどのような関係があるのかを学習することができます。千円単位の値が入力されたときだけでなく、今回の金額の制約として注意書きがなされている50万円という上限を超えた場合など、いくつかの条件で値の有効性が判断される場合にはこの方法が良いでしょう。

　その一方で、有効な値の範囲を広げるという方向でも制作側は努力するべきです。ユーザーにとってその操作が正当なものである以上、システム側の判定基準でエラーと見なすのではなく、ユーザーの期待との間を埋めるエージェントとして機能させるのです。例えば設計の都合上「千」ボタンをディスエーブルにできないような場合、エラーメッセージを表示する代わりに次のような表現を取れないか検討します。

・画面2で千円単位の金額が指定された場合は、それをエラーとしてユーザーに伝えるのではなく、現在1万円単位でしか下ろせないことを伝えると同時に、「2万円」「3万円」「そのほかの金額」といった選択肢を出す。

　このように、ユーザーの求める値とシステムが受容できる有効値の間で折衝すると、もともと求めていた結果とは違うものの、選択肢はユーザーの求める結果に近いものに限定されているため、かえって適切な操作をガイドされているような良い操作感になる可能性があります。

　ユーザーをガイドするかたちで入力値を有効なものに限定する方法を取る場合は、ユーザーの自由意思による入力操作と併用する方がよいでしょう。完全に限定的な選択肢しかない場合、さまざまなユーザーの目的を満たせなくなる恐れが強く、またその限定範囲が事前に分からないため、そのシステムで何をどこまでできるのかが伝わりにくくなるからです。例えば実在するあるATMでは、引き出し金額を指定する際に、「1万円」「2万円」「3万円」といった「一般的によく下ろされる金額」のボタンが提示され、多くのユーザーにとっては非常に簡単な操作で目的を達成することができるようになっています。当然、任意の金額を指定することもできます。

　ユーザーの行動特性から有効性の高い操作をガイドするといった考え方をさらに進めると、ユーザーの過去の操作履歴から、前回下ろした金額や、これまでで最も多く下ろした金額をすぐに指定できるように選択肢をパーソナライズすることも考えられます。最初に触れたように、ユーザーにとって最も利便性の高いユーザーインターフェイスは、ユーザーの目的や状況によって異なるため、一概に最も良い形はこうであるということができません。そういった個々の状況を考慮して最適な操作性を作り出すことこそが、ユーザーインターフェイスやインタラクションデザインの役割であるといえます。

経験則からその応用へ

　今回は実践的なノウハウの足掛かりとして、制作者が注意しなければならない、本質的な問題と表層的な問題のとらえ方について説明しました。次回からは、ユーザーインターフェイスやインタラクションデザインに関する多くの経験則の中から、具体例やティップスも含めて、ウェブアプリケーションのユーザビリティを高めるデザインテクニックを紹介していきます。

3/3

次回もお楽しみに

INDEX
Webアプリケーションのユーザーインターフェイス（4）
	Page1＜デザインの理想はユーザーの目的や状況によって変化する／本質的な問題と表層的な問題＞
	Page2＜お金を下ろせないATM／本質的な問題と解決策＞
	Page3＜表層的な問題と解決策／経験則からその応用へ＞

関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）