1. @第⼀一屆智慧創新使⽤用者經驗設計論壇
Inspire Exciting User Experience
產品原型與互動設計
Gainshin (Joshua), Hsiao
使⽤用者經驗策略總監
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

2. 各位好，我是”蕭”健興
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
2

3. 我來至
我們把 User (悠識的諧音)當做公司名稱，時時刻刻不忘以使用
者為中心來思考網站規劃與設計
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
2
3

4. 來到這種場合，最怕別⼈人問：
UX 是什麼？
要⼯工作⾯面試⽤用的版本？
要跟⽼老板吵架⽤用的版本？
學校研究所申請⽤用的版本？
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
4

5. 我覺得
⼤大家的版本都很好。
歡迎到以下場⼦子探探：
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
5

6. 由於本論壇為收費課程，在演講過程中，
敬請盡量避免讓學員產生廣告印象。
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
6

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

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

9. 當UX 社群彼此互助
source:http://www.facebook.com/web.plan 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
9

10. 往不同層次深耕
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
10

11. UX people的熱情展現
source: http://redux2012.ixda.org.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
11

12. 還有超級賽亞人級的戰鬥力
source:http://www.webconf.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
12

13. 樂見又有一個新觀點
source:http://www.slideshare.net/uxcrank/the-ux-umbrella 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
13

14. 當 UX 變成一種顯學
source:http://www.zurb.com/word/product-design 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
14

15. UX 的戰略與戰術
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
15

16. 使⽤用者中⼼心是⼀一種戰略（就像中
興漢室，誤），產品原型是溝通
戰術的⼀一種。互動跟設計⼀一樣重
要。重點是與⼈人互動。
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
16

17. 共同敵⼈人是外⾯面的競爭者，不是
部⾨門裡⾯面的⽼老闆。
當然好的向上管理也是⼀一種好戰
術。
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
17

18. UX 的層次應用
戰略 使⽤用者經驗中⼼心設計
使⽤用者經驗⽅方法
戰術
使⽤用者經驗實戰
戰⾾鬥
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
18

19. 三顧茅廬，劉備與諸葛孔明 UX 豈止是紙上談兵？
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
19

20. 苦命的從業轉型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
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
20

21. 裡外掙扎，想要把那美好的自我加載到產品上
source: http://www.onefunnyjoke.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
21

22. 回到解決問題的定位，多樣可能的創造者，同樣有價值
你的孩子並不是你的，
他們是生命對自身的渴慕所生的子女。
他們經你而生，卻不是你所造生。
他們與你相伴，但是並不屬於你。
你可以給他們你的愛，卻不能給他們你的思想；
因為他們擁有自己的思想。
-- Kahlil Gibran, "The Prophet"
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
22

23. 流程當中的 UX 功能觀察
source:http://loichay.tumblr.com/post/16641114905 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
23

24. 太拘泥於本我而忽略其它觀點的創造性
Video:http://www.youtube.com/watch?feature=player_embedded&v=6S2gbcsHhqQ#!
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
24

25. 孫權初掌權拱周瑜 BCD （Boss centerd design ）才是王道?
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
25

26. 研究⼈人員：產品命格
產品經理：產品規格
互動設計：產品性格
視覺設計：產品⾵風格
原型設計：產品體格
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
26

27. 周瑜⾚赤壁臨危授命⼤大都督 UX人員應為使用者需求請命，而非救急
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
27

28. UED組織當中的角色觀察
Product planner/ Producer
Researcher Interaction Visual Designer
(Psychologist, Designer /Prototyper
Anthropologist, (System analysist,
Economic Industrial (Graphic designer,
Scientist) designer) Web developer,
Editor)
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
28

29. 應該具備有的工作心態
source: http://www.p-age.com.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

30. 問題當中的 UX 方法觀察
source:http://www.slideshare.net/uxcrank/the-ux-umbrella 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
30

31. 諸葛亮⾆舌戰東吳群儒 UX 方法眾多，但溝通的論述明確最重要
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
31

32. Research
互動設計透過原型串接其它方法
Understand
Context
Understand
Users Prototype
Understand
Business Requirements
Flow Diagrams
Personas Wireframes
Storyboard Visual Layer
Scenarios
Conceptual
Model Prototype
Usability
Testing
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
32

33. 協同性的產出與轉化
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
33

