3個層面分析:情感化設計怎麼做?
這篇文章跟大家分享了情感化設計的思路和方法,並結合豐富的例子,讓大家更直觀的感受情感化設計,以及情感化設計的妙用。
時至今日,大家都已經深切的明白情感化設計的重要性和必要性。但毫不客氣的說,情感化設計依然是很難的一個環節,即使掌握了情感化設計的理論基礎和設計思想,卻時常還是感覺不知道從何下手,就需要結合大量的案例來具體領會。情感化設計的理論基礎已附在文末《情感的藝術—諾曼·情感化設計》
一、案例分享:諾曼《情感化設計》的三層理論模型
下面以諾曼《情感化設計》的三層理論模型為依據,分別介紹每一層級上的設計案例。
1. 本能層
(1) 俏皮的設計
可口可樂的營銷案例:字可能看不清,左圖寫著“你算老幾”,當喝完可樂就會看見答案“我的知己”
(2) 情景化設計
這是蘋果的天氣設計,很多天氣類軟體都有類似的設計:展現的情景跟當前的天氣狀況是實時對應的,白天雲朵會飄,晚上甚至能看見星星。
(3) 彩蛋給人驚喜
Chrome瀏覽器搜尋“滅霸”,點選右上角的“超能手套”,網頁開始消失。真的有一種滅霸打個響指的感覺。如果聲音外放,還能聽見音效。
(4) 小變化給人新意
下圖分別來自B站、微博和即刻。在點贊後會發生一些與眾不同的變化,給人帶來新意。
B站會出現B站小電視、微博再給林志玲點贊後會出現vow的表情、即刻更是喂貓前後分別用小魚和魚骨代替。不同情境下點贊,還會出現不同的動態效果。
(5) 別出心裁的設計讓人眼前一亮
一加用小人托起卡針,雖然好像並沒什麼作用,但能感覺到設計師用心了,用心的產品總能讓人放心。
一加
(6) 安全感
readme、Bilibili在輸入密碼的時候,會遮住眼睛,我試著感受下潛臺詞:我不看,你放心輸入吧。
readme
Bilibili
(7) doodle情感化設計
doodle先特指在logo上進行的一些創意表達,Google在這方面玩得最早也最多。
(8) 擬人化
Bilibili極力地在打造二次元形象,甚至能感覺到兩位小姐姐的身高、體重、性格、心情,在Bilibili中就像有兩位小姐姐一直在陪伴著。
Bilibili
夸克瀏覽器語音助手介面,兩隻眼睛忽閃忽閃的,可愛極了,像一隻小精靈。
夸克
(9) 小遊戲
Google瀏覽器在斷網的時候會出現小恐龍遊戲,也是很有趣。
Google瀏覽器
(10) 微動畫
以google pay為例,它為每一筆交易獎勵一張刮刮卡,這個微動畫增強了感知。
google pay
2. 行為層
(1) 充分考慮使用者使用場景
Word模式網路小說,這簡直是摸魚神器啊,我是不會告訴你這是鳳凰網書城的。強烈建議知乎加上,這樣我摸魚寫文章的時候,就不用先在Word寫好再複製過來了,類似的操作還有網易雲閱讀。
還有酷我音樂的這個“節奏燈光”把我逗笑了,它會根據節奏或者人聲來控制閃光的頻率,配合DJ食用效果更佳:“如果我是DJ你會愛我嗎?”
酷我音樂
(2) 貼心關懷
騰訊視訊在夜深的時候,頂部會出現提示:夜深了,並帶上時間。雖然並沒有什麼卵用,我還是會繼續看,但那一秒真的被觸動到了。
騰訊視訊
我知道美團外賣只是想促進轉化,但這樣恰逢時宜的提示,就不至於讓人非常反感。
美團外賣通知
網易雲音樂居然知道我生日,還讓我挺意外的,不知道哪裡洩露了隱私。不過先不管這麼多,聽聽推薦的生日歌還是挺有感覺的。
網頁雲音樂生日提醒
(3) 進度提示
很多產品的成功頁都會有個流程展示,流程的展示能給使用者以確定的預期,從而消除因不確定而帶來的焦慮感。
這裡再舉個Zenly的例子:在載入聯絡人的過程中,會不斷地出現新的文案並配合不同的表情。本來枯燥的等待過程,變得有趣起來,不然我可沒有耐心等待那麼長時間。
(4) 文案
Medium提醒我登入的文案與眾不同:先是給我道歉:“抱歉打斷你了”,非常有禮貌,不過確實是打斷我了,因為我當時正開啟一篇新的文章。
緊接著灰色小字寫著:“我們發現您以前在Medium閱讀過,這裡有個個性化的體驗等著您,只需點選幾步即可,現在去建立屬於你自己的Medium嗎?”
文案寫得好才不至於那麼令人反感,如果是很生硬的登入提示,當時我就直接點關閉了。
Medium
還有各種各樣風騷賣萌的文案:
夸克:網頁大師乘坐著404航班去追尋詩和遠方了。
Colorful Pro:梧桐更兼細雨,到黃昏,點點滴滴。
webflow:嗯哼……那個藍色的按鈕一定很重要……
(5) 反饋
這裡先舉個QQ音樂、網易雲音樂和蝦米音樂在無音樂版權情況下的反饋:
傳達出來的態度完全不一樣。
這三個反饋都是截止到2019.7.10的最新版,上一版是這樣:
其實我更喜歡網易上一版的文案,語氣弱一些並用了個可憐的表情,弱勢的語氣更能獲得諒解。
還有各種各樣反饋的例子:微信轉賬如果兩筆金額一致,會出現確認框,避免誤操作。
微信轉賬
iPhone充電,如果充電口存在液體,會出現安全提示。
iPhone充電提示
QQ音樂會員到期提示,用了我最愛的偶像周杰倫,並改編了周杰倫的歌詞作為文案,讓我感覺很親切,雖然依舊是變成花樣騙我錢,但這次並沒有那麼抗拒。
QQ音樂會員到期提示
3. 反思層
(1) 情懷
張小龍的七星級產品—QQ郵箱,在登入的時候總會隨機的出現一句話。
有時候是許巍的《藍蓮花》、有時候會是兩歲小孩的一幅畫、有時候是一句名言……但下面這句話有點風騷,我不敢翻譯:“Across the Great Wall we can reach every corner in the world.”
QQ郵箱
(2) 回味
扇貝是我天天用的一款軟體,它每天都會帶來一幅很精美的圖片和一句讓人回味無窮的話。每天開啟扇貝,感覺又開啟了有逼格的一天。
扇貝啟動頁
(3) 價值觀和社會價值
Bing搜尋和騰訊網404 no found介面用來做走失兒童公益。為了能讓大家看得更清晰一些,這兩張圖我就不縮小了,希望寶貝能儘快回家。
Bing搜尋
騰訊網
丁香園404 no found介面展現了因惡性醫患遇害的同道,向他們表示哀悼。
丁香園
(4) 人文關懷
下圖分別來自Pinterest和微信,Pin在搜尋輸入depress、suicide等極度負面情緒詞彙的時候,會出現“Can we help”提示,告訴使用者這些圖片會讓人情緒低落,如果你或別人正在經受困難,甚至想自殺或者傷害自己,我們可以幫助你,你並不是孤單一個人。
這正體現了一個企業的社會價值。
在Facebook修改了自己的感情狀態,看到了這樣的一則官方幫助貼,有點暖心了。
在淘寶搜尋穿山甲,心裡一驚,居然有搜尋結果,然後……
給阿里點個贊吧,還是希望全民都能建立起保護意識,也希望儘快研製出新型藥物。讓我們一起來保護這個可愛的小傢伙吧。
在淘寶搜尋穿山甲
好例子太多了,以後有遇見好的例子會繼續更新。
這裡需要說明的是,無論是在哪一層級上的設計,都會對其他兩層產生影響。
比如一個好看的介面設計,會讓使用者更能接受並理解他,從而得出這個產品不錯的結論。也就是說,情感化設計是整體性的,設計的時候都是需要綜合考慮的,不存在只針對某個層級的設計。只是說諾曼將“情感化設計”分為三個層級後,讓我們找到了設計的側重點,更加方便我們設計了。
比如我們可以從本能層為切入點切入,思考得到一個設計方案後,再通盤考慮對行為層和反思層的影響,最後通過修正得到一個更恰當的解決方案。 下文根據層級對案例進行分類,只是為了更方便的進行闡述。
二、什麼是情感化設計?
這是個老生常談的問題,所謂的情感化設計就是以使用者情感角度為出發點的設計方式,以期讓使用者和產品發生情感上的連線。
現在流量明星都在努力塑造自己的人設,並主動頻繁更新動態,讓粉絲能更輕易的與自己互動,併發生情感上的連線。他們已經不像老一輩明星那樣讓人感覺遙不可及高高在上,反而讓人感覺親密無間,這些青春靚麗的小哥哥小姐姐成為了多少人的雲戀愛物件。
產品也一樣,早就不應該是冷冰冰的機器。我們也應該給產品一個性格:逗逼、小可愛、穩重大叔、極客、情懷、可靠……
這些有血有肉有溫度有感情的產品,更能讓使用者產生情感上的共鳴。每個人都喜歡跟自己趣味相投的人在一起,對待產品也一樣。
三、情感化的設計思路是什麼?
我查閱了大量資料,也跟做使用者體驗的同事交流後發現,確實業內現在並沒有一個統一的標準化的設計思路。但幸運的是,我們浸淫情感化設計多年,形成了一套我們覺得切實可行的情感化設計思路,今天就將其傾囊相授:
1. 首先需要明確目標,不是為了情感化而情感化
作為一個設計團隊,我們要先明確當前急需解決的問題,有策略有節奏的進行執行,大家方向統一目標一致,這樣才有可能高效產出,並取得高分答卷。
假設:現在的目標是提升產品的品牌認知。
2. 提取情感化關鍵詞
我們需要找到使用者情感的訴求點,或者我們想傳達的情感價值觀。並將這些關鍵詞提取出來,作為設計的核心關鍵詞。
假設:提取的情感化關鍵詞是活力、陽光和親和。
3. 尋找切入點
切入點有非常多,比如統一的視覺系統、文案語言風格、驚喜感、趣味性、微互動等等。
假設:我們以統一的視覺系統入手,可以對logo、色調、視覺元素、圖片、插畫等進行整體升級。
4. 具體方案細節設計
我們對找到的切入點進行全盤的把握,然後再逐個擊破,最後形成新版的情感化的設計方案。
以上是情感化設計的思路,總結起來就是如下:
情感化設計思路
四、情感化設計的作用
情感化設計的作用有很多:
有個誤區:情感化設計大家似乎都在追求正向的情感,但實際上負面的情感也不是不能用。
比如緊迫感:紅包有時限、下單必須多長時間內支付。
心理學上的解釋就是,當人類處於負面情緒時,會更集中注意力去解決當前的困境;當人類處於正面情緒的時候,思維會更開闊更有創造力。這也是人類進化而來的結果,正所謂飽暖思淫慾,飢寒起盜心。
這也是為什麼常常有產品經理抱怨:明明這個按鈕那麼明顯,使用者為什麼看不見呢?因為當用戶處於困境的時候,真的就是進行重複操作,而讓自己處於死迴圈中,最後無奈退出,退出的時候還要罵一句這產品真傻逼。
還有個使用負面情緒的例子是共享按摩椅。
它的喇叭剛好就放在頭枕的位置,喇叭裡面迴圈播放著廣告詞。正常路過的時候,並不會感覺很刺耳,但只要人往那一坐,是戴上耳機也無濟於事;想眯一會兒,被這廣告詞吵得睡不著,但又不想放棄這麼舒服的座椅;最後在幾經掙扎下,還是乖乖掃碼買單按摩了。彷彿耳邊飄來一個聲音:這個問題充錢就可以解決了,都是被人算計好了的。
五、情感化設計的風險
情感化設計的好處很多,但它的缺點也會對產品造成很大的傷害,我們不能不瞭解情感化設計的風險:
1. 情感化設計存在時效性,一時新穎的設計,可能很快就會過時;
2. 每個人成長環境不同、理解力不一樣,這導致情感化設計存在較強的主觀性。有人覺得還OK的設計,另外一撥人甚至感覺受到了冒犯;
比如下面優酷贈送會員的浮窗,理性看使用者領取會員是最佳選擇,優酷也想從文案上讓原本二選一的選擇題變成唯一答案的必選題。但這一句“不要了,我愛看廣告”讓我感覺受到了羞辱和嘲笑。我選擇都不選,退出並清理後臺。
優酷視訊
3. 情感化設計有時候會影響產品的可用性。因為它在分散使用者的注意力,處理不好的話,反而會讓使用者偏離重心;
4. 全球化的產品,一定要考慮到不同國家地區、不同種族和不同文化背景的感受。
從小眾產品做到大眾產品,情感化設計越來越難,因為眾口難調。每一次設計,都會有人跳出來反對,甚至同一個人,因為他自己心情的變化,也可能對同一個設計作出相左的評論。
為了讓我們更安全的進行情感化設計,我們總結出了一些原則:
1. 在不常見的頁面做情感化設計,比如登入註冊頁、退出登入、空白頁、斷網、弱網、伺服器失聯等邊界場景,還可以在產品引入新功能時,使用者完成里程碑式操作或成長時;
2. 結合節假日或值得紀念的日子出現情感化設計;
3. 儘量採用細微的變化;
4. 不要欺騙使用者情感。
我收到了即刻的一條通知“你好,我們應該認識很久了。”我一激動,這會是誰呢?慕名而來?
結果開啟一看,是即刻的新功能介紹。那一刻我感覺到了欺騙。
即刻
5. 不要太刻意,無意間的發現更能讓使用者驚喜。也可以準備一些彩蛋,給使用者不期的驚喜。
6. 不要干擾使用者主線操作。
7. 只做適合自己的情感化設計,不要為了情感化而情感化。情感化設計是飯後甜點,不能當正餐。
以上。
本文由 @湯湧 原創釋出於人人都是產品經理。未經許可,禁止轉載。