讀書會書本『互動設計』第三章-認識使用者

1. 第三章 瞭解使用者 1 報告者：Nancy Chou

2. 為什麼需要瞭解使用者？ Tim Brown ( IDEO CEO ) 的分享 影片：大設計思想 http://www.youtube.com/watch?v=TLKjEmpZ4CE 2 P.80 透過瞭解人類擅長/不擅長的事物，以期用好的設計來幫助他們增強使用/改善生活

3. 今天要談的是 認知 心智模式 互動設計 3

4. 認知(cognition) 是什麼？ 4

5. P.81 以學術角度來看 學習 注意力 記憶 知識 空間知識心像視覺記憶 語言 概念與分類 推理 問題解決 專家與創造力 判斷與決策 資料來源：蔡志浩老師網站：心理學的異想世界 5

6. 你的『心裡』在做什麼？ 接受訊息 思考 記憶 學習 瞭解他人 與他人交談 操控他人 計畫晚餐吃什麼 寫報告 coding 畫 prototype 想像週一颱風假 決策 解決問題 作白日夢 6

7. 以資訊科學角度來看 From wikipedia：Cognition is the scientific term for "the process of thought”.認知是思考的過程 From 蔡志浩老師：認知心理學就是大腦的逆向工程（reverse engineering）：利用以實驗為主的研究方法，試圖了解大腦的演算法（algorithms）與資料結構（data structures） 逆向工程是什麼？ 演算法是什麼？ 7

8. 逆向工程是什麼？ 透過對某種產品的結構、功能、運作進行分析、分解、研究後，製作出功能相近，但又不完全一樣的產品過程。 From wikipedia 8

9. 演算法是什麼？ 輕鬆時間請計算 1 + 2 + 3 + ….. + 100 的總和是多少？ 9

10. 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + …..+ 100 = 你會得到： 5050 + + 101 101 1 + 2 + 3 + …49 + 50 + 51 + …97 + 98 + 99 + 100 101 101 + + 你會得到： 101 X 50 = 5050 完成一個任務所需要的具體步驟和方法。也就是說給定初始狀態或輸入資料，能夠得出所要求或期望的終止狀態或輸出資料。 From wikipedia 10

11. 為什麼談互動設計 跟『認知』有關？ 11

12. 開宗明義第一章： 使用者的習性 安全探索 ( safe exploration) 即時滿足 (instant gratification) 滿意即可 (satisificing) 中途變卦 (change in midstream) 延後選擇 (deferred choices) 遞增構建 ( incremental construction) 習慣 (habituation) 空間記憶 (spatial memory) 前瞻記憶 (prospective memory) 簡化重覆工作 (streamlined repetition) 12

13. 13 P.82

14. P.82 注意力( attention) 定義：在可能的範圍內及特定時間點，對某些事物加以選擇性專注的程序 Selecting things to concentrate on at a point in time from the mass of stimuli around us 影響因素：1 ) 我們是否有明確的目的和資訊 2 ) 我們需要的資訊在環境中是否清楚明瞭 14

15. 注意力( attention) 我們是否有明確的目的和資訊 男女可能有差異 15

16. P.83 輕鬆時間請找出左圖的 double room at the Holiday Inn in Bradley ？請找出右圖的 double room at the Quality Inn in Columbia 平均找 5.5 秒分析：資料弄成一捆，糾成一團 平均找 3.2 秒分析：資料以垂直方式分類 16

17. P.84 注意力 ( attention) 設計意涵： 1 ) 當資訊需要被注意時，務必讓資訊突出明顯。 Make information salient when it needs attending to 2 ) 使用一些技巧使資訊明顯，如配色、排列、空隙、底線、次序與動畫。 Use techniques that make things stand out like colour, ordering, spacing, underlining, sequencing and animation 3) 避免讓介面很凌亂，可遵循 google.com 的簡單設計。 Avoid cluttering the interface - follow the google.com example of crisp, simple design 避免因為技術可行，就表現得太花俏。 Avoid using too much because the software allows it 17

18. 18 P.85

19. P.83 知覺 ( perception & recognition) 定義：資訊如何被取得，並經由不同感官轉化成經驗的程序。 How information is acquired from the world and transformed into experiences. 互動設計時的重點：資訊需以可預期、易接受的型式呈現，讓使用者易區別且可辨識。 How information is acquired from the world and transformed into experiences. 19

20. 輕鬆時間請找出圖中字『 Italian』 20

21. 輕鬆時間請找出圖中字『 French』 實驗發現，人們對於群集起來的資料辨識度較高。 此頁的圖比上一頁好找資料 21

22. 22 馬上來場電視直擊

23. 留白 (whitespace、negative space) 討論：有人說網頁上的留白會影響人們找資料的速度，你同意嗎？可參考：Negative Space in Webpage Layouts: A Guide 23

