用戶體驗-美學如何影響用戶行為?-《怦然心動-情感化交互設計指南》

Stephen P. Anderson
為什么要使交互變得誘人?
美學、美和行為
玩耍的誘惑
誘惑是一種含蓄的藝術
令人心動的游戲

為什么要使交互變得誘人?

  • 在交互設計工作中,我們時常會遇到這樣的問題:“如何提高網站轉換率,如何引導用戶完善信息,如何促使用戶買完商品后給予評價?”,要想解答這些問題,那我們必須要讓交互足夠的有趣、誘人。
  • 如何通過有趣好玩的活動來影響人類行為?
行為拆分 當把復雜的任務分解成較簡單的任務時,使其更容易采取行動
適度挑戰 有挑戰才有樂趣,不能太簡單那樣會人覺得無聊,難度要適中
地位 我們常常對比他人和自己的最佳紀錄,通過交互加強或削弱用戶的地位
成就 制造成就感
  • 通過創造有吸引力的交互改善以下情況

高彈出率、低使用率、低注冊率、高度同質化、低推薦率、宣傳郵件低點擊率。

反饋回應 當自己的行為得到了有效的反饋,此時我們便被吸引。
好奇心 當我們發現一處有趣的內容,人們就想知道更多。
模式識別 就算沒有模式存在,我們的大腦也能找到組織和簡化復雜信息的方法。
視覺意向 視覺優于其他任何感覺,是最直接的感知方式。
識別優于回憶 從我們曾經接觸過的事物中識別目標比純粹使用回憶記起目標更容易。
  • 設計師把用戶的動機看得比工具的可用性更重要—比起摩擦力,更重視拉力。

有這樣的一個例子,網頁管理員讓你填一張很長的表格,詢問了很多無謂的信息,但是,如果你完成了這個表格,你的名字就會出現在一個人氣網站上。這時候你是否有更大的動力完成這份表格?
了解人們的動機是一個很強大的設計工具。

利用用戶的動機,移除阻礙
  • 體驗決定一切:當基礎需求得到滿足,用戶體驗便開始主宰一切。
  • 尋找用戶潛在動機,從中提取行為原則,運用到設計中去。
實用 移動電話擺脫了傳統電話線的束縛,讓人可以隨時隨地打電話。
可靠 保證一切正常可靠,提供高質量的服務,比如高鐵票需要實時刷新獲取最新的余票信息,天氣預報需要精準報道天氣狀況。
可用&易用 可用,用起來沒有障礙。易用,超級便于使用符合心理預期。
令人心動 加入幽默元素以及激發人們的好奇心,創造流暢的體驗,平衡游戲機制等等其他類似策略。
意義深遠 比如索尼大法好、果粉買買買一個道理,優秀品牌代表一種標簽或一種生活態度
用戶體驗需求等級模型

美學,美和行為

  • 美學是用戶體驗的一部分,外表很重要但不能僅僅因為視覺表象作出倉促的商業決定。
  • 視覺設計不僅僅是一種風格、皮膚,美學與可用性是一個整體,相互呼應。
  • 我們考慮能夠影響使用者交互一切因素:視覺傳達、動作、聲音、甚至是觸覺。
  • 美學檢驗了我們對物體或現象的反應,美學不僅僅關注網頁按鈕或別的視覺元素的藝術價值,更關注用戶對這些元素做出的反應。

你的設計是否易于理解?

  • 識別是一個認知的過程。它基于模仿和經驗,我們學會了怎樣理解我們周遭的世界。
  • 根據我們經驗以下哪個更像一個按鈕?


    按鈕對比

很顯然,美學在表達功能。右邊的那個示意圖更像一個真實的按鈕。它的倒角及漸變的陰影都毫無疑問地表明了這一點。這就是“感知的功能可見性”(perceived affordances),暗示著這必須是一個按鈕。

  • 大腦如何理解顏色、陰影、底紋這些自然規律?

顏色:綠色代表暢通、紅色穿傳達沖突、黃色則代表需要思考,不同的顏色代表不同的情緒情景
窗口:想象一下,我們電腦常見的一個窗口,活動與非活動時候所呈現的陰影,正在暗示著你打開的窗口中哪個正在為你服務。

窗口陰影

你的產品可信嗎?

  • 所有的美學經歷都來源于我們真實世界所具備的屬性當中。
  • 影響一個網站可信度的公認因素是什么?

網站整體的視覺傳達設計:包括版面設計、排版方式、字體大小和顏色。

  • 外觀印象可信度的情況在現實生活中同樣存在,下面哪家加油站更能讓你掏出錢包加油,這已經很明顯了。


    糟糕的加油站

    嶄新的加油站

除去最基本的信息,左邊呈現出來的感覺是年久失修、不可靠,總會擔心出故障。右邊則是表現出嶄新而穩定,讓人覺得在此消費更可靠。
我們常常能看到一些設計,使用著不同意的字體、奇怪的顏色、行距、過份壓縮的圖片質量,這些難道不會影響我們對產品的看法?我們思考下。

