資策會從洞察需求到交互原型溝通

@第⼀一屆智慧創新使⽤用者經驗設計論壇
Inspire Exciting User Experience

產品原型與互動設計

Gainshin (Joshua), Hsiao
使⽤用者經驗策略總監

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

各位好，我是”蕭”健興


2

我來至

我們把 User (悠識的諧音)當做公司名稱，時時刻刻不忘以使用
者為中心來思考網站規劃與設計


2
3

來到這種場合，最怕別⼈人問：
UX 是什麼？

要⼯工作⾯面試⽤用的版本？
要跟⽼老板吵架⽤用的版本？
學校研究所申請⽤用的版本？


4

我覺得

⼤大家的版本都很好。
歡迎到以下場⼦子探探：


5

由於本論壇為收費課程，在演講過程中，
敬請盡量避免讓學員產生廣告印象。


6


7

UIG 過去點滴

source: http://www.uxtaiwan.org/ch/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

8

當UX 社群彼此互助

source:http://www.facebook.com/web.plan 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

9

往不同層次深耕


10

UX people的熱情展現

source: http://redux2012.ixda.org.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

11

還有超級賽亞人級的戰鬥力

source:http://www.webconf.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

12

樂見又有一個新觀點

source:http://www.slideshare.net/uxcrank/the-ux-umbrella 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

13

當 UX 變成一種顯學

source:http://www.zurb.com/word/product-design 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

14

UX 的戰略與戰術

source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

15

使⽤用者中⼼心是⼀一種戰略（就像中
興漢室，誤），產品原型是溝通
戰術的⼀一種。互動跟設計⼀一樣重
要。重點是與⼈人互動。


16

共同敵⼈人是外⾯面的競爭者，不是
部⾨門裡⾯面的⽼老闆。

當然好的向上管理也是⼀一種好戰
術。


17

UX 的層次應用

戰略使⽤用者經驗中⼼心設計

使⽤用者經驗⽅方法
戰術

使⽤用者經驗實戰
戰⾾鬥

18

三顧茅廬，劉備與諸葛孔明 UX 豈止是紙上談兵？


19

苦命的從業轉型UX之路：跨界是偶然中的必然
2002 2006 2007 2008 2009 2010 2011 2012

CYCU EAMC Yahoo! CYCU ASUS UserXper

Design Education Software Internet Education Hardware Consulting

Media Tech Strategic user
Graphic Web Experience Product Team Lead & Senior
Designer Developer Evangelist Manager Researcher Experience
Adjunct Instructor
Director


20

裡外掙扎，想要把那美好的自我加載到產品上

source: http://www.onefunnyjoke.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

21

回到解決問題的定位，多樣可能的創造者，同樣有價值

你的孩子並不是你的，
他們是生命對自身的渴慕所生的子女。
他們經你而生，卻不是你所造生。
他們與你相伴，但是並不屬於你。
你可以給他們你的愛，卻不能給他們你的思想；
因為他們擁有自己的思想。

-- Kahlil Gibran, "The Prophet"


22

流程當中的 UX 功能觀察

source:http://loichay.tumblr.com/post/16641114905 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

23

太拘泥於本我而忽略其它觀點的創造性

Video:http://www.youtube.com/watch?feature=player_embedded&v=6S2gbcsHhqQ#!

24

孫權初掌權拱周瑜 BCD （Boss centerd design ）才是王道?


25

研究⼈人員：產品命格
產品經理：產品規格
互動設計：產品性格
視覺設計：產品⾵風格
原型設計：產品體格


26

周瑜⾚赤壁臨危授命⼤大都督 UX人員應為使用者需求請命，而非救急


27

UED組織當中的角色觀察

Product planner/ Producer

Researcher Interaction Visual Designer
(Psychologist, Designer /Prototyper
Anthropologist, (System analysist,
Economic Industrial (Graphic designer,
Scientist) designer) Web developer,
Editor)


28

應該具備有的工作心態

source: http://www.p-age.com.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

問題當中的 UX 方法觀察

source:http://www.slideshare.net/uxcrank/the-ux-umbrella 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

30

諸葛亮⾆舌戰東吳群儒 UX 方法眾多，但溝通的論述明確最重要


31

Research
互動設計透過原型串接其它方法
Understand
Context

Understand
Users Prototype

Understand
Business Requirements
Flow Diagrams

Personas Wireframes

Storyboard Visual Layer
Scenarios

Conceptual
Model Prototype

Usability
Testing


32

協同性的產出與轉化


33

