Transcript
Page 1: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

Design for Engagement紀錄整理

原著:JESSE JAMES GARRETT (ADAPTIVE PATH CEO)修改與註釋:楊梭逸

2013.12.04

HP53 – User Friendly2013參會心得分享會

版權非所有,歡迎轉載翻印與重製

Page 2: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

使用說明 版權:

本投影片依據Richard Tsai 提供之Design for Engagement,JJG相關資料後,並觀看JJG於其他國家研討會中拍攝之影片與分享文章(如下列表),進行內化、整理與理解。

本投影片僅為個人資料整理用,無任何侵權或用於商業性用途之使用;所有版權仍歸原作者所有。

為了方便各位勘誤與勸戒別誤人子弟(誤),以下為個人聯絡資料歡迎聯繫:

楊梭逸, https://www.facebook.com/souyiyang

[email protected]

相關素材、參考資料與來源:

Richard Tsai提供之User Friendly2013的Design for Engagement分享投影片

JJG Design for Engagement,2013 UXLX,http://uxlx.23video.com/video/7864039/design-for-engagement

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-paris-jesse-james-garrett-video-8105.htm

HP53 – User Friendly2013參會心得分享會,http://www.hpx-party.com/hpx-events/hp53

2013/12/23 2

Page 3: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

關於講者

2013/12/23 3

Page 4: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 4

圖片來源:http://www.weasp.com/html/knowledge/emarketing/86.html

Jesse James Garrett

Page 5: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

有關使用者體驗的發展...

2013/12/23 5

PART 1

Page 6: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 6

• 1990年代,WEB的出現,瀏覽器MOSAIC的出現,那時候的使用者體驗,大家討論的議題著重在WEB上面。

• WEB的出現,讓大家有了很多發展空間的想像。WEB也變成了一個新的媒體,大家都在討論能夠如何運用。

網頁(Web)1990年代,WEB媒體的出現,讓使用者體驗有了新的想像

圖片來源:http://common.ziffdavisinternet.com/encyclopedia_images/_MOSAIC.GIF

Page 7: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 7

軟體(Software)網頁的體驗是否可延伸至軟體?

• 隨著圖形化介面的出現,使用者體驗在軟體身上也逐漸成為被重視。

圖片來源:http://www.systemuzmani.com/2011/01/3-1/

Page 8: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 8

數位媒體(Digital Media)如:Second Life(第二人生)

圖片來源:http://1.bp.blogspot.com/-23Fo8mFpPdg/UBKJeMtVwnI/AAAAAAAAASQ/069V5zG2oaY/s1600/olympics_003.png

• Second Life的出現,成為人們思考使用者體驗的另一個機會。

• 透過虛擬的環境,創造出了新的不同以往的社交體驗方式,成幾何時成為未來生活口號的代名詞。

Page 9: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 9

科技(Any Technology)

• 當科技不斷的在進步,新的電子裝置推陳出新,使用者對於使用者體驗的需求不斷增加,進而影響裝置的演化。

• 手機,也就是行動裝置大量的普及,影響著我們生活每一個層面。

圖片來源:http://www.w3.org/2005/Talks/20051115-London/all.htm

Page 10: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 10

產品(Products)

ASUS TAICHI

• 再來看看每一件產品,使用者體驗也深植其中。一個好的使用者體驗,將影響產品的差異化。

Page 11: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 11

服務(Services)

• 服務的過程中,也充滿著使用者體驗。

• 服務是一連串的接觸點,唯有在每個接觸點的體驗超越客戶期望,才是成功的服務,也才是好的使用者體驗。

Virgin Atlantic's https://www.youtube.com/watch?v=WptXNmxtE88

Page 12: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 12

環境(Enviroments)

• 將不同的服務與接觸點連貫在一起,將會是以考量整體環境中全盤考量的使用者體驗旅程。

Page 13: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 13

多管道體驗(Multi-channel Experiences)整合軟體/數位媒體/科技/產品/服務/環境

