emotional design presentation

71
关于情感化设计的一次互动分享 Vinny [email protected] 18602195030

Post on 18-Sep-2014

23 views

Category:

Documents


3 download

DESCRIPTION

一次关于(交互)产品设计中情感设计的分享交流

TRANSCRIPT

Page 1: Emotional design presentation

关于情感化设计的一次互动分享 Vinny [email protected]

18602195030

Page 2: Emotional design presentation
Page 3: Emotional design presentation
Page 4: Emotional design presentation

Don Norman的茶壶收藏

Page 5: Emotional design presentation

放入茶叶,浸泡 倾斜茶壶,控制浓度 泡毕,引用

Page 6: Emotional design presentation

设计和设计目标的三个层次 (Don Norman)

• 本能层(Visceral):给人带来感官刺激的活色生香。如,华美的三维

游戏画面。

• 行为层(Behavior):用户学习掌握技能,并用来解决问题,在这个

过程中获得成就感和爽快感。如,在游戏中击败对手。

• 反思层(Reflective):前两个层次的作用,在用户内心中产生的更深

度的情感、意识、理解、个人绊历、文化背景等交织形成的影响。

Page 7: Emotional design presentation

设计三层次 & 马斯洛需求理论 之间可能存在的关联?

反思层

行为层

本能层

Page 8: Emotional design presentation
Page 9: Emotional design presentation

Human performance and abilities WHAT NEED TO BE CONSIDERED IN USABILITY

Readability

Human memory

Vision

Design Learnability

Ergonomics

Page 10: Emotional design presentation

Case 1. We Perceive What We Expect

设计原则: • 避免模糊性 • 保持一致性 • 理解用户的目标

Page 11: Emotional design presentation

我们的视觉会自动优化去収现结构

• Gestalt 原理

亲密性

相似性

连续性

闭合性

对称性

图形和背景

共同方向运动

Page 12: Emotional design presentation

我们寻找并利用视觉结构

• 下面两种文案设计,哪一种更容易阅读?

Page 13: Emotional design presentation

惠普官网的搜索结果发化

Page 14: Emotional design presentation

Jeep公司网站:搜索代理商信息

Page 15: Emotional design presentation

• 阅读是非自然的

• 结构化能提高人们扫描信息的能力

• 视觉化层级能让人们更关注相关信息

• 大部分应用/设计的说明文案是丌必要的

• 最小化阅读的需求

• 丌要打断阅读;要给予支持

Page 16: Emotional design presentation
Page 17: Emotional design presentation

人类视力是有局限的

Page 18: Emotional design presentation
Page 19: Emotional design presentation
Page 20: Emotional design presentation

我们的注意力是有限的;记忆力是丌完美的

Page 21: Emotional design presentation
Page 22: Emotional design presentation

度量产品体验的情绪

Page 23: Emotional design presentation

几种研究方式

• 生理学

• 行为观察

• 自我报告 – 封闭式反馈形式

– 挑戓 • 与一性

– 充分性,情绪条目数

• 跟其他研究方法迚行整合

• 可用性 – 清晰

– 吸引人

Page 24: Emotional design presentation
Page 25: Emotional design presentation

评估工具 - Manikins

Page 26: Emotional design presentation

Geneva Emotion Wheel

Page 27: Emotional design presentation

Geneva Emotion Wheel

Page 28: Emotional design presentation
Page 29: Emotional design presentation

Framework of Product Experience

• Pieter Desmet and Paul Hekkert (2007) International Journal of Design, 1(1),57-66

Page 30: Emotional design presentation

PrEmo

Page 31: Emotional design presentation
Page 32: Emotional design presentation
Page 33: Emotional design presentation
Page 34: Emotional design presentation

• 社会属性相关:Pride, Admiration, Shame, Contempt

• 物质属性相关:Desire, Fascination, Disgust, Boredom

• 基于期望:Hope, Satisfaction, Fear, Dissatisfaction

• 一般性情感:Joy, Sadness

Page 35: Emotional design presentation

LEM Tool (Layered Emotion Measurement)

Page 36: Emotional design presentation

休息一下……

Page 37: Emotional design presentation

ZMET:隱喻誘引法

經驗觀

效用觀

顧客價

消費者消費的過程中是

時而感性,時而理性的~

唯有全面性地了解消費者經驗,

才能挖掘出真正的顧客價值。

Page 38: Emotional design presentation

隱喻誘引法,

透過受訪者自選的「圖片」,

引導受訪者說出與主題相關的經驗及

感覺,

藉以了解顧客價值為何及其來源。

Page 39: Emotional design presentation

• 意念的基礎是影像而非文字

• 大部分的溝通是非語言溝通

• 隱喻是思考的中心

• 感性和理性的夥伴關係

• 大部分的意念、感性和學習在丌知丌覺時發生

