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

ユーザーが間違えても間違えなくても
エラーは回避せよ
「経験則その4：エラーの回避」

ソシオメディア　上野 学
2006/3/15

ユーザーは間違えない

　ここまで、「ユーザーは間違える」ということを前提に、どうすれば間違えにくいユーザーインターフェイスが作れるかを見てきました。それでも、エラーを完全になくすことは難しいでしょう。例えば電話番号を入力するテキストボックスがあって、「半角数字、ハイフンなし」で入力することが期待されているとします。開発者は正しく入力してもらうために、テキストボックスのすぐ近くに「半角数字で入力してください。ハイフンは入れないでください」といった注意書きをするでしょう。しかしユーザーがそのとおりの書式で入力してくれる保証はどこにもありません。テキストボックスは非制限コントロールであるため、どのような値が入力されるかはユーザーに委ねられているからです。

図6 注意書きをしても正しく守ってくれる保証はない

　コンピュータは融通の利かない機械ですから、あらかじめプログラムとして設計された範囲でしか働いてくれません。特に手続き型にプログラムが作られている場合、ユーザーとシステムの対話は、あらかじめ決められたセリフをいい合っているだけの芝居のようなものです。プログラムが構造化されて、やがてオブジェクト指向になると、対話の流れは無限に分岐するようになり、ユーザーは自由な発想の下で自分なりの使い方ができるようになります。しかしその分、開発者はすべての利用状況をあらかじめ推測することが難しくなります。

　システムは通常、「このシステムはこのように使う」という基本的な成功シナリオを基に設計されますが、ユーザーがそこから外れる使い方をしたときにエラーが発生します。これは開発者にとってみれば、「せっかくきちんと動くプログラムを作ったのに、ユーザーが適切な手順で利用してくれない」という状況です。開発者はあらかじめそういった失敗シナリオを想定し、さまざまなエラーメッセージを用意します。「エラー：このテキストボックスには半角数字を入力してください。ハイフンは入れないでください」といったものです。

図7　開発者が用意するエラーメッセージ

　開発者がまったく想定していなかった状況が発生したときは例外となりますが、これは一種のバグととらえることができます。バグが発見されるとそれは開発者の責任とされ、プログラムの修正が求められます。しかしユーザーが全角数字を入力したために「半角で入力してください」といったエラーメッセージが表示されても、それはユーザーの責任とされてしまい、再入力を促されるだけです。

　ここで考えていただきたいのは、そもそもエラーとは何かということです。電話番号のテキストボックスの例でいえば、エラーが起きるのは「半角数字、ハイフンなしで入力することになっているのに、ユーザーがそれ以外の書式で入力した」ことが原因です。しかし「半角数字、ハイフンなし」という制約は開発者が一方的に決めたことであり、ユーザーにとっては恣意的なものです。

　開発者がそういった制約を設けるのは、データベースの整合性を保ち、文字列処理のアルゴリズムを単純化してプログラムを簡潔にするためです。しかしその結果としてユーザーのタスクが中断され、労力が無駄になり、気を付けなければならないことが増えてストレスが高まるとすれば、それは妥当な判断といえるでしょうか。もちろん複雑なシステムを構築するためには実装上のさまざまな仕様を総合的な観点で判断し、ある部分には妥協せざるを得ないでしょう。それでも、「決められた作業を正確に繰り返す」といった人の苦手な部分を補うのはコンピュータの仕事です。ユーザーは自分の目的を達成するために積極的に対話しようとしています。わざと間違った操作をするユーザーはいません。エラーが起きるのは、実はユーザーが操作ミスをしたときではなく、システムがユーザーの意図を正しく理解できなかったときなのです。問題の原因はシステム側にあります。このディスコミュニケーションを解決するのは、開発者の責任なのです。

　「ユーザーは間違えない」ということを前提にシステムをデザインすることは、開発者にとっての大きな挑戦です。それはエラーメッセージの廃絶を目指すことであり、プログラムをクラッシュから防ぐというもう1つの責任を果たすためのハードルがさらに高くなることを意味します。しかしこれはとても価値のある挑戦でしょう。極度な専門技能を要するシステム開発の世界において、実質的な意味でユーザーのことを守ることができるのは開発者だけだからです。

　ユーザーの意図をくみ取って、システムがそれに合わせて振る舞うようにするには、細かな気遣いが必要になるでしょう。例えば、次に挙げるような工夫から始めてみてはいかがでしょうか。

・無効な文字を入力できないようにする。

