アフォーダンスを考慮したデジタルデザインのベストプラクティス | アドビ UX 道場 #UXDojo

優れたユーザビリティは優れたデザインに不可欠です。ユーザビリティ向上に関わる要因は数多くありますが、アフォーダンスはその中でも重要なもののひとつです。アフォーダンスは、物理的な世界やデジタル世界におけるインタラクションの成功に関与します。この記事では、アフォーダンスとは何かを確認してから、デザインにアフォーダンスを適用するいくつかの方法をご紹介します。また、現実およびデジタル世界における、アフォーダンスの好例をいくつか共有します。

アフォーダンスとは何か

「アフォーダンス」は、心理学者のジェームス・ギブソンが視覚の研究を行っていた時に初めて導入した用語です。ギブソンはこの言葉を使い、人と対象物の間に存在する行為の可能性を表現しました。私たちの身の回りのすべてのものにアフォーダンスが存在します。たとえば、エレベーターのボタンは「押す」、椅子は「座る」、ドアであれば「開ける」です。生活環境のアフォーダンスを学ぶことは、社会への適応の重要な一環です。

ユーザーインターフェイスのアフォーダンス

一般的にユーザーインターフェイスのアフォーダンスは、知覚可能な行動の可能性とされています。すなわち、ユーザーは UI を観察し、自分の期待や過去の経験に基づいてどのような行動が可能であるかを判断するということです。HCI 研究者のドン・ノーマンは UI におけるアフォーダンスの重要性について、著書 The Design Of Everyday Things の中で「アフォーダンスが適切に利用されていれば、ユーザーは見ただけで何をすべきかを知ることができ、画像やラベルや説明は不要である」と表現しています。

UI における知覚可能なアフォーダンスは、おおよそ以下の種類のどれかに分類されます。

• 明示的: オブジェクトに対する行動の可能性を明確に示す視覚的な特徴です。たとえば、周囲の表面から浮き上がって見えるオブジェクトを見たユーザーは、クリックやタップ操作が可能ではないかと考えるようになります。ユーザーは、押せると知覚されたオブジェクトが押されることを求めていると推測します。
• 潜在的: 通常は隠れていて、ある条件を満たしたときだけ明らかになるアフォーダンです。典型的な例はハンバーガーアイコンで、クリックするとナビゲーションオプションの一覧が表示されます。潜在的なアフォーダンスは、すべてのアクションを明示すると UI が乱雑になってしまう複雑な製品で使われるのが一般的です。このタイプの欠点は、すべてのユーザーに明らかではないかもしれないことです
• 否定的: 時に、ある UI 要素が操作できない状態であることをユーザーに知らせることが重要な場合があります。通常、デザイナーはこうした要素をグレーアウトで表示するため、ユーザーは灰色にぼかされた要素は無効化されていると判断します。
• 虚偽的: オブジェクトの特徴が特定の行為を示唆しているのに、実際には実行できないことがあります。ボタンのように見える長方形のオブジェクトや、リンクではない下線付きのテキストなどがその例です。デザイナーは、製品の中に虚偽のアフォーダンスをつくるべきではありません。

Web デザインにおけるアフォーダンスのベストプラクティス

ここからはデザインにアフォーダンスを利用する方法を紹介します。一般的に、ユーザーが実行可能なアクションを間違って認識したときにはエラーが発生します。アフォーダンスを上手に使えば、ユーザーのエラーを最小限に抑え、不要な認知負荷を削減するために役立ちます。

ユーザーを知る

初めてのユーザーでも、誰もが操作方法を正しく推測できるインターフェイスであれば理想的です。しかし、現実の世界ではこれはまず起こりません。ユーザビリティの問題が発生する可能性を減らすには、対象ユーザーがデザインからどのようにアフォーダンスを予測するかを知ることが重要です。デザインはユーザーが見慣れたものでしょうか？ユーザーは個々の操作可能なコントロールの意味を読み取れるでしょうか？

