15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

8 評(píng)論 30014 瀏覽 209 收藏 60 分鐘

編輯導(dǎo)語:你了解心理學(xué)嗎?在我們?nèi)粘g覽的網(wǎng)頁中,在我們隨手刷過的App里,其設(shè)計(jì)早就將用戶心理滲透其中。本文就闡述了15個(gè)”不為人知“卻隨處可見的設(shè)計(jì)心理學(xué)原理,就讓我們一起來了解一下吧!

你是否有在聽別人說某某原理法則時(shí)一臉懵B的時(shí)候?明明知道這個(gè)原理卻說不出它的名字?

不要緊,本文就來介紹與人機(jī)交互設(shè)計(jì)相關(guān)的15個(gè)常見的設(shè)計(jì)心理學(xué)原理,幫助你了解產(chǎn)品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設(shè)計(jì)予以理論支撐。

一、7±2法則「米勒定律」

1956年美國科學(xué)家米勒對(duì)人類短時(shí)間記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度為5-9個(gè)單位,就是7±2法則。

與席克定律類似,神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。因?yàn)槿四X處理信息的能力有限,所以它通過把信息分成塊和單元來處理復(fù)雜問題。

7±2法則應(yīng)用很廣泛,例如 iPhone 通訊錄中的手機(jī)號(hào)碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號(hào)、身份證號(hào),我們總是喜歡把一長串?dāng)?shù)字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達(dá)到視覺防錯(cuò)的作用。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在設(shè)計(jì)網(wǎng)頁導(dǎo)航時(shí),如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在7個(gè)左右(不超過9個(gè)),如蘋果、Dribbble、behance等網(wǎng)站的導(dǎo)航分類。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Web導(dǎo)航欄選項(xiàng)卡數(shù)量不超過9個(gè)

如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多,可以用一個(gè)樹狀層級(jí)結(jié)構(gòu)來展示各級(jí)別關(guān)系,但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和 Dribbble,把更多子類別收在二級(jí)目錄里。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Web導(dǎo)航欄選項(xiàng)卡數(shù)量過多時(shí)

在移動(dòng)端應(yīng)用設(shè)計(jì)中,常見的電商App例如奈雪和樂凱撒分類模塊,兩個(gè)產(chǎn)品的商品分類布局形式很相似,都是用了選項(xiàng)卡的方式來分類商品,層級(jí)明確,相應(yīng)的提升了用戶找尋單品的效率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

移動(dòng)端選項(xiàng)卡導(dǎo)航

在移動(dòng)應(yīng)用設(shè)計(jì)中,底部 Tabbar 最少3個(gè),最多為5個(gè)(幾乎沒幾個(gè)超過5個(gè)),這樣做除了減輕用戶記憶負(fù)擔(dān),超過5個(gè)會(huì)降低視覺和操作上的體驗(yàn)。事實(shí)上就算只有4個(gè),我們也經(jīng)常想不起微信底部的4個(gè)Tab分別是啥。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

tabbar區(qū)標(biāo)簽最多不超過5個(gè)

我們看到的大部分 App 頂部導(dǎo)航欄的頁簽數(shù)量都嚴(yán)格遵循了7±2法則,雖然在橫軸可無限滑動(dòng),但在顯示區(qū)域只保持7±2法則的顯示數(shù)量,例如馬蜂窩、飛豬旅行等。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

頂部導(dǎo)航欄頁簽

我們常說的“八大金剛”就是一屏顯示8個(gè)圖標(biāo),超過的則放在第二屏。如果兩行10個(gè),往往第十個(gè)是“更多”入口,總的來說也沒超過9個(gè)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

金剛區(qū)圖標(biāo)不超過8個(gè)

產(chǎn)品運(yùn)營 banner 主文案字?jǐn)?shù)通??刂圃?個(gè)字以內(nèi),在設(shè)計(jì)時(shí)也通常把長標(biāo)題一分為二排兩行,便于用戶快速閱讀,提升點(diǎn)擊率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

banner文案不超過9個(gè)字

在交互設(shè)計(jì)中,7±2法則是減少用戶認(rèn)知負(fù)荷,提升用戶體驗(yàn)的重要環(huán)節(jié)。同時(shí)還強(qiáng)調(diào)了在設(shè)計(jì)過程中對(duì)產(chǎn)品的預(yù)見性,避免在不斷為產(chǎn)品添加功能時(shí),破壞原有的視覺基礎(chǔ)。

二、0123簡單法則

  • 無需說明書
  • 一看就會(huì)
  • 兩秒等待時(shí)間
  • 三步以內(nèi)的操作

0 無需說明書

喬布斯曾說過:“蘋果應(yīng)該創(chuàng)造所有人都可以使用的產(chǎn)品,即使沒有用戶指南”。

1 一看就會(huì)

簡單易懂,看一眼就明白你想說什么,不用教學(xué)就知道怎么用。

2 秒法則

所謂“2秒法則”,是指用戶在使用某類系統(tǒng)時(shí)的等待時(shí)長不超過2秒。在極短的時(shí)間內(nèi)展示重要信息,給用戶留下深刻的第一印象。

這里的2秒只是一個(gè)象征意義上的表達(dá),也許有一點(diǎn)隨意,但是這卻是一個(gè)合理的數(shù)量級(jí)。我們熟知的“F”瀏覽模式其實(shí)就是間接縮短用戶看到重要信息的時(shí)長,達(dá)到快速瀏覽的目的。

進(jìn)入App的首頁加載時(shí)間如果過長就會(huì)導(dǎo)致用戶產(chǎn)生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應(yīng)用將首頁加載時(shí)的空白頁進(jìn)行占位圖設(shè)計(jì)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

下拉刷新也是一個(gè)設(shè)計(jì)點(diǎn),為避免刷新時(shí)間過長,設(shè)計(jì)師通常會(huì)在加載動(dòng)畫上做文章。充滿趣味性的動(dòng)效能安撫用戶焦躁不安的心情,無形中降低了用戶對(duì)等待時(shí)間的感知。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

