1.
HP53 – User Friendly2013參會心得分享會
2013.12.04
Design for Engagement
紀錄整理
原著：JESSE JAMES GARRETT (ADAPTIVE PATH CEO)
修改與註釋：楊梭逸
版權非所有，歡迎轉載翻印與重製

2.
使用說明

版權：

本投影片依據Richard Tsai 提供之Design for Engagement,JJG相關資料後，並觀看JJG於其他國家研討
會中拍攝之影片與分享文章(如下列表)，進行內化、整理與理解。

本投影片僅為個人資料整理用，無任何侵權或用於商業性用途之使用；所有版權仍歸原作者所有。

為了方便各位勘誤與勸戒別誤人子弟(誤)，以下為個人聯絡資料歡迎聯繫：
楊梭逸， https://www.facebook.com/souyiyang
 bhm@mail.linkchain.tw


相關素材、參考資料與來源：

Richard Tsai提供之User Friendly2013的Design for Engagement分享投影片

JJG Design for Engagement,2013 UXLX，http://uxlx.23video.com/video/7864039/design-forengagement

JJG gives a State of the User Experience Address UX Week，
http://uxdesign.com/events/article/state-of-ux-design-garrett/203

JJG at UX Paris about Design for Engagement，http://www.nealite.com/blog-en/events/ux-parisjesse-james-garrett-video-8105.htm

HP53 – User Friendly2013參會心得分享會，http://www.hpx-party.com/hpx-events/hp53
2013/12/23
2

3.
關於講者
2013/12/23
3

4.
Jesse James Garrett
圖片來源：http://www.weasp.com/html/knowledge/emarketing/86.html
2013/12/23
4

5.
有關使用者體驗的發展...
PART 1
2013/12/23
5

6.
網頁(Web)
1990年代，WEB媒體的出現，
讓使用者體驗有了新的想像
•
•
圖片來源：http://common.ziffdavisinternet.com/encyclopedia_images/_MOSAIC.GIF
1990年代，WEB的出現，瀏覽器
MOSAIC的出現，那時候的使用者體驗，
大家討論的議題著重在WEB上面。
WEB的出現，讓大家有了很多發展空間
的想像。WEB也變成了一個新的媒體，
大家都在討論能夠如何運用。
2013/12/23
6

7.
軟體(Software)
網頁的體驗是否可延伸至軟體？
•
隨著圖形化介面的出現，使用者體驗在
軟體身上也逐漸成為被重視。
圖片來源：http://www.systemuzmani.com/2011/01/3-1/
2013/12/23
7

8.
數位媒體(Digital Media)
如：Second Life(第二人生)
•
•
圖片來源：http://1.bp.blogspot.com/-23Fo8mFpPdg/UBKJeMtVwnI/AAAAAAAAASQ/069V5zG2oaY/s1600/olympics_003.png
Second Life的出現，成為
人們思考使用者體驗的另
一個機會。
透過虛擬的環境，創造出
了新的不同以往的社交體
驗方式，成幾何時成為未
來生活口號的代名詞。
2013/12/23
8

9.
科技(Any Technology)
•
當科技不斷的在進步，新的電
子裝置推陳出新，使用者對於
使用者體驗的需求不斷增加，
進而影響裝置的演化。
•
手機，也就是行動裝置大量的
普及，影響著我們生活每一個
層面。
圖片來源：http://www.w3.org/2005/Talks/20051115-London/all.htm
2013/12/23
9

10.
產品(Products)
•
ASUS TAICHI
再來看看每一件產品，使用者
體驗也深植其中。一個好的使
用者體驗，將影響產品的差異
化。
2013/12/23
10

11.
服務(Services)
•
•
Virgin Atlantic's
https://www.youtube.com/watch?v=WptXNmxtE88
服務的過程中，也充滿
著使用者體驗。
服務是一連串的接觸點，
唯有在每個接觸點的體
驗超越客戶期望，才是
成功的服務，也才是好
的使用者體驗。
2013/12/23
11

12.
環境(Enviroments)
•
將不同的服務與接觸點
連貫在一起，將會是以
考量整體環境中全盤考
量的使用者體驗旅程。
2013/12/23
12

13.
多管道體驗(Multi-channel Experiences)
整合 軟體/數位媒體/科技/產品/服務/環境
•
•
圖片來源：https://www.youtube.com/watch?v=k8u50y-WhVs
生活中所接觸的環境，
是將所有元素或設計整
合在一起的綜合體驗。
如百貨公司中，我們所
接觸的視覺感官體驗，
是前述所有提到的綜合。
2013/12/23
13

