エラー (ユーザーのつまずき) をデザインで解決する
ウェブサイトの利用シーンでは、様々な局面でエラー (ユーザーのつまずき) が生じています。ユーザビリティテストをしていると、エラーに直面したテスター (ユーザー) はまるで自身に責があるような言動を見せることが多いのですが、実はユーザー側ではなく、デザイン側に問題があるケースが大半と言えます。
この記事では、エラーの種類を理解したうえで、どうデザインによって解決するかを、見渡してみたいと思います。
エラーの種類
D.A.ノーマン氏は、著書「The Design of Everyday Things」(日本語訳は「誰のためのデザイン?)」の中で、エラーには「スリップ (slip)」と「ミステーク (mistake)」の二種類があると述べています。
スリップ (slip)
A slip occurs when a person intends to do one action and ends up doing something else. With a slip, the action performed is not the same as the action that was intended.
出典 : 「The Design of Everyday Things: Revised and Expanded Edition」P.171 ("5. Human Error? No, Bad Design")
スリップとは、やること (やりたいこと/やるべきこと) をユーザーが正しく認識していても、実際にはその通りにできずに、うまくいかないこと、と言えます。ウェブサイトの利用におけるスリップの例としては、以下が挙げられるでしょう。
- 文字入力時のミスタイプ (TYPO)。
- 押したいリンクやボタンを正確に押せない。隣接した違うリンク/ボタンを押してしまう。
- フォーム入力で次のステップに進もうとして、目に付いたキャンセルボタンをつい押してしまう。
- 誕生日ギフトを贈ろうとネットショップで申し込みをしていたら、配達日を入れるべきところ、文脈の流れでうっかり誕生日を入れてしまう。
- タッチインターフェースで横スクロールしようとしたら、ジェスチャ (スワイプ) の起点が画面の左端すぎて、前に開いていたページに戻ってしまう。
- タッチインターフェースでウェブページを下方向にスクロールしようとしたら、ジェスチャ (スワイプ) の起点がインラインフレーム内に当たってしまい「つるつる滑る」状態になる。
ミステーク (mistake)
A mistake occurs when the wrong goal is established or the wrong plan is formed. From that point on, even if the actions are executed properly they are part of the error, because the actions themselves are inappropriate — they are part of the wrong plan. With a mistake, the action that is performed matches the plan: it is the plan that is wrong.
出典 : 「The Design of Everyday Things: Revised and Expanded Edition」P.171 ("5. Human Error? No, Bad Design")
ミステークとは、やること (やりたいこと/やるべきこと) をユーザーが誤って認識することによって、うまくいかないこと、と言えます。ウェブサイトの利用におけるミステークの例としては、以下が挙げられるでしょう。
- フォーム入力時のフォーマットの認識違い。電話番号やクレジットカード番号の入力でハイフンを入れたらエラーになる、振り仮名を (カタカナでなく) ひらがなで入力したらエラーになる、など。
- リンクでない箇所をリンクだと思ってクリック (タップ) する。
- (極度に「ミニマル」なフラットデザインなどで) リンク/ボタンに気づかない。
- ショートカットキー (キーコマンドの組み合わせ) を間違えて覚えていて、意図通りのことができない。
- 手続きの進めかた (操作手順) を誤解 (勘違い) していて、意図通りのことができない。
エラーの防止策
ひとくちにエラーの防止と言っても、スリップとミステークの違いを意識することによって、適切なアプローチを採ることができるでしょう。
スリップを防ぐには、やることを正しく認識しているユーザーが、うっかり誤操作しないようにすることが大切です。クリック (タップ) 領域の十分な確保、CTA (Call To Action : 行動喚起) の適切な提示、文脈における紛らわしさの排除、入力支援 (Cookie による入力内容の保持、オートコンプリートなど)、ジェスチャの競合の回避...といったことが考えられるでしょう。ユーザーの注意力を散漫にしないデザイン上の配慮も必要です。
ミステークを防ぐには、ユーザーがやることを正しく認識できるようにすることが大切です。適切な情報提示はもとより、ユーザーの慣習 (メンタルモデル) に沿った UI の採用、学習支援 (起動時のガイド、コンテキスチュアルなヘルプ、正しい理解や操作を誘引するアニメーション、など)...といったことが考えられるでしょう。また、ユーザーからのアクション (たとえば情報の入力) について、多少の個人差を許容しシステム側で吸収処理する配慮もあるとよいと思います。
フールプルーフとフェイルセーフ
エラー対策の議論では、よく「フールプルーフ (foolproof)」「フェイルセーフ (fail-safe)」という言葉も聞かれます。前者はエラーを未然に防止すること (「ポカヨケ (poka-yoke)」とも言われます)、後者はエラーが発生しても安全に回復すること、を意味します。
ウェブサイトのデザインにおいては、まずはフールプルーフの考えかたに則り、スリップやミステークを生じにくくすること、また多少のスリップやミステークがあってもエラーに至らないようにすること (インタラクションに「遊び」を設けたり、誤入力をシステム側で吸収したりなど)、が大切です。
そのうえで、フェイルセーフも同様に重視します。ウェブサイトにおいては、フォームの入力不備、検索や絞り込みにおけるゼロ件結果表示、トランザクションの失敗、リンク切れ (Not Found/404エラー) などがフェイルセーフデザインの対象になりますが、いずれの場合もエラーが起きた際に、何が問題なのか、具体的にどう行動したら解決できるかを瞬時に理解できるようにデザインすることが大切です。その際、難解なシステム用語や恐ろしい誇張表現 (「致命的」など) で、必要以上にユーザーを不安がらせないようにしましょう。パニックに陥ってしまうと、ユーザーは解決に向けて冷静に行動することができません。
ウェブサイトのユーザビリティを向上させ、良質なユーザーエクスペリエンス (UX) を提供するためには、理想的なユーザー行動シナリオ (うまくいっている状態) だけでなく、エラー (うまくいかない状態) についても十分な配慮が必要です。ユーザーが安心してウェブサイトを利用できるように、あらかじめデザインで解決できることはないか、考えたいものです。