Webアプリケーションのユーザーインターフェイス[8]
ユーザーが間違えても間違えなくても
エラーは回避せよ
「経験則その4:エラーの回避」
ソシオメディア 上野 学
2006/3/15
ミステークとスリップ |
間違った操作によるエラーには、2つの種類があるといわれています。1つは「ミステーク(誤解)」によるもの。もう1つは「スリップ(うっかり)」によるものです。
前者のミステークは、ユーザーが自分のやるべきことを誤解していて、そもそも操作の意図が間違っているときに起こります。ユーザーが「○○という目的を達成するためには△△という操作をすればいいんだ」という意図形成を行う段階で問題が発生するのです。例えば、銀行のWebサイトで「インターネットバンキング」を利用しようとしたとき、なぜか画面上で目立っている「マイレージクラブインターネットサービス」をクリックすればよいのだと思ってしまって、そこから一生懸命ログインしようとする、といったことです。途中までは作業がうまく進んでいるようにみえますが、最終的な目的は達成されません。正しく操作したのに目的が達成されないということで、ユーザーのストレスは大きく、また作業の最終段階まで問題が見えないのでエラーに気付くのが遅れ、後戻りが大きくなります。
図1 ミステーク「インターネットバンキングはここからログインするんだな」 |
一方、後者のスリップは、やるべきことを理解しているにもかかわらず、うっかりやるつもりのなかった操作をしてしまうエラーです。例えば、ダイアログのコマンドボタンで「いいえ」を押そうと思ったのについ隣の「はい」を押してしまった、という状況がこれに当てはまります。このエラーもユーザーは最終的な目的を達成することができませんが、自分がミスをしたことにすぐに気付くため、ネガティブインパクトは局所的で、比較的後戻りが少なくて済みます。ただし消去するつもりのないデータをうっかり消してしまうといったことが起きると、取り返しがつかず、ミスの小ささと失ったものの大きさのギャップにユーザーは混乱します。
図2 スリップ「あ、急いでいて『はい』を押してしまった」 |
Fail-Safe と Fool-Proof |
さて、「ユーザーは間違える」ということを前提とした場合に、エラーへの対処方法として次の2つが考えられます。
・Fail-Safe:操作を間違えても問題を解消できるようにする。
・Fool-Proof:誰でも正しく操作できるようにする。
前者の「Fail-Safe」という対処方法は、連載第6回の「『戻る』で入力データが消えてしまうフォームはいらない」の中で「寛容性」という言葉で説明しました。ここでは、主に「Fool-Proof」ということについて説明していきましょう(ただし「Fool-Proof」という言葉はユーザーをばかにしたようであまりよくないですね)。誰でも正しく操作できれば、エラーは発生せずに済みます。誰でも正しく操作できるようにするためには、間違った操作をしにくくすればよいのです。
2/5 |
INDEX |
||
Webアプリケーションのユーザーインターフェイス(8) | ||
Page1<経験則その4:エラーの回避/ユーザーは間違える/エラーメッセージを分かりやすく> | ||
Page2<ミステークとスリップ/Fail-Safe と Fool-Proof/現在のフォーカスについての可視性とフィードバック)/どこからでも利用できる/デメリット(不十分なインタラクション表現/やりとりが煩わしい/見た目に関する一貫性の欠如)> | ||
Page3<そもそもエラーが起きないようにする/画面上のすべての操作可能な要素に生産的な意味を持たせる/制限コントロールを使う/処理結果の可視性とフィードバック/明快なフィードバックを迅速に返す/人は同時に1つのものにしか意識を集中できない、を考える/> | ||
Page4<ユーザーは間違えない/無効な文字を入力できないようにする/有効値の範囲を広げる/有効なデフォルト値を持たせる> | ||
Page5<有効な値がそろうまで先に進めないようにする/作業が前に進んでいるように見せる/エラーではなくガイドを示す> |
関連記事 |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|