App里面的 banner 設(shè)計(jì)要有視覺沖擊力,如果兩秒之內(nèi)沒有抓住用戶的眼球,可能就被用戶忽略了。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

因此,在設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品的頁面時(shí),用戶等待的時(shí)間越短,用戶體驗(yàn)越佳。反之,就會(huì)讓用戶產(chǎn)生焦慮的情緒。

3 次點(diǎn)擊法則

用戶在3次點(diǎn)擊之內(nèi)如果還沒有找到他們想要的信息或了解網(wǎng)站特色,他們就會(huì)離開該網(wǎng)站。這條原則突出了清晰的導(dǎo)航,符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級(jí)的重要性(來自《眾妙之門》P133)。

其實(shí)在交互體驗(yàn)中,點(diǎn)擊的次數(shù)往往是無關(guān)緊要的。只要每次點(diǎn)擊都是無需思考的,毫不費(fèi)力地順勢進(jìn)行,那么用戶的挫敗感就會(huì)大大降低。如果你的網(wǎng)站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標(biāo),這樣的點(diǎn)擊即使有10次也是沒有問題的。

例如,在京東購買一件商品需要經(jīng)過“立即購買>確定>提交訂單>選擇支付方式”4次點(diǎn)擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點(diǎn)擊行為(比如選擇地址、優(yōu)惠券),用戶并沒有感受到不方便,使用過程流暢而自然。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在可用性測試領(lǐng)域,“三次點(diǎn)擊”定律一直是一個(gè)很具爭議內(nèi)容。體現(xiàn)在以下幾點(diǎn):

  • 研究表明,用戶在超過3次點(diǎn)擊還沒到達(dá)想去的頁面時(shí),往往并沒有退出網(wǎng)站,而是會(huì)繼續(xù)多點(diǎn)幾次;
  • 當(dāng)把一個(gè)3次點(diǎn)擊就能到達(dá)的流程改為4次點(diǎn)擊的時(shí)候,用戶發(fā)現(xiàn)目標(biāo)頁面的能力反而提升了600%;
  • 合理的導(dǎo)航系統(tǒng)比點(diǎn)擊次數(shù)更重要;
  • 比起“3次點(diǎn)擊”,有人提出了“1次點(diǎn)擊”定律,即用戶的每一次點(diǎn)擊都應(yīng)該讓他們更接近目標(biāo),同時(shí)盡量減少能干擾實(shí)現(xiàn)這一目標(biāo)的因素;
  • 用戶抱怨要花很長時(shí)間才能找到某個(gè)產(chǎn)品,實(shí)際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會(huì)抱怨點(diǎn)擊的次數(shù)了。

三、??硕?/h2>

英國心理學(xué)家William Edmund Hick認(rèn)為,在簡單的判斷場景中:一個(gè)人所面臨的選擇越多,做出決定所花的時(shí)間就越長。有時(shí)候在選擇中花費(fèi)太長時(shí)間從而導(dǎo)致決策失敗。

生活中我們也經(jīng)常會(huì)面臨選擇困難癥,比如早上起床就糾結(jié)今天穿什么?中午去食堂就會(huì)糾結(jié)吃什么?造成我們?nèi)绱思m結(jié)的原因就是因?yàn)檫x擇太多了(遠(yuǎn)古人就沒這些煩惱,尋找食物時(shí)逮著什么就吃什么)。

1. 在設(shè)計(jì)中的應(yīng)用

應(yīng)用到界面設(shè)計(jì)中也是如此,選項(xiàng)越多,意味著用戶做出決策的時(shí)間越長。

例如App Store首頁,改版前的首頁把眾多App平鋪出來,對(duì)目的不明確的用戶來說選擇有點(diǎn)多。改版后的首頁大幅減少了App的數(shù)量,卡片的設(shè)計(jì)方式簡潔且目標(biāo)清晰。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

不得不面對(duì)較多選項(xiàng)時(shí), 對(duì)主要和次要的選項(xiàng)做視覺權(quán)重區(qū)分,做好設(shè)計(jì)上的歸類,提升用戶做決定的效率。

例如美團(tuán)外賣金剛區(qū)第一行5個(gè)入口的圖標(biāo)在尺寸和表現(xiàn)手法上都比下面的入口圖標(biāo)要大更醒目。“我的”頁面把一些低頻率功能或不太重要的功能收納到“設(shè)置”里,此外還可以通過置灰、鎖定等方法間接減少選項(xiàng),降低干擾。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

對(duì)于多流程的任務(wù)進(jìn)行分步操作,讓用戶專注眼前任務(wù)。例如 Clubhouse 注冊(cè)時(shí),把需要用戶選擇的選項(xiàng)分步引導(dǎo)完成,讓用戶能專注當(dāng)前行為。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

對(duì)于多種類別的選項(xiàng)應(yīng)當(dāng)做二次分類的區(qū)分,我們都知道電商平臺(tái)的品類繁多,僅通過單一分類是不夠的,比如數(shù)碼頻道下面還分相機(jī)、影音娛樂、數(shù)碼配件、智能設(shè)備、電子教育等大的分類。

商品詳情頁的篩選功能也是貼合使用場景來設(shè)計(jì)的,所以分類不怕多,就怕混亂。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 適用邊界

雖然選擇越少,用戶做決策的時(shí)間越短,但這并不是提高用戶體驗(yàn)的唯一標(biāo)準(zhǔn),過度的減少選項(xiàng),可能導(dǎo)致負(fù)面效果。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

如上圖右,如果在刪除App的彈窗中只有一個(gè)“刪除”選項(xiàng),沒有明顯的取消之類的途徑,那么用戶會(huì)覺得特別難受,感覺被強(qiáng)迫去刪除。如果當(dāng)下有急需使用手機(jī)處理一些事情,那么這樣會(huì)把這種負(fù)面情緒給無限放大,讓用戶抓狂。

??硕芍饕苡绊懹谶x項(xiàng)的多少,但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個(gè)選項(xiàng)(學(xué)渣竊喜),那也太容易蒙了,這就是??硕稍诖鸢冈囶}中的局限性。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 思考總結(jié)

