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

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

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

產品原型與互動設計

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


2

各位好，我是”蕭”健興


32

我們把 User (悠識的諧音)當做公司名稱，時時刻刻不忘以使用

者為中心來思考網站規劃與設計

我來至


4

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

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


5

我覺得

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


6

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


7


8

source: http://www.uxtaiwan.org/ch/

UIG 過去點滴

http://www.facebook.com/web.plan



9

source:http://www.facebook.com/web.plan

當UX 社群彼此互助




10

往不同層次深耕


11

source: http://redux2012.ixda.org.tw/

UX people的熱情展現

http://www.slideshare.net/uxcrank/the-ux-umbrella



12

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

source:http://www.webconf.tw/




13

source:http://www.slideshare.net/uxcrank/the-ux-umbrella

樂見又有一個新觀點




14

source:http://www.zurb.com/word/product-design

當 UX 變成一種顯學




15

UX 的戰略與戰術

source: http://my.cngba.com/




16

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


17

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

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


18

戰略

戰術

戰⾾鬥

使⽤用者經驗中⼼心設計

使⽤用者經驗⽅方法

使⽤用者經驗實戰

UX 的層次應用


19

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





20

201020092008200720062002

Design Education Internet Hardware

2011

Software

GraphicDesigner

Web Developer

ExperienceEvangelist

Product Manager

SeniorResearcher

Media TechTeam Lead &Adjunct Instructor

2012

Strategic user Experience Director

Consulting

Yahoo! UserXperASUSEAMCCYCU CYCU

Education

苦命的從業轉型UX之路：跨界是偶然中的必然


21

source: http://www.onefunnyjoke.com/

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




22

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

-- Kahlil Gibran, "The Prophet"

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


23

source:http://loichay.tumblr.com/post/16641114905

流程當中的 UX 功能觀察




24

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

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

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

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


25

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





26

研究⼈人員：產品命格

產品經理：產品規格

互動設計：產品性格

視覺設計：產品⾵風格

原型設計：產品體格


27

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





28

Product planner/ Producer

Researcher(Psychologist,

Anthropologist,EconomicScientist)

Interaction Designer

(System analysist, Industrial designer)

Visual Designer/Prototyper

(Graphic designer, Web developer,

Editor)

UED組織當中的角色觀察

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

應該具備有的工作心態

http://www.p-age.com.tw/



30

source:http://www.slideshare.net/uxcrank/the-ux-umbrella

問題當中的 UX 方法觀察




31

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





32

UnderstandUsers

Research

UnderstandContext

UnderstandBusiness

Prototype

Scenarios

Personas

Flow Diagrams

Prototype

Wireframes

Visual Layer

Requirements

UsabilityTesting

Build

ConceptualModel

Storyboard

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


33

協同性的產出與轉化


34

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





35

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

後期變更設計成本很高

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

source: http://www.ettoday.net/news/20130101/147339.htm




36

心智模型帶動概念原型


首先，要動電腦前先動筆

source: http://lafango.com/matreeves/media/880432-my-hand-drawing-a-picture-of-my-hand-that-is-gonig-to-finish






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

source: http://www.elidot1.com/wordpress_Test/?p=3755




39

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

source: http://pichicola.com/10-envases-creativos-y-con-imaginacion/




40

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

source: http://www.ettoday.net/news/20130101/147339.htm




41

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

source: http://planetsurprises.wordpress.com/tag/swimming-pool/




42

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

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




43

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

DRAFT WIREFRAME:重在關鍵畫面




44

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

source:m.wangchao.net.cn


45

Text

Style

Layout

User Assistance

Editing

Navigating

Organizational Model

Conceptual Model

Task FlowStructure

Behavior

Presentation

High Low

Low High

UserAwareness

Impact on Usability

原型應分層陳述


46

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





47

source:http://asinthecity.com/

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

http://asinthecity.com

http://asinthecity.com

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

好的方案應該不僅於一種

http://www.hksilicon.com/kb/articles/44112/Bret-Victor-UI

http://www.hksilicon.com/kb/articles/44112/Bret-Victor-UI

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

UX溝通的互動需要被引導


Hear Create Deliver

Time

Abst

ract

Conc

rete

Solutions

Prototypes

Implementation Plan

Stories

OpportunitiesThemes

Observation

source: www.openideo.com

觀察始於同理心



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

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




52

source: https://s-media-cache-ec5.pinimg.com

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




53

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





54

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

source: http://www.clothic.com/blog/usbcell-rechargeable-batteries.html




55

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

source: http://www.facebook.com/




56

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





57

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





58source: http://www.authority-site.com

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




59

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

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

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

source:http://www.missyuan.net/school/web_2012/web_9697.html




60

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

source: http://filmframe.net/category/drama/page/17/




Interaction design

承先啓後的系統貫穿

source:http://www.scenariolab.com.tw/




62

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

source: http://www.hksilicon.com/kb/articles/88885/PC




63

source: http://mediaqueri.es/

當新議題到來:RWD




64

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





65

價值取向

事實取向

可⾏行取向

產品決策

市場情境

概念原型

產品低擬真原型

產品⾼高擬真原型

原型與決策


66

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





67

忠

勇

智

三字言總結

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

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

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


68

source:http://www.facebook.com/web.plan

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



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

Documents

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