圖片來源:https://www.youtube.com/watch?v=k8u50y-WhVs

• 生活中所接觸的環境,是將所有元素或設計整合在一起的綜合體驗。

• 如百貨公司中,我們所接觸的視覺感官體驗,是前述所有提到的綜合。

Page 14: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 14

模式(Patterns)• 以上提及不同時代使用者體驗的演變,其實都有某種默默運行,存在於各處的模式。當您洞見時,別人可能會認為你是瘋子。

• 了解這個模式,是需要培養使用者體驗的態度。

• 使用者體驗是一種後天養成的態度,而且無藥可醫。

The user experience mindset is an acquired condition for which there is no cure. - Jesse James Garrett

Page 15: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 15

什麼是體驗?可以吃嗎?

Page 16: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

一般人會這樣形容體驗…

• 主觀的(Subjective)

• 短暫的(Ephemeral)

• 無形的(Intangible)

2013/12/23 16

所以就會有人說…「體驗是無法被設計的!」

Page 17: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 17

圖片來源: http://admissions.uoregon.edu/sites/all/files/images/Painting_0.jpg?1344360515

設計已不再是刻板印象的閉門造車,也已不再限定於特定的事物

Page 18: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 18

• 近代的設計,已轉換為以使用者為中心做為出發點。

• 而使用者中心,著重的在於「使用」二字。

圖片來源: http://beyondplm.com/wp-content/uploads/2013/05/plm-users.jpg

Page 19: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 19

使用者體驗該著重於何處,才是使用者願意「使用」的呢?

Page 20: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 20

EngagementEngagement不限定於前面所提的網頁、軟體、數位媒體、

服務等,這是適用於全部情境下使用者所關心的主題

Page 21: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

來聊聊Engagement是什麼,應該注意哪些事情…

2013/12/23 21

PART 2

Page 22: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 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/

• 在本投影片中,姑且我們就先忘記結婚這件事情,我們解釋為…

「投入」

Page 23: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 23

投入的五種程度

圖片來源: Richard Tsai

• 如果是一場產品介紹會議,可思考希望自己的使用者是在哪個狀態…

投入的極致…忘我!

Page 24: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 24

如何才能夠讓使用者投入

Page 25: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 25

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情緒)

P.A.C.E. Model

Page 26: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 26

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情緒)

P.A.C.E. Model

Page 27: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 27

感知(Sense)

視覺聽覺 觸覺 味覺嗅覺

平衡感

Page 28: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 28

聽覺

視覺

• 貝多芬是一個傑出的體驗設計師,透過樂譜將他腦中的體驗「傳遞」給世人

圖片來源:http://www.epochtimes.com/b5/8/8/29/n2245216.htm 圖片來源:http://www.myscore.org/1072.htm

Page 29: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 29

聽覺

視覺

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

Page 30: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 30

嗅覺

味覺

Ratatouille tasting fireworks strawberry cheese,https://www.youtube.com/watch?v=Yyah49_Oz78

Page 31: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 31

平衡感

Mirror‘s Edge Parkour POV,https://www.youtube.com/watch?v=j-mEnMMmSrQ

Page 32: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 32

圖片來源:http://www.cinepolis.com/_4DX/imagenes/img-home-slider1-full.jpg

4DX

• 當結合的知覺越多,越能夠讓使用者更為投入忘我

聽覺 嗅覺視覺 觸覺

Page 33: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 33

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情緒)

P.A.C.E. Model

Page 34: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 34

肢體(Body)

圖片來源:http://ts-1.eee.hku.hk/ccst9015sp13/p30/wp-content/uploads/sites/38/2013/04/wii-2.jpg

圖片來源:http://www.siebert-telecom.co.uk/resources/Mouse_Click(2).jpg

• 任何與肢體的互動,不管是實體或非實體的,都是行為(Action)的一部分,最小到點擊滑鼠的動作…

Page 35: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 35

Introducing Gmail Motion,https://www.youtube.com/watch?v=Bu927_ul_X0