14.
模式(Patterns)
•
以上提及不同時代使用者體驗的演變，其實都有某種默默運
行，存在於各處的模式。當您洞見時，別人可能會認為你是
瘋子。
•
了解這個模式，是需要培養使用者體驗的態度。
•
使用者體驗是一種後天養成的態度，而且無藥可醫。
The user experience mindset is an acquired condition for
which there is no cure. - Jesse James Garrett
2013/12/23
14

15.
什麼是體驗？
可以吃嗎？
2013/12/23
15

16.
一般人會這樣形容體驗…
•
主觀的（Subjective）
•
短暫的（Ephemeral）
•
無形的（Intangible）
所以就會有人說…
「體驗是無法被設計的！」
2013/12/23
16

17.
圖片來源： http://admissions.uoregon.edu/sites/all/files/images/Painting_0.jpg?1344360515
設計已不再是刻板印象的閉門造車，
也已不再限定於特定的事物
2013/12/23
17

18.
•
近代的設計，已轉換為
以使用者為中心做為出
發點。
•
而使用者中心，著重的
在於「使用」二字。
圖片來源： http://beyondplm.com/wp-content/uploads/2013/05/plm-users.jpg
2013/12/23
18

19.
使用者體驗該著重於何處，
才是使用者願意「使用」的呢？
2013/12/23
19

20.
Engagement
Engagement不限定於前面所提的網頁、軟體、數位媒體、
服務等，這是適用於全部情境下使用者所關心的主題
2013/12/23
20

21.
來聊聊Engagement是什麼，
應該注意哪些事情…
PART 2
2013/12/23
21

22.
什麼是Engagement?
“An engagement or betrothal is a promise to
marry, and also the period of time between
proposal and marriage—which may be lengthy
or trivial.”
•
在本投影片中，姑且我
們就先忘記結婚這件事
情，我們解釋為…
「投入」
圖片來源： http://greenweddingshoes.com/favorite-engagement-sessions-from-2011/
2013/12/23
22

23.
投入的五種程度
圖片來源： Richard Tsai
•
如果是一場產品介紹會議，可思考希望自己的使用者是在哪個狀態…
投入的極致…忘我!
2013/12/23
23

24.
如何才能夠讓使用者投入
2013/12/23
24

25.
Engagement of the Heart(情緒)
情感
Emotion
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
Action
行為
P.A.C.E. Model
Engagement of the Body(身體)
2013/12/23
25

26.
Engagement of the Heart(情緒)
情感
Emotion
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
Action
行為
P.A.C.E. Model
Engagement of the Body(身體)
2013/12/23
26

27.
感知(Sense)
聽覺
視覺
觸覺
嗅覺
味覺
平衡感
2013/12/23
27

28.
聽覺
視覺
圖片來源：http://www.epochtimes.com/b5/8/8/29/n2245216.htm
•
圖片來源：http://www.myscore.org/1072.htm
貝多芬是一個傑出的體驗設計師，透過樂譜將他腦中的體驗「傳遞」給世人
2013/12/23
28

29.
聽覺
視覺
•
樂譜再透過樂團形式，將聽覺結合視覺呈現於大眾眼前
圖片來源：http://www.culture.gov.tw/d_upload_tca_pro/cms/image/A0/B0/C0/D0/E0/F694/63ef63b0-dec3-4ee3-a972-1251bcf1922d.bmp
2013/12/23
29

30.
嗅覺
味覺
Ratatouille tasting fireworks strawberry cheese，https://www.youtube.com/watch?v=Yyah49_Oz78
2013/12/23
30

31.
Mirror‘s Edge Parkour POV，https://www.youtube.com/watch?v=j-mEnMMmSrQ
平衡感
2013/12/23
31

32.
4DX
聽覺 視覺 嗅覺
圖片來源：http://www.cinepolis.com/_4DX/imagenes/img-home-slider1-full.jpg
•
觸覺
當結合的知覺越多，越能夠讓使用者更為投入忘我
2013/12/23
32

33.
Engagement of the Heart(情緒)
情感
Emotion
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
Action
行為
P.A.C.E. Model
Engagement of the Body(身體)
2013/12/23
33