34. 司⾺馬懿出征 UX人員應是組織內的產品策士
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
34

35. 透過原型來掌握溝通與成本
初期設計可能性多 後期變更設計
變更設計成本不高 成本很高
source: http://www.ettoday.net/news/20130101/147339.htm 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
35

36. 心智模型帶動概念原型
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
36

37. 首先，要動電腦前先動筆
source: http://lafango.com/matreeves/media/880432-my-hand-drawing-a- 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
picture-of-my-hand-that-is-gonig-to-finish

38. 畫面原型檢視遺漏的動作程序
source: http://www.elidot1.com/wordpress_Test/?p=3755 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

39. 從使用者的當下情境來思考任務推進
source: http://pichicola.com/10-envases-creativos-y-con-imaginacion/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
39

40. 要專注在使用者已有的經驗上找亮點
source: http://www.ettoday.net/news/20130101/147339.htm 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
40

41. 觀點不同，對於相同資訊解讀方式也不同
source: http://planetsurprises.wordpress.com/tag/swimming-pool/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
41

42. 情確的任務切割，原型可以用來做研究驗證
source: http://www.youtube.com/watch?v=9wQkLthhHKA&feature=player_embedded
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
42

43. DRAFT WIREFRAME:重在關鍵畫面
source: http://vi.sualize.us/ipad_radio_app_sketches_6_pixelhalunke_wireframes_tablet_ui_sketch_picture_dRZS.html
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
43

44. WIREFRAME:灰階表現版面訊息層次
source:m.wangchao.net.cn 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
44

45. 原型應分層陳述
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
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
45

46. 出師表劉禪送孔明 扶助不能自立的產品決策
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
46

47. 團隊中的溝通:從需求消化到概念試做
source:http://asinthecity.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
47

48. 好的方案應該不僅於一種
source: http://www.hksilicon.com/kb/articles/44112/Bret-Victor-UI 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

49. UX溝通的互動需要被引導
source: Jenny rogers(2010), Coaching Skills a handbook 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

50. 觀察始於同理心
Hear Create Deliver
Abstract
Themes Opportunities
Time
Stories Solutions
Prototypes
Concrete
Observation Implementation Plan
source: www.openideo.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

51. 好的轉化在於對於關係人的交集到位
source: http://vaughanmerlyn.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

52. 先等一下，別急著定義所有產品流程
source: https://s-media-cache-ec5.pinimg.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
52

53. 劉備東征東吳 UX 是提供觀點，而非為決定背書
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
53

54. 給決策的人看得見（可動手做）的東西做討論
source: http://www.clothic.com/blog/usbcell-rechargeable-batteries.html 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
54

55. 太早把資訊主觀地對位，未預期的認知錯誤越滾越多
source: http://www.facebook.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
55

56. 功能因行為洞察不足而進行的補強也是差強人意
source: http://www.facebook.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
56

57. 使用者有其慣性（偏見）而不容易學習新事情
source: http://www.facebook.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
57

58. 過度地簡化意味著形成另一種困難
source: http://www.authority-site.com 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
58

59. 讓使用者看見的，不見得是他會用的
-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

60. 有目的性地導引使用者的操作路徑（眼球）
source: http://filmframe.net/category/drama/page/17/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
60

61. 承先啓後的系統貫穿
Interaction design
source:http://www.scenariolab.com.tw/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

62. 當新議題到來：友善性的觸控網頁
source: http://www.hksilicon.com/kb/articles/88885/PC 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
62

63. 當新議題到來:RWD
source: http://mediaqueri.es/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
63

64. 關⽻羽⼤大意失荊州 UX 也非一次成敗論英雄
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
64

65. 原型與決策
事實 價值
取向 取向
產品
決策
概念原型
產品低擬真原型
產品⾼高擬真原型 市場
情境
可⾏行
取向 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
65

66. 曹操稱魏⺩王 原型才能讓產品恩威並重
source: http://my.cngba.com/ 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
66

67. 三字言總結
研究，忠於所見，忠於所聽。
忠
但不讓 UX 淪為個人己見之背書。
原型， 勇於手做，勇於闡述。
勇
但不讓 UX 淪為個人拒諫之堅持。
互動， 智於共見，智於成全。
智
但不讓 UX 淪為論斷成敗之主因。
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
67

68. 期待在社群裡多相見， Thank you
source:http://www.facebook.com/web.plan 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
68