UIデザインの根底がわかる認知心理学入門 HCD-Net 2018年10月29日

UIデザインの根底がわかる認知心理学入門 HCD-Net 2018年10月29日

■2018年10月29日　19:30~21:30
UIデザインの根底がわかる認知心理学入門 HCD-Net@目黒ラクスル
https://hcd-net-raksul3.peatix.com

19時に目黒のラクスルに到着。
とても綺麗なセミナールーム

珍しく知り合いに会わないセミナーでした。

■UIデザインの根底がわかる認知心理学入門 五十嵐亜季さん

・中京大学大学院を卒業
楽天を経て楽天株式会社→外資系保険会社

▼なぜ心理学か
世の中には「ノンデザイナー」向けのUIデザインの情報が豊富にあります。
・書籍
・UX MILK
・Goodpatch Blog

　ではUIデザインガイドラインを暗記したらどうでしょう
→だがしかし、比較すると競合するデザインルールが・・・

　競合するルール
→Androidのハンバーガーメニュー　VS　iOSのタブメニュー
→iPhoneのChromeのアップデートではツールバーが上から下に移動

　※UIデザインガイドラインに振り回されて疲弊する症候群に心当たりはありませんか？
→そこで「抽象度」をひとつ上げて考えてみましょう
→写真撮った

　　　・「UI」は時代で変わるが「人」の認知機能はそう変わらない（少なくともあと数百年は・・・）
・となると、「人」が外部の反応をどう処理しているのかを知る（アルゴリズム？パターン？）方が、流行のUIを追いかけるより合理的

　　　・では、ユーザーがUIを操作するとき、「人」の中では何が起こっているのか
・見る、記憶する、学ぶ、思い出す、予想する・・・
・原理を理解すれば適用範囲が広がる！
・人の処理パターンを知っておけば個別のユーザーのフィードバックを集める前に
一定の質のUIが作れる

▼本日の目標
・いきなり「心理学（ドヤァ）」と語るのは照れくさいエンジニアの皆さんが、
UIデザインガイドラインを参考にしつつその根拠を共有することで、
現場の水掛け論から脱出する
・開発現場では「これはこういうルールだから」だけではなく、
「人はUIをこう見てこう理解するから」という議論もできるようになる。

　・ドン・ノーマン
・認知科学の第一人者
・ユーザー中心設計
・Appleのユーザーエクスプリエンスアーキテクト

　　優れたデザインは、常に心理学の知見に基づいてできている。

　・心理学について今日必要な知識
（認知心理学・認知科学・認知工学）

▼本日の対象範囲

　・認知情報処理とは。
・感覚記憶→短期記憶→長期記憶
→宣言的記憶
→エピソード記憶
→意味記憶
→手続き的記憶

　・デザインガイドライン
・各ガイドラインのデザイン原則
・Apple
・外観の整合性
・一貫性
・直接操作
・フィードバック
・メタファ
・ユーザによる制御

　　　・MATERIAL DESIGN
・マテリアルはメタファー（比喩）である
・大胆で生き生きとした、意識的なデザイン
・動きには意味がある
・柔軟な基盤
・プラットフォーム間の一貫性

　　　・Fluent Design System
・順応性
・親近感
・美しさ

　　　・Lignthing Design System
・明確さ
・効率
・一貫性
・美しさ

　・ガイドラインについて言えること
・Apple、Google、Microsoftはブランディングが必要なため、抽象度を高くせざるをえない
・UIデザインの潮流として、ユーザビリティはデザイン原則に含まれていてあたりまえという考え方
・各社のデザイン原則はもとをたどれば心理学に基づいている

▼UIデザインに使える心理学と具体例

　・注意を向ける（作業記憶（ワーキング・メモリー））
・短期記憶の役割
・注意を向ける範囲には限りがある
・短期記憶とは
・作業記憶とは
（４±1）昔は７±２
・注意とUIデザインの関係
・注意のリソースを奪わない
・作業記憶に負荷がかかるデザインの例
・雑然としたデザイン
・色使いにルールがない
・余白が生かされていない
・選択肢が多すぎる
・記憶できる数は”4±1”→チャンク
・一般的なデザインの慣習に従っていない
・使い方の見当がつかない斬新すぎるUI
・不要な入力をさせる
・システムが保持する情報をデフォルト値にしない

　・デザインガイドラインでの良い「注意」の向け方
・記憶できる数は4±1：ボトムメニュー（６個はDon’t）
・一般的な慣習に従う：メッセージ系
（見た目・音・アクション・時間・音）
セールスフォースではチャートになっている
・最低限の要素で表現する：ボタン
Material Design→ボタンをヒエラルキーで表現している
・最低限の要素で表現する：区切り線（ハイライト表現はDon’t）
・意味ある色使い：カラーパレット
・良いデフォルト状態にする：データ入力
（システムが保持するデータはあらかじめ入力しておく、最も入力しやすいコンポーネントを使う。等の工夫がされている）

　★まとめ
・人の短期記憶の特徴をうまく使う
・記憶できる数は4±1
・一般的なデザインの慣習に従う
・最小限の要素でデザインする
・意味のある色使いをする
・良いデフォルト状態を提供する

　・覚える（長期記憶）
・保持期間数日～数年
・宣言的記憶（頭で覚える）
・手続き的記憶（体で覚える）→自転車の乗り方
・エピソード記憶→今日学校でテストがあった
・意味記憶→勉強しなければテストで良い点はとれない

　・「覚える」こととUIデザインの関係
例：My JCB
・基本的には覚えなくてもすむようにする
・とはいえ、様々な知識のユーザーに対応するために
・使い方を示すことで覚えてもらう
・失敗を恐れずに使ってもらように工夫する
・感情を動かす

　・デザインガイドラインでの「覚え方」の例
・初回起動時のヘルプ：オンボーディング
・初回起動時のヘルプ：玄関マット
→ちょっとしたゲーミフィケーション要素のあるチュートリアルのコンポーネント

　・わかる（短期記憶・長期記憶）
・わかる＝メンタルモデルを理解する
長期記憶（スキーマスクリプト）
・スキーマとは
・スプリプトとは
・メンタルモデルとは
→ある物事が機能している仕組みをその人がどう理解しているかを表現したもの
→流動的

・スキーマの例
・洗濯スキーマ

　　・「わかる」こととUIデザインの関係
・ユーザーがシステムをどう解釈しているかをわかる必要がある
・デザイナーとユーザーは解釈が異なることが往往にしてある
・ユーザーとデザイナーのメンタルモデルが一致しないと、システムはわかりづらくなってしまう
・メンタルモデルを可視化することで、ユーザーのシステムの使い方を予測することができる
・ユーザー調査でデータを集める

　　・デザインガイドランでの「わかる」例
・アプリの情報構造：ナビゲーション方向
・アプリの情報構造：ナビゲーション方（フラット・ヒエラルキー・ストラクチャー）

■本日のまとめ
・デザインの原理を理解すれば適用範囲が広がる！
・ユーザーがUIを操作するとき「人」の中では何が起こっているのか
・人の処理パターンを知っておけば（定量/定性調査で）個別のユーザーのフィードバックを集める前に一定の質のUIが作れる
・流行のUIを追いかけるより合理的

　・今日学んだ認知情報処理
・注意を向ける
・注意のリソース（作業記憶）を奪わない
・覚える
・短期記憶から長期記憶へ移す：頻繁に定期的に正しく繰り返す
・わかる
・ユーザーのメンタルモデルを理解すると分かりやすいUIが作れる

最後に質問がいくつかあって終了でした。