HCI: Design Process

Slide 1: Design Process 陳啟亮 | 師大圖資所 | 2007/11/27 | www.xxc.idv.tw | xxc.chen@gmail.com

Slide 2: 每一個設計 的專案中 有各種角色

Slide 3: 客戶的期望 專案經理的想法 分析師的方案 程式工程師開發 企管顧問說明 被紀錄的文件 實際安裝的部份 系統建製的費用 售後服務的結果 客戶的實際需求

Slide 4: Agenda • Approach • Concepts – Parsona – Scenario – Storyboard – Use cases

Slide 5: Approach • 設計原則、設計取向

Slide 6: 3 approaches • User-centered Design – 使用者中心設計 • Designer-centered Design – 設計者中心設計 • Feature-centered Design – 功能中心設計

Slide 7: User-centered design • 使用者中心設計 • 並不是什麼新鮮事，每個人都會講 • 就連圖書館檢索系統也認為他們做了很 很多「使用者研究」…..

Slide 8: 你開的使用者需求有 沒有人會用這麼複雜 好，我會把「容易使 四百項功能… 的產品，你知道嗎？ 用」這項功能加上去

Slide 9: Some concepts

Slide 10: Persona

Slide 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; 描繪使用者行為模式的工具

Slide 12: Photo by nicolasnova in http://www.flickr.com/photos/nnova/2081056587/ （CC 2.0 Generic）

Slide 13: Persona Cards. Nielsen Norman Conference 2007, Barcelona http://www.flickr.com/photos/sjrobertson/2044376315/in/set-72157603228342088/

Slide 14: Development of Persona • Role Sampling: 選出或抽樣出具有效性與 代表性的角色 • Behavior Construction: 建構所選出角色的 行為

Slide 15: Case: Role Sampling • Eee PC testing role sampling

Slide 16: by kitty callahan http://www.flickr.com/photos/97555062@N00/253571053/in/photostream/

Slide 17: By by quickandirty http://www.flickr.com/photos/quickandirty/68582535/

Slide 18: Scenario

Slide 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; \"the scenario is France during the Reign of Terror\" 3: a postulated sequence of possible events; \"planners developed several scenarios in case of an attack\"

Slide 20: 鹿王本生 敦煌莫高窟

Slide 21: http://www.flickr.com/photos/paulhughes/2076950420/

Slide 22: http://csweb.cs.bgsu.edu/maner/domains/Scenario.htm

Slide 23: http://xml.netbeans.org/xsl/uml/scenarios/scenarios.gif

Slide 24: http://webanalytics.wordpress.com/2007/03/23/becommerce-awards-winners-web-analytics/

Slide 25: Storyboard

Slide 26: • 作為檢驗工具 • 搭配Persona等其他開發技術使用 • (個人認為)還蠻花時間的 • 呈現設計概念倒是好工具

Slide 28: http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0

Slide 29: http://www.sapdesignguild.org/resources/archive/design_session.asp

Slide 30: Use Case

Slide 31: OPAC 使用者

Slide 32: use case ; 使用案例 1. 一種系統分析圖示方法 • UML的9種圖示法之一 • 簡便易畫，可用來作為系統設計者與客戶 溝通系統需求 2. 也可用文字方式描繪

Slide 33: 流通模組的使 用案例 Circulation Use Case Rosasco, Nicholas (2005). Koha Architectural Study. Available in http://www.kohadocs.org/Koha_architecture.html

Slide 34: Question by janelbot

Slide 35: Process & Methodology

Slide 36: 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

Slide 37: Methodologies •瀑布式 waterfall methodology •漩渦式 Spiral methodology – rapid prototype methodology

Slide 40: project ideas: Posters. 自然就好

Slide 41: http://www.flickr.com/photos/chrisnoessel/2058114043

Slide 42: http://www.flickr.com/photos/chrisnoessel/

Slide 43: http://www.flickr.com/photos/chrisnoessel/2058900066/

Slide 44: http://www.flickr.com/photos/chrisnoessel/2058900182

Slide 45: http://www.flickr.com/photos/chrisnoessel/2058900296/

Slide 46: http://www.flickr.com/photos/21206108@N08/2054840778/

Slide 47: http://www.flickr.com/photos/16124417@N04/2036502305/

Slide 48: 期末作業 分享時間