【翻訳】寛容性のデザイン:エラーに強いインターフェースの作り方(Tetiana Sydorenko, UX Collective)

uxdesign.cc

ユーザーがミスを犯しても直感的で許容力のあるインターフェースを設計する方法を探ります。

誰しも経験があるでしょう。飛行機の予約を急いでいるとき、キーボードを叩く指が速く動いて、「確認」をクリックしようとした瞬間、バタン!誤って出発日を間違えて選択してしまいます。大金を損失していないことを祈りながら、慌てて間違いを修正しようとすると、パニックの波が押し寄せます。このようなエラーは、デジタルインターフェースを使用しているときに頻繁に発生し、対処が本当に厄介です。

このようなちょっとした不具合やフラストレーションは、テクノロジーがスムーズで直感的なユーザー体験を提供できていない部分を露呈させることがよくあります。 これらは、歩道に落ちているバナナの皮のようなもので、誰にでも起こり得ます。 しかし、中には単にわずらわしいだけのエラーもありますが、時間やデータ、あるいは金銭的な損失につながる重大な結果をもたらすものもあります。

本稿では、インターフェースエラーについて詳しく見ていきたいと思います。 また、スリップとミスの違いについて説明し、ユーザーがエラーを犯した場合に回復しやすくなるような、直感的でエラーに強いインターフェースを設計するためのいくつかの方法をご紹介したいと思います。

スリップとミス

インターフェースエラーについて理解する上で重要なのは、スリップとミスの違いを理解することです。

スリップ

スリップは、ユーザーの意図は正しいものの、誤って間違ったアクションを実行してしまう場合に発生します。例えば、誤ったボタンをクリックしたり、意図しない値を入力したりする場合です。

Googleカレンダーでチームミーティングをスケジュールすることを想像してみてください。あなたは、日付と時間を慎重に設定し、参加者をすべて慎重に追加しました。しかし、ミーティングの議題を微調整している際に、イベントを保存する前に「参加者に通知する」チェックボックスを誤って見落としてしまいました。その結果、通知が送信されず、チームはミーティングについて何も知らされないままになってしまいました。これは典型的なスリップ(すべり)です。全体的な意図は正しかったものの、ワークフローにおける単純な見落としがコミュニケーションの障害につながったのです。

ミス

一方、ユーザーの根本的な目標や計画に欠陥があるために、誤った行動を取ってしまう場合、ミスが起こります。

あなたはGoogleカレンダーでチームミーティングを設定し、1時間の生産的なブレインストーミングセッションを目指します。参加者が全員参加できる空き時間帯を慎重に選び、招待状を送信します。しかし、あなたが気づいていないのは、あなたのGoogleカレンダーのアカウントがミーティングに40分という制限があるということです。

この制限を知らなかったため、会議は予定外の40分後に終了し、参加者全員が切断されてしまいました。この中断により混乱が生じ、議論の流れが中断され、フラストレーションや時間の浪費につながる可能性もあります。

この間違いは、システムの機能に対する誤った認識モデルに起因するものであり、ユーザーの理解(または理解不足)がユーザーエクスペリエンスに大きな影響を与え、予期せぬ結果につながる可能性があることを示しています。

エラー防止のための設計

一部のエラーは避けられないものですが、インターフェースはスリップとミスの両方の発生を最小限に抑え、発生した場合でもユーザーが簡単に回復できるように設計することができます。

スリップの防止

スリップに関しては、ユーザーが誤って間違った操作をしてしまうことが難しいインターフェースを設計することが重要です。これには以下のようなものが含まれます。

  • 明確な視覚的階層は、ユーザーにとってのロードマップとなり、ユーザーの注意をインタラクティブな要素へと導きます。 適切に構造化された階層は、ユーザーが視覚的に目立つものをスキャンする傾向と一致します。 サイズ、色、コントラスト、配置を戦略的に使用することで、デザイナーはどの要素がクリック可能なボタン、編集可能なフィールド、またはドラッグ可能なコンポーネントであるかを示し、インターフェースの機能を即座に理解できるようにすることができます。
  • ユーザーがフォームに入力する際に即座にフィードバックを提供するインライン検証を実装することで、ユーザーはリアルタイムでエラーを修正でき、フラストレーションを軽減し、完了率を向上させることができます。- チャンキングと段階的な開示は、認知負荷を軽減し、複数ステップのプロセスにおいてユーザーが現在のステップを見失うリスクを最小限に抑えるのに役立ちます。
  • ボタン、リンク、その他のコントロール明確で曖昧さのないラベルを付けることで、各要素の機能について混乱が生じないようにします。
  • 確認ダイアログなどの安全対策を導入し、実行される前に潜在的に有害なアクションを阻止します。