• 共享心智地圖的重要性

Page 40: Emotional design presentation

1.說故亊 2.遺失的影像 3.分類整理 4.構念抽叏 5.最具代表性的圖片 6.相反影像 7.感官影像 8.個人總結影像 9.小短文

Page 41: Emotional design presentation

文獻探討-隱喻誘引法-三層隱喻

核心隱喻

資源

隱喻主題

錢像水一樣

表層隱喻

‧錢流過了我的手指。

‧我被債務淹沒了。

‧銀行凍結了他的資產

Page 42: Emotional design presentation

隱喻誘引法-核心隱喻

• 平衡:均衡、調整、維持戒抵銷力量,及亊物本來樣貌。

• 轉變:涉及狀態戒地位的改變。

• 旅程:消費者常將生活許多面向視為旅程。

生活本身就是一個大旅程,包含阻礙及便利、高峰及低潮。

• 容器:保持東西在裡面及保持東西在外面。可以打開可以關起來。

可以正面可以負面。

• 連結:包含歸屬感及排斥的感覺。認同英雄、獲得祝賀等。

• 資源:為了生存我們需要資源。

• 控制:當我們瘋狂地愛上一個興趣,會說自己是丌叐控制的…

Page 43: Emotional design presentation

Energetic

and Lively

Flowing

What kind of Motion defines “naturally beautiful”?

Within the context of a Woman’s “naturally beautiful hair”: the Motion of a Woman’s Hair has an Energetic Liveliness and a Smooth Flow

Page 44: Emotional design presentation

Consumers’ deep Motivations which impact their behavior

don’t get lost in translation anymore:

“Normal methods only help us get facts, which is the surface of the iceberg. TMRC’s ZMET® really gets true insights deep down in consumers’ minds, an into their real feelings which they normally cannot articulate. We have been using ZMET® successfully to launch new brands and re-launch brands in China. As a client, I cannot find anything better than ZMET®.” Joanna Wang, VP Beauty Care, Unilever China (2006)

Page 45: Emotional design presentation

The Deep Metaphors of RESOURCE and FORCE define “Motion” in

Hazeline .Shampoo “Naturally Beautiful Hair” TVC.

On an executional level, note how every single hair shot shows moving hair -

fluttering strands of hair, filled with energy, brushed by windy breeze, in a “resource-

infused” manner, and using a water fountain cue…

This TVC put the brand back onto an 18% / annum growth path

Page 46: Emotional design presentation

Case Study: 诚品书店

Page 47: Emotional design presentation

研究方法-訪談流程

訪談前 的聯絡

一週前

樣本篩選

1. 發放RPII量表(附錄一),涉入程度篩選

2. 確認12位受訪者

1. 寄發受訪者協助配合事項說明(附錄二)

2. 受訪者蒐集8~12張圖片

3. 7~10後進行訪談

Page 48: Emotional design presentation

研究方法-訪談流程

訪談流程

暖場

約兩小時

1. 說故事

2. 遺失的影像

3. 分類整理

4. 構念抽取

5. 最具代表性的圖片

6. 相反影像

7. 感官影像

8. 個人總結影像

9. 小短文

1. 取得受訪者的同意,進行現場錄音

結束

1. 收拾好所有道具,開心地和受訪者一起逛逛誠品信義店。

Page 49: Emotional design presentation

研究方法-資料整理

構念

總結影像

說故事

感官影像

構念連結

總結影像

說故事

感官影像

共識地圖

創意設計寶庫

不只有書什麼都有

汗牛充棟

匯集精品

學習吸收

人的集散地

尋寶

接觸未知的入口

設計感

金字塔頂端

指標

節省時間

我們同在一起

搖出繆思

歸屬感

放鬆

加滿能量

加速幫浦

混合體

超出負擔

進階

遺世而獨立

人文薈萃

魅力加分

衝擊

輕鬆無壓力

誠品無歲月

累積蛻變能量的學習

解散壓力的慢速空間

完成尋寶任務的旅程

保持領先的品味菁英 期待的起點

Page 50: Emotional design presentation

研究方法-資料整理 放鬆

93

學習吸收

25

創意設計寶庫

1

設計感

42

歸屬感

94

座位

5

誠品無歲月

87

遺世而獨立

41

坐下來

28

舒服

95 搖出繆思

90

進階

89

開心

99

不只有書什麼都有

3

混合體

27

尋寶

29

汗牛充棟

4

逃離現實生活

88

加滿能量

96

人的集散地

26

眼神交友

61

互不干擾

31

加速幫浦

55

台灣走出去

104

構念提及次數加總

構念直間接關係彙總

價值層級地圖

Page 51: Emotional design presentation

研究結果與分析-共識地圖

創意設計寶庫

不只有書什麼都有

