
你是否有在聽别人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機互動設計相關的15個常見的設計心理學原理,幫助你了解産品的定位,需求目的和互動邏輯,洞悉使用者的各種行為。也為自己的設計予以理論支撐,這些互動原則會幫助設計師設計出更好的界面。
全文目錄
7±2法則「米勒定律」
0123簡單法則
希克定律
費茨定律
泰思勒定律
麥肯錫金字塔原理
新鄉重夫放錯原則
防呆原則
奧卡姆剃刀法則
雷斯托夫效應
損失厭惡
雅各布定律
古騰堡圖表
馬斯洛需求理論
序列效應
| 7±2法則「米勒定律」
1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個機關,就是7±2法則。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用互動設計上。
因為人腦處理資訊的能力有限,是以它通過把資訊分成塊和單元來處理複雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機号碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡号、身份證号,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高資訊的易讀性,進而達到視覺防錯的作用。
Web導航欄頁籤數量不超過9個
在設計網頁導航時,如果希望使用者記住導航區域的内容或者一個路徑的順序,那麼數量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網站的導航分類。
Web導航欄頁籤數量過多時
如果導航或頁籤内容很多,可以用一個樹狀層級結構來展示各級别關系,但要注意其廣度和深度的平衡。例如人人都是産品經理和Dribbble,把更多子類别收在二級目錄裡。
移動端頁籤導航
在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類子產品,兩個産品的商品分類布局形式很相似,都是用了頁籤的方式來分類商品,層級明确,相應的提升了使用者找尋單品的效率。
Tabbar區标簽最多不超過5個
在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕使用者記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算隻有4個,我們也經常想不起微信底部的4個Tab分别是啥。
頂部導航欄頁簽
我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,
但在顯示區域隻保持7±2法則的顯示數量,例如馬蜂窩、飛豬旅行等。
金剛區圖示不超過8個
我們常說的“八大金剛”就是一屏顯示8個圖示,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。
banner文案不超過9個字
産品營運banner主文案字數通常控制在9個字以内,在設計時也通常把長标題一分為二排兩行,便于使用者快速閱讀,提升點選率。
在互動設計中,7±2法則是減少使用者認知負荷,提升使用者體驗的重要環節。同時還強調了在設計過程中對産品的預見性,避免在不斷為産品添加功能時,破壞原有的視覺基礎。
| 0123簡單法則
- 無需說明書
- 一看就會
- 兩秒等待時間
- 三步以内的操作
0無需說明書
喬布斯曾說過:“蘋果應該創造所有人都可以使用的産品,即使沒有使用者指南”。
1 一看就會
簡單易懂,看一眼就明白你想說什麼,不用教學就知道怎麼用。
2秒法則
所謂“2秒法則”,是指使用者在使用某類系統時的等待時長不超過2秒。在極短的時間内展示重要資訊,給使用者留下深刻的第一印象。這裡的2秒隻是一個象征意義上的表達,也許有一點随意,但是這卻是一個合理的數量級。我們熟知的“F”浏覽模式其實就是間接縮短使用者看到重要資訊的時長,達到快速浏覽的目的。
進入App的首頁加載時間如果過長就會導緻使用者産生厭煩情緒,很容易退出甚至解除安裝App的行為。是以我們看到許多應用将首頁加載時的空白頁進行占位圖設計。
下拉重新整理也是一個設計點,為避免重新整理時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫使用者焦躁不安的心情,無形中降低了使用者對等待時間的感覺。
APP裡面的banner設計要有視覺沖擊力,如果兩秒之内沒有抓住使用者的眼球,可能就被使用者忽略了。
是以,在設計網際網路産品的頁面時,使用者等待的時間越短,使用者體驗越佳。反之,就會讓使用者産生焦慮的情緒。
3次點選法則
使用者在3次點選之内如果還沒有找到他們想要的資訊或了解網站特色,他們就會離開該網站。這條原則突出了清晰的導航,符合邏輯的結構和易于了解的網站層級的重要性。(來自《衆妙之門》P133)
其實在互動體驗中,點選的次數往往是無關緊要的。隻要每次點選都是無需思考的,毫不費力地順勢進行,那麼使用者的挫敗感就會大大降低。如果你的網站能夠讓使用者知道他在哪裡,從哪裡來,要到哪裡去,并且能夠讓使用者了解如何完成目标,這樣的點選即使有10次也是沒有問題的。例如,在京東購買一件商品需要經過“立即購買>确定>送出訂單>選擇支付方式”4次點選才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點選行為(比如選擇位址、優惠券),使用者并沒有感受到不友善,使用過程流暢而自然。
在可用性測試領域,“三次點選”定律一直是一個很具争議内容。展現在以下幾點:
·研究表明,使用者在超過3次點選還沒到達想去的頁面時,往往并沒有退出網站,而是會繼續多點幾次;
·當把一個3次點選就能到達的流程改為4次點選的時候,使用者發現目标頁面的能力反而提升了600%;
·合理的導航系統比點選次數更重要;
·比起“3次點選”,有人提出了“1次點選”定律,即使用者的每一次點選都應該讓他們更接近目标,同時盡量減少能幹擾實作這一目标的因素;
·使用者抱怨要花很長時間才能找到某個産品,實際上他們是在抱怨無法找到想要的東西,如果使用者找到了想要的東西,他們就不會抱怨點選的次數了;
| 希克定律
英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間進而導緻決策失敗。
生活中我們也經常會面臨選擇困難症,比如早上起床就糾結今天穿什麼?中午去食堂就會糾結吃什麼?造成我們如此糾結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮着什麼就吃什麼)。
在設計中的應用
應用到界面設計中也是如此,選項越多,意味着使用者做出決策的時間越長。
例如APP Store首頁,改版前的首頁把衆多app平鋪出來,對目的不明确的使用者來說選擇有點多。改版後的首頁大幅減少了App的數量,卡片的設計方式簡潔且目标清晰。
不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,提升使用者做決定的效率。例如美團外賣金剛區第一行5個入口的圖示在尺寸和表現手法上都比下面的入口圖示要大更醒目。“我的”頁面把一些低頻率功能或不太重要的功能收納到“設定”裡,此外還可以通過置灰、鎖定等方法間接減少選項,降低幹擾。
對于多流程的任務進行分步操作,讓使用者專注眼前任務。例如Clubhouse注冊時,把需要使用者選擇的選項分步引導完成,讓使用者能專注目前行為。
對于多種類别的選項應當做二次分類的區分,我們都知道電商平台的品類繁多,僅通過單一分類是不夠的,比如數位頻道下面還分相機、影音娛樂、數位配件、智能裝置、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,是以分類不怕多,就怕混亂。
适用邊界
雖然選擇越少,使用者做決策的時間越短,但這并不是提高使用者體驗的唯一标準,過度的減少選項,可能導緻負面效果。
如上圖右,如果在删除App的彈窗中隻有一個“删除”選項,沒有明顯的取消之類的途徑,那麼使用者會覺得特别難受,感覺被強迫去删除。如果當下有急需使用手機處理一些事情,那麼這樣會把這種負面情緒給無限放大,讓使用者抓狂。
希克定律主要受影響于選項的多少,但是它不适用于需要高難度閱讀的任務。例如考試試題每道題隻給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是希克定律在答案試題中的局限性。
思考總結
希克定律是一個可以适用于設計的指南,記住要盡量減少使用者在一次決策中要做的選項,因為決策效率是一個産品導緻使用者流失的重要原因之一。引導使用者在明确的選項之間進行選擇,以便快速将他們送到某個地方(例如賬單支付),這将大大提升使用者體驗并達到你的目标。
| 費茨定律
費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目标中心位置所需時間與該點到目标的距離和大小有關,距離越大時間越長,目标越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接着你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有着一定的關系。
如上圖所示,如果光标現在在任易地點想要去點選目标target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,隻要水準上移動超過了D+W你就點不到了,而這個點選動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。
詳細解釋如下,圖中紅色方塊代表點選目标,虛線代表移動路徑,此時因為紅色方塊目标較大,是以使用者從任何一處點選都很容易(可以用滑鼠在螢幕任意點移至紅色方塊試試)。
相反,紅色方塊目标變小,快速點選就會困難很多,很難一次到位。
但如果紅色方塊目标很小距離很近的話,因為移動範圍小,也能準确的點選到。
按鈕越大越容易點選
在頁面中,大而近的目标區域意味着使用者不需要做太精細的調整就可以輕易的觸達目标。比如頁面中的大按鈕。
将按鈕放置在離開始點較近的地方
誇克浏覽器的搜尋欄就放在離手最近的螢幕底部區域,相比常見頂部搜尋欄更友善操作,效率更高。
相關按鈕之間距離近點更易于點選
注冊登入界面,通常将「注冊」和「登入」放到一起,不僅可以在視覺上增強使用者對他們相關性的認知,還可以減少在他們之間的距離 。
适用邊界
費茨定律鼓勵減少距離,增加目标大小以提升使用者效率,但反過來亦适用。比如iPhone關機按鈕,沒有使用點選關閉,而采用滑動操作,還把按鈕放在螢幕頂部,這樣明顯增加了操作難度,進而避免了使用者誤操作。
App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望使用者先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點選的右上角(恰飯重要),以提高使用者的誤觸機率提高轉化。
思考總結
按鈕越大越容易點選,是以在程式開發中,會增加按鈕點選的熱區範圍,減輕使用者精準點選的壓力。但也不能過分的大,容易引起誤觸;
讓相關聯的内容更靠近彼此,用視覺手法增強使用者對它們相關性的認知。距離産生美,注意不要靠的太近,會出事;
将按鈕放置在離出發點較近的地方,比如頁面主按鈕一般會放在螢幕底部易操作區域;
螢幕的邊角很适合放置像菜單欄和按鈕這樣的元素,因為在螢幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調”,參見macOS底部dock欄;
定律的反向使用可以适用一些特殊場景,比如想達到某種目的而降低按鈕被點選的可能;
| 泰思勒定律
“任何事物都具有其固有的複雜性,無法簡化”。
泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「複雜度守恒定律」。
該定律認為:每一個過程都有其固有的複雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你隻能将固有的複雜性從一個地方移動到另外一個地方。
生活中很多我們習以為常,感覺便捷友善的生活方式,是無數卓越的數學家、工程師、設計師等無數的時間投入,才實作的某個小功能,是他們把這些複雜性轉移到自己身上替我們簡化了。
說回移動端,每個應用中都有其無法簡化的複雜度,也不能按照我們個人意願去除這些功能。這就是為什麼飛機稿都簡潔好看,而一搬到線上就面目全非。常見的複雜性轉移有:“檢視更多”、“檢視全部”、“檢視詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖示,就是将常用的功能整合并隐藏在首頁設計的更多功能子產品中,把使用者的操作範圍轉移到另一個地方。
除此之外,還有一些降低操作複雜度的方法:
删除、組織、隐藏
視覺層面的“降噪”方法,删除會幹擾使用者操作的選項;功能分類明确,圍繞使用者行為組織資訊内容;隐藏那些不常用而又不能少的功能,延遲及階段性展示。總的來說就是将複雜的資訊收起來,展示重要且簡潔的界面。
簡化互動設計
可以用代碼節省使用者操作時間的地方,是網際網路人一緻的追求。例如,B站的一鍵三連,使用者長按點贊按鈕,會同時觸發點贊、投币和收藏,省時省力。
算法解放“生産力”
個性化算法就是通過技術手段,将使用者複雜度降低,而轉移到開發者身上。抖音為什麼會讓人上瘾?是算法知道了你的喜好,專推給你喜歡的内容而不用自己去找,誰都喜歡私人定制。這對使用者來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這裡的簡化複雜的難度就轉移到設計和開發身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的内容都是基于你的喜好定制化推薦給你的。
思考總結
我們常說以使用者為中心去設計,就需要從使用者角度出發,在互動設計中盡量簡化操作的複雜度,降低學習成本。但如“複制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的複雜性,無法簡化”。是以,如何取得複雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低産品的使用難度,還是在設計中保留一定的複雜度是我們需要思考的事。
| 麥肯錫金字塔原理
該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調結論先行,論點自上而下。
你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最後你都不知道他想說什麼。是以如果開會時你會走神,這不怪你,隻怪講演者說話沒有邏輯,沒有重點。
金字塔原理訓示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓閱聽人能夠第一時間清楚你想談論的主題。然後由數個論據作支撐,而這些一級論據可以繼續由數個二級論據支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。
應用到互動設計上,即将資訊展示的重點與互動行為的主任務優先展示,再根據使用者在這個界面上所願意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例,首先金字塔的最上層是使用者目标明确直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和使用者評價這些,讓使用者了解更多資訊,進一步促成購買,最後一層是提供商品相關的全部資訊、參數、評分等,確定交易的最終完成。在這個過程中,使用者在每一層花的時間也在逐級增加,呈金字塔狀。
映射到設計師身上也是如此,從設計新人到設計總監,中間差的就是一個完整的設計技能金字塔。就像更新打怪,每完成一項任務獲得相應的經驗值,累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之後,你的設計水準會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優秀的設計師。
有趣的是,把金字塔模型倒過來就成了“使用者漏鬥模型”。自上而下,激勵使用者成長。它告訴我們:
使用者的需求是永遠滿足不完的,是以什麼值得做,什麼是可分階段去實作的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什麼,直到我們拿出自己的産品,他們就發現,這是我要的東西”;
不斷完善主要功能,以滿足金字塔頂的核心使用者群。決策者常常添加一些自己想要的而不是使用者想要的需求,比如在資訊流中添加一個廣告位;
如何優化完善産品架構,檢驗産品政策的合理性和完整性;
|新鄉重夫 防錯原則
防錯原則由世界著名的品質管理專家新鄉重夫提出,即在過程失誤發生之前加以防止,是一種在作業過程中采用自動作用、報警、辨別等手段。使操作人員不用特别注意也不會失誤的方法。
防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優化設計把過失降到最低。該原則最初用于工業管理,後來應用于界面互動設計中,當使用條件沒有滿足時,常常通過功能失效來表示。
自動檢測提示
bilibili在登入時輸入框沒有内容或沒有輸密碼時,登入按鈕處于禁用的置灰狀态,隻有兩者都滿足了才可以正常點選。此外登入功能就可能會有使用者名錯誤、密碼錯誤、網絡逾時、郵箱錯誤等不同的錯誤。通常必須賬号和密碼同時滿足且比對才能成功。
Twitter發帖時隻允許使用者輸入140個字,為了提醒使用者,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字元,超過會以負數警示。知乎釋出文章标題過長時也會提示錯誤預警。
消除可能的失誤
防錯法則認為大部分的出錯都是産品設計的不夠優秀,而不該責怪使用者操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在使用者出錯之前就盡量避免錯誤的發生。比如,美團外賣在接受短信驗證碼時,系統會自動提取驗證碼在鍵盤上方顯示,使用者點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬号,避免手動輸入的出錯率。
将失誤降至最低
二次确認,在一些比較重要的場景讓使用者二次确認,通常以彈窗的形式告知使用者再次讓使用者考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在送出資訊前再次确認。
視覺暗示
可在視覺(置灰或隐藏)上屏蔽那些不能選的選項,避免使用者點選後才報錯或點選沒反應。
其次,一些不可恢複的操作,視覺上通常會給強辨別。例如,删除短信時的文字顔色“變紅”。
為使用者犯的錯買單
當使用者輸入錯誤資訊時,比如打錯字,系統應該給予使用者想要的資訊,而不是無動于衷,冷漠視之。
範圍限制
其實限制使用者的選擇并不是一個好主意,但是如果有明确的規則來定義可接受的選項,那麼限制使用者可以輸入的類型是一個很好的政策。例如,Airbnb訂房可選日期和設定鬧鐘時的時間範圍。
研究得出,使用産品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在使用者體驗的角度考慮設計方案,做到操作前、中、後都有及時的回報,預測到他們有可能發生的誤操作狀态,讓使用者更快完成目标,幫助使用者減少出錯率。
| 防呆原則
每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?
防呆(Fool-proofing)是一種預防矯正的行為限制手段,運用避免産生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。
設計師應謹記:不要認為使用者是專家。比如,我們都知道“漢堡”圖示就是菜單,點選這個按鈕就會調出某些功能。但是設計師忘記了普通使用者可能并不了解什麼是漢堡包圖示、什麼是面包屑、什麼是抽屜式導航、什麼是3Dtouch、怎樣雙指滑動。更何況普通使用者并不會研究App,在他們眼中産品隻是衆多工具中的一個。是以,一定要把互動和設計做的簡單,通用的圖示、功能和互動方式最好保持使用者熟悉的樣子,減輕使用者重複學習的負擔。每個頁面應強調一個重要的功能而不應該讓使用者做選擇題,這些都是有效防呆的好方法。
△頁面的中主按鈕更突出
防呆設計是預防錯誤發生的方法,讓非專業、無經驗的使用者可以高效完成正确操作,不要讓使用者去思考,而是我們時時為使用者思考。
| 奧卡姆剃刀法則
又被稱作“簡單有效原理”:“如無必要,勿增實體。”
通俗點去了解“如無必要,勿增實體”可以了解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下,要求得越少的那個就越好,越有價值”。
應用到設計學領域,該法則認為做産品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,産品中為使用者提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導緻使用效率降低,還會增加不可預知的後果。建議在不損及功能的前提下,幹掉多餘的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達内容更好地使用者體驗。
總的來說,我們可以結合《簡約至上》一書中提到的删除、組織、隐藏、轉移四個政策來将複雜的設計和體驗變得更加簡單。
删除:關注核心,讓使用者注意力集中在自己要完成的目标上,删除不必要的功能、流程和造成視覺混亂的元素等;
組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,使用者負擔約輕;
隐藏:隐藏那些主流使用者很少使用,但自身更新需要但功能。通過漸進展示和适時出現的方法減少幹擾;
轉移:把合适的功能轉移到合适的裝置上去。讓使用者感覺簡單的一個重要前提,就是先搞清楚把什麼工作交給計算機,把什麼工作留給使用者。
| 雷斯托夫效應
小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。
可口可樂、雪碧、芬達、崂山可樂、7喜、美年達
雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。
一樣東西與以往經曆明顯不同就産生了經曆差異。比如人生中的很多第一次,第一次聯考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話号碼記憶中。奇特的面孔和特殊的電話号碼更能被人記住。
該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點内容,就要使它特殊化,通過色彩、尺寸、留白、字型粗細等設計手段。利用對比來凸顯想要表達的重要資訊。例如金剛區、tab欄的營運活動廣告,特殊化的設計讓它們在背景中脫穎而出。
個人中心的會員卡為了吸引使用者注意,增加開通率,都成了重點設計對象。
與以往不同的界面設計可以更加的吸引使用者,加深使用者的記憶,同時擴大了活動對使用者的影響力。例如每年淘寶的雙11首頁設計都與往常不同。
Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或塗鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。
是以我們在界面設計中,若想讓使用者對哪個子產品或者是元素引起注意或點選,就可以打破正常對該元素進行強調設計,使他在背景中脫穎而出。但是不要任何元素都強調,因為什麼都強調就等于什麼都沒強調,就沒有重點,是以要謹慎使用這個方法。
回到開篇的題目,答案是「崂山可樂」。相比其他飲料,崂山可樂遇到的少,反而成了最特别的一個了。你的答案是什麼?歡迎在下方留言探讨。
| 損失厭惡
損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丢100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平複之前的心情。
生活中類似的栗子還有很多,比如旅遊時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那麼多,可想到花了那麼多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發現是部爛片,就算在電影院睡覺也不願提前走,覺得這50塊錢不能白花...
那麼,該如何将“損失厭惡”賦能給産品設計呢?
最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時後恢複原價等等。商家就是為了營造現在不買就會錯過的套路,使用者也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。
我們App的使用者粘性不太理想,增加一個“簽到”功能吧,産品經理如是說。如是我們看到各種簽到得禮品,赢紅包等活動。中間還不能中斷,要連續簽到多少天才能得到獎勵,使用者也擔心中斷的損失。
某網盤下載下傳檔案時,會給你一個10秒VIP高速下載下傳的體驗,計時過後又恢複到龜速,讓你恨的牙癢癢。雖然這招有點損,但使用者體驗到了VIP的快感,很多人還是會乖乖成為付費會員。
産品營運中會經常發一些優惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快使用者決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續費,典型的“騙”進來養肥了再“殺”。
人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業,他們會用一些負面資訊(空難、車禍)刺激你,使用者就會産生焦慮,自然就想規避掉這些機率小的風險。例如購買機票時的意外險,QQ登出時的提示。
還有就是有使用者自己的内容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,後來看到幾個更好用的軟體,但要想到把原來的這麼多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續用飛書好了。QQ這個“古老”的軟體,估計很多人好久都沒打開過了吧,但是讓你删了它,你還是不願意的,因為那上面有很多青春的回憶。
| 雅各布定律
使用者會将大部分時間花在其它網站上,是以他們會希望你的網站也能像他們已經掌握的其它網站一樣,擁有相同的使用模式和習慣。
Jakob定律是由Jakob Nielsen提出的,他認為使用者在其他網站所積累的經驗教會了他們如何使用網站,是以他們會希望你的網站可以與那些熟悉的網站一樣,相似的使用方式,在使用你的産品、服務、内容和資訊的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆使用者或導緻更高的認知成本。
例如YouTube2017年改版前後的對比,在新版中,網站架構和功能上幾乎沒動,隻是在UI上做了順應新的設計準則,比如調整字型大小、顔色、欄目間距等。整體上和舊版沒太大差別,而且還給使用者提供了舊版的選擇。
在移動端App中也應如此,在具有相同功能的頁面,盡量保持一緻。大到頁面底層架構(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖示,甚至一句微文案。
在設計産品時,要先延續大衆早已習慣的概念模型。然後再從自己的産品出發,對其進行改善。而不是從零開始制定自以為是的流程。
日常使用的各類修圖軟體,版式都高度相似,中間是圖檔,各種濾鏡、貼紙、調整等功能都放在底部操作區域,很多相同功能的名稱都一樣。這是使用者最熟悉的布局,可降低使用者在同類軟體使用的學習成本提升使用效率。
也許你會質疑當所有産品都遵循相同都設計模式,會讓産品同質化嚴重,答案是必然的。此時需要深入了解使用者的目标和心智模型(使用者訪談、使用者畫像、使用者體驗地圖等),并将其應用到我們的産品設計中去,縮小我們與使用者心智模型之間的差距,進而獲得良好的使用者體驗。上文YouTube例子中,就是通過簡單的使用者授權(新舊版本選擇),避免了心智模型的不一緻會帶來的問題,當使用者準備好随時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確定改版前後使用者心智模型的一緻性,導緻大量使用者流向競争對手Instagram那裡了。
但是也要注意裝置之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大螢幕可視範圍更大,小小的漢堡包圖示很容易被忽略,這時候平鋪出來可能會更好。
思考總結
1、使用者會把在其他産品使用中已熟悉的操作習慣轉移到另一個看起來相似的産品上;
2、利用現有的思維模型,使使用者可以專注于自己的目标上,而不是學習新的操作方式;
3、在進行必要的改版時,請給使用者過渡到新版本的機會,即可以選擇短時間内繼續使用舊版本;
| 古騰堡圖表
看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀态”。它告訴我們浏覽頁面是由左上至右下的視線流,左上角是視覺第一落點區,右下角是視覺最終落點區,是以右上角和左下角都是一個強烈的視覺盲點區,大多數時容易被忽略。
在進行資訊排布時,将最重要的資訊放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來建立一條虛拟的“線”,讓使用者的視線跟随左上到右下這條對角線移動,符合使用者習慣性的眼動規律。
古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖檔、名稱、價格、快遞和優惠等使用者主要關心的資訊;右上和左下通常是分享、客服和收藏等次要資訊;右下角則放置最終促成使用者交易的購買按鈕。
我們都知道一般頁面按鈕都在界面底部是因為離手近,友善操作,但不僅僅如此。還因為浏覽是使用者的第一行為,他們的視線會根據頁面元素進行移動,最終停留在底部結尾的地方。
看各種社交産品評論、點贊的位置,就知道産品希望使用者先幹什麼的想法。
彈窗的按鈕擺放一般都是左「取消」右「确認」,目的是讓使用者最快地看到主要操作内容。
餘額寶的「轉出」在左,「轉入」在右,畢竟誰也不想财往外流是吧。
既然如此,為什麼“釋出”頁面的按鈕都在右上角呢?因為釋出頁是屬于“編輯頁面”,需要使用者謹慎操作,這裡關注的核心應該是可編輯内容區域,而不是按鈕本身。
類似的例子還有很多,設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局,合理運用這些節奏模式,使用者會跟随你“設計”的視覺流和運動規律來浏覽頁面,有效提高使用者閱讀的節奏和了解能力。
| 馬斯洛需求理論
美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調人的動機是由人的需求決定的。他将人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實作需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之後,就要去實作更高的需求和目标。
馬斯洛需求層次理論有兩個基本出發點,一是人人都有需求,某層需求滿足後,另一層需求才出現;二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足後,後面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。
回歸到産品,一款産品,最核心的是解決使用者的需求。馬斯洛需求層次理論,為産品的需求分析指明了方向。
生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供友善的應用;
安全需求:人生安全、财産保險,也是強需求。如是各類投資理财軟體層出不窮。
社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微網誌、Soul、探探、陌陌等不同類型的社交軟體多如牛毛;
尊重需求:每個人都有被尊重的需求,都希望展現自己,獲得人們認可。此需求可以深度結合在社交需求中。
自我實作:最高層級的需求,完成與自己的能力相稱的一切事情,實作自己理想的需要。結合到産品可以了解為能滿足自己外在展示(炫耀)的需求,如各類美顔軟體,美化後的照片曬到朋友圈,給人看到最好的一面。
由此規律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實作,變得可有可無,不再是所有人的剛需。一個優秀的産品,深谙人性滿足使用者核心需求,才能形成持續穩定高使用者粘性的産品。
| 序列效應
序列效應法則又叫系列位置效應,是指一種記憶現象:在列舉項目時,排在最前面與最後面的元素,要比排在中間的更容易讓人記住。
因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級裡我們一般都知道成績最好的第一名和倒數第一名,至于排在中間的很難記住。是以對排在開頭的項目産生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目産生加強的回想效果,稱為“近因效應”( recency effect )。
分類頁簽中,我們通常都會記得“精選”、“熱門”這類标簽,是希望給使用者進入App後看到的主要内容。這就是“首位效應”,把重要性高的内容放在首要位置。
我們都知道界面中“傳回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“傳回”時能夠快速回憶出來。
tabbar數量不管是3個還是5個,使用者通常都會記得第一個“首頁”和最後一個“我的”,對排在中間的都會選擇性的忽略掉。
有時候新上一個功能,産品想提高它的位置引起使用者注意,會和“我的”互換位置。例如網易雲音樂,把“我的”放在第三個tab,。。。放在最後一個tab。
近因效應常用于及時進行回報的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時使用者在看到有趣的内容,想要評論或分享時,不用等到文章看完即可操作。進而增強内容粘性,提高互動率。
使用者的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助使用者減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。
以上為全部15個設計原則(建議收藏),希望對你了解設計心理學有所幫助,我們下期見。
參考資料
http://www.woshipm.com/ucd/1018979.html
https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users
https://zhuanlan.zhihu.com/p/25530956
http://www.woshipm.com/operate/760978.html
https://cdc.tencent.com/2012/10/24/-fitts-s-law/
http://www.woshipm.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://www.woshipm.com/pd/2665009.html
https://www.xueui.cn/experience/xueshengbikan/design-rule.html
https://kknews.cc/news/ppvjk9p.html
http://www.woshipm.com/operate/138262.html
https://www.sohu.com/a/276439269_114819
http://www.woshipm.com/pd/167853.htm
https://www.uisdc.com/gutenberg-principle
http://www.woshipm.com/pd/132038.html
https://www.jianshu.com/p/82b2c0116de3
最後,也歡迎有問題的小夥伴加微信:yw5201a1 進行交流。
此外我們的官方網站也上線了,每日分享高品質的文章、原型素材和行業報告,小夥伴可自行前往索取,支援搜尋,需要的小夥伴可點選底部的閱讀原文直接檢視,或者複制網址:www.dadaghp.com 打開。
更多幹貨可關注微信公衆号:産品劉
想學習更多關于産品、職場、心理、認知等幹貨,可長按右邊二維碼,關注我們。
··················END··················
RECOMMEND
推薦閱讀
28歲的他如何從營運轉崗産品經理
産品經理如何晉升為産品總監
手把手教你做産品經理1.0
B端産品經理如何更好的了解需求?
點選“閱讀原文”
檢視更多幹貨