HCI: Design Process

7,068 views

Published on

It's a talk in Information psychology (2007-Fall) in Social Education Department, NTNU, Taiwan.
This is the 2 of 4 talks.

Published in: Technology, Education

HCI: Design Process

  1. 1. Design Process 陳啟亮 | 師大圖資所 | 2007/11/27 | www.xxc.idv.tw | xxc.chen@gmail.com
  2. 2. 每一個設計 的專案中 有各種角色
  3. 3. 客戶的期望 專案經理的想法 分析師的方案 程式工程師開發 企管顧問說明 被紀錄的文件 實際安裝的部份 系統建製的費用 售後服務的結果 客戶的實際需求
  4. 4. Agenda • Approach • Concepts – Parsona – Scenario – Storyboard – Use cases
  5. 5. Approach • 設計原則、設計取向
  6. 6. 3 approaches • User-centered Design – 使用者中心設計 • Designer-centered Design – 設計者中心設計 • Feature-centered Design – 功能中心設計
  7. 7. User-centered design • 使用者中心設計 • 並不是什麼新鮮事,每個人都會講 • 就連圖書館檢索系統也認為他們做了很 很多「使用者研究」…..
  8. 8. 你開的使用者需求有 沒有人會用這麼複雜 好,我會把「容易使 四百項功能… 的產品,你知道嗎? 用」這項功能加上去
  9. 9. Some concepts
  10. 10. Persona
  11. 11. Persona Per*so“na n, 假面 1: an actor‘s portrayal of someone in a play; 對戲劇中某個角 色的設定 . [syn: {character}, {role}, {theatrical role}, {part}] 2: (Jungian psychology) [心理學] a personal facade that one presents to the world; 個人面對社會世界的外在人格. [syn: {image}] 3. {Wikipedia} [設計] an artifact that consists of a narrative relating to a desired user or customer‘s daily behavior patterns; 描繪使用者行為模式的工具
  12. 12. Photo by nicolasnova in http://www.flickr.com/photos/nnova/2081056587/ (CC 2.0 Generic)
  13. 13. Persona Cards. Nielsen Norman Conference 2007, Barcelona http://www.flickr.com/photos/sjrobertson/2044376315/in/set-72157603228342088/
  14. 14. Development of Persona • Role Sampling: 選出或抽樣出具有效性與 代表性的角色 • Behavior Construction: 建構所選出角色的 行為
  15. 15. Case: Role Sampling • Eee PC testing role sampling
  16. 16. by kitty callahan http://www.flickr.com/photos/97555062@N00/253571053/in/photostream/
  17. 17. By by quickandirty http://www.flickr.com/photos/quickandirty/68582535/
  18. 18. Scenario
  19. 19. Scenario Sce*na“ri*o, n. 情節 1: an outline or synopsis of a play (or, by extension, of a literary work) 2: a setting for a work of art or literature; quot;the scenario is France during the Reign of Terrorquot; 3: a postulated sequence of possible events; quot;planners developed several scenarios in case of an attackquot;
  20. 20. 鹿王本生 敦煌莫高窟
  21. 21. http://www.flickr.com/photos/paulhughes/2076950420/
  22. 22. http://csweb.cs.bgsu.edu/maner/domains/Scenario.htm
  23. 23. http://xml.netbeans.org/xsl/uml/scenarios/scenarios.gif
  24. 24. http://webanalytics.wordpress.com/2007/03/23/becommerce-awards-winners-web-analytics/
  25. 25. Storyboard
  26. 26. • 作為檢驗工具 • 搭配Persona等其他開發技術使用 • (個人認為)還蠻花時間的 • 呈現設計概念倒是好工具
  27. 27. http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0
  28. 28. http://www.sapdesignguild.org/resources/archive/design_session.asp
  29. 29. Use Case
  30. 30. OPAC 使用者
  31. 31. use case ; 使用案例 1. 一種系統分析圖示方法 • UML的9種圖示法之一 • 簡便易畫,可用來作為系統設計者與客戶 溝通系統需求 2. 也可用文字方式描繪
  32. 32. 流通模組的使 用案例 Circulation Use Case Rosasco, Nicholas (2005). Koha Architectural Study. Available in http://www.kohadocs.org/Koha_architecture.html
  33. 33. Question by janelbot
  34. 34. Process & Methodology
  35. 35. Methodology Meth`od*ol“o*gy, n. 1: 方法論[研究與分析的]. the branch of philosophy that analyzes the principles and procedures of inquiry in a particular discipline [syn: {methodological analysis}] 2: 有系統的方法[開發上的]. the system of methods followed in a particular discipline
  36. 36. Methodologies •瀑布式 waterfall methodology •漩渦式 Spiral methodology – rapid prototype methodology
  37. 37. project ideas: Posters. 自然就好
  38. 38. http://www.flickr.com/photos/chrisnoessel/2058114043
  39. 39. http://www.flickr.com/photos/chrisnoessel/
  40. 40. http://www.flickr.com/photos/chrisnoessel/2058900066/
  41. 41. http://www.flickr.com/photos/chrisnoessel/2058900182
  42. 42. http://www.flickr.com/photos/chrisnoessel/2058900296/
  43. 43. http://www.flickr.com/photos/21206108@N08/2054840778/
  44. 44. http://www.flickr.com/photos/16124417@N04/2036502305/
  45. 45. 期末作業 分享時間

×