希克定律是一個(gè)可以適用于設(shè)計(jì)的指南,記住要盡量減少用戶在一次決策中要做的選項(xiàng),因?yàn)闆Q策效率是一個(gè)產(chǎn)品導(dǎo)致用戶流失的重要原因之一。

引導(dǎo)用戶在明確的選項(xiàng)之間進(jìn)行選擇,以便快速將他們送到某個(gè)地方(例如賬單支付),這將大大提升用戶體驗(yàn)并達(dá)到你的目標(biāo)。

四、費(fèi)茨定律

費(fèi)茨定律由心理學(xué)家 Paul Fitts 提出,用來預(yù)測從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長,目標(biāo)越大時(shí)間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動(dòng),接著你會(huì)放慢速度直至找到杯子把手,這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

如上圖所示,如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo) target,最短路徑一定是D,最短路徑上容錯(cuò)的最長路徑是 D+W,只要水平上移動(dòng)超過了 D+W 你就點(diǎn)不到了,而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以D為正比W為反比的函數(shù)的和。詳細(xì)解釋如下,圖中紅色方塊代表點(diǎn)擊目標(biāo),虛線代表移動(dòng)路徑,此時(shí)因?yàn)榧t色方塊目標(biāo)較大,所以用戶從任何一處點(diǎn)擊都很容易(可以用鼠標(biāo)在屏幕任意點(diǎn)移至紅色方塊試試)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

相反,紅色方塊目標(biāo)變小,快速點(diǎn)擊就會(huì)困難很多,很難一次到位。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

但如果紅色方塊目標(biāo)很小距離很近的話,因?yàn)橐苿?dòng)范圍小,也能準(zhǔn)確的點(diǎn)擊到。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在頁面中,大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的觸達(dá)目標(biāo)。比如頁面中的大按鈕。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

按鈕越大越容易點(diǎn)擊

夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域,相比常見頂部搜索欄更方便操作,效率更高。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

將按鈕放置在離開始點(diǎn)較近的地方

注冊(cè)登錄界面,通常將「注冊(cè)」和「登錄」放到一起,不僅可以在視覺上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知,還可以減少在他們之間的距離 。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊

1. 適用邊界

費(fèi)茨定律鼓勵(lì)減少距離,增加目標(biāo)大小以提升用戶效率,但反過來亦適用。比如 iPhone 關(guān)機(jī)按鈕,沒有使用點(diǎn)擊關(guān)閉,而采用滑動(dòng)操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進(jìn)而避免了用戶誤操作。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

App彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方,希望用戶先完成彈窗提示的任務(wù)。還有啟動(dòng)頁廣告,喜歡把“跳過”按鈕放在難以點(diǎn)擊的右上角(恰飯重要),以提高用戶的誤觸機(jī)率提高轉(zhuǎn)化。

2. 思考總結(jié)

  • 按鈕越大越容易點(diǎn)擊,因此在程序開發(fā)中,會(huì)增加按鈕點(diǎn)擊的熱區(qū)范圍,減輕用戶精準(zhǔn)點(diǎn)擊的壓力。但也不能過分的大,容易引起誤觸;
  • 讓相關(guān)聯(lián)的內(nèi)容更靠近彼此,用視覺手法增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知。距離產(chǎn)生美,注意不要靠的太近,會(huì)出事;
  • 將按鈕放置在離出發(fā)點(diǎn)較近的地方,比如頁面主按鈕一般會(huì)放在屏幕底部易操作區(qū)域;
  • 屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)樵谄聊贿吘壓徒锹湮恢糜?strong>“無限可選中”的屬性,可以大膽操作而無需“微調(diào)”,參見 macOS 底部 dock 欄;
  • 定律的反向使用可以適用一些特殊場景,比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能。

五、泰思勒定律

“任何事物都具有其固有的復(fù)雜性,無法簡化”。泰斯勒定律(Tesler’s Law)由 Larry Tesler 于1984年提出,也稱「復(fù)雜度守恒定律」。

該定律認(rèn)為:每一個(gè)過程都有其固有的復(fù)雜性,存在一個(gè)臨界點(diǎn),超過了這個(gè)點(diǎn)過程就不能再簡化了,你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。

生活中很多我們習(xí)以為常,感覺便捷方便的生活方式,是無數(shù)卓越的數(shù)學(xué)家、工程師、設(shè)計(jì)師等無數(shù)的時(shí)間投入,才實(shí)現(xiàn)的某個(gè)小功能,是他們把這些復(fù)雜性轉(zhuǎn)移到自己身上替我們簡化了。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

說回移動(dòng)端,每個(gè)應(yīng)用中都有其無法簡化的復(fù)雜度,也不能按照我們個(gè)人意愿去除這些功能。這就是為什么飛機(jī)稿都簡潔好看,而一搬到線上就面目全非。

常見的復(fù)雜性轉(zhuǎn)移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉(zhuǎn)移跳轉(zhuǎn),比如:頂部導(dǎo)航欄的更多圖標(biāo),就是將常用的功能整合并隱藏在首頁設(shè)計(jì)的更多功能模塊中,把用戶的操作范圍轉(zhuǎn)移到另一個(gè)地方。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

除此之外,還有一些降低操作復(fù)雜度的方法:刪除、組織、隱藏。

  • 視覺層面的“降噪”方法,刪除會(huì)干擾用戶操作的選項(xiàng);
  • 功能分類明確,圍繞用戶行為組織信息內(nèi)容;
  • 隱藏那些不常用而又不能少的功能,延遲及階段性展示。

總的來說就是將復(fù)雜的信息收起來,展示重要且簡潔的界面。

1. 簡化交互設(shè)計(jì)

可以用代碼節(jié)省用戶操作時(shí)間的地方,是互聯(lián)網(wǎng)人一致的追求。例如,B站的一鍵三連,用戶長按點(diǎn)贊按鈕,會(huì)同時(shí)觸發(fā)點(diǎn)贊、投幣和收藏,省時(shí)省力。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 算法解放“生產(chǎn)力”

