在 UX 設計中利用心智模型

已發表: 2022-03-11

無論是創新新產品還是優化現有產品,UX 和 UI 設計師都應該利用他們的產品用戶對熟悉的產品和界面的了解。 回報是更順暢的交互、更快的採用率和更好的整體可用性。

用戶甚至在您設計產品之前就知道您的產品是如何工作的以及如何使用它。 至少,他們應該。 設計師想要令人興奮和原創,但用戶總是會根據他們以前使用過的東西(稱為“心理模型”)來處理新產品和功能,因此,設計師應該按照用戶的期望工作。

心智模型定義
通過重複使用,用戶形成了應用程序和設備應該如何工作的心理模型。

什麼是心智模型?

心智模型基於信念,而不是事實:也就是說,它是用戶對(或認為他們知道)系統(例如您的網站)的了解的模型。 ——尼爾森諾曼集團

通過習慣性地使用當今存在的眾多產品,用戶的大腦為產品的功能開發了心理模型。 這些心智模型是通過對系統(例如網站、應用程序,甚至是上面汽車座椅示例中更具觸覺的用戶界面)的常規使用以及對系統如何工作的了解而形成的。

用戶會將他們圍繞一種熟悉的產品建立的期望轉移到另一種看起來相似的產品上。

這些天來,經常看到可能比書籍或普通電視花費更多時間與觸摸屏設備交互的小孩嘗試刷平板電視(甚至書籍),並且在刷卡不起作用時感到驚訝。 基於他們對觸摸屏設備的接觸,觸摸屏一代已經建立了這樣的期望(心理模型),即滑動是每個類似盒子的對象應該如何響應。

即使他們被一本書弄糊塗了,這些孩子也可能毫不費力地拿起一個不熟悉的觸摸屏設備。 這不是因為他們花時間學習使用每個單獨的設備,而是因為他們了解了特定的設備及其工作原理。 他們的大腦存儲了一個操作的心理模型,並且他們能夠成功地將其應用到使用相同或相似模式和序列的其他設備上。

每個用戶都有自己的心智模型,不同的用戶可能對同一個用戶界面構建不同的模型。 此外,可用性的一大難題是設計師和用戶的心智模型之間的共同差距。 – 尼爾森諾曼集團的雅各布尼爾森。

引用座位的心智模型定義的 UI
梅賽德斯的汽車座椅設置是使用心智模型的交互設計的一個很好的例子。 用於控制的汽車座椅形狀使其直觀易於理解和操作。

設計師沉浸在設計項目中,並定期形成自己的心智模型。 他們還從其他設計師使用的常見交互設計模式中獲得它們。 在某種程度上,這可以創造一個“設計師泡沫”。 很容易陷入設計對其他設計師有意義但可能會使普通用戶感到困惑的東西的陷阱。

人們具有獨特的心智模式,通常由教育、經歷、年齡和文化形成。 普通用戶並不熟悉生活在上述“設計師泡沫”中的設計師所熟悉的微妙 UI 模式。 為了同情用戶並設計最大的可用性,設計師需要縮小設計師和用戶心智模型之間存在的差距。

為了與用戶現有的心理模型保持一致,設計過程應該包含對用戶對產品工作方式的期望的理解。 作為用於發現用戶需求和痛點的 UX 研究方法的一部分,這一點尤為重要。

美國的全職自由UX設計師想要

錯位的用戶心理模型

當用戶的心智模型與設計的實際運作方式之間存在差異時,就會發生心智模型的錯位。 這種脫節會產生可用性問題,因為產品不符合用戶的期望和現有知識。 捕捉用戶注意力和信心的窗口很小,因此錯位可能會造成災難。

例如,大多數人已經使用了足夠多的電子商務系統,以至於他們對體驗如何流動產生了期望。 具有意外流量的令人驚訝的用戶可能意味著轉化率和銷售額的下降。

如今,大多數購物者都希望根據以前的經驗進行可選註冊,並且不希望將時間花在填寫表格上,而是以客人的身份結賬。 根據 Econsultancy 的一項調查,25% 的購物者在結賬前被迫創建賬戶時會放棄購買。

在用戶界面工程的一個案例研究中,當結帳流程中的“註冊”按鈕被“繼續”按鈕取代時,這種微小的調整創造了 3 億美元的收入增長。 根據以往的經驗,購物者對點擊“註冊”按鈕後的流程有一個心智模型——通常是在購買產品之前需要進行耗時的註冊過程。 這些負面期望導致購物者放棄購物車。

在另一個例子中,Snapchat 最近在對其 UI 進行了重大更改後遭到了重大抵制。 用戶希望 Snapchat 的外觀和操作與他們已經習慣的舊版本一樣,並且現有的心理模型與新版本不一致。

結果? 用戶感到困惑,感到無能為力,而這種變化導致了公司可能無法從中恢復的大規模外流。