Page 36: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 36

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情緒)

P.A.C.E. Model

Page 37: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 37

情感(Heart)

• 設計有各種不同的面向,除了使用性(usability)、美感 (aesthetics)與實用性(practicality)之外,還有情緒性(emotionality)需要考量。

• 有吸引力/美感的東西,可引發正向情緒。

• 正面情緒能夠讓我們跳出框框思考,尋找替代方案,如此一來使用這就覺得物品操作起來更容易了。

來源:http://www.lis186.com/posts/6770

Page 38: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 38

圖片來源:http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg

• Disney的成功,在於提供人們歡樂的情緒,並可投入於其中,暫時忘記生活中的不快樂。

Page 39: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 39

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情緒)

P.A.C.E. Model

Page 40: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 40

心智(Mind)通常與內容與訊息有關(Information Consumption),著重在大腦資訊處理的過程

圖片來源:http://commons.wikimedia.org/wiki/File:Child_reading_at_Brookline_Booksmith.jpg

• 我們透過閱讀,將表象的內容與訊息,經過心智的解讀與詮釋,成為大腦中新的想法或概念。

• 理解的過程,我們投入於其中,忘記時間的變化。

Page 41: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 41

Rubik's cube former world record: 6.24 seconds.,https://www.youtube.com/watch?v=wIvHw17vuGU

Lec02 邏輯思考與立體思維第二週課程魔術方塊,https://www.youtube.com/watch?v=QL5BwZ587W4

• 而魔術方塊是一種心智理解後解析的過程,包含理解力、邏輯能力、空間概念等。

Page 42: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 42

感覺Perception

情感Emotion

行為Action

Cognition知覺 Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情感)

External Engagement (外部)

使用者與世界的互動

Internal Engagement (內部)

大腦與感知的互動

P.A.C.E. Model

Page 43: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 43

體驗設計新的思考方式…

Experience Designer

Page 44: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 44

感覺Perception

情感Emotion

行為Action

Cognition知覺

遊戲設計(Game Design)資料視覺圖表(Data Visualization)

展覽設計(Exhibit Design)

工業設計(Industrial Design)

教學設計(Instructional Design)

時尚設計(Fashion Design)

建築(Architecture)

活版印刷(Typography)

P.A.C.E. Model與設計領域

Page 45: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 45

當掌握了P.A.C.E.的設計關鍵之後,您將能影響人的感知、肢體動作、

心智與心情

Page 46: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 46

除了上述關鍵外,還需知道…

Experience Designer

行為能力(Capabilities)

設計限制(Constraints)

脈絡場域【實/虛/多元】

(Context)

Page 47: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 47

圖片來源:http://mcfads.blogspot.tw/

• 設計時,需思考使用者本身物理上的限制。

• 如圖,設計與手相關的產品時,需先充分了解手的物理行為限制與可動範圍,甚至不同年齡層/性別的限制,才能夠設計出符合使用者的產品。

行為能力(Capabilities)

Page 48: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 48

圖片來源:http://article.yeeyan.org/view/374831/368863

• 設計時,除思考使用者可以做的之外,也要思考使用者什麼不能做。

• 如使用者不同部位的殘疾,或使用者本身情緒上的限制(如某日情緒很糟糕等),會對體驗或使用上帶來什麼樣的影響。

設計限制(Constraints)

Page 49: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 49

脈絡場域(Context)感覺

Perception

情感Emotion

行為Action

Cognition知覺

物理脈絡(Physical Context)

心理脈絡(Psychological Context)

環境脈絡(Environmental Context) 社會脈絡(Social Context)

個人脈絡(Personal Context)

Page 50: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

什麼是脈絡(Context)?

• 各場域中動態或靜態的層面、事件、現象或活動。

• 每個場域有自己的運作方式,但往往都不再您的眼前發生。必須要以系統角度進行思考,才有可能發現脈絡。

• 延伸閱讀:

• 由五個層次來看生活中的脈絡,http://www.slideshare.net/bhm/ss-14919209

2013/12/23 50

Page 51: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 51

P.A.C.E. Model+

行為能力(Capabilities)

設計限制(Constraints)

脈絡場域【實/虛/多元】

(Context)

Page 52: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 52

Engagement of the Sense(感知)Engagement of the Mind(心智)

Engagement of the Body(身體)

Engagement of the Heart(情感)

P.A.C.E. Model

情感Emotion

感覺Perception

行為Action

Cognition知覺

遊戲設計(Game Design)資料視覺圖表(Data Visualization)

展覽設計(Exhibit Design)

工業設計(Industrial Design)

教學設計(Instructional Design)

時尚設計(Fashion Design)

建築(Architecture)

活版印刷(Typography)

Page 53: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 53

當環境中元素分散開來的時候,各元素都是有意義的,但無法表現出整體。

Page 54: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 54

我們必須要有整合(Synthesis)的能力,才能看到整體真正隱含在後面的真相。

Page 55: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 55

如同指揮家一般,將獨立時紛雜的各樂器與聲音,整合成和諧的管弦樂團,

共同發聲。

Page 56: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 56

圖片來源:http://okok1111111111.blogspot.tw/2013/08/claude-debussy.html

“Music is the space between the notes”

– Claude Debussy

音樂是音符之間的篇幅

Page 57: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 57

圖片來源:http://www.miaofoundry.url.tw/phpbb/viewtopic.php?f=3&t=3455

“Don't play what's there; play what's not there.”

– Miles Davis

不要演奏已經有的東西,要演奏還沒有的東西

Page 58: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 58

體驗設計是每件事情的設計,或獨立的媒介,或是跨媒體,

以人的體驗作為明確的成果,和人的投入作為確定的目標。

Experience Design

Experience design is the design of anything, independent of medium,oracross media, with human experience as an explicit outcome, and human engagement as an explicit goal.- Jesse James Garrett

Page 59: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

使用者體驗、產品與服務到使用者體驗最終的價值

2013/12/23 59

PART 3

Page 60: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 60

產品

使用者體驗設計

服務

延伸閱讀:服務創新AT-ONE國際研討會暨實務工作坊紀錄整理(2013/07/27),http://www.slideshare.net/bhm/20130727-atonesimon-clatworthyintaiwan

Page 61: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 61

為人們設計完整的體驗不只是服務,也不只是產品

Page 62: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 62

什麼是「使用」?

我們會使用產品,也會使用服務,但…

我們真的是在使用,還是…?

Page 63: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 63

圖片來源:http://s1.djyimg.com/i6/703080423431959.jpg

• 我們在欣賞畫作時,我們有「使用」這幅畫?

Page 64: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 64

• 我們在看電影時,我們有「使用」這部電影?

圖片來源:http://www.cinemapark.org.tw/Uploads/FCKEditor/image/IMG_8323.JPG

Page 65: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 65

圖片來源:http://www.cdns.com.tw/20130915/news/ysyl/100000002013091420072144_z.jpg

• 我們在演唱會時,我們有「使用」這個樂團?

Page 66: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 66

價值(Value)

Extrinsic Value(外在價值)

Intrinsic Value(內在價值)

我們不僅是在使用商品或服務,而是在使用找尋與我們內在價值與外在價值相符合的過程;價值決定了我們目前體驗的一切。

Page 67: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 67

服務產品

效益

享受

enjoyment

utility

product service

使用者體驗設計

文化體驗

價值

Page 68: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

2013/12/23 69

所有人類體驗,創造出了人類目前的文化;而使用者體驗設計師,

應創造出體驗可油然而生的環境。

All human experiences create human culture;UX designers create spaces where experience can emerge .- Jesse James Garrett

Page 69: Design for Engagement,Jesse James Garrett(HP53 – User Friendly 2013參會心得分享會)

The End感謝您的閱讀與指教!!!

2013/12/23 70