　テキストボックスは非制限コントロールですから、ユーザーから見れば、どんな文字でも入れてよいところであるべきです。もし「1から12までのいずれかの数字しか入れてはいけない」「存在する都道府県名のいずれかしか入れてはいけない」といった限定的な制約があるのであれば、ラジオボタンやドロップダウンメニューといった制限コントロールを使ってエラーをなくすべきです。しかし多くの場合は「半角数字しか入れてはいけない」「全角しか入れてはいけない」といった広い制約が設けられ、開発者は注意書きでそのことをユーザーに示そうとします。しかしその注意書きをユーザーが見落としたり、あるいは理解できなければ、ユーザーは無効な文字列を入力してしまいます。

　入力された文字が無効なものであるのなら、それをユーザーに知らせるのはその文字が入力された瞬間がベストです。例えば半角数字だけしか入れるべきではないテキストボックスでユーザーがハイフンをタイプしたら、その文字がテキストボックスに「入らない」ようにするべきです。もし日本語の漢字変換などの事情で、1文字単位でこういった処理ができないとしても、テキストボックスに文字が入った直後に無効な部分が消去されるようにすればよいでしょう。ユーザーは現在フォーカスがあるテキストボックスを見て、自分がタイプした文字がそこに表れなければ、その文字はいま入力すべきではないということを学習できます。もちろん「何をタイプしても入力されない」とユーザーが感じないように、文脈から入力されるべき文字種が推測できなければいけませんが。

・有効値の範囲を広げる。

　上記の方法はエラーを防ぐための一般的な考え方ですが、ユーザーからすれば、可能な操作が一方的に制限されるという意味であまり気持ちのよいものではありません。理想は、ユーザーの動きを制限するのではなく、システム側の動きに柔軟性を持たせることです。そのためには、有効値の範囲を広げて、ユーザーができるだけ好きな書式で入力できるようにします。

　簡単なところでは、「半角を全角に」「ひらがなをカタカナに」「ハイフンやスペースなどを消去」といった文字列処理をシステム側で行い、ユーザーがそのような制約を気にしなくても済むようにします。よく電話番号などのテキストボックスに全角数字で入力すると、「電話番号は半角数字で入力してください」といったエラーメッセージが表示されますが、どうすればよいのかをシステム側が知っているのなら、それはシステム側が行うべきなのです。

・有効なデフォルト値を持たせる。

　入力が必須とされるコントロールには、デフォルト値として最初から有効な値を入れておくこともエラーを回避するうえでは重要です。特に制限コントロールでは、選択肢の中でユーザーが選ぶ可能性の最も高いものをデフォルト値としておくとよいでしょう。そうすれば、もしユーザーがその入力項目を見落としてしまったとしてもエラーにならずに済みます。

　ただし、ユーザーが見落としたことで本来意図しない入力内容になってしまう可能性も考慮する必要があります。目的を達成するためにユーザー自身によって確実に判断してもらわないと後でユーザー側にリスクが発生するような入力項目では、安易なデフォルト値は設けない方がよいでしょう。例えば、ショッピングサイトのユーザー登録のフォームなどで「今後メールニュースで最新情報を受け取る」というチェックボックスにデフォルトでチェックが入っていたり、支払い方法を選ぶラジオボタンで「提携クレジットカードで支払う」といった有料のオプションがデフォルトで選択されていたりすると、後になってユーザーが困る恐れがあります。

---

4/5

INDEX
Webアプリケーションのユーザーインターフェイス（8）
	Page1＜経験則その4：エラーの回避／ユーザーは間違える／エラーメッセージを分かりやすく＞
	Page2＜ミステークとスリップ／Fail-Safe と Fool-Proof／現在のフォーカスについての可視性とフィードバック）／どこからでも利用できる／デメリット（不十分なインタラクション表現／やりとりが煩わしい／見た目に関する一貫性の欠如）＞
	Page3＜そもそもエラーが起きないようにする／画面上のすべての操作可能な要素に生産的な意味を持たせる／制限コントロールを使う／処理結果の可視性とフィードバック／明快なフィードバックを迅速に返す／人は同時に1つのものにしか意識を集中できない、を考える／＞
	Page4＜ユーザーは間違えない／無効な文字を入力できないようにする／有効値の範囲を広げる／有効なデフォルト値を持たせる＞
	Page5＜有効な値がそろうまで先に進めないようにする／作業が前に進んでいるように見せる／エラーではなくガイドを示す＞

関連記事

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