讓等待變成享受

  • 在迪士尼的設計師們對排隊路線進行了非常巧妙的設計,玩家可以通過電子等候牌知道自己所處位置與剩余的等待時間,但最終實際的等待時間比電子牌顯示的時間要短10分鐘左右。這類設計既減少用戶焦慮,同時還能達到超出用戶預期的效果。從而使得漫長的等待看上去非常短暫。


    在迪士尼排隊的人群
  • 同樣的原理,我們可以運用在常見的進度條上《新科學家》雜志做了一個實驗,通過九種不同的進度條來測試哪個看起來等待的時間更短。


    加載中的進度條

漸變處為加載中的水波紋效果,加載中水波紋會在進度條上循環進行,通過測試觀察到“水波紋循環次數更少的看起來比循環次數更多”給人的感覺更快完成加載。
這是因為我們大腦更傾向計算周期,而不是時間。水波紋循環次數更多,給人的感覺時間更長。

感覺很重要

  • 綜上所述,感覺的時間、可信度都非常重要。
  • 另外在2007年芝加哥人類交互大會上也展示了一個針對不同搜索引擎的相同搜索結果。在所有搜索引擎搜索結果都一致的情況下,人們還是傾向于使用Google,更少的人使用Bing和Yahoo,這是因為Google搜索引擎比其他兩個更好嗎?

其實不然,這僅僅是感覺上更好,這種來自于感覺而非理性的結果說明了品牌的可信度更高、個性更突出、感覺更好,則被認為更可靠。不得不說,大多數時候人們更傾向于相信自己經驗而非實驗結果。

Google·Bing·Yahoo

有魅力,更給力

  • 在日本曾經有位研究人員在兩臺自動提款機上做了一個實驗,兩臺功能完全一致只是其中一臺軟件界面做得更有吸引力。

研究人員發現,更有吸引力的機器在使用中遇到的問題更少,更好地幫助了用戶進行提款。
研究人員后來解釋道:這是進化生物學理論和大腦工作的原理,當我們放松的時候,我們大腦更為靈活,并能夠完成更為復雜的問題找到解決方法。相反,當我們感到沮喪和緊張時則呈現出相反的結果。

提款機A
提款機B.jpg

關于美學中的聯想

  • 在我們大腦處理的所有事情的過程中,往往會將認知和情感的聯系在一起。


    彈窗選項A

    彈窗選項B

當我們看到上圖彈窗時,右邊按鈕是一個非常嚴肅的選項,似乎在暗示我們,注意這是一個危險的選項,該選項需要我們謹慎對待。

  • 類似的美學聯想也在Apple的其他產品也得到應用


    Mac呼吸燈

當我們的Mac電腦進入“休眠”狀態的時候,會出現舒緩睡眠指示燈,這個LED指示燈閃爍頻率與一般成年人呼吸頻率基本一致,大概是每分鐘12~20次。這是巧合嗎?Apple擁有呼吸狀態LED指示燈專利(US6 658 577B2),這個專利名稱“模擬出動人的呼吸韻律”。

當美學不再吸引人?

  • 如果你決定在近郊平民區開一家“甜甜圈的店”你會將采用以下哪種logo設計?


    Donuts店鋪logo

我們想想,在大部分連鎖店“甜甜圈店”logo都非常相似,一般
似上圖的紅色或黃色的字母類,而下圖的logo則顯得較為特別。它更像一家高檔的甜甜圈店鋪,我們未踏進店鋪里面,就能夠想象出里面的裝潢及食品價格。
大家覺得在近郊平民區更傾向物美價廉、還是高檔奢華?顯然美學影響我們的感覺、判斷和行為。
不難看出,一個優秀的設計會有意地適時選擇“俗氣”的美學設計。

  • 美的三種模式:公認的、文化的、主觀的
    1. 公認的美,與基本的設計美學原則有關,如對稱、協調、三分法則和黃金比例,這些是美觀設計的傳統基礎。我們的視覺系統趨于在事物中組織信息、尋找模式和建立秩序。
    2. 文化的美,指的是在某個時刻從某種方面我們發現某種文化的迷人之處。瑪麗蓮·夢露是世界上最有名的人物之一。不過,如果她現在還活著,她會不會成為美的典范就很難說了。在網上,思考不同時代流行于不同群體間的各種文體風格。
    3. 主觀的美,就是你個人覺得對象具有美,這與你個人的品味經歷、偏好有關。

    Bowles則暗示這三種模式具有等級關系,主觀的美壓倒文化的美,文化的美勝過公認的美。所以蘿卜白菜各有所愛,就不難理解了。

人臉的魔力

  • 利用人臉保住留存率?


    Facebook注銷頁面

Facebook注銷頁面利用了人臉的神奇效果
最早期,Facebook注銷賬號的時候,頁面顯得非常無聊。僅是簡單陳述:“我們非常遺憾您的離開,告訴我們您離開Facebook的原因?”
直到某位設計師建議:“想象一下我們離開夏令營時依依不舍”一個有你所有朋友、你不想離開的地方。“
受到啟發,設計團隊重新設計了注銷頁面,增加了好友的頭像,并在每個好友頭像上增加:“你確定要注銷賬戶嗎?”這樣做的影響是什么?這直接使注銷率減少了7%,阻止至少100萬用戶的注銷行為。

  • 經過上述的案例,基本可以說明美學對我們認知、感受和反應都有著舉足輕重的影響,并潛移默化影響著我們的決定。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容