如何通過設(shè)計(jì)降低認(rèn)知負(fù)荷

如何通過設(shè)計(jì)降低認(rèn)知負(fù)荷當(dāng)你使用形形色色的APP時(shí)，是不是時(shí)常不由自主地感慨“這個(gè)APP的界面太丑了”、“這個(gè)APP太難用了，連入口都找不到”，是什么原因造成這種感受呢？認(rèn)知心理學(xué)中有個(gè)概念叫做認(rèn)知負(fù)荷「cognitiveload」，它表示大腦在工作中記憶資源的使用量，會影響用戶的信息閱讀和產(chǎn)品使用體驗(yàn)。本文將從信息層級、信息結(jié)構(gòu)、閱讀順序、信息密度、文案表述五個(gè)層面來探討如何降低用戶認(rèn)知負(fù)荷。一、信息層級1.通過顏色對比、形狀大小、位置區(qū)分層級格式塔心理學(xué)的封閉性原理告訴我們，人們在認(rèn)知某個(gè)東西的時(shí)候首先看到的會是整體、而不是單獨(dú)的部分。如圖所示，你首先看到的是一個(gè)藍(lán)色的字母U和深褐色的人頭側(cè)臉，其次才是構(gòu)成這個(gè)形狀的各種細(xì)節(jié)。從人類視覺系統(tǒng)成像原理來說，人類天生對于顏色對比非常敏感（彩色視覺是因?yàn)橐暰W(wǎng)膜中3種視錐細(xì)胞分別感知特定顏色所致，當(dāng)用戶同時(shí)看到多種不同的顏色時(shí)，不同視錐細(xì)胞就會被激活眼睛感受到強(qiáng)烈的對比）。因此，在設(shè)計(jì)界面時(shí)通常會通過大面積的色塊對比來凸出層級更高的信息。總結(jié)來說，我們在平時(shí)的設(shè)計(jì)中常用形狀大小差異和顏色對比差異來拉開信息層級。此外，由于人眼視度（舒適的垂直視場角度為-30°~25°）和用戶使用不同設(shè)備時(shí)的閱讀角度問題，人眼對于屏幕上不同區(qū)域的關(guān)注度有著天然的差異。因此，我們在設(shè)計(jì)時(shí)若想拉開信息層級，除了使用面積和顏色對比外，也可以通過位置對比來實(shí)現(xiàn)，即將層級較高的信息置于舒適閱讀區(qū)內(nèi)。如圖所示，移動(dòng)端設(shè)備位于屏幕中央偏上的信息在閱讀舒適度上會優(yōu)于屏幕下方的信息。2.信息層級不宜超過4個(gè)我們知道了如何通過設(shè)計(jì)手段來區(qū)分信息層級，那在信息層級區(qū)分上是不是越多越好呢？顯然不是，信息層級過多也會增加人腦的認(rèn)知負(fù)荷（整個(gè)頁面顯得很花哨）；而信息層級過少，則頁面的內(nèi)容展示會比較平均、不一定能突出所有重點(diǎn)信息。一般來說，我們可以將信息劃分為重要信息、次重要信息、一般信息和和輔助信息，也就是信息層級控制在4個(gè)以內(nèi)比較合適。如圖所示，我們把聚劃算的頁面做高斯模糊后，里面的信息層級就一目了然了。二、信息結(jié)構(gòu)1.信息單元=信息本體+信息容器在討論信息結(jié)構(gòu)之前，我們首先對基本的信息單元做拆解：信息單元=信息本體+信息容器，這里我們把信息本體定義為我們主動(dòng)讓用戶感知并能輔助其進(jìn)行下一步動(dòng)作的信息元素，而容器定義為具有明顯視覺區(qū)隔的信息承載物。信息本體一般包括圖片、文案、icon、行動(dòng)按鈕等，而信息容器可以大到頁面小到一般的模態(tài)、非模態(tài)控件。如圖所示，在典型的電商場景中商品卡片可拆分為信息本體（商品圖、商品名、商品價(jià)格、利益點(diǎn)）+信息容器（卡片）：2.信息本體結(jié)構(gòu)——同類信息位置相近、結(jié)構(gòu)相同熟悉格式塔原理的朋友都知道相近原則——即彼此位置相近的物體會被人們看成是一類東西。同時(shí)，保持相同的信息結(jié)構(gòu)意味著視覺焦點(diǎn)內(nèi)不同層級信息的相對位置是固定的，這樣用戶在快速掃視某個(gè)產(chǎn)品時(shí)會降低記憶負(fù)擔(dān)——即無需尋找同屬性的信息。反之有一定的記憶負(fù)擔(dān)，不利于用戶快速掃視重要信息。如圖所示，滴滴我的錢包頁面5張輪播圖的信息結(jié)構(gòu)相同，遵循左文右圖和主文案在上、輔助文案在下的信息結(jié)構(gòu)。而支付寶理財(cái)頁面的輪播圖則有著不同的信息結(jié)構(gòu)，如輔助文案和按鈕在不同輪播圖中的位置和大小、樣式均不一樣，輪播時(shí)同類屬性的信息會以不同樣式在不同位置切換，增加用戶的眼動(dòng)成本和認(rèn)知負(fù)擔(dān)。從頁面整體動(dòng)線看，同類或關(guān)聯(lián)信息會有明顯的區(qū)塊分隔。如下圖所示，滴滴「我的」tab在頁面整體動(dòng)線布局上有著非常明顯的區(qū)塊劃分來承載關(guān)聯(lián)信息：用戶信息（個(gè)人信息+會員信息）→常用工具→促活福利（卡券+福利）→平臺服務(wù)（金融服務(wù)+企業(yè)服務(wù)）→低頻工具。從信息單元內(nèi)部來看，同樣會對關(guān)聯(lián)信息做位置上的劃分。例如一般的社區(qū)信息流卡片結(jié)構(gòu)基本都是生產(chǎn)者信息→內(nèi)容信息→互動(dòng)入口。3.信息容器結(jié)構(gòu)——三角、宮格、列表我們前面提到過信息單元=信息本體+信息容器（容器為具有明顯視覺區(qū)隔的信息承載物），而信息容器的排布也有其內(nèi)在的規(guī)律。筆者體驗(yàn)過大量產(chǎn)品后，大致總結(jié)了3種較為常見的容器排布結(jié)構(gòu)，即三角結(jié)構(gòu)、宮格結(jié)構(gòu)和列表結(jié)構(gòu)，每種結(jié)構(gòu)容器的排列規(guī)則會遵循一定的主次關(guān)系并根據(jù)其特點(diǎn)有不同的適用場景。1）三角結(jié)構(gòu)我們都知道三角形是多邊形里最穩(wěn)定的結(jié)構(gòu)，其容器排布主次突出（根據(jù)主要容器與次要容器的位置關(guān)系可分為上下結(jié)構(gòu)和左右結(jié)構(gòu)），用戶縱向的視覺遷移路徑較短，一般比較適用于數(shù)量較少、且有明顯優(yōu)先級的場景。2）宮格結(jié)構(gòu)宮格結(jié)構(gòu)適用于優(yōu)先級相同或相似的功能入口，一般以四宮格和六宮格為主，數(shù)量過多時(shí)容易造成視覺疲勞和信息密度過高。四宮格信息容器和六宮格信息容器如圖：值得注意的是容器內(nèi)也可以是宮格結(jié)構(gòu)，但這種宮格結(jié)構(gòu)的信息主體數(shù)量會比信息容器更多：3）列表結(jié)構(gòu)列表結(jié)構(gòu)同樣適用于優(yōu)先級相同或相似的功能入口，但與宮格結(jié)構(gòu)不同的是列表結(jié)構(gòu)的一般具有排布邏輯或規(guī)則，如按照時(shí)間線排布。列表結(jié)構(gòu)包含橫向列表和縱向列表，橫向列表適用于短文案卡片（比如活動(dòng)或功能入口），方便用戶掃視更多圖片；縱向列表適用于長文案卡片，用戶可以快速掃視較多文字。4.信息過多時(shí)的結(jié)構(gòu)——長表單可做信息分類、分頁處理在B端設(shè)計(jì)需求中，我們經(jīng)常會遇到讓用戶輸入一堆信息的場景，這時(shí)候如果我們把所有信息都羅列在1個(gè)頁面中，可能會造成高跳出率和低完成率。表單設(shè)計(jì)領(lǐng)域的專家AdamSilver通過實(shí)際項(xiàng)目發(fā)現(xiàn)：將較長表單按照關(guān)聯(lián)性拆解為若干部分，能有效提升用戶滿意度以及完成率。除此之外，Adam還總結(jié)了這種設(shè)計(jì)理念的16個(gè)優(yōu)點(diǎn)，我們認(rèn)為其中比較有價(jià)值的是這3個(gè)點(diǎn)：降低認(rèn)知負(fù)荷，讓用戶更專注地完成任務(wù)；降低每一頁的出錯(cuò)數(shù)，從而降低錯(cuò)誤帶給用戶的挫敗感及跳出率；配合進(jìn)度指示器，能給用戶一種前進(jìn)的正面感覺。市面上將長表單拆分成幾個(gè)步驟做分頁處理的產(chǎn)品比較多，如下圖小紅書就將店鋪申請流程拆分為了填寫店鋪類型、經(jīng)營類目、個(gè)人信息3個(gè)部分。三、閱讀路徑1.高優(yōu)先級信息應(yīng)置于視覺焦點(diǎn)容易觸及的地方我們都知道用戶的閱讀習(xí)慣一般是近似于從左往右、從上至下的Z字形結(jié)構(gòu)，且基于人眼視度和不同設(shè)備屏幕角度的差異，人們掃視屏幕時(shí)一般會先注意到屏幕中央偏上一點(diǎn)的位置，因此我們在設(shè)計(jì)信息結(jié)構(gòu)時(shí)也要考慮用戶的閱讀路徑和習(xí)慣，將對用戶高價(jià)值或者高優(yōu)先級的信息置于視覺焦點(diǎn)容易觸及的地方。那什么是對用戶高價(jià)值或者高優(yōu)先級的信息呢？我們判斷的標(biāo)準(zhǔn)是哪種信息形式（圖片or文字）更能高效地傳遞有效信息以輔助用戶決策，比如在電商產(chǎn)品或外賣產(chǎn)品中一般采用上圖下文或者左圖右文的信息結(jié)構(gòu)、且會將圖片的信息層級拉到最高，這是因?yàn)橛脩粼诳焖賿咭曔^程中僅通過看圖即可看到這件商品、初步了解外賣商家賣的是什么。但如果我們換一個(gè)場景，這種形式就不那么適用了，用戶僅通過看圖并不了解這條資訊的大致含義，因此，此時(shí)文案的優(yōu)先級更高，常常采用上文下圖或者左文右圖的形式。2.視覺引導(dǎo)提升信息閱讀率國外的用研團(tuán)隊(duì)曾通過眼動(dòng)熱力圖的AB實(shí)驗(yàn)發(fā)現(xiàn)通過在圖片中加入人類面部表情的視覺引導(dǎo)對于信息的閱讀率有明顯提升作用。如圖所示在第一張廣告圖中，用戶的視覺焦點(diǎn)大部分集中在了嬰兒的臉部，而右側(cè)的文案則很少有用戶關(guān)注，第二張圖中嬰兒由正臉轉(zhuǎn)化成了側(cè)臉同時(shí)眼睛看向右側(cè)的文字，此時(shí)右側(cè)文字的眼動(dòng)熱力成像明顯提升。四、信息密度1.信息密度不宜過高或過低這里的信息密度指的是在單位容器內(nèi)（卡片、頁面）所呈現(xiàn)的信息量，比如在1個(gè)頁面中如果信息密度大，則相對屏效較高，但卻容易增加用戶的認(rèn)知負(fù)荷；反之，1個(gè)頁面中信息密度低則相對屏效較低，用戶的認(rèn)知負(fù)荷也相對較低。我們來看1個(gè)關(guān)于信息密度對于閱讀體驗(yàn)影響的案例：在美國開車，人們常常因?yàn)榭床欢诌叺耐＼嚺贫`停被罰款，我們可以看到左圖中的停車牌上密密麻麻全是字，想要閱讀根本無從下手。NikkiSylianteng是一個(gè)華裔的設(shè)計(jì)師，當(dāng)她初來乍到美國時(shí)也因此遇到了很多不便，針對這個(gè)問題她簡化用戶的需求，即：當(dāng)前這個(gè)地方我能不能停車能（免費(fèi)）停多久于是她將文字信息做了可視化處理，通過較少的文字+色塊極大地降低了停車牌的信息密度，讓司機(jī)看到后一目了然。NikkiSylianteng的這種設(shè)計(jì)被美國各地的市政部門廣泛采用。在傳統(tǒng)媒介中，一張充滿文字和圖片的報(bào)紙與一個(gè)時(shí)尚雜志封面的信息密度對比更加明顯，給讀者帶來的閱讀體驗(yàn)和認(rèn)知負(fù)荷也完全不同，這也是為什么很少有人會耐心讀完報(bào)紙上的文字。關(guān)于海報(bào)與雜志設(shè)計(jì)還牽涉到圖版率這一個(gè)概念，簡單講就是圖片面積所占整體版面的比率，通常來說圖版率越高則表現(xiàn)力和親和力就越強(qiáng)，有興趣的讀者可以自行上網(wǎng)了解圖版率的相關(guān)知識，在這里就不做詳細(xì)闡述了。五、文案表述1.文案表述要符合大多數(shù)受眾的需求和理解在廣告場景下，當(dāng)用戶被圖片吸引視覺焦點(diǎn)后，文案表述就顯得尤其重要了。這時(shí)候我們要搞清楚3個(gè)問題：我們的核心目標(biāo)受眾是誰？我們能給用戶帶來什么？用戶需要付出什么？首先，我們得搞清楚核心目標(biāo)受眾是誰，同一款產(chǎn)品來自一線城市的年輕白領(lǐng)和三四線城市的中年人關(guān)注點(diǎn)和付費(fèi)動(dòng)機(jī)可能完全不一樣（比如同樣都是手機(jī)，一線城市的年輕白領(lǐng)更關(guān)注顏值和性能，而三四線城市中年人更關(guān)注價(jià)格和質(zhì)量）。這時(shí)候產(chǎn)品的廣告文案也必須依據(jù)核心目標(biāo)受眾的需求點(diǎn)來設(shè)計(jì)才能命中用戶，小米手機(jī)的線下廣告語在一線城市的地鐵站（左圖）和農(nóng)村的大字報(bào)廣告（右圖）就采取了完全不同的描述策略。在回答完以上3個(gè)問題后還需要注意，我們的文案描述目標(biāo)受眾是否能夠理解，因?yàn)槿巳翰灰粯?，其受教育程度和理解能力也會不一樣?.文案上避免歧義在設(shè)計(jì)動(dòng)作文案時(shí)