アフォーダンス理論とは
アメリカの心理学者J・J・ギブソンが提唱した概念になりますが、簡単に言ってしまうと「人間は過去に学習し、記憶したものから、無意識に行動できる」といったもの。
「ん…?分かったような気もするけど、なんか抽象的すぎるなぁ…」と思われた方向けに、さらに分かりやすく言えば、次の写真を見てどう思われますか??
100人中、100人の方が「椅子の写真で、人間が座る、または物を置くもの」と思われましたよね?
誰も初めて入った会議室などで「すみません、椅子はどれでしょうか?」なんて質問はされないと思います。少しデザインが違っても「椅子のような形状をしたものは、椅子であって、それは人間が座ってよいもの」と記憶しているので、無意識に人間は次の行動に移ることが可能です。
こういった行動、認知を促すことをアフォーダンス理論と呼びます。
WEBデザインに見られるアフォーダンス理論
WEBサイトにも実はいくつかのアフォーダンス理論があります。
よく見かける、代表的なものを2つご紹介します。
- 下線が引かれている文字はクリックできる
- 立体的に見える画像はクリックできる
今、多くのWEBサイトではCMSと呼ばれる、WEBサイトを自社で更新できるシステムを導入されていると思います(CMSについてはこちらの記事を参照してください)。
コラムやお知らせ等、多くのWEBページを自社で更新、編集されていると思います。
その際、クリックできないのに、注目させたいの一心で下線を引いたとしましょう。
いかがでしょうか?今、ワザと「下線を引いてみましょう」に実際に下線を引きましたが、思わずマウスカーソル合わせた方いらっしゃいませんでしたか?
このように、WEBサイトを閲覧しているユーザに紛らわしい行動をさせてしまうことがあるので、なんでもかんでも下線を引くのは避けましょう。
逆に、ユーザにクリックをしてほしい画像を自社で作るのであれば、立体的に見せるなどの処置をするのは効果的です。
シグニファイアについて
もう1つ、アフォーダンスに似ているのですが、シグニファイアという概念もお伝えしておきたいと思います。
アフォーダンスとシグニファイアはニアリーな側面もあるので、他のブログやコラムなどを閲覧頂くと、先にご紹介した「ボタン」などはシグニファイアとして説明されている方もいます。
私は「モノの一種」だと考えているので、ボタンはアフォーダンスとしていますが、このあたりは様々な解釈をされる方もいるでしょう。
ですが本質は1つ。事業会社の方、デザイナーの方にとっては「いかにユーザをスムーズに行動させることができるか」と言ったところに到着すると考えています。
ではシグニファイアの事例を3つ紹介します。
- トイレの男女アイコン
- 音楽プレイヤーの再生、早送り、停止などのアイコン
- WEBサイト右上付近にある三本線のメニューアイコン(ハンバーガーメニュー)
多くの方が、それぞれのアイコンを見れば、何を意味しているか分かりますよね。
あと補足ですがシグニファイアはアイコンのことではありません。信号の色も同様です(青は進め、赤は止まれ等の意味)。
実は事業会社の方も日常的にデザインに関わっています
これはデザイナーのみが覚えておくものではありません。
事業会社の方も知っておく必要があると思います。先に触れましたがWEBサイトのご担当者様であれば、「リンクしていない(クリッカブルでない)のに下線を引く」は望ましいデザインではありません。
リアルな空間設計も、展示会など含めれば身近なものではないでしょうか?
「個性を出す」のは良いことなのですが、デザインでもアートでもベーシックなルールは存在しています。
それを理解していて、ワザと崩していくのであれば「ユーザビリティが悪い」とはならないと思いますが、分かっておかないと混乱を招いてしまいます。
例えば信号の青を「停止」で、赤を「進め」に、ある特定の地域だけ変更してしまうと…なんて想像すれば大変な混乱を招きますよね。
事業会社の方も、展示会等リアルな空間設計や、WEBページの編集、PDFの資料を作るなんてこともあるでしょうし、人事関係の方も採用で様々な情報発信をされる機会があると思います。経営者の方も上々企業であれば決算資料など準備されるでしょう。
実はデザイナーと呼ばれる仕事以外の方も、知らず知らずのうちに「デザイン」をされているのです。ぜひ次回作成される際には、このアフォーダンス&シグニファイアを意識しながら作成されてみてはいかがでしょうか?