汗牛充棟

座位

匯集精品

乾淨

學習吸收

人的集散地

坐下來

尋寶

多種選擇

曖曖內含光

接觸未知的入口

導遊

設計感

現代感

不做作

便利

遊逛

金字塔頂端

指標

時尚生活

生活教育

節省時間

明亮

互不干擾

我們同在一起

交流分享

自然不遠

誠品無歲月

替換更新

逃離現實生活

搖出繆思

發現驚喜

歸屬感

放鬆

舒服

加滿能量

與眾不同

加速幫浦

向理想前進自然材質

冷調材質

溫暖

易親近的

自在

輕鬆無壓力

混合體

保持新意

超出負擔

擺脫外力做自己

進階

衝擊

遺世而獨立

人文薈萃

約會聚會

魅力加分

生活教育

不設限

開心4

有趣不無聊

2

有趣不無聊

1

不設限1

1

開心3

衝擊 1

3

3

遺世而獨立

1

向未來前進的學習放鬆的桃花源 發現驚喜的旅程金字塔頂端 期待的起點-什麼都有

輕鬆無壓力

誠品無歲月

舒服

放鬆

Page 52: Emotional design presentation

研究結果與分析-共識地圖

• 分析的重點:

– 構念連結數最多的構念

– 相反概念的構念

– 各意象與其他意象的關連性

Page 53: Emotional design presentation

共識地圖-期待的起點

創意設計

寶庫

不只有

書什麼

都有 汗牛充

匯集精

學習吸

人的

集散地

尋寶

接觸未

知的入

設計感

金字塔

頂端

指標

節省時

我們同

在一起

搖出繆

歸屬感

放鬆

加滿能

加速幫

混合體

超出負

進階

遺世而

獨立

人文薈

魅力

加分

衝擊

輕鬆無

壓力

誠品

無歲月

累積蛻變能量的學習

解散壓力的慢速空間

完成尋寶任務的旅程

保持領先的品味菁英 期待的起點

Page 54: Emotional design presentation

共識地圖-累積蛻變能量的學習

累積蛻變能量的學習

解散壓力的慢速空間

完成尋寶任務的旅程

保持領先的品味菁英 期待的起點

創意設計寶庫

不只有書什麼都有

汗牛充棟

匯集精品

學習 吸收

坐下來

尋寶

多種選擇 接觸未

知的入口

設計感

生活教育

我們同在一起

搖出繆思

發現驚喜

放鬆

加滿能量

加速幫浦

衝擊

向理想前進

開心

混合體

進階

不設限

人的 集散地

Page 55: Emotional design presentation

共識地圖-解散壓力的慢速空間

創意設計寶庫

不只有書什麼都有

汗牛充棟

座位

乾淨

學習吸收

人的 集散地

坐下來

尋寶

多種選擇

設計感

生活教育

互不干擾

我們同在一起

交流分享

誠品 無歲月

逃離現實生活

搖出繆思

發現驚喜

歸屬感

放鬆

舒服

加滿能量

加速幫浦

自然材質

溫暖

自在

輕鬆 無壓力

擺脫外力做自己

進階

衝擊

約會聚會

開心 4

有趣 不無聊

不設限

開心 2

遺世而獨立 6

遺世而獨立

1

誠品 無歲月

放鬆

1

1

累積蛻變能量的學習

解散壓力的慢速空間

完成尋寶任務的旅程

保持領先的品味菁英

期待的起點

Page 56: Emotional design presentation

共識地圖-完成尋寶仸務的旅程

不只有書什麼都有

汗牛充棟

匯集精品

尋寶

多種選擇

接觸未知的入口

導遊

便利

替換更新

搖出繆思

發現驚喜

放鬆

向理想前進

易親近的

混合體

保持新意

有趣 不無聊

不設限 創意設計寶庫

節省時間

累積蛻變能量的學習

解散壓力的慢速空間

完成尋寶任務的旅程

保持領先的品味菁英

期待的起點

Page 57: Emotional design presentation

共識地圖-保持領先的品味菁英

創意設計寶庫

匯集精品

設計感

金字塔 頂端

指標

替換更新

與眾不同

保持新意

超出負擔

累積蛻變能量的學習

保持領先的品味菁英

期待的起點

Page 58: Emotional design presentation

誠品五大意象 解散壓力的

慢速空間

在自己的世界玩沙

與你分享的每一刻

做喜歡的事而忘了時間

在自己的位置

完成尋寶任

務的旅程

便利快速任務之旅

曲折 離奇尋寶之旅

尋找想要的東西

找到起點一切好談

時間要浪費在美好的事物上

期待的起點

累積蛻變能

量的學習

體驗式的美感教育

自助式的學習拼盤

鬆緊兼具的潛動力

自我成長後的蛻變

保持領先的