個(gè)性化算法就是通過技術(shù)手段,將用戶復(fù)雜度降低,而轉(zhuǎn)移到開發(fā)者身上。

抖音為什么會(huì)讓人上癮?是算法知道了你的喜好,專推給你喜歡的內(nèi)容而不用自己去找,誰都喜歡私人定制。這對(duì)用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負(fù)重前行”,這里的簡化復(fù)雜的難度就轉(zhuǎn)移到設(shè)計(jì)和開發(fā)身上了,還逼得機(jī)器去學(xué)習(xí)。例如抖音、淘寶、知乎首頁推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 思考總結(jié)

我們常說以用戶為中心去設(shè)計(jì),就需要從用戶角度出發(fā),在交互設(shè)計(jì)中盡量簡化操作的復(fù)雜度,降低學(xué)習(xí)成本。

但如“復(fù)制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復(fù)雜性,無法簡化”。

因此,如何取得復(fù)雜度的“平衡點(diǎn)”就是重要的部分,是讓工程師及設(shè)計(jì)師花費(fèi)大量時(shí)間去降低產(chǎn)品的使用難度,還是在設(shè)計(jì)中保留一定的復(fù)雜度是我們需要思考的事。

六、麥肯錫金字塔原理

該原理是由麥肯錫國際管理咨詢公司顧問 Barbara Minto 提出的理論,她強(qiáng)調(diào)結(jié)論先行,論點(diǎn)自上而下。

你是否遇到過這樣的場景,部門開會(huì)時(shí)有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會(huì)時(shí)你會(huì)走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點(diǎn)。

金字塔原理指示結(jié)構(gòu)化表達(dá)遵循結(jié)論先行的原則,即任何問題都能歸納出一個(gè)中心點(diǎn),讓受眾能夠第一時(shí)間清楚你想談?wù)摰闹黝}。然后由數(shù)個(gè)論據(jù)作支撐,而這些一級(jí)論據(jù)可以繼續(xù)由數(shù)個(gè)二級(jí)論據(jù)支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

應(yīng)用到交互設(shè)計(jì)上,即將信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示,再根據(jù)用戶在這個(gè)界面上所愿意停留時(shí)間逐級(jí)給予更多細(xì)節(jié)補(bǔ)充。

以京東的商品詳情頁為例:

首先金字塔的最上層是用戶目標(biāo)明確直接進(jìn)行“立即購買”的底部全局按鈕;

其次是商品的頭圖和用戶評(píng)價(jià)這些,讓用戶了解更多信息,進(jìn)一步促成購買;

最后一層是提供商品相關(guān)的全部信息、參數(shù)、評(píng)分等,確保交易的最終完成。

在這個(gè)過程中,用戶在每一層花的時(shí)間也在逐級(jí)增加,呈金字塔狀。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

映射到設(shè)計(jì)師身上也是如此,從設(shè)計(jì)新人到設(shè)計(jì)總監(jiān),中間差的就是一個(gè)完整的設(shè)計(jì)技能金字塔。就像升級(jí)打怪,每完成一項(xiàng)任務(wù)獲得相應(yīng)的經(jīng)驗(yàn)值,累積的經(jīng)驗(yàn)值幫助我們更快的升到下一級(jí)。

當(dāng)把工作中的需要攻克的難題一一解決之后,你的設(shè)計(jì)水平會(huì)在不知不覺中更加精進(jìn),形成一套自己的設(shè)計(jì)風(fēng)格,成為一名優(yōu)秀的設(shè)計(jì)師。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵(lì)用戶成長。它告訴我們:用戶的需求是永遠(yuǎn)滿足不完的,所以什么值得做,什么是可分階段去實(shí)現(xiàn)的是決策人需要明白的。

如喬布斯所說:“消費(fèi)者并不知道自己需要什么,直到我們拿出自己的產(chǎn)品,他們就發(fā)現(xiàn),這是我要的東西”;不斷完善主要功能,以滿足金字塔頂?shù)暮诵挠脩羧?。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個(gè)廣告位;如何優(yōu)化完善產(chǎn)品架構(gòu),檢驗(yàn)產(chǎn)品策略的合理性和完整性。

七、新鄉(xiāng)重夫 防錯(cuò)原則

防錯(cuò)原則由世界著名的品質(zhì)管理專家新鄉(xiāng)重夫提出,即在過程失誤發(fā)生之前加以防止,是一種在作業(yè)過程中采用自動(dòng)作用、報(bào)警、標(biāo)識(shí)等手段。使操作人員不用特別注意也不會(huì)失誤的方法。防錯(cuò)原則認(rèn)為大部分的意外都是由于設(shè)計(jì)的疏忽,而不是人為操作失誤,可以通過優(yōu)化設(shè)計(jì)把過失降到最低。該原則最初用于工業(yè)管理,后來應(yīng)用于界面交互設(shè)計(jì)中,當(dāng)使用條件沒有滿足時(shí),常常通過功能失效來表示。

1. 自動(dòng)檢測提示

Bilibili 在登錄時(shí)輸入框沒有內(nèi)容或沒有輸密碼時(shí),登錄按鈕處于禁用的置灰狀態(tài),只有兩者都滿足了才可以正常點(diǎn)擊。此外登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、郵箱錯(cuò)誤等不同的錯(cuò)誤。通常必須賬號(hào)和密碼同時(shí)滿足且匹配才能成功。

Twitter 發(fā)帖時(shí)只允許用戶輸入140個(gè)字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個(gè)字符,超過會(huì)以負(fù)數(shù)警示。知乎發(fā)布文章標(biāo)題過長時(shí)也會(huì)提示錯(cuò)誤預(yù)警。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

2. 消除可能的失誤

防錯(cuò)法則認(rèn)為大部分的出錯(cuò)都是產(chǎn)品設(shè)計(jì)的不夠優(yōu)秀,而不該責(zé)怪用戶操作疏忽,通過設(shè)計(jì)手法可以把出錯(cuò)率降到最低。防錯(cuò)法則的核心觀點(diǎn)是,如何有效的在用戶出錯(cuò)之前就盡量避免錯(cuò)誤的發(fā)生。