34.
肢體(Body)
圖片來源：http://www.siebert-telecom.co.uk/resources/Mouse_Click(2).jpg
•
任何與肢體的互動，不管是實體或
非實體的，都是行為(Action)的一
部分，最小到點擊滑鼠的動作…
圖片來源：http://ts-1.eee.hku.hk/ccst9015sp13/p30/wp-content/uploads/sites/38/2013/04/wii-2.jpg
2013/12/23
34

35.
Introducing Gmail Motion，https://www.youtube.com/watch?v=Bu927_ul_X0
2013/12/23
35

36.
Engagement of the Heart(情緒)
情感
Emotion
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
Action
行為
P.A.C.E. Model
Engagement of the Body(身體)
2013/12/23
36

37.
情感(Heart)
•
設計有各種不同的面向，除了使用性
(usability)、美感 (aesthetics)與實用性
(practicality)之外，還有情緒性
(emotionality)需要考量。
•
有吸引力/美感的東西，可引發正向情緒。
•
正面情緒能夠讓我們跳出框框思考，尋找替
代方案，如此一來使用這就覺得物品操作起
來更容易了。
來源：http://www.lis186.com/posts/6770
2013/12/23
37

38.
•
Disney的成功，在於提
供人們歡樂的情緒，並
可投入於其中，暫時忘
記生活中的不快樂。
圖片來源：http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg
2013/12/23
38

39.
Engagement of the Heart(情緒)
情感
Emotion
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
Action
行為
P.A.C.E. Model
Engagement of the Body(身體)
2013/12/23
39

40.
心智(Mind)
通常與內容與訊息有關(Information Consumption)，著重在大腦資訊處理的過程
•
我們透過閱讀，將表象的
內容與訊息，經過心智的
解讀與詮釋，成為大腦中
新的想法或概念。
•
理解的過程，我們投入於
其中，忘記時間的變化。
圖片來源：http://commons.wikimedia.org/wiki/File:Child_reading_at_Brookline_Booksmith.jpg
2013/12/23
40

41.
Lec02 邏輯思考與立體思維 第二週課程 魔術方塊，
https://www.youtube.com/watch?v=QL5BwZ587W4
Rubik's cube former world record: 6.24 seconds.，
https://www.youtube.com/watch?v=wIvHw17vuGU
•
而魔術方塊是一種心智理解後解析的過程，
包含理解力、邏輯能力、空間概念等。
2013/12/23
41

42.
Engagement of the Heart(情感)
Internal Engagement (內部)
情感
大腦與感知的互動
Engagement of the Mind(心智)
Emotion
感覺
知覺
Perception
Cognition
Action
行為
P.A.C.E. Model
Engagement of the Sense(感知)
External Engagement (外部)
使用者與世界的互動
Engagement of the Body(身體)
2013/12/23
42

43.
Experience Designer
體驗設計新的思考方式…
2013/12/23
43

44.
P.A.C.E. Model與設計領域
活版印刷(Typography)
感覺
教學設計(Instructional Design)
Perception
建築(Architecture)
工業設計(Industrial Design)
情感
知覺
Emotion
Cognition
時尚設計(Fashion Design)
展覽設計(Exhibit Design)
資料視覺圖表(Data Visualization)
Action
行為
遊戲設計(Game Design)
2013/12/23
44

45.
當掌握了P.A.C.E.的設計關鍵之後，
您將能影響人的感知、肢體動作、
心智與心情
2013/12/23
45

46.
Experience Designer
除了上述關鍵外，還需知道…
脈絡場域
【實/虛/多元】
(Context)
行為能力
(Capabilities)
設計限制
(Constraints)
2013/12/23
46

47.
行為能力(Capabilities)
•
設計時，需思考使用者本身物理上的限制。
•
如圖，設計與手相關的產品時，需先充分
了解手的物理行為限制與可動範圍，甚至
不同年齡層/性別的限制，才能夠設計出符
合使用者的產品。
圖片來源：http://mcfads.blogspot.tw/
2013/12/23
47

48.
設計限制(Constraints)
•
設計時，除思考使用者可以做的之外，
也要思考使用者什麼不能做。
•
如使用者不同部位的殘疾，或使用者本
身情緒上的限制(如某日情緒很糟糕等)，
會對體驗或使用上帶來什麼樣的影響。
圖片來源：http://article.yeeyan.org/view/374831/368863
2013/12/23
48

49.
脈絡場域(Context)
感覺
環境脈絡(Environmental Context)
社會脈絡(Social Context)
Perception
情感
知覺
Emotion
Cognition
心理脈絡(Psychological Context)
Action
行為
個人脈絡(Personal Context)
物理脈絡(Physical Context)
2013/12/23
49