品味菁英

品味菁英 。

品味 ‧菁英

Page 59: Emotional design presentation

價值層級圖

第四重要 第五重要 第六重要

第一重要 第二重要 第三重要 圖例

93

吸 學收 習

25

1

42

5

87

41

28

95 搖

90

89

4

V

價值

A

屬性

C

結果

26

代表圖

Page 60: Emotional design presentation

結論

• 誠品五大意象:期待的起點、累積蛻變能量的學習、解散壓力的慢速空間、完成尋寶仸務的旅程、保持領先的品味菁英。

• 誠品核心價值:進階、放鬆。

• 誠品核心隱喻:轉變。

• 誠品人眼中的誠品特色在消費者心中別具意義。

Page 61: Emotional design presentation

接下来,如何做视觉设计?

Page 62: Emotional design presentation

关于视觉设计的争论

如何用研究来终结关于视觉设计的争论

Page 63: Emotional design presentation

涉众访谈

体验关键词

用户研究

情绪板 视觉策略

指导设计

研究方法

研究方法

用研究来终结关于视觉设计的争论

Page 64: Emotional design presentation

• 通过让用户对产品产生良好的第一印象并提供给用户持续的情绪体验,从而提升品牉

• 影响用户对产品的接叐度以及用户使用产品时对产品缺陷的容忇度

什么是体验关键词? 体验关键词代表了用户在最初5s看到产品后的情绪反应

正面 负面

有教养的

关爱

体贴的

舒适的

认真尽职的

朋友式的

深思熟虑的

尊重的

熟悉的

导师式的

可信赖的

有自信的

困扰

阻碍

隔离

恐慌

高高在上/施

恩式的

非傲慢专横

胁迫式的

http://www.cooper.com/journal/2007/07/using_research_to_end_visual_d.html

Page 65: Emotional design presentation

基于体验关键词创建情绪板-什么是情绪板?

情绪板是一种启収式和探索性的方法,也可以作为可视化的沟通工具。

风格

色彩 文字排版

图像

质感

Page 66: Emotional design presentation

基于体验关键词创建情绪板-由视觉设计师来完成

收集来源

选择素材

排列素材

讨论反思

精致化的模板

拼贴画

迭代

内部审核确认 指导 设计

or

Page 67: Emotional design presentation

基于体验关键词创建情绪板-用户参不完成

说明规则,呈现图片,让用户挑选

选中最多的是哪些图片 为什么选中这些图片

根据关键词进行归类 提取视觉元素

视觉设计师全程参与

风格

色彩

质感

指 导 设 计

Page 68: Emotional design presentation

精心收集素材,准备图片

结构化图库,包含具体的实物、场景

抽象的非结构化的图库,包含色彩、质感等元素的图片等

Page 69: Emotional design presentation

参考阅读 • “合适就穿,丌适便换”,是Zappos公司为客户提供的最好的服务内容之一。

这个口号提出很简单,但是实行起来很难。

• 一个客户在收到丌合脚的鞋的时候,会发的急躁,他们首先要了解的是,他们对

款式依然喜欢,他们急于要知道这个款式的鞋,在Zappos的仓库里还有没有适

合他们的尺码?

• Zappos公司知道,对客户的焦急,绝丌是承诺能够免去快递费用就可以解决的。

能够在最快的时间里给客户一个准确的回复才是最重要的。他们建成了电子邮件

自动检查系统,对商品迚行自动条码扫描,并丏,它会自动触収来自客户要求换

货的电子邮件,并丏将结果自动回复客户能否换货。

• 有一位女顾客在接叐媒体采访时表示:在Zappos贩物,鞋子能很快就寄给我,

我能在家试鞋,这样就可以更好地辨别出这双鞋子是否适合我,这真是太好了。

Page 70: Emotional design presentation

“退换货服务”

设计一个情绪板,来表达这项服务给

客户的第一印象,以及所激发的情绪

应用:网页/手机端

包含的设想功能

期望的体验结果

Page 71: Emotional design presentation

参考资料

• 书:Emotional Design: Why We Love (or Hate) Everyday Things by Donald A. Norman

• 书:The Design of Everyday Things by Donald A. Norman

• 书:Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules by Jeff Johnson PhD

• 书:客户如何思考

• 格式塔法则介绉: http://zh.wikipedia.org/zh-tw/%E6%A0%BC%E5%BC%8F%E5%A1%94%E5%AD%A6%E6%B4%BE

• Geneva Emotion Wheel http://emotion-research.net/toolbox/toolboxlabellingtool.2006-10-13.4050804919

• Product Emotion Measurement Instrument http://www.susagroup.com/en/our-tools/

• ZMET: http://www.olsonzaltman.com/html/howzmet.html

• 情绪板

• 消费者对诚品之喜好价值研究