その答えを知る唯一の手段は、プロトタイプを作成してユーザーと一緒に検証することです。プロトタイプを使ったテストを実施すると、ユーザーが製品に対して持っている経験や、一般的なコンピュータの知識レベルを学ぶことができます。そうした知識はどのような視覚的なヒントが有効なのかを理解するのに役立ちます。

デザインの慣例に従う

インターネットのユーザー体験におけるヤコブの法則によると、ユーザーはどのサイトもこれまでに利用したことがあるサイトと同じように使えることを好む傾向があります。数十のサイトやアプリを日常的に利用している人々は、ページや画面を素早く解析して、一般的に使われている要素を把握することが上手です。デザインの中で使い古されたパターンを使うと、ユーザーが使い方を理解しやすくなります。

Web デザインの具体的な例を挙げてみましょう。トップレベルのナビゲーションメニューはそうしたパターンのひとつです。ユーザーはページの一番上にトップレベルのナビゲーションがあるだろうと期待しています。もうひとつの例は、サイトのヘッダー内のロゴです。ユーザーはロゴをクリックするとき、そのサイトのホームページに移動することを期待します。慣例になっているパターンを使うことは、結果的にユーザーに使いやすいデザインにつながります。

デザイナーは全く新しいデザインを発明しようとすることがあります。既存の問題に対するより良い解決策であると考えて、新しいパターンを導入するのもその一種です。しかし、通常とは異なるデザインが、ユーザーの操作に余計な負荷となる可能性を忘れてはなりません。見慣れない要素に遭遇したユーザーは、その使い方を学び、記憶する必要があります。

シグニファイアを提供する

シグニファイアは、知覚可能なアフォーダンスの付加的な情報で、アフォーダンスの存在を示します。オブジェクトを操作するユーザーに対して、そのオブジェクトで何ができるかを示すサインがシグニファイアです。物理的な世界では、ドアに「Push」と書かれたステッカーが見つかるもしれません。

インターフェイスにシグニファイアを組み込む方法は数多くあります。ユーザーインターフェースにアイコンを配置することは、UI のアフォーダンスを伝える最も一般的な方法のひとつです。以下はいくつかのアイコンの例です。

• ホームページへの移動を示唆するホームアイコン
• 検索機能を示唆する虫メガネアイコン
• データの保存を示唆するフロッピーディスクのアイコン
• メールの送信を示唆する封筒アイコン
• 電話の発信を示唆するヘッドセットのアイコン

これらのアイコンは普遍的なもので、ほとんどのユーザーが言葉を介さずにその意味を理解できます。フロッピーディスクのように現実世界では使われなくなったものが、アイコンとしてはユーザーに認知されているのは興味深い点です。

アイコン以外にも、ユーザーへの直接的なヒントととしてシグニファイアを提供できます。たとえば、ユーザーがさまざまな要素やツールの上にマウスカーソルを移動したときにダイアログボックスを表示すれば、ユーザーに追加説明を提示できます。

即座にフィードバックを提供する

ユーザーの操作に反応してフィードバックを提供すると、ユーザーがインターフェイスをより素早く習得できるようになります。その際のフィードバックは視覚的なものでなくても構いません。サウンドや場合によっては触覚によるフィードバックが利用できる場合もあるかもしれません。重要なのは、システムがユーザーを理解したというメッセージを、明確にユーザーに伝えることです。

フィードバックに動きのあるアニメーション効果を加えると、物理的な世界の感覚を含めることができます。下の例では、ユーザーがスイッチをオンにすると、背景色やトグルの色などいくつかの要素が変化します。

おわりに

UI のアフォーダンスは、オブジェクトに対して実行可能なインタラクションを示唆することにより、人々の行為をより容易にします。適切なアフォーダンスは、ユーザビリティの高い製品をデザインするために役立ちます。ユーザーが操作方法を即座に理解できれば、UI の学習に時間を費やす必要が無くなり、より重要なこと、つまり問題の解決に集中できます。

「この記事は What Is Affordance and How Does it Impact Design?（著者: Nick Babich）の抄訳です」