回顧一下——人們的期望和心智模型是基於以前使用特定產品的經驗。 用戶體驗或用戶界面中的意外驚喜可能會導致混亂和沮喪,公司會為此付出代價。

心智模型錯位
心理模型在行動中不匹配:最近重新設計的 Skype UI 使用戶感到困惑並減慢了他們的速度,因為它使用了非標準對話框,其中選項看起來不像對話框按鈕。

改善錯位的心智模式

可用性測試和其他用戶體驗研究方法有助於揭示設計體驗與用戶心智模型之間的不一致。 此外,可以通過交互式導覽、仔細的引導、實時反饋和/或指示符來改善心智模型之間的差距,以幫助學習新產品功能和新 UI。

更新和設計更改不必給用戶造成混亂。 與其強迫改變,不如讓用戶有機會在他們準備好時更新軟件。 當用戶能夠有意識地選擇界面何時可能發生變化並可能挑戰其熟悉產品的現有模型時,他們會更加了解新設計並獲得授權。

谷歌日曆重新設計調整用戶
Google 對 Google 日曆的 UI 和行為進行了徹底的更改,該產品多年來沒有太大變化。 通過警告並允許他們在幾個月內選擇加入,谷歌授權其用戶決定何時改變他們對產品應該如何工作的心理模型。

谷歌最近對其穀歌日曆進行了大修。 重新設計為全球數百萬人使用的產品帶來了十年來最重大的設計變化。 他們沒有把它強加給用戶,因為對他們來說如此重要的東西的劇烈變化可能會增加摩擦和挫敗感,而是提醒用戶注意即將發生的變化。 谷歌允許用戶在舊版本和更新之間切換幾個月,然後最終完全替換舊版本。

使產品的舊版本兼容並可用,並允許用戶在有限的時間內繼續使用熟悉的版本,可以保持信任。 允許並授權用戶決定何時學習新界面將幫助他們感覺好像他們仍在控制體驗。

用於用戶入職的心智模型 UX
Slack 使用交互式導覽來幫助新用戶學習界面並有效地改進用戶可能擁有的任何矛盾的心理模型。

對用戶熟悉的現有設計進行全面、大規模的更改可能會違反用戶現有的心理模型。 為了盡量減少讓用戶感到不安的風險,公司可能會考慮通過多次更新或與較小的群體測試更改來進行細微調整。

Facebook 在使用這一策略方面取得了相當大的成功。 例如,“反應”在全球發布之前已在特定地區進行了廣泛的實施和測試。 儘管小幅調整經常發生,但 Facebook 在推出可能擾亂用戶心理模型的重大更新時仍小心翼翼。 通過多個版本啟動更改可以最大限度地減少需要改進的心智模型的數量。

在心智模型的基礎上進行設計

雅各布的互聯網用戶體驗定律指出,“用戶將大部分時間花在您網站以外的網站上。 因此,客戶對您網站的大部分心理模型將受到從其他網站收集的信息的影響。”

簡而言之,用戶體驗設計師的目標是創建一個流程,讓用戶快速輕鬆地完成目標。 人是習慣性動物,利用用戶心智模型意味著用戶在使用產品之前就知道如何使用它。

心智模型研究

UX 設計師通常會創建旅程圖和移情圖,並在創建新產品(或改進產品)時使用數據來幫助識別用戶痛點。 在心智模型方面,相同的用戶體驗研究方法和流程可以應用於現有競爭對手或同行產品的研究。

在設計新產品時,研究現有系統可能會為設計師節省大量時間和金錢,因為它可以消除從頭創建新原型以測試新概念的需要。 觀察用戶如何與現有設計進行交互,以了解他們對類似設計的期望。

設計師可以嘗試改進已經存在的解決方案。 此外,只要目標人群相同,鏡像眾所周知的系統意味著只需進行少量測試即可驗證核心功能的可用性。

心智模型示例:學習系統和心智模型
可以研究競爭和/或相關係統的用戶,以了解他們當前的工作方式、他們當前的心理模型以及他們的痛點是什麼。

鏡像現有的 UX

世界上最流行的應用程序直接相互影響,它們定期實施基於現有心智模型的設計。 例如,Facebook 引入了“點贊”的交互模式,隨後被 LinkedIn 和 Instagram 複製。

Twitter 引入了標籤,然後被 Facebook 和 Instagram 複製。 標籤是由 Twitter 引入的,然後被 Facebook、LinkedIn、Instagram 等複制。 Instagram 引入了故事,然後 Facebook 實現了這些。 Snapchat 引入了照片過濾器和操作,然後 Facebook 複製了這些。

在幾乎所有這些情況下,這些功能的採用幾乎沒有變化。 Facebook 和 Twitter 競爭非常激烈,它們總是希望利用彼此的成功。 Facebook 在模仿競爭對手的產品體驗方面有條不紊,當一個新的、成功的應用程序出現時,如果他們無法獲得它,他們就會這樣做。

