アフォーダンスを意識する
アフォーダンス(affordance)という言葉を聞いたことはありますか?「〜を提供する」「〜を利用可能にする」という意味の英語「afford」の名詞形ですが、ユーザーインターフェース設計の世界では、モノの属性(形状、材質、色など)がヒト(ユーザー)に対して「どう取り扱えば良いか」という情報を発している、という考えかたのことをいいます。
たとえば、(無意識にですが)皆さんこんな経験があるのではないでしょうか?
- ドアノブ(取っ手)の形状を見て「押して(あるいは手前に引いて)開けるもの」なのか「横にスライドさせて開けるもの」なのかを識別する。
- ダイヤルを見て「回すもの」だと認識する。さらに、回す部分の形状や大きさによって「つまんで回すもの」なのか「握ってまわすもの」なのかを識別する。
- スイッチの形状を見て「どの方向に押せば(オン/オフなどの)切り替えできるか」を識別する。
ユーザビリティを向上させるにあたっては、このアフォーダンスという考えかたを、ユーザーインターフェース設計時に盛り込む必要があります。というのも、アフォーダンスをうまく活用することによって「いちいちその使いかたを説明しなくても、ユーザーが適切に使ってくれる」というメリットが期待できるからです。
では、Webサイト(ホームページ)のユーザーインターフェースにおいては、どのようなアフォーダンスがあるのでしょうか?ご存知のとおりWebは、クリックや各種入力によって情報を引き出すメディアなので、「ここでクリックできる」「ここで入力/選択ができる」といったことが瞬時にユーザーに認識されることが大切です。たとえば、こんな例が考えられます。
- リンク文字を、青系の色にして、かつ下線を付ける。
- クリックボタンを、枠で囲ったり、凸型に見えるように(いかにも押せそうに)デザインにする。
- メニュー切り替え機能を、タブを模したデザインする(図示の例:アップルコンピュータのサイト:2006年8月20日現在)。
- フォーム要素(プルダウンメニューやラジオボタンなど)は極力、HTMLで標準的に用意されているものを使用する。
- Flashでオリジナルの入力インターフェースをデザインする場合、HTMLの標準的なフォーム要素に倣う(たとえば、丸いチェック欄はラジオボタンと認識されやすいので、複数選択させない場合にのみ使用する、など)。
なお、ユーザーインターフェースをデザインする際には、「アフォーダンスがはたらくことによって、かえってユーザーが誤解するケースがある」ことも念頭に入れておく必要があります。たとえば、図示の例(楽天トラベルのトップページ:2006年8月20日現在)では、左側のメニューの「国内」「海外」が(凸型の)ボタンっぽく見えますが、実際にはクリックすることができません。この部分のデザインは(クリック可能な)ページ上部のメニュータブと同じルックスなのでなおさら、クリックできると思ってしまう人が少なくないと思います(かくいう私がそうでした...)。
ユーザーは、作り手の意図とは関係なく、アフォーダンスを感じてしまうことがあります(「ぶら下がり健康器」を、大きさ、材質、丈夫さの点でちょうど良いと思って「ハンガー掛け」に使ってしまうのと似ているかもしれません...)。ユーザーインターフェースをデザインする際には:
- クリックや入力など、ユーザーがアクションを起こす部分には、適切なアフォーダンスがはたらいているか
- ユーザーがアクションを起こさない部分(クリックなどができない部分)で、無用にアフォーダンスがはたらいていないか
...という具合に、「アクションを起こす(使う)部分」「起こさない(使わない)部分」両面から意識する必要があると言えるでしょう。
実はこのアフォーダンスという用語ですが、生態心理学における意味(J.ギブソン博士による)と認知心理学/ユーザーインターフェース設計における意味(D.A.ノーマン博士による)とでは、厳密には異なります。オリジナルは、ギブソン博士によるもの(「Real Affordance」「客観的アフォーダンス」とも呼ばれています)ですが、Webユーザーインターフェース設計においては、D.A.ノーマン博士によるもの(「Perceived Affordance」「主観的アフォーダンス」とも呼ばれています)がポピュラーになっています。前者(ギブソン博士)はアフォーダンスを「客観的な事実」として捉えているのに対して、後者(ノーマン博士)はアフォーダンスを「動作主(ユーザー)の主観をも含んだもの」と捉えています。両者の違いについてさらに興味のある方は、こちらのページ(Wikipediaの「アフォーダンス」の解説)などを参考にしてみてください。