1. わかるようにする
認知科学とデザインとプログラムをつまみ食いしてみた
@hajikami
2012/03/03
俺の話を聞け2012

2. 目次
1.自己紹介
2.魔法の数を意識する
3.アクションへのプロセスを考える
1.ラスムッセンの３階層モデル
2.(ギブソンの)アフォーダンス
4.わかるようにする方法を考える
1.グループにする: まとめる, 図示する
2.シンプルにする: 区切る, 削る
3.シンボルにする: 名前, ピクトグラム
5.まとめ
2012/03/03 わかるようにする 2

3. 自己紹介
● @hajikami
● 基幹業務系プログラマ（2年目）
– 業務: Pro*C, PL/SQL, Java, etc...
– 趣味: PHP, Python, Haskell, etc...
● ブログ書いてます
– http://my-rest.icca.jp/blog/
● 20代が主役の勉強交流会！ LTSpiral 運営スタッフ
– @ltspiral
2012/03/03 わかるようにする 3

4. 魔法の数を意識する
魔法の数って何？
2012/03/03 わかるようにする 4

5. 魔法の数:
マジックナンバー（プログラム）
if ($day_wk === 0) { ● プログラム中に登場する
$bgcolor = "red"; リテラルな数値
}else if ($day_wk === 6) {
$bgcolor = "blue"; ● 左記の例では、
}else { 数字は以下の意味を持つ
$bgcolor = ""; ● 0: 日曜日
} ● 6: 土曜日
// 0 と 6 の意味は何？
● 明記しないとわからない
2012/03/03 わかるようにする 5

6. 魔法の数:
マジカルナンバー（認知心理学）
● 魔法の数 7 ± 2
● 人間が一時的に覚えられる記憶の数は ５～９ 個程度
● 単位は「チャンク」
– 「５～９のかたまり」を覚えられる
– remember は8文字あるけど、１つの単語として覚える
– xbdhgrm4 は8文字あって、8つの文字として覚える
● ミラーが提唱
● ７チャンク程度に抑えないと、わからなくなる
2012/03/03 わかるようにする 6

7. 魔法の数を意識する
● 魔法の数を意識する
● 数値などを直接使わない
● ７個程度覚えれば、全体を把握できるようにする
2012/03/03 わかるようにする 7

8. アクションへのプロセスを考える
予想したとおりに動いてる？
2012/03/03 わかるようにする 8

9. ラスムッセンの３階層(SRK)モデル
● 人間の行為を３パターンに分類する
● 技術ベース(Skill-Based)
– ほとんど無意識に行動する
– 慣れきっているとき
● 規則ベース(Rule-Based)
– 過去に覚えた規則に従って行動する（再認）
– 前に触ったことがあるものを触るとき
● 知識ベース(Knowledge-Based)
– 考えて行動する・過去の経験から似たものを探す（同定）
– 新しいものを触るとき
2012/03/03 わかるようにする 9

10. (ギブソンの)アフォーダンス
● 「環境が動物に提供するもの、
良かれ悪かれ、用意したり備えたりするもの」
● 例: あなたは「箱」をどう使いますか？
– ものを入れる
– 座る
– 上に乗る
– ものを置く
– 叩いて音を出す（カホン）
箱には「ものを入れる」「座る」「上に乗る」
「ものを置く」「叩いて音を出す」アフォーダンスがある
2012/03/03 わかるようにする 10

11. アクションへのプロセスを考える
● 初めてのアクションには「知識ベース」で行動する
● あなたの提供するプロダクトは
過去の経験・知識を基に使用することができますか？
● あなたのプロダクトは「何か」を提供する
● あなたの提供するプロダクトは
ユーザに何をアフォードしていますか？
● 同定しやすいようにアフォードしてやる
2012/03/03 わかるようにする 11

12. わかるようにすることを考える
今までの復習
● 魔法の数を意識する
● 同定しやすいようにアフォードしてやる
じゃあ実際どうすればいいの？
2012/03/03 わかるようにする 12

13. わかるようにすることを考える
● グループにする
● まとめる
● 図示する
● シンプルにする
● 区切る
● 削る
● シンボルにする
● 名前をつける
● ピクトグラムにする
2012/03/03 わかるようにする 13

14. グループにする
● 小さく煩雑なものをひとまとめにする
● まとめる
– 「新規作成」「開く」を『ファイル』にまとめる
– プログラムの複数箇所にある同じ「処理」を『関数』にまとめる
● 図示する
– [保存] －書き込み→ [HDD]
– 「プロダクトの使い方」を画面キャプチャと矢印で説明する
● 一度に覚える量を減らすことが出来る
● 「同定しやすくする」ことが重要
2012/03/03 わかるようにする 14

15. シンプルにする
● 大きく複雑なものを小さく分ける
● 区切る
– ページを分ける
– モジュールを分ける
– プログラムを１行 → ２行にする
● 削る
– 要らない機能は付けない！
● 一度に覚える量を減らすことが出来る
2012/03/03 わかるようにする 15

16. シンボルにする
● 行為・かたまりをシンボルにする
● 名前をつける
– ディスクにデータを書き込む行為を『保存』と名付ける
– SUNDAY という定数を作り、値を 0 にする
● ピクトグラムにする
– 「保存」を『フロッピーのアイコン』にする
● どちらも「同定しやすくする」ことが重要
2012/03/03 わかるようにする 16

17. まとめ
● 魔法の数を意識する
● 一時的に覚えておけるのは７個ぐらい！
● 数字って覚えられない！
● 同定しやすくする
● みんな、過去の似た経験から推測する！
● アフォーダンスが１つのヒントになるかも？
● 一気に覚えなくてもわかるようにする
● グループにする
● シンプルにする
● シンボルにする
2012/03/03 わかるようにする 17

18. 参考文献
● キーワードコレクション 認知心理学
● ISBN978-4-7885-1249-8
● 誰のためのデザイン？
● ISBN978-4-7885-0362-5
● 頭がよくなる「図解思考」の技術
● ISBN978-4-8061-3549-4
● 良いコードを書く技術
● ISBN978-4-7741-4596-9
2012/03/03 わかるようにする 18

19. 以上です
ご清聴感謝いたします
楽しかったですか？
Thank you for your listening.
Does my presentation make you happy?
2012/03/03 わかるようにする 19