社交媒體 UI 利用心智模型 UX 方法
Facebook Messenger 的用戶界面反映了 Snapchat,利用了現有的心理模型。 一個流行應用程序的用戶在使用和享受另一個應用程序時不會有任何問題。

最近的統計數據顯示,Facebook 每月有超過 22 億活躍用戶。 該應用程序非常受歡迎,以至於它影響了今天的許多設計,因為用戶對 Facebook 等熟悉產品所建立的範式抱有期望。

例如,由於今天 Facebook 的設計影響,在許多不同的桌面應用程序的登錄區域附近的右上角找到通知圖標是非常標準的。 狀態更新、新聞提要和點贊在其他應用程序中也越來越常見。

LinkedIn 可以按照他們想要的任何方式設計個人更新、新聞提要或通知。 然而,利用他們的成功、龐大的用戶群和用戶現有的心理模型,他們選擇創造一種直接反映 Facebook 的體驗。

除非有特定的理由來規避用戶的期望,否則引用熟悉的模式可以讓設計師將用戶的注意力集中在產品更重要、更獨特的功能上。 即使有人從未使用過 LinkedIn,他們對 Facebook 的了解也意味著一切都很熟悉。

心智模型和擬態

Skeuomorphism 是一個術語,用於描述反映現實世界對應物的界面對象,它們的外觀和/或用戶如何與它們交互。 這種設計理念利用了用戶對實際對象的現有知識和心理模型,因此他們不需要學習新的界面。

許多數字 UI 元素反映了現實世界的對應物。 這並不是因為設計師缺乏想像力,而是他們意識到與物理世界中的任何類似物分離的 UI 元素意味著用戶需要付出更多努力來解釋他們所看到的內容。 在數字 UI 中加入一個開關,看起來和行為都像有人可能在家裡找到的電燈開關,這極大地減少了該用戶的認知負擔。 視覺隱喻就在那裡,他們立即知道它的用途。

利用心智模型 UX 的良好 UX 方法
即使完全抽象,普通用戶也可能知道他們正在查看的是一組開關,可以根據需要打開和關閉。 Google 的 Material Design 系統使用非常扁平的視覺設計和圖標,但利用基於物理隱喻的常見 UI 模式來確保最佳可用性。

這個原則應該適度使用,但如果應用得當,對可用性會非常有效。 擬物化意味著 UI 的外觀和功能都與現實世界中的對應物相似。 然而,設計師需要小心這種心理模型理論,因為功能或外觀的差異實際上會降低設計的可用性。

擬物化設計在專業音頻製作應用中很常見。 數字插件通常模擬模擬設備,例如壓縮器、均衡器和混響單元。 在下圖中,左下角的數字插件利用擬物化設計來模擬頂部單元。

擬物化設計元素的使用使用戶能夠應用通過操作真實世界的聲音壓縮器而存在的心理模型。 右下角的圖像使用了一種獨特的設計,它不基於任何現有的裝備。 因此,即使他們使用了真實世界的物理對應物,用戶也不會對界面有基礎知識,需要花費額外的時間和精力來學習它。

擬物化設計參考真實世界類型的心智模型
數字音頻插件通常模擬模擬設備,例如壓縮器、均衡器和混響單元。 利用擬物化設計利用現有的心智模型。 左下角插件使用了擬物化設計,而右下角插件則沒有。

基礎創造力和創新

為了最大限度地提高可用性,在心智模型的基礎上進行設計非常重要。 在現有的心智模型和標準中創建和創新可以帶來仍然符合用戶期望的新的和令人興奮的產品。 違反這些心智模式應該戰略性地並且僅在必要時進行。

例如,大多數人都開發了音量滑塊的心理模型。 在下面的示例中,左側的滑塊代表大多數人對音量滑塊的心理模型。 中間的滑塊被設計成一個玩笑,但它說明了一個重要的點。

滑塊與心智模型和用戶期望完全矛盾,因為它看起來像一個垂直滑塊,但實際上它是水平運行的。 右側的滑塊取自 Apple 的 iOS。 Apple 使用創造力和創新來設計新的和原創的東西,但它仍然尊重心智模型的網格,這些網格形成了對音量滑塊如何操作的共同期望。

與常見的心智模型相矛盾
從左到右:代表通用心智模型的音量滑塊,與通用心智模型相矛盾的音量滑塊,以及來自 Apple iOS 的音量滑塊,在新設計中利用了通用心智模型。

最後的想法

對已建立的設計進行用戶體驗研究將有助於闡明現有的心智模型,並使設計師能夠利用其產品用戶的心智模型。 反過來,這些發現將幫助設計師優化任何數字產品的可用性。

忽略心智模型的設計師這樣做是有風險的。 利用現有的心智模型作為創造力和創新的基礎,可以讓設計師改進現有產品並幫助他們設計令人興奮的新產品。