三個現象揭示認知心理學與用戶體驗的關系
編輯導語:如何才能更好地進行產品迭代優化,提升用戶體驗?也許,了解一些相應的認知心理學知識,可以幫助你更好地洞察用戶心理,理解用戶需求。本篇文章里,作者總結了一些認知心理學上的原理與案例,一起來看一下吧。
以下所有的圖都來自作者Katerina Limpitsouni:https://twitter.com/unDraw_co.
在下文中用于描述和舉例的一系列現象,是我根據認知心理學在實踐中的應用(或缺乏)而做出的選擇。
僅需 14 分鐘,你就能了解到認知心理學中的一些在用戶體驗領域從未遇到過的現象。
我們都知道 NN Group 為 UI 設計提供的 10 條啟發式評估可用性的原則。但捫心自問,我們當中有多少沒有認知科學或任何類似領域學位的用戶體驗設計師( 或想要成為用戶體驗設計師的人 ),也不知道一些相對簡單的啟發法 [ 1 ]和行為模式。啟發式和行為模式引導著我們的行為,從而塑造我們與數字化或非數字化產品的互動。
([ 1 ] 啟發法是指依據有限的知識( 或“不完整的信息” )在短時間內找到問題解決方案的一種技術。它是一種依據關于系統的有限認知和假說從而得到關于此系統的結論的分析行為。)
我決定把重點放在 UI 設計與一些來自生活的微小片段上,并深入研究我最近發掘的內容:是我偶然買的一本書,由丹尼爾·卡尼曼( Daniel Kahneman )寫的《 思考,快與慢 》。在我大學的兩門課程中,我也曾學習了以下兩門課程 —— 認知心理學入門和認知科學入門。
我去閱讀了一些書籍并學到了一些東西。如果您想知道在哪找到它們,在本文的最后,我提供了一些非常有用的資源列表,它們是我寫作的素材,也是靈感的來源。
一、心流狀態和認知負荷不足狀態?Let us delve in — state of flow and lack thereof
Kahneman 先生在他的書( 我之前提到過,關于思考的書 )中向他的讀者介紹了“ 認知放松 ”(cognitive ease)和“ 認知緊張 ”(cognitive strain)這兩個術語。我們將在下文進行探討。
這就是現在的我。那么你是如何瀏覽媒體的呢?#懺悔時間
作為用戶體驗或UI設計師,我們的目標是將用戶的認知負荷降至最低。只要堅持這個原則,一切都會好的。但是這就像我告訴了你 “ shmoozle your breckles ” 這個詞,對嗎?我剛剛發明了這兩個詞,你對它們的含義不會有任何了解,除非你以前發明過。
回到正題——當你進入心流狀態并放棄對你的認知過程的控制時,“ 認知放松 ” 就會出現。聽起來熟悉嗎 ?比如有一次,當你全神貫注于你的項目時,你感覺不到時間的流逝,突然到了凌晨 2 點,你想知道那 15 分鐘怎么變成了 4 小時的持續工作的嗎?
這就是認知放松,它往往使人們更沖動、更情緒化、更樂觀,更傾向于遵循第一直覺,這可能會( 也可能不會 )導致更多的錯誤。
會有各種各樣的刺激和過程導致這種情況發生,并由此產生很多后果。
認知放松——起因和后果(改編自卡尼曼的書)
現在,我們來看看有哪些技巧可以將這些知識快速融入到設計中。
1. 對比度和字體不僅僅是易讀性
如果你想說服人們相信你,可以使用對比度、字體粗細和字距來突出你的信息,你使用的字體也會影響你的可信度。
對比度和字體粗細是強大的工具,不僅僅是提高易讀性的一種手段。
更好的字體形式=更高的可信度。
如果同時給出上面顯示的文本,那么第二個文本會比第一個文本更易讀,用戶對第二個文本的反應會更好( 表現出更多的信任 ),因此更容易理解并相信所傳達的信息。它們還會使用戶更容易進入心流狀態,特別是當與其他方式結合使用時。
看!這就是認知放松的力量!
2. 啟動效應更好
啟動效應是一個經常被 UX 行業忽視的一個效應,雖然這種效應不一定會發生。
啟動是一個過程,在這個過程中,用一個刺激物去“啟動”另一個刺激物,也就是說,第一個刺激物會使你自然地 “ 準備好 ” 接受另一個刺激物,從而使你更容易受到它的影響。如果你想要把這一心理學現象應用到 UI 設計中,可以使用增強信息的圖形或是添加一些動畫的方式,這樣你的用戶都會更容易接受到你想讓他們接受的東西。
那么啟動效應是什么原理呢?一起來看看下面這個很常見的例子:在漫長而緊張的一周工作之后,你洗了一個舒服的泡泡浴。你想做的就是放松,好好休息,在一個小時內什么都不用操心。你拿出你最喜歡的浴彈,點上一些漂亮的蠟燭,然后坐進去。
現在讓我們假設你收到了另一半的短信,他在短信中說他很快就要回家了,所以你在浴缸里伸手去拿“ S_ _P”。
現在,讓我們來玩類似猜字謎的小游戲,你選擇了什么字母來填補空白?是O和A,然后組成了“soap”這個詞吧?所以在這種情況下,你被上文的情境所啟動了。
在我們的小故事中,我提到了 “泡泡浴” 、“浴彈” 等詞,所以你會想到 “Soap”,而不是 “Soup” 一詞( 或者其他合適的英文單詞 )。
3. 一切都在視網膜中
我不是指你眼里的手機屏幕上的內容。請耐心聽我說,我先談談眼睛的解剖結構。
視網膜是眼睛的感光部分。當你從環境中收集信息時,眼睛是這樣做的:光線到達視網膜,然后轉化為脈沖,沿著視神經傳遞到你大腦中的視覺皮層。
這就是我們正在談論的視網膜但是如果只是為大腦創建圖像的心理表征而不進行處理,那就太簡單了,對吧?為了不說得太詳細,讓我解釋一下大腦處理視網膜信息的方式:
Marr 范式(我們看東西的方式)
正如你在上面所看到的,它既復雜又不復雜——首先接受光線,然后放進一系列的計算過程中,最后得到一個模型,這個模型只有在最后階段才會在大腦中被 “ 編碼 ” 。整個過程占用的時間非常少,遠遠少于一秒鐘。
我提這一點的目的是,盡管這一過程不會讓認知過程變得更復雜,但重要的是,不要在 UI 界面中引入不必要的元素。用戶的大腦中已經有很多東西了,別讓他們感到困擾。
視覺感知與許多非常有趣的現象有關,比如格式塔定律,視覺錯覺。( 我不太了解這方面,所以留給其他人來講吧 )
4. 他們不記得了,你也不記得了
我們的記憶偶爾會出錯。Jon Yablonski 在他的博客上對這一點的講的非常好。他在這里引入了 “ 認知負荷 ” 這個術語,它描述了更廣泛的范圍。我在本文開始時介紹的認知輕松其實是認知負荷不足,這會導致記憶困難。
下面是一系列研究參與者記憶單詞百分比的圖表。從中你需要記住的一件事是這個曲線圖形——一開始記憶百分比是高的( 首因效應 ),后來顯著下降,最后上升( 近因效應 )。
作者/版權所有者:WikiPremed。版權條款和許可證:CC BY-SA 3.0。
最好的建議是利用它——不要試圖讓你的用戶記住東西,因為他們不會記住。而首要效應和近因效應,這兩種已經被廣泛地探索和剖析的效應是十分有效的,利用這兩種方法可以更好地強調你相傳達的信息。
1)可以重復一遍嗎?
如果你想讓你的用戶記住一條重要的信息,或者在與你的網站互動后給他們留下一個好印象,請記住“重復”是一個很好的方法。
讓我們回到卡尼曼先生 2010 年在 TED 官方會議上發表的演講。
他提到的一點是,接受結腸鏡檢查的患者( 在沒有麻醉的情況下進行結腸鏡檢查的患者 )是如何遭受巨大的不適,并且經常感到疼痛??僧斔麄冊谧詈笕淌艿奶弁疵黠@低于開始時的疼痛時,他們會認為這次經歷比更短時間但在相對更痛苦時結束更容易忍受。
是不是迷糊了?讓我在圖表上展示一下,它顯示了兩條線——灰色的一條線顯示了一個結腸鏡檢查時間較短且明顯更痛苦的患者的經歷。第二條線的時間更長,但最后幾乎沒有痛苦。
現在,如果你猜猜看,哪位患者在檢查后被詢問時報告有更糟糕的經歷?
答案可能是令人驚訝的——結腸鏡檢查時間較短且經歷了更劇烈疼痛的患者,比疼痛持續時間較長的患者感受到更不舒服。盡管他經歷了更多的疼痛,但在檢查終止前的疼痛程度相對較低。這就是近因效應在起作用。
也許您的用戶在使用 UI 界面時不會體驗結腸鏡檢查那種痛苦( 除非特殊情況 ),但這條規原則適用于許多其他領域——不要忘記它。
2)考慮一下順序問題
這是這兩種效應的另一個用途——在設計下拉列表和選項順序時可以使用它們。
利用你創建的 persona 考慮他們的需求:他們在尋找什么,那么最合乎邏輯的排序方式是什么?如果存在一個非常特殊的選項,你希望用戶在其他選項中進行選擇,那么可以將其放置在列表的最開始或最末尾。
上圖出處:https://www.sketchappsources.com/free-source/1529-dropdown-select-form-style-sketch-freebie-resource.html
3)記住那個圖形——那個 U 形圖是你的朋友。用起來!
這是事實。無可否認,無可爭議。如果你能在不確定中找到確定,那就應該去執行不是嗎? 讓我們來看看如何將提示信息應用到界面中,以及它們是如何提高用戶的認知輕松度的。
讓我們看看這個簡單的登錄頁面。提示都在那里,告訴用戶你想要的和需要他做的是什么。他們不必去記憶,你可以幫助他們記憶,這就是近因效應。
Mailchimp網站的注冊頁面
看是他們如何給用戶傳達信息的——持續輸出他們的價值觀。這是十分關鍵的,你希望用戶可以信任你提供的數據,那就要給他們一些好處。但是在這之前,你可以做一件事:啟動他們,讓他們更有可能為你提供你需要的細節。
看一下 logo 旁邊的文字,他們向潛在客戶展示了使用 Mailchimp 網站的好處,這給了客戶繼續注冊的啟動想法??蛻糁灰峁┧麄兊碾娮余]件,創建用戶名和密碼,畢竟有這么多好處呢,所以感覺這也沒什么,對吧?
創建密碼 | Password creator
現在,我們來更仔細地研究一下密碼創建頁面。當開始鍵入字符時,如果已經滿足一些規則要求,則底下提示文字的對比度也會相應地被改變,讓它們變得不那么明顯。
這將進一步減少認知負荷,因為你不必查看每一條要求并思考是否已經在密碼中使用了該條規則。另一個便捷的方式是在鍵入密碼時顯示/隱藏密碼,確保沒有人在看!
二、不是你想讓用戶看到什么,而是用戶能看到什么?It’s not what you want them to see, it’s what they can afford to see
有一個人,Gibson先生,他創造了“功能可見性”(affordance)這個詞。如果你讀過《日常的設計 》(The Design of Everyday Things),你就會熟悉它。自從 Gibson 提出這個概念以來,有一件事發生了變化,那就是思考交互的方式。
但是,對于那些沒有讀過 Don Norman 書的人( 順便說一句,你應該讀這本書 ),讓我們在這里介紹一下“ 功能可見性 ”的概念。為了找到正確的解釋方法,我想出了一個主意,讓我們再做一次思維實驗,好嗎?
假設你對花生過敏。當你吃它們時,首先你會上氣不接下氣,然后你的喉嚨會腫起來,你可能都快死了。這里的重點是:你不吃花生。
然而,當你看到花生時,它們會“傳達”一個信息:“把我吃掉吧” ,請把它想象成一個美好的、下意識的行動喚起按鈕( call to action, CTA )。此時由你來決定是否要吃它們,你的決定可能基于至少幾個因素。
你沒有意識到這個 CTA 就是花生的“功能可見性”。盡管你對它過敏,但它們還是你的營養來源對嗎?你可能會死,但至少你會吃飽肚子后再死。
現在,讓我們看看它在實踐中的使用。我在例子中已經提到,CTA 的要點是讓你的用戶做你想讓他們做的事。所以你可以先“啟動”他們,然后在你的 CTA 上以 “ 功能可見性 ” 的形式,發送另一條信息給他們。聽起來不錯,不是嗎?現在讓我們仔細研究一下。
在以下這個網站上尋找一下 CTA,并試著運用你已經掌握的知識。
可汗學院:www.khanacademy.org
現在,你有沒有注意到,你是如何被那些可愛的小傻瓜動畫獎勵,去在按鈕上懸停的?看看這些法則都是怎么用的:它們吸引了你的注意力,讓你想要懸停按鈕,去看看有多少不同的動畫,結果也許會讓你想要看看它們引導的后續頁面是什么。
這是不是超級可愛?
讓你的沖動更加強烈的是,你更加了解設計師在設計頁面時使用的機制?;蛘摺阋呀洔蕚浜眯蕾p他們的工作了?這是一個值得深思的課題。
三、混亂的語言 = 困惑的用戶?Confusing language = confused users
不開玩笑,這是一篇研究的標題
這是我在網上發現了一份出版物,名為《 不必要地使用博學的白話文的后果:不必要地使用長詞的問題 》。
你是不是對這個標題感到迷惑?坦率地說,當我第一次讀到它的時候,我很迷惑。其中一個原因可能是我不是個以英語為母語的人。此外,我在閱讀標題時有太多的事情要做。你會想要去學一個“聰明”的詞來描述我( 也許還有你 )的經歷嗎?
我在這篇文章中已經提到了它,所以它可能聽起來很熟悉,也可能看起來不熟悉。讓我們介紹一下認知負荷及其對用戶體驗的影響。
認知緊張與認知放松相反。這兩者都描述了用戶的認知負荷。但如果我給你留下了很多解釋,而沒有實際的例子,那我就是一個偽君子,對嗎?所以讓我們深入研究一下。
衛報的網站。你能告訴我編輯對于該網站的優先級是什么嗎?
我對《衛報》有愛有恨。雖然他們知道如何報道一個故事,但我最頭疼的是他們的界面。我明白他們希望讀者通過捐款的方式來支持他們——但是,這一定要在我們面前展示這么多版面嗎?比如,將其與維基百科進行比較。
我們都知道,維基百科也是依靠捐款來保持開源。讓我們暫時先把爭議放在一邊,我記得去年他們在每一頁的頂部都引入了彈窗要求捐款。
它對許多讀者產生了影響,許多人都捐款了?,F在請看屏幕截圖,看到 “給維基百科捐款” 的按鈕了嗎?如果你想讓它更大,你可以點擊它。它已經被移動到導航欄的左側,這使得它不那么顯眼,但你仍然可以找到它。為什么我認為這是一個更好的做法?因為你不會被它分心,你 10 次訪問維基百科中有 9 次是為了查看一些信息,而不是為了捐款,對吧?
結論就是優先響應用戶的需求,而不要優先考慮你作為設計師的需求(除非你不得不這樣做)。
四、更多內容?Want some more
因為我不是專家,我只是分享我這學期學到的東西??隙〞懈斆鞯娜丝梢愿玫亟忉屗鼈儭?/p>
如果你有任何想進一步探索的內容,更多詳情請閱讀以下書籍:
- Don Norman的《 日常的設計 》
- Daniel Kahneman的《 思考,快與慢 》
- James Gleick的《 信息簡史 》
- Rupert Glasgow的《 最小的自我與自我意識的起源 》
本文翻譯已獲得作者的正式授權(授權截圖如下)
原文:https://uxdesign.cc/the-relationship-between-cognitive-psychology-and-ux-explained-f3ade59644c9?source=post_page—–c5fb711cee6f
作者:Barbura Adamska
譯者:彭祎婕;審核:吳鵬飛、李澤慧、張聿彤;編輯:李莉好
本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
- 目前還沒評論,等你發揮!