24. P.85 知覺 ( perception & recognition) 設計意涵： 1 ) 資訊的呈現必須設計成好接收易理解。 Representations of information need to be designed to be perceptible and recognizable 2 ) 圖形顯示必須讓使用者易於辨識其含意。 Icons and other graphical representations should enable users to readily distinguish their meaning 邊框與留白是有效組織資訊的方式。 Bordering and spacing are effective visual ways of grouping information 聲音必須能被聽得見與分辨。 Sounds should be audible and distinguishable 語音輸出需能讓使用者分辨字句，並瞭解意思。 Speech output should enable users to distinguish between the set of spoken words 6) 文字需具備易讀性，且能跟背景明顯區別。 Text should be legible and distinguishable from the background 24

25. 25 P.85

26. P.86 記憶 ( memory) 重點： 1 ) 腦袋裡包含解碼與取得資料的過程。 Involves first encoding and then retrieving knowledge. 2) 我們會自動過濾資料。 We don’t remember everything - involves filtering and processing what is attended to 3) 情境脈絡有助於我們記憶回憶。 Context is important in affecting our memory (i.e., where, when) 4) 我們擅長理解，而不是回憶事情。Well known fact that we recognize things much better than being able to recall things Better at remembering images than words Why interfaces are largely visual 26

27. ( 刺激/感官  記憶 ) 的過程 圖片來源：http://health.howstuffworks.com/mental-health/neurological-conditions/amnesia1.htm 27

28. 輕鬆時間如何記憶下列資訊呢？ 王維 田園 散文 韓愈 孟浩然 五言詩 28

29. 情境脈絡有助於記憶 資料來源：東大生的筆記本：http://www.books.com.tw/exep/prod/lookinside.php?item=0010457304#p 29

30. 回憶 vs 辨識( recall vs recognition ) 靠『回憶』下關鍵字 靠『回憶+辨識』 靠『辨識』找感興趣的資訊 30

31. 輕鬆時間你如何管理生活、工作大小事呢？ 個人資訊管理 ( PIM – Personal Information Management ) ： 筆記、日誌、通訊錄、待辦清單、重要日期提醒、備忘錄、email/傳真歸檔、 專案管理 心法流派之一：GTD 31

32. P.90 記憶 ( memory) 設計意涵： 1 ) 別讓使用者的腦袋負荷太多資料。 Don’t overload users’ memories with complicated procedures for carrying out tasks. 2) 盡量以『辨識』而不是『記憶』來設計介面。 Design interfaces that promote recognition rather than recall. 3) 提供豐富的數位資料組織整理方式好幫助使用者管理資料。 Provide users with a variety of ways of encoding digital information to help them remember where they have stored them 32

33. 33 P.93

34. 傳統電話 vs 手機通話 的差別 34 P.94

35. 某家銀髮族手機 35

36. 抽象概念的學習 – 使用動態連結 ( dynalinking ) 36 P.95

37. 37 P.96

38. 比較、計畫 38 資料來源：www.clarizen.com

39. 分類 39 資料來源：http://websort.net/

40. 規劃 40 資料來源：www.5284.com.tw

41. P.99 模仿真實世界 設計意涵： 1 ) 模仿真實世界行為運用到介面設計中，是很有效的設計策略。 提供新的整合性，以延伸與幫助使用者完成現實世界辦不到的工作。 瞭解電子世界出現的問題本質 vs現實世界處理問題時的關聯性 41

42. 42 傳統 vs數位的名片整理方式

43. P.100 心智 模型 是什麼？ 43

44. 看到這些圖片，你會想到什麼？ 44

45. 心智模式 ( mental model) 定義： 人類在經歷或學習某些事件之後，會對事物的發展及變化，歸納出一些結論，等到重複或類似的事情再度發生，我們便不自覺的應用這些先前寫好的劇本，來預測事物的發展變化。 真實狀況： 人們經常用錯誤的心智模式做事。 45

46. 透明化的設計 - 1 使用者想深入瞭解對系統有操縱知識 使用者只在意使用不想瞭解系統運作 46

47. 透明化的設計 - 2 47

48. 透明化的設計 - 3 48

49. Reference 心智模型(中文)：http://www.slideshare.net/ufu999 網頁留白(英文)：http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/ 大腦與行為-洪蘭課程(中文)：http://sites.google.com/site/brainbehavior2009/Home 長期與短期記憶(英文)：http://www.cvgs.k12.va.us/research/Final/sresch04/montague/literature.html 數位學習咖啡棧(中文)：http://www.nhcue.edu.tw/~jih/index.htm 用excel作卡片分類(英文)：http://www.rosenfeldmedia.com/books/cardsorting/blog/card_sort_analysis_spreadsheet/ 系統化思考軟體 - iThink： http://store.pchome.com.tw/cheerchain/M03092366.htm http://www.iseesystems.com/ 什麼是心智模型(英文)：http://blog.iseesystems.com/systems-thinking/what-are-mental-models/ 什麼是心智模型(中文)：http://www.i-kid.com.tw/DR%20LEARNING/doc/DR%20LEARNING-120.htm http://betterexplained.com/articles/category/guides/ 專訪 Donald Norman：http://blog.udn.com/jason080/995686 書-創智慧：http://crazycat1130.pixnet.net/blog/post/17749549 49