50.
什麼是脈絡(Context)？
•
各場域中動態或靜態的層面、事件、現象或活動。
•
每個場域有自己的運作方式，但往往都不再您的眼
前發生。必須要以系統角度進行思考，才有可能發
現脈絡。
•
延伸閱讀：
•
由五個層次來看生活中的脈絡，
http://www.slideshare.net/bhm/ss-14919209
2013/12/23
50

51.
P.A.C.E. Model
+
脈絡場域
【實/虛/多元】
(Context)
行為能力
(Capabilities)
設計限制
(Constraints)
2013/12/23
51

52.
Engagement of the Heart(情感)
活版印刷(Typography)
情感
教學設計(Instructional Design)
Emotion
建築(Architecture)
工業設計(Industrial Design)
Engagement of the Mind(心智)
感覺
知覺
Perception
Cognition
Engagement of the Sense(感知)
時尚設計(Fashion Design)
展覽設計(Exhibit Design)
Action
資料視覺圖表(Data Visualization)
P.A.C.E. Model
行為
遊戲設計(Game Design)
Engagement of the Body(身體)
2013/12/23
52

53.
當環境中元素分散開來的時候，
各元素都是有意義的，但無法表現出整體。
2013/12/23
53

54.
我們必須要有整合(Synthesis)的能力，
才能看到整體真正隱含在後面的真相。
2013/12/23
54

55.
如同指揮家一般，將獨立時紛雜的
各樂器與聲音，整合成和諧的管弦樂團，
共同發聲。
2013/12/23
55

56.
音樂是音符之間的篇幅
“Music is the space
between the notes”
– Claude Debussy
圖片來源：http://okok1111111111.blogspot.tw/2013/08/claude-debussy.html
2013/12/23
56

57.
不要演奏已經有的東西，要演奏還沒有的東西
“Don't play what's there;
play what's not there.”
– Miles Davis
圖片來源：http://www.miaofoundry.url.tw/phpbb/viewtopic.php?f=3&t=3455
2013/12/23
57

58.
Experience Design
體驗設計是
每件事情的設計，或獨立的媒介，或是跨媒體，
以人的體驗作為明確的成果，
和人的投入作為確定的目標。
Experience design is the design of anything, independent of medium,or
across media, with human experience as an explicit outcome, and
human engagement as an explicit goal.- Jesse James Garrett
2013/12/23
58

59.
使用者體驗、產品與服務
到使用者體驗最終的價值
PART 3
2013/12/23
59

60.
使用者體驗設計
服務
產品
延伸閱讀：服務創新AT-ONE國際研討會暨實務工作坊紀錄整理(2013/07/27)，http://www.slideshare.net/bhm/20130727-atonesimon-clatworthyintaiwan
2013/12/23
60

61.
為人們設計完整的體驗
不只是服務，也不只是產品
2013/12/23
61

62.
我們會使用產品，也會使用服務，但…
什麼是「使用」？
我們真的是在使用，還是…？
2013/12/23
62

63.
•
我們在欣賞畫作時，
我們有「使用」這幅畫？
圖片來源：http://s1.djyimg.com/i6/703080423431959.jpg
2013/12/23
63

64.
•
我們在看電影時，
我們有「使用」這部
電影？
圖片來源：http://www.cinemapark.org.tw/Uploads/FCKEditor/image/IMG_8323.JPG
2013/12/23
64

65.
•
我們在演唱會時，
我們有「使用」這個
樂團？
圖片來源：http://www.cdns.com.tw/20130915/news/ysyl/100000002013091420072144_z.jpg
2013/12/23
65

66.
價值(Value)
Intrinsic Value(內在價值)
Extrinsic Value(外在價值)
我們不僅是在使用商品或服務，而是在使
用找尋與我們內在價值與外在價值相符合
的過程；價值決定了我們目前體驗的一切。
2013/12/23
66

67.
使用者體驗設計
utility
效益
product
產品
服務
享受
文化體驗
service
價值
enjoyment
2013/12/23
67

68.
所有人類體驗，創造出了人類目前的文化；
而使用者體驗設計師，
應創造出體驗可油然而生的環境。
All human experiences create human culture；
UX designers create spaces where experience can emerge .
- Jesse James Garrett
2013/12/23
69

69.
The End
感謝您的閱讀與指教!!!
2013/12/23
70