比如,美團(tuán)外賣在接受短信驗(yàn)證碼時(shí),系統(tǒng)會(huì)自動(dòng)提取驗(yàn)證碼在鍵盤上方顯示,用戶點(diǎn)一下就可以自動(dòng)填寫,省去了跳出應(yīng)用——打開短信——記住驗(yàn)證碼——再輸入的繁瑣過程,有效預(yù)防了出錯(cuò)的機(jī)率。

還有微信在綁定銀行卡時(shí)也是通過掃描銀行卡自動(dòng)提取賬號(hào),避免手動(dòng)輸入的出錯(cuò)率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

3. 將失誤降至最低

二次確認(rèn),在一些比較重要的場景讓用戶二次確認(rèn),通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結(jié)果,進(jìn)一步降低出錯(cuò)率。

例如,最近大家都在用的報(bào)稅 App,會(huì)在提交信息前再次確認(rèn)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

4. 視覺暗示

可在視覺(置灰或隱藏)上屏蔽那些不能選的選項(xiàng),避免用戶點(diǎn)擊后才報(bào)錯(cuò)或點(diǎn)擊沒反應(yīng)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

其次,一些不可恢復(fù)的操作,視覺上通常會(huì)給強(qiáng)標(biāo)識(shí)。例如,刪除短信時(shí)的文字顏色“變紅”。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

5. 為用戶犯的錯(cuò)買單

當(dāng)用戶輸入錯(cuò)誤信息時(shí),比如打錯(cuò)字,系統(tǒng)應(yīng)該給予用戶想要的信息,而不是無動(dòng)于衷,冷漠視之。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

6. 范圍限制

其實(shí)限制用戶的選擇并不是一個(gè)好主意,但是如果有明確的規(guī)則來定義可接受的選項(xiàng),那么限制用戶可以輸入的類型是一個(gè)很好的策略。例如,Airbnb 訂房可選日期和設(shè)置鬧鐘時(shí)的時(shí)間范圍。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

研究得出,使用產(chǎn)品時(shí)有77.7%的錯(cuò)誤都是人為的,防錯(cuò)法則可以幫助設(shè)計(jì)師站在用戶體驗(yàn)的角度考慮設(shè)計(jì)方案,做到操作前、中、后都有及時(shí)的反饋,預(yù)測到他們有可能發(fā)生的誤操作狀態(tài),讓用戶更快完成目標(biāo),幫助用戶減少出錯(cuò)率。

八、防呆原則

每次拿起U盤插入電腦時(shí),我就呆住了,到底朝那個(gè)方向才是對(duì)的?

防呆(Fool-proofing)是一種預(yù)防矯正的行為約束手段,運(yùn)用避免產(chǎn)生錯(cuò)誤的限制方法,使出錯(cuò)的機(jī)會(huì)降至最低,進(jìn)而達(dá)到“第一次就把工作做對(duì)”之境界。

設(shè)計(jì)師應(yīng)謹(jǐn)記:不要認(rèn)為用戶是專家。

比如,我們都知道“漢堡”圖標(biāo)就是菜單,點(diǎn)擊這個(gè)按鈕就會(huì)調(diào)出某些功能。但是設(shè)計(jì)師忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是面包屑、什么是抽屜式導(dǎo)航、什么是3Dtouch、怎樣雙指滑動(dòng)。

更何況普通用戶并不會(huì)研究App,在他們眼中產(chǎn)品只是眾多工具中的一個(gè)。

因此,一定要把交互和設(shè)計(jì)做的簡單,通用的圖標(biāo)、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶做選擇題,這些都是有效防呆的好方法。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

頁面的中主按鈕更突出

防呆設(shè)計(jì)是預(yù)防錯(cuò)誤發(fā)生的方法,讓非專業(yè)、無經(jīng)驗(yàn)的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時(shí)時(shí)為用戶思考。

九、奧卡姆剃刀法則

又被稱作“簡單有效原理”:“如無必要,勿增實(shí)體?!?/p>

通俗點(diǎn)去理解“如無必要,勿增實(shí)體”可以理解為“不要浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情”,或者表述為“在其他條件相同的情況下,要求得越少的那個(gè)就越好,越有價(jià)值”。

應(yīng)用到設(shè)計(jì)學(xué)領(lǐng)域,該法則認(rèn)為做產(chǎn)品時(shí)功能上不可過于繁瑣,應(yīng)該保證簡潔和工具化。

例如,產(chǎn)品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設(shè)計(jì)元素會(huì)導(dǎo)致使用效率降低,還會(huì)增加不可預(yù)知的后果。

建議在不損及功能的前提下,干掉多余的元素,當(dāng)兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的時(shí),選擇較為簡單的那一個(gè)有利于更好地傳達(dá)內(nèi)容更好地用戶體驗(yàn)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

總的來說,我們可以結(jié)合《簡約至上》一書中提到的刪除、組織、隱藏、轉(zhuǎn)移四個(gè)策略來將復(fù)雜的設(shè)計(jì)和體驗(yàn)變得更加簡單。

  • 刪除:關(guān)注核心,讓用戶注意力集中在自己要完成的目標(biāo)上,刪除不必要的功能、流程和造成視覺混亂的元素等;
  • 組織:繁瑣的功能通過分塊,被組織成清晰的層次結(jié)構(gòu)。還記得我們前面說到的“7±2法則”嗎,把項(xiàng)組織到7加減2個(gè)塊中;分塊越少,選擇越少,用戶負(fù)擔(dān)約輕;
  • 隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進(jìn)展示和適時(shí)出現(xiàn)的方法減少干擾;
  • 轉(zhuǎn)移:把合適的功能轉(zhuǎn)移到合適的設(shè)備上去。讓用戶感覺簡單的一個(gè)重要前提,就是先搞清楚把什么工作交給計(jì)算機(jī),把什么工作留給用戶。

