認知心理学からのUIデザインアプローチ

atnd.org

 

これ行ってきたので内容とインスパイアされたことまとめ

 

スピーカー

株式会社ビズリーチ クリエイティブ部UXデザインチーム
酒寄 理恵(デザイナー/アシスタントディレクター)

ECサイト、ソフトウェア開発会社にて自社サイト制作を経験後、10年間フリーランスで活動。 2013年、株式会社ビズリーチに参画。現在はデジタルマーケティングチームと共に、ビズリーチ事業の広告施策クリエイティブデザインを担当。

 

アジェンダ

第1部 UIデザイン 認知心理学からのアプローチ

  • 人が物事を認知する仕組み「見る・読む・考える・理解する・覚える」
  • アフォーダンスの例
  • フラットデザインにおけるシグニファイアの変化
  • ヒューマンエラーの示すもの
  • 同じUIに対して、ユーザーの評価が分かれる理由

第2部 事例紹介

 

見る・読む・考えるについての改めて考える

ひとは見ている時に見たままを見ていない。別に哲学的な話ではなく、自分のもっている情報(経験・知識)から別の見え方をしてしまうものだし、そこから発生する予測もすべて持っている情報に依存してしまう。つまり、見る人がどんな情報を持っていて、どんな情報を持っていないかを想定することでより良いデザインに近づくことができる。

 

WebのUIとかで必要な情報だけを表示する方がいいじゃんっていうバックグラウンドにあるのは、考えることには心的負荷があるからで、だれも好き好んで考えたがらないという人の性質がある。しんどさの順番は、考える>見る>クリックするの順でしんどい。確かに!と思う節もある。銀行の口座登録のフォームとか役所のフォームは「クソofクソ」で、考えないと正確に入力できなくて心的負荷がかなり高い。デザイナーはこの心的負荷をいかに軽くするかを考えてデザインしているらしい。

 

心的負荷をデザインする

最近はメディア系のサイトを作っていますが、ランディングしたコンテンツから関連する記事に飛んでもらってセッションPVを高めて広告収益に繋げようというとしています。ここでも心的負荷のデザインが有効だなーと思って、記事を下まで読んで、次のページがある場合は次のページのボタンだけが押せそうな雰囲気を醸し出すために関連記事のトーンを下げておくとか、次ページがなければページ1とか無駄な表示をなくして関連記事がわかりやすく視認できるデザインにして間に広告挟めば見られる率が高くなるといった風に考えられます。とにかくユーザーに考えさせず、脊椎反射させるにはどうすれば良いかという視点が心的負荷のデザイン。

 

http://jp-blog.kaizenplatform.com/app/uploads/2015/12/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2015-12-08-21.18.20.png

http://jp-blog.kaizenplatform.com/mobile-ux-event

 

ユーザーのマインドモデル(どんな風に考えるだろう)と概念モデル(操作のイメージ全体像)に乖離があると心的負荷が高い。Kindleは紙の本を読む動作(マインドモデル)にタブレットをスワイプするとめくれるという概念モデルを近づけた製品と言える。良し悪しは別にして、ちょっと触ってページがめくれる感じがわかれば操作方法をしらなくても利用できるデザインになっている。逆にめちゃコミックなんかは漫画をスクロールするUIで、マインドモデルを概念モデルの方に寄せたデザインになっている。どっちが良いかではなく、マインドモデルと概念モデルの乖離が良くない。

 

フィッツの法則

UI操作をモデル化したのがフィッツの法則で、かんたんに言うと見てる点とクリックする点が近ければ近いほど良いということ。だってマウス動かすのも面倒くさいんだもん!詳しく知りたい方は下の記事なんかを参考に

shunter1112.tumblr.com

 

アフォーダンスを利用する

http://livedoor.blogimg.jp/lunarmodule7/imgs/8/b/8b43f14c.png

アフォーダンスからシグニファイアへ - A Successful Failure

 

わかりやす!ということで説明はこのブログにお任せします。デザインを考える上で、その質感や見た感じ人間にどう影響するかをコントロールすることで、クリックされやすかったり、意図的に見えなくしたりすることができるということです。僕が考えたアフォーダンスのうまい利用方法は、自分で考えずに人のデザインからアフォーダンスをパクるという方法です。エンジニアなのでデザインを生み出す力がそもそもないので、アフォーダンスの視点からWebを見ることで抽出することはできるようになると思います。

 

データ!データ!データ!

これまで言ってきたのは全部「仮説!」

実行しない仮説はクソだし、まだまだデザインとその結果に対するモデルなんて存在しないからPDCAを回しまくらないといけない。そのためにしっかりデータを取って爆速で仮説検証していくことが大事だよねーと思いました。

 

まとめ

  • しんどさの順番は、考える>見る>クリック
  • アフォーダンスとシグニファイアを利用する(パクる)
  • 何より仮説検証が大事

 

勉強会とほぼおなじ内容の本家っぽいスライドがネットに転がってました!

www.slideshare.net

 

推奨図書