例えば、Figmaのデザインからアニメーションを作成するツールであるJitterでは、認知過負荷によるミスを防止するためにプログレッシブ・ディクローズがどのように役立つかを示しています。Jitterでは、ユーザーにいきなりFigmaプラグインのインストール方法に関する情報を提示するのではなく、ユーザーが選択したワークフローに基づいて戦略的に指示を表示します。この慎重なアプローチにより、ユーザーは各ステップで必要な情報のみを受け取ることができ、認知負荷が軽減され、圧倒されたことによるエラーや誤クリックのリスクが最小限に抑えられます。

出典:https://mobbin.com/screens/a7725b24-f16a-4d16-b0e9-935ffea824ed

Intercomは、特に取り消しが不可能な操作の場合に、確認ダイアログを効果的に実装して誤操作を防止します。例えば、連絡先に対して「アーカイブ」と「ブロック」というオプションが用意されていますが、どちらも重大な結果を招く可能性があります。ユーザーが誤って間違ったオプションを選択してしまうリスクを軽減するために、Intercomでは先に進む前に明示的な確認を求めます。この確認ステップは、潜在的な誤りを防ぐセーフティネットとして機能するだけでなく、意図しない結果が発生する前にユーザーが誤ってクリックした内容を元に戻せるようにします。

出典:https://mobbin.com/screens/adad8065-0cfb-414c-ae1f-24538f061d19

Figmaの登録ポップアップでは、ユーザーにメールアドレス入力フィールドのインライン検証を提供しています。下の例では、入力ミスが検出され、ユーザーはワンクリックで修正するように促されます

出典:https://mobbin.com/screens/a3b9500b-9f95-47f0-a176-3450efd9e90a

ミスを防ぐ

一方、ミスには少し異なるアプローチが必要です。これらのエラーは、ユーザーの根本的な目標や計画が不完全であることから生じるため、システムがどのように機能するのかについての正しいメンタルモデルを構築する手助けに焦点を当てるべきです。

これには以下が含まれます。

  • ユーザーに馴染みのあるメタファーや、ユーザーの既存のメンタルモデルと一致するメタファー.)を使用する。ユーザーは孤立した状態でシステムにアプローチするわけではありません。他の製品やインターフェースでの経験から形成された期待を抱いています。Jakob Nielsenの「インターネットユーザー体験の法則」は、より広く適用されることが多いですが、ユーザーはすでに理解している方法で動作するシステムを好むことを示唆しています。馴染みのあるメタファーやデザインパターンを取り入れることで、既存のメンタルモデルを活用し、学習曲線を緩やかにし、不慣れや混乱によるミスを最小限に抑えることができます。
  • 特に新しい機能を取り扱う場合など、既存のパターンに従うだけでは不可能な場合もあります。 このような状況では、「ナッジ(nudge)」や文脈上のガイダンスがユーザーが正しい行動を発見し、ミスを回避するのに役立ちます。 インタラクションのポイントで役立つツールチップ、ヒント、または提案を提供することで、デザイナーはユーザーを最適なパスへと優しく導くことができ、不確実性や理解不足に起因するエラーの可能性を低減することができます。- ニールセンの「ヘルプとドキュメント」ヒューリスティックでは、余分なヘルプなしでシステムが使用できるのが理想ではあるものの、ユーザーを支援するためにヘルプとドキュメントを提供する必要があることを強調しています。しかし、特に初心者ユーザーにとっては、ナレッジベースは圧倒的なものになりかねません。生成型AIは、素晴らしいアプローチを提案しています。それは、ナレッジベースで訓練されたチャットボットを組み込むというものです。チャットボットは、自然言語でユーザーとコミュニケーションをとり、文脈に応じてユーザーを支援することができます。例えば、IBM Watson Assistantまたは Google Dialogflow

初心者ユーザーは、慣れないシステムや機能に直面すると、しばしばミスを犯します。 そこで、オッターのチャットインターフェースが提供する文脈に応じた提案のような、先を見越したガイダンスが、エラーを防ぐ上で非常に役立ちます。 たとえば、オッターの新規ユーザーは、チャット機能の潜在的な可能性を十分に理解していない可能性があり、非生産的なやりとりや迷いにつながる可能性があります。 オッターは、文脈に応じた提案を行うことで、ユーザーを有意義な行動へと導き、フラストレーションやミスにつながる可能性のある「白紙キャンバス症候群」を防ぎます。この先を見越したアプローチにより、ユーザーは実際に操作しながら学習することができ、最初からよりスムーズでエラーのない体験を促進することができます。

出典:https://mobbin.com/screens/838ca45b-08ae-424e-a40a-26bf79c6f94f