司⾺馬懿出征 UX人員應是組織內的產品策士


34

透過原型來掌握溝通與成本

初期設計可能性多後期變更設計
變更設計成本不高成本很高

source: http://www.ettoday.net/news/20130101/147339.htm 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

35

心智模型帶動概念原型


36

首先，要動電腦前先動筆

source: http://lafango.com/matreeves/media/880432-my-hand-drawing-a- 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
picture-of-my-hand-that-is-gonig-to-ﬁnish

畫面原型檢視遺漏的動作程序

source: http://www.elidot1.com/wordpress_Test/?p=3755 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

從使用者的當下情境來思考任務推進

source: http://pichicola.com/10-envases-creativos-y-con-imaginacion/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

39

要專注在使用者已有的經驗上找亮點

source: http://www.ettoday.net/news/20130101/147339.htm 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

40

觀點不同，對於相同資訊解讀方式也不同

source: http://planetsurprises.wordpress.com/tag/swimming-pool/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

41

情確的任務切割，原型可以用來做研究驗證

source: http://www.youtube.com/watch?v=9wQkLthhHKA&feature=player_embedded

42

DRAFT WIREFRAME:重在關鍵畫面

source: http://vi.sualize.us/ipad_radio_app_sketches_6_pixelhalunke_wireframes_tablet_ui_sketch_picture_dRZS.html

43

WIREFRAME:灰階表現版面訊息層次

source:m.wangchao.net.cn 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

44

原型應分層陳述
High Low

Text

Presentation Style

Layout

User Assistance
Impact on
Editing
User
Behavior Awareness Usability

Navigating

Organizational Model

Structure Task Flow

Conceptual Model
Low High


45

出師表劉禪送孔明扶助不能自立的產品決策


46

團隊中的溝通:從需求消化到概念試做

source:http://asinthecity.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

47

好的方案應該不僅於一種

source: http://www.hksilicon.com/kb/articles/44112/Bret-Victor-UI 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

UX溝通的互動需要被引導

source: Jenny rogers(2010), Coaching Skills a handbook 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

觀察始於同理心

Hear Create Deliver
Abstract

Themes Opportunities

Time

Stories Solutions

Prototypes
Concrete

Observation Implementation Plan

source: www.openideo.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

好的轉化在於對於關係人的交集到位

source: http://vaughanmerlyn.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

先等一下，別急著定義所有產品流程

source: https://s-media-cache-ec5.pinimg.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

52

劉備東征東吳 UX 是提供觀點，而非為決定背書


53

給決策的人看得見（可動手做）的東西做討論

source: http://www.clothic.com/blog/usbcell-rechargeable-batteries.html 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

54

太早把資訊主觀地對位，未預期的認知錯誤越滾越多

source: http://www.facebook.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

55

功能因行為洞察不足而進行的補強也是差強人意


56

使用者有其慣性（偏見）而不容易學習新事情


57

過度地簡化意味著形成另一種困難

source: http://www.authority-site.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

58

讓使用者看見的，不見得是他會用的

-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

“Look around feverishly for anything that is interesting or vaguely
resembles what you are looking for, and is clickable.” Luke

source:http://www.missyuan.net/school/web_2012/web_9697.html 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

59

有目的性地導引使用者的操作路徑（眼球）

source: http://ﬁlmframe.net/category/drama/page/17/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

60

承先啓後的系統貫穿

Interaction design

source:http://www.scenariolab.com.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

當新議題到來：友善性的觸控網頁

source: http://www.hksilicon.com/kb/articles/88885/PC 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

62

當新議題到來:RWD

source: http://mediaqueri.es/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

63

關⽻羽⼤大意失荊州 UX 也非一次成敗論英雄


64

原型與決策

事實價值
取向取向

產品
決策
概念原型

產品低擬真原型

產品⾼高擬真原型市場
情境
可⾏行
取向悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

65

曹操稱魏⺩王原型才能讓產品恩威並重


66

三字言總結

研究，忠於所見，忠於所聽。
忠
但不讓 UX 淪為個人己見之背書。

原型，勇於手做，勇於闡述。
勇
但不讓 UX 淪為個人拒諫之堅持。

互動，智於共見，智於成全。
智
但不讓 UX 淪為論斷成敗之主因。

67

期待在社群裡多相見， Thank you

source:http://www.facebook.com/web.plan 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

68

資策會 從洞察需求到交互原型溝通

More Related Content

What's hot

Viewers also liked

Similar to 資策會 從洞察需求到交互原型溝通