48
Design Process 陳啟亮 | 師大圖資所 | 2007/11/27 | www.xxc.idv.tw| [email protected]

HCI: Design Process

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: HCI: Design Process

Design Process

陳啟亮 | 師大圖資所 | 2007/11/27 | www.xxc.idv.tw | [email protected]

Page 2: HCI: Design Process

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

Page 3: HCI: Design Process

客戶的期望 專案經理的想法 分析師的方案 程式工程師開發 企管顧問說明

被紀錄的文件 實際安裝的部份 系統建製的費用 售後服務的結果 客戶的實際需求

Page 4: HCI: Design Process

Agenda

• Approach

• Concepts– Parsona

– Scenario

– Storyboard

– Use cases

Page 5: HCI: Design Process

Approach

• 設計原則、設計取向

Page 6: HCI: Design Process

3 approaches

• User-centered Design– 使用者中心設計

• Designer-centered Design– 設計者中心設計

• Feature-centered Design– 功能中心設計

Page 7: HCI: Design Process

User-centered design

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

Page 8: HCI: Design Process

你開的使用者需求有四百項功能…

沒有人會用這麼複雜的產品,你知道嗎?

好,我會把「容易使用」這項功能加上去

Page 9: HCI: Design Process

Some concepts

Page 10: HCI: Design Process

Persona

Page 11: HCI: Design Process

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

Page 12: HCI: Design Process

Photo by nicolasnova in http://www.flickr.com/photos/nnova/2081056587/ (CC 2.0 Generic)

Page 13: HCI: Design Process

Persona Cards.

Nielsen Norman Conference 2007, Barcelona

http://www.flickr.com/photos/sjrobertson/2044376315/in/set-72157603228342088/

Page 14: HCI: Design Process

Development of Persona

• Role Sampling: 選出或抽樣出具有效性與代表性的角色

• Behavior Construction: 建構所選出角色的行為

Page 15: HCI: Design Process

Case: Role Sampling

• Eee PC testing role sampling

Page 16: HCI: Design Process

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

Page 17: HCI: Design Process

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

Page 18: HCI: Design Process

Scenario

Page 19: HCI: Design Process

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; "plannersdeveloped several scenarios in case of an attack"

Page 20: HCI: Design Process

鹿王本生敦煌莫高窟

Page 21: HCI: Design Process

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

Page 22: HCI: Design Process

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

Page 23: HCI: Design Process

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

Page 24: HCI: Design Process

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

Page 25: HCI: Design Process

Storyboard

Page 26: HCI: Design Process

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

Page 27: HCI: Design Process
Page 28: HCI: Design Process

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

Page 29: HCI: Design Process

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

Page 30: HCI: Design Process

Use Case

Page 31: HCI: Design Process

OPAC

使用者

Page 32: HCI: Design Process

use case; 使用案例

1. 一種系統分析圖示方法• UML的9種圖示法之一• 簡便易畫,可用來作為系統設計者與客戶

溝通系統需求

2. 也可用文字方式描繪

Page 33: HCI: Design Process

Rosasco, Nicholas (2005). Koha Architectural Study. Available in http://www.kohadocs.org/Koha_architecture.html

流通模組的使用案例Circulation Use Case

Page 34: HCI: Design Process

Question

by janelbot

Page 35: HCI: Design Process

Process &Methodology

Page 36: HCI: Design Process

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

Page 37: HCI: Design Process

Methodologies

•瀑布式 waterfall methodology

•漩渦式 Spiral methodology

– rapid prototype methodology

Page 38: HCI: Design Process
Page 39: HCI: Design Process
Page 40: HCI: Design Process

project ideas:Posters.自然就好

Page 41: HCI: Design Process

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

Page 42: HCI: Design Process

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

Page 43: HCI: Design Process

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

Page 44: HCI: Design Process

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

Page 45: HCI: Design Process

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

Page 46: HCI: Design Process

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

Page 47: HCI: Design Process

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

Page 48: HCI: Design Process

期末作業分享時間