Intercom は、ユーザーにインターフェースを紹介するために、いくつかの効果的なアプローチを採用しています。

  • 情報アーキテクチャを説明するために、受信トレイビューといった馴染みのあるカテゴリーを使用するなど、メタファーを活用しています。 視覚的な階層構造はユーザーの注意を誘導するように設計されています。背景を薄暗くすることでサイドパネルに注目が集まるようになっています。ツールチップに人間の写真を入れることでゲシュタルト原理を活用し、ユーザーが最初に注目する場所を確保しています。ツールチップのメッセージではチャンキングが効果的に使用されており、情報を2つの1文に分けて表示することで、シリアル・ポジション効果を活用しています。

出典:https://mobbin.com/screens/f0180cbf-58b1-42f3-a262-63dc6c70e2d1

潔いリカバリ

理想の世界では、私たちのデザインは直感的でエラーを起こしにくく、誤操作はめったに起こらないでしょう。しかし、現実にはユーザーは人間であり、あらゆるやり取りにはヒューマンエラーが付きものです。どんなに意図的に設計されたものであっても、予期せぬ状況や不注意、理解の相違によって意図しない行動につながる可能性があります。 そのため、エラー防止だけに焦点を当てるだけでは十分ではなく、エラーからの復旧を考慮した設計も必要です。 エラーが発生した際には、ユーザーが元の状態に復帰するための明確で簡単な方法を提供することが重要であり、それによってフラストレーションを最小限に抑え、ユーザーが目標を達成できるよう支援します。

以下は、エラーを優雅に回復するための設計における主な方法です。

  • エラーを優雅に回復するための重要な原則は、ユーザーが間違いを犯したことを素早く認識できるようにすることです。 システムの状態を明確に伝えることで、ユーザーは自ら修正することができます。 アクションが成功したか、現在どのような処理が行われているか、ユーザーの入力による変更があるかなど、システムの状況に関する明確なフィードバックを適時に提供することで、ユーザーは自身のアクションの影響を容易に追跡し、意図しない結果を特定することができます。これは、システム内部で何が起こっているかを常にユーザーに知らせることを重視する、ニールセンのヒューリスティック「システムステータスの可視性」と一致しています。 ユーザーがエラーを認識した際には、システムは、そのアクションを元に戻すか、サポートを受けるための明確でアクセスしやすいオプションを提供すべきです。これには、目立つ「元に戻す」ボタン、エラーメッセージ内にリンクされたすぐに利用できるヘルプ文書、人間によるサポート担当者と接続するオプションなどが含まれます。 エラーが発生した場合でも、システムは、その影響を最小限に抑え、データ損失やその他の不可逆的な損害を防ぐように設計すべきです。これには、以下が含まれます。
    • a) ユーザーの作業の自動保存: ユーザーの作業を定期的に保存しておけば、エラーにより再起動やセッションの喪失を余儀なくされた場合でも、作業を簡単に復元することができます。
    • b) 不可逆的な操作の前に明確な警告を表示: 操作を元に戻すことができない場合(例えば、ファイルを完全に削除する場合など)、システムはユーザーに明確に警告し、処理を進める前に確認を求めるべきです。
    • c) 「セーフモード」またはサンドボックスの提供による実験: ユーザーが機能を探求したり変更を加えたりできる安全な環境を提供し、そこでミスをしても重大な結果にならないようにします。

2要素認証の回復コードは、この積極的なアプローチの素晴らしい例です。 Basecamp のようなサービスでは、これらのコードを生成し、ユーザーに保存を促すことで、ユーザーが2つ目の認証要素へのアクセスを失った場合に備えてセーフティネットを提供しています。

Basecampでは、フォン・レストルフ効果または孤立効果を採用することで、アクセスを失うことの潜在的な脅威を視覚的に強調し、そのメッセージ内に回復コードのオプションを戦略的に配置することで、これらのコードの重要性をさらに強調しています。この問題解決の先を見越したアプローチと巧妙な設計の組み合わせにより、ユーザーが重大なエラーに遭遇する前に、効果的に解決策へと導くことができるのです。

出典:https://mobbin.com/screens/765b19a9-910d-437a-b32c-b8b77e13369d

追加リソース

エラー回復のための設計は、継続的な学習プロセスです。 さらに理解を深めるための追加リソースをいくつかご紹介します。

まとめ

結局のところ、エラーは人間が経験する自然な一部であると受け入れ、その予防と適切なリカバリーを積極的に設計することが、ユーザーにとって使いやすく、素晴らしいインターフェースを作成する上で重要です。 ユーザーが起こし得るさまざまなエラーの種類(言い間違いやミスなど)を理解し、それらに対処するための思慮深い戦略を採用することで、デザイナーはユーザーがデジタル製品やサービスに自信を持って関与できるようにし、信頼感、コントロール感、満足感を育むことができます。

エラー耐性と回復を考慮した設計に有効なその他のテクニックをご存知ですか?下のコメント欄にぜひご意見をお寄せください。