アフォーダンスを意識する

アフォーダンス(affordance)という言葉を聞いたことはありますか?「〜を提供する」「〜を利用可能にする」という意味の英語「afford」の名詞形ですが、ユーザーインターフェース設計の世界では、モノの属性(形状、材質、色など)がヒト(ユーザー)に対して「どう取り扱えば良いか」という情報を発している、という考えかたのことをいいます。
たとえば、(無意識にですが)皆さんこんな経験があるのではないでしょうか?

  • ドアノブ(取っ手)の形状を見て「押して(あるいは手前に引いて)開けるもの」なのか「横にスライドさせて開けるもの」なのかを識別する。
  • ダイヤルを見て「回すもの」だと認識する。さらに、回す部分の形状や大きさによって「つまんで回すもの」なのか「握ってまわすもの」なのかを識別する。
  • スイッチの形状を見て「どの方向に押せば(オン/オフなどの)切り替えできるか」を識別する。

ユーザビリティを向上させるにあたっては、このアフォーダンスという考えかたを、ユーザーインターフェース設計時に盛り込む必要があります。というのも、アフォーダンスをうまく活用することによって「いちいちその使いかたを説明しなくても、ユーザーが適切に使ってくれる」というメリットが期待できるからです。

では、Webサイト(ホームページ)のユーザーインターフェースにおいては、どのようなアフォーダンスがあるのでしょうか?ご存知のとおりWebは、クリックや各種入力によって情報を引き出すメディアなので、「ここでクリックできる」「ここで入力/選択ができる」といったことが瞬時にユーザーに認識されることが大切です。たとえば、こんな例が考えられます。

クリックできるタブの例(アップルコンピュータのサイト)

なお、ユーザーインターフェースをデザインする際には、「アフォーダンスがはたらくことによって、かえってユーザーが誤解するケースがある」ことも念頭に入れておく必要があります。たとえば、図示の例(楽天トラベルのトップページ:2006年8月20日現在)では、左側のメニューの「国内」「海外」が(凸型の)ボタンっぽく見えますが、実際にはクリックすることができません。この部分のデザインは(クリック可能な)ページ上部のメニュータブと同じルックスなのでなおさら、クリックできると思ってしまう人が少なくないと思います(かくいう私がそうでした...)。
ボタンと勘違いしてしまう例(楽天トラベルのサイト)

ユーザーは、作り手の意図とは関係なく、アフォーダンスを感じてしまうことがあります(「ぶら下がり健康器」を、大きさ、材質、丈夫さの点でちょうど良いと思って「ハンガー掛け」に使ってしまうのと似ているかもしれません...)。ユーザーインターフェースをデザインする際には:

...という具合に、「アクションを起こす(使う)部分」「起こさない(使わない)部分」両面から意識する必要があると言えるでしょう。


実はこのアフォーダンスという用語ですが、生態心理学における意味(J.ギブソン博士による)と認知心理学/ユーザーインターフェース設計における意味(D.A.ノーマン博士による)とでは、厳密には異なります。オリジナルは、ギブソン博士によるもの(「Real Affordance」「客観的アフォーダンス」とも呼ばれています)ですが、Webユーザーインターフェース設計においては、D.A.ノーマン博士によるもの(「Perceived Affordance」「主観的アフォーダンス」とも呼ばれています)がポピュラーになっています。前者(ギブソン博士)はアフォーダンスを「客観的な事実」として捉えているのに対して、後者(ノーマン博士)はアフォーダンスを「動作主(ユーザー)の主観をも含んだもの」と捉えています。両者の違いについてさらに興味のある方は、こちらのページ(Wikipediaの「アフォーダンス」の解説)などを参考にしてみてください。