十、雷斯托夫效應(yīng)

小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

  • 可口可樂、雪碧、芬達(dá)、嶗山可樂、7喜、美年達(dá)

雷斯托夫效應(yīng)又稱隔離效應(yīng)(isolation effect),以及新奇效應(yīng)(novelty effect),前蘇聯(lián)心理學(xué)家馮·雷斯托夫認(rèn)為,某個(gè)元素越是違反常理,就越引人注意,收到更多的關(guān)注。一樣?xùn)|西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。

比如人生中的很多第一次,第一次高考、大學(xué)的第一天、初戀、第一份工作等等。該差異也會(huì)出現(xiàn)在新奇面孔、電話號(hào)碼記憶中。奇特的面孔和特殊的電話號(hào)碼更能被人記住。

該理論以多種不同的方式應(yīng)用到設(shè)計(jì)中,最明顯的就是如果想要突出某個(gè)重點(diǎn)內(nèi)容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細(xì)等設(shè)計(jì)手段。利用對(duì)比來凸顯想要表達(dá)的重要信息。例如金剛區(qū)、tab欄的運(yùn)營活動(dòng)廣告,特殊化的設(shè)計(jì)讓它們?cè)诒尘爸忻摲f而出。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

個(gè)人中心的會(huì)員卡為了吸引用戶注意,增加開通率,都成了重點(diǎn)設(shè)計(jì)對(duì)象。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

與以往不同的界面設(shè)計(jì)可以更加的吸引用戶,加深用戶的記憶,同時(shí)擴(kuò)大了活動(dòng)對(duì)用戶的影響力。例如每年淘寶的雙11首頁設(shè)計(jì)都與往常不同。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Google doodle 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì),把logo設(shè)計(jì)成與這個(gè)日子相關(guān)的插畫或涂鴉,與平時(shí)的 logo 形成差異化,幫助人們更好地記住這個(gè)日子。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

因此我們?cè)诮缑嬖O(shè)計(jì)中,若想讓用戶對(duì)哪個(gè)模塊或者是元素引起注意或點(diǎn)擊,就可以打破常規(guī)對(duì)該元素進(jìn)行強(qiáng)調(diào)設(shè)計(jì),使他在背景中脫穎而出。但是不要任何元素都強(qiáng)調(diào),因?yàn)槭裁炊紡?qiáng)調(diào)就等于什么都沒強(qiáng)調(diào),就沒有重點(diǎn),所以要謹(jǐn)慎使用這個(gè)方法。

回到開篇的題目,答案是「嶗山可樂」。

相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個(gè)了。

你的答案是什么?歡迎在下方留言探討。

十一、損失厭惡

損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí),認(rèn)為損失更加令他們難以忍受。同量的損失帶來的負(fù)效用為同量收益的正效用的2.5倍。

比如,丟100塊錢的痛苦感要遠(yuǎn)高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復(fù)之前的心情。生活中類似的栗子還有很多。

比如旅游時(shí),雖然這個(gè)景點(diǎn)很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;

吃自助餐時(shí),明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應(yīng)了那句話:“食之無味,棄之可惜”;

花了50塊買了張電影票,過了10分鐘發(fā)現(xiàn)是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花……

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

那么,該如何將“損失厭惡”賦能給產(chǎn)品設(shè)計(jì)呢?

最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計(jì)時(shí)xx小時(shí)后恢復(fù)原價(jià)等等。商家就是為了營造現(xiàn)在不買就會(huì)錯(cuò)過的套路,用戶也會(huì)覺得失之可惜。

一年一度的天貓雙11,京東618,還有情人節(jié)、中秋節(jié)等各種有的沒的節(jié)日都是商家利用“損失厭惡”心理為基礎(chǔ)刺激消費(fèi)。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們 App 的用戶粘性不太理想,增加一個(gè)“簽到”功能吧,產(chǎn)品經(jīng)理如是說。如是我們看到各種簽到得禮品,贏紅包等活動(dòng)。中間還不能中斷,要連續(xù)簽到多少天才能得到獎(jiǎng)勵(lì),用戶也擔(dān)心中斷的損失。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

某網(wǎng)盤下載文件時(shí),會(huì)給你一個(gè)10秒VIP高速下載的體驗(yàn),計(jì)時(shí)過后又恢復(fù)到龜速,讓你恨的牙癢癢。雖然這招有點(diǎn)損,但用戶體驗(yàn)到了VIP的快感,很多人還是會(huì)乖乖成為付費(fèi)會(huì)員。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

產(chǎn)品運(yùn)營中會(huì)經(jīng)常發(fā)一些優(yōu)惠券,雖然知道自己不會(huì)用,也要先領(lǐng)了再說。這些券也都有時(shí)間限制,快過期的提醒也會(huì)加快用戶決策。還有0元開通會(huì)員,套路是第一個(gè)月免費(fèi),次月開始按正常價(jià)自動(dòng)續(xù)費(fèi),典型的“騙”進(jìn)來養(yǎng)肥了再“殺”。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

人天生會(huì)對(duì)危險(xiǎn)的、不好的東西避而遠(yuǎn)之。如是我們就看到保險(xiǎn)行業(yè),他們會(huì)用一些負(fù)面信息(空難、車禍)刺激你,用戶就會(huì)產(chǎn)生焦慮,自然就想規(guī)避掉這些概率小的風(fēng)險(xiǎn)。例如購買機(jī)票時(shí)的意外險(xiǎn),QQ退出登錄時(shí)的提示。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

還有就是有用戶自己的內(nèi)容的東西,一般不會(huì)輕易舍去。

拿我個(gè)人來說,飛書一直是我的寫作工具,后來看到幾個(gè)更好用的軟件,但要想到把原來的這么多東西全部轉(zhuǎn)移過去也是件很心累的事,太麻煩,還是繼續(xù)用飛書好了。QQ這個(gè)“古老”的軟件,估計(jì)很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因?yàn)槟巧厦嬗泻芏嗲啻旱幕貞洝?/p>

十二、雅各布定律

用戶會(huì)將大部分時(shí)間花在其它網(wǎng)站上,因此他們會(huì)希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣,擁有相同的使用模式和習(xí)慣。

Jakob定律是由 Jakob Nielsen 提出的,他認(rèn)為用戶在其他網(wǎng)站所積累的經(jīng)驗(yàn)教會(huì)了他們?nèi)绾问褂镁W(wǎng)站,所以他們會(huì)希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣,相似的使用方式,在使用你的產(chǎn)品、服務(wù)、內(nèi)容和信息的時(shí)候,他們不會(huì)感到恐慌,而是輕車熟路。該原則鼓勵(lì)設(shè)計(jì)師遵循常見的設(shè)計(jì)模式,以避免混淆用戶或?qū)е赂叩恼J(rèn)知成本。

例如 YouTube 2017年改版前后的對(duì)比,在新版中,網(wǎng)站框架和功能上幾乎沒動(dòng),只是在UI上做了順應(yīng)新的設(shè)計(jì)準(zhǔn)則,比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒太大區(qū)別,而且還給用戶提供了舊版的選擇。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在移動(dòng)端App中也應(yīng)如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應(yīng)用中的購物流程),小到UI設(shè)計(jì)中的一個(gè)按鈕,一個(gè)圖標(biāo),甚至一句微文案。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在設(shè)計(jì)產(chǎn)品時(shí),要先延續(xù)大眾早已習(xí)慣的概念模型。然后再從自己的產(chǎn)品出發(fā),對(duì)其進(jìn)行改善。而不是從零開始制定自以為是的流程。日常使用的各類修圖軟件,版式都高度相似,中間是圖片、各種濾鏡、貼紙,調(diào)整等功能都放在底部操作區(qū)域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學(xué)習(xí)成本提升使用效率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

也許你會(huì)質(zhì)疑當(dāng)所有產(chǎn)品都遵循相同都設(shè)計(jì)模式,會(huì)讓產(chǎn)品同質(zhì)化嚴(yán)重,答案是必然的。此時(shí)需要深入了解用戶的目標(biāo)和心智模型(用戶訪談、用戶畫像、用戶體驗(yàn)地圖等),并將其應(yīng)用到我們的產(chǎn)品設(shè)計(jì)中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗(yàn)。

上文 YouTube 例子中,就是通過簡單的用戶授權(quán)(新舊版本選擇),避免了心智模型的不一致會(huì)帶來的問題,當(dāng)用戶準(zhǔn)備好隨時(shí)可以切換到新的版本。

相反的案例 Snapchat 在18年設(shè)計(jì)改版時(shí),因?yàn)樾碌牟季治茨艽_保改版前后用戶心智模型的一致性,導(dǎo)致大量用戶流向競爭對(duì)手 Instagram 那里了。

但是也要注意設(shè)備之間的差異,比如在移動(dòng)端“漢堡包”式菜單是個(gè)不錯(cuò)的方案,可是放到桌面端可能并不太友好,因?yàn)榇笃聊豢梢暦秶?,小小的漢堡包圖標(biāo)很容易被忽略,這時(shí)候平鋪出來可能會(huì)更好。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

思考總結(jié)

  1. 用戶會(huì)把在其他產(chǎn)品使用中已熟悉的操作習(xí)慣轉(zhuǎn)移到另一個(gè)看起來相似的產(chǎn)品上;
  2. 利用現(xiàn)有的思維模型,使用戶可以專注于自己的目標(biāo)上,而不是學(xué)習(xí)新的操作方式;
  3. 在進(jìn)行必要的改版時(shí),請(qǐng)給用戶過渡到新版本的機(jī)會(huì),即可以選擇短時(shí)間內(nèi)繼續(xù)使用舊版本;

十三、古騰堡圖表

看名稱挺拗口,另一種翻譯叫做“對(duì)角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁面是由左上至右下的視線流,左上角是視覺第一落點(diǎn)區(qū),右下角是視覺最終落點(diǎn)區(qū),因此右上角和左下角都是一個(gè)強(qiáng)烈的視覺盲點(diǎn)區(qū),大多數(shù)時(shí)容易被忽略。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

在進(jìn)行信息排布時(shí),將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個(gè)視覺落點(diǎn)可以展示重要操作。運(yùn)用視覺元素來創(chuàng)建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對(duì)角線移動(dòng),符合用戶習(xí)慣性的眼動(dòng)規(guī)律。

古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們都知道一般頁面按鈕都在界面底部是因?yàn)殡x手近,方便操作,但不僅僅如此。還因?yàn)闉g覽是用戶的第一行為,他們的視線會(huì)根據(jù)頁面元素進(jìn)行移動(dòng),最終停留在底部結(jié)尾的地方。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

看各種社交產(chǎn)品評(píng)論、點(diǎn)贊的位置,就知道產(chǎn)品希望用戶先干什么的想法。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

彈窗的按鈕擺放一般都是左「取消」右「確認(rèn)」,目的是讓用戶最快地看到主要操作內(nèi)容。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

余額寶的「轉(zhuǎn)出」在左,「轉(zhuǎn)入」在右,畢竟誰也不想財(cái)往外流是吧。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

既然如此,為什么“發(fā)布”頁面的按鈕都在右上角呢?因?yàn)榘l(fā)布頁是屬于“編輯頁面”,需要用戶謹(jǐn)慎操作,這里關(guān)注的核心應(yīng)該是可編輯內(nèi)容區(qū)域,而不是按鈕本身。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

類似的例子還有很多,設(shè)計(jì)中與此視覺流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局,合理運(yùn)用這些節(jié)奏模式,使用者會(huì)跟隨你“設(shè)計(jì)”的視覺流和運(yùn)動(dòng)規(guī)律來瀏覽頁面,有效提高用戶閱讀的節(jié)奏和理解能力。

十四、馬斯洛需求理論

美國心理學(xué)家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動(dòng)機(jī)的角度提出需求層次理論,該理論強(qiáng)調(diào)人的動(dòng)機(jī)是由人的需求決定的。

他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實(shí)現(xiàn)更高的需求和目標(biāo)。

馬斯洛需求層次理論有兩個(gè)基本出發(fā)點(diǎn),一是人人都有需求,某層需求滿足后,另一層需求才出現(xiàn);二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵(lì)作用。

例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

回歸到產(chǎn)品,一款產(chǎn)品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產(chǎn)品的需求分析指明了方向。

  • 生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團(tuán)外賣、淘寶、馬蜂窩等為日常生活提供方便的應(yīng)用;
  • 安全需求:人生安全、財(cái)產(chǎn)保險(xiǎn),也是強(qiáng)需求。如是各類投資理財(cái)軟件層出不窮。
  • 社交需求:包括友情、親情、愛情多個(gè)層次,滿足人類社會(huì)關(guān)系,讓每個(gè)人不再是孤單的個(gè)體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;
  • 尊重需求:每個(gè)人都有被尊重的需求,都希望展現(xiàn)自己,獲得人們認(rèn)可。此需求可以深度結(jié)合在社交需求中。
  • 自我實(shí)現(xiàn):最高層級(jí)的需求,完成與自己的能力相稱的一切事情,實(shí)現(xiàn)自己理想的需要。結(jié)合到產(chǎn)品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。

由此規(guī)律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實(shí)現(xiàn),變得可有可無,不再是所有人的剛需。一個(gè)優(yōu)秀的產(chǎn)品,深諳人性滿足用戶核心需求,才能形成持續(xù)穩(wěn)定高用戶粘性的產(chǎn)品。

十五、序列效應(yīng)

序列效應(yīng)法則又叫系列位置效應(yīng),是指一種記憶現(xiàn)象:在列舉項(xiàng)目時(shí),排在最前面與最后面的元素,要比排在中間的更容易讓人記住。因?yàn)槿藗儗?duì)排在頭、尾的項(xiàng)目,要比排在中間的更容易記起來。

比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級(jí)里我們一般都知道成績最好的第一名和倒數(shù)第一名,至于排在中間的很難記住。

因此對(duì)排在開頭的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱為“首位效應(yīng)”( primacy effect)。對(duì)排在結(jié)尾的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱為“近因效應(yīng)”( recency effect )。

分類頁簽中,我們通常都會(huì)記得“精選”、“熱門”這類標(biāo)簽,是希望給用戶進(jìn)入App后看到的主要內(nèi)容。這就是“首位效應(yīng)”,把重要性高的內(nèi)容放在首要位置。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

我們都知道界面中“返回”按鈕放在左上角,除了操作習(xí)慣和防誤觸外,還因?yàn)樗霈F(xiàn)在頁面左上角最開始的地方,更長久地儲(chǔ)存在長期記憶之中,需要“返回”時(shí)能夠快速回憶出來。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

Tabbar 數(shù)量不管是3個(gè)還是5個(gè),用戶通常都會(huì)記得第一個(gè)“首頁”和最后一個(gè)“我的”,對(duì)排在中間的都會(huì)選擇性地忽略掉。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

有時(shí)候新上一個(gè)功能,產(chǎn)品想提高它的位置引起用戶注意,會(huì)和“我的”互換位置。例如網(wǎng)易云音樂,把“我的”放在第三個(gè)tab,“云村”放在最后一個(gè)tab。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

近因效應(yīng)常用于及時(shí)進(jìn)行反饋的設(shè)計(jì)界面中,比如點(diǎn)贊、評(píng)論、分享等功能置于底部不僅可加深印象,同時(shí)用戶在看到有趣的內(nèi)容,想要評(píng)論或分享時(shí),不用等到文章看完即可操作。從而增強(qiáng)內(nèi)容粘性,提高互動(dòng)率。

15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

用戶的記憶具有系列位置效應(yīng),而且人的短期記憶非常有限,通過序列效應(yīng)法則的應(yīng)用,我們可以幫助用戶減輕記憶負(fù)擔(dān)。在排列項(xiàng)目時(shí),把重要的放在首位或末尾,以達(dá)到最好的記憶效果。

以上為全部15個(gè)設(shè)計(jì)原則(建議收藏),希望對(duì)你了解設(shè)計(jì)心理學(xué)有所幫助,我們下期見。

參考資料

https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users

http://theventurebank.com/ucd/1018979.html

https://zhuanlan.zhihu.com/p/25530956

http://theventurebank.com/operate/760978.html

https://cdc.tencent.com/2012/10/24/-fitts-s-law/

http://theventurebank.com/pd/1483662.html

https://www.jianshu.com/p/e81d5072d365

https://zhuanlan.zhihu.com/p/77022800

https://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

http://theventurebank.com/pd/2665009.html

https://www.xueui.cn/experience/xueshengbikan/design-rule.html

https://kknews.cc/news/ppvjk9p.html

http://theventurebank.com/operate/138262.html

https://www.sohu.com/a/276439269_114819

http://theventurebank.com/pd/167853.html

https://www.uisdc.com/gutenberg-principle

http://theventurebank.com/pd/132038.html

https://www.jianshu.com/p/82b2c0116de3

 

作者:Fyin印跡;公眾號(hào):印跡拾光

本文由 @Fyin印跡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我的答案是“7喜”,因?yàn)橹挥小?喜”有數(shù)字

    來自廣東 回復(fù)
  2. 多出文章吧作者!

    來自北京 回復(fù)
    1. 收到??

      來自廣東 回復(fù)
  3. 文章很棒,干貨滿滿,學(xué)習(xí)了??

    回復(fù)
  4. 文章很有深度,收藏

    來自河南 回復(fù)
  5. 非常棒,原來是這樣!還有沒有類似專業(yè)的書推薦???

    來自廣東 回復(fù)
    1. 有些原則有相關(guān)書籍,比如“奧卡姆剃刀法則”里提到的《簡約至上》

      來自廣東 回復(fù)
  6. 很不錯(cuò),受益了

    來自廣東 回復(fù)