Webアプリケーションのユーザーインターフェイス[4]
お金を下ろせないATMの画面デザインを考える
「利用者体験における本質的な問題と表層的な問題」
ソシオメディア 上野 学
2005/9/16
お金を 下ろせないATM |
それでは、本質的な問題と表層的な問題を段階的に考える練習として、私が実際に目にした、使いにくいATMの画面デザインを例にしてみましょう。
そのATMは、コンビニに設置されたものでした。夜コンビニに寄ったついでにお金を下ろそうとしてこのATMを使ったのですが、結果的に、私は当初の目的を達成することができませんでした。いったい何が問題だったのでしょうか。そのときの操作のフローは次のようなものでした。
画面1 まずは、「お引きだし」ボタンを選択 |
最初の画面は、このようによくあるATMの初期画面で、取引内容を選ぶためのボタンが並んでいました。選択肢は明快で、自分の目的はお金を下ろすことであったので、「お引き出し」を押しました。
画面2 金額「2万5千円」を入力して「確認」 |
キャッシュカードを挿入し、暗証番号を入力すると、次に表示されたのは引き出し金額を指定する画面でした。これもよくあるように金額を入力するための数字が並んだボタンと、入力した金額が表示される欄、そして次に進むための「確認」ボタンが配置されていました。
ここで私は、下ろしたかった金額である2万5000円を指定するために、「2」「万」「5」「千」「円」の順番でボタンを押し、「2万5千円」という入力内容が表示されているのを確認して、「確認」ボタンを押しました。
画面3 なぜかエラー画面が登場 |
するとこのような画面が表示されました。どうやらエラー画面のようです。メッセージを読むと、現在私の行った操作は無効であって、お金を下ろすことができないということが分かりました。そこで「終了」を押してみると、キャッシュカードが排出され、初期画面に戻ってしまいました。私は何がいけなかったのか分からず、非常に混乱し、とても不快な気分になりました。少なくとも、お金を下ろそうという目的の達成度が0%だったことは確かでした。
さて、このATMの問題はどこにあったのでしょうか。どこかに問題があったことは明らかです。ユーザー(私)は別に特殊な操作をしたつもりはなく、普通にお金を下ろそうとしただけなのに、まったく使い物にならなかったのですから。ただ、私は「画面2」において、小さな字で表示されていた注意書きを見逃していたのです。そこには、現在1万円単位の金額しか引き出せないということが書かれていたのです。それなのに私が2万5千円を指定したために、エラーになってしまったわけです。
もしあなたがこのATMを改良するとしたら、どうするでしょう。仮に、技術的な制約やセキュリティ上のトレードオフなどを考慮しないとしたら、ユーザーにとって理想的なインタラクションはどのようなものになるでしょうか。
本質的な問題と解決策 |
まず、今回の本質的な問題は何でしょうか。システム側から見た場合、エラーの原因は、私が無効な数値を入力したことです。ユーザー側から見た場合、エラーの原因は、1万円単位でしか下ろせないということが分かりにくかったことです。では本質的な問題とは、注意書きの文字サイズが小さかったことでしょうか? もちろん違います。それはかなり表層的な問題です。では、1万円単位でしか下ろせないのに、「千」のボタン(つまりエラーを誘発するボタン)が存在していたことでしょうか? いえ、それも表層的な問題です。なぜなら、「千」のボタンが存在しなければ、確かにエラーは防げたかもしれません。しかしそれでは、私がやりたかった「2万5000円を下ろす」という行為を実現できないからです。
つまり最も本質的な問題は、「1万円単位でしか下ろせない」ということ自体です。千円単位で下ろせるときもあるのに、特定の状況においては1万円単位でしか下ろせないということは、システム側の事情であって、そのことについての妥当な理由はユーザーに示されていません。1万円単位でしか下ろせないのであれば、2万5000円を下ろしたいというユーザーの目的はどうやっても達成されないのです。だから、この本質的な問題の解決方法は、単純に、次のようにいえます。
・千円単位でも下ろせるようにする。 |
これさえ可能であれば、そのほかの表層的な問題はそもそも発生しないのです。システムの制作者は、まずこれが実現できないか、検討するべきです。そしてそれがさまざまな要因からどうしても無理であると判断された場合に初めて、どうすればユーザーにとっての問題を最小限にできるかを検討することになります。そのためには、表層的な問題を理解し、そしてその中でもより本質的な問題がどこにあるのかを見極める必要があります。
2/3 |
INDEX |
||
Webアプリケーションのユーザーインターフェイス(4) | ||
Page1<デザインの理想はユーザーの目的や状況によって変化する/本質的な問題と表層的な問題> | ||
Page2<お金を下ろせないATM/本質的な問題と解決策> | ||
Page3<表層的な問題と解決策/経験則からその応用へ> |
関連記事 |
- 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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|