編輯導語：用戶負荷，即檢查用戶對某個產(chǎn)品是否有行為能力，它是交互設(shè)計中的重要一環(huán)。如果想提高用戶的行為能力，降低負荷是一個高性價比的選擇。本文中，作者從視覺負荷、認知負荷和操作負荷三個方面分析了如何降低用戶負荷。對此感興趣的小伙伴，不妨來看看。

之前給大家介紹了交互設(shè)計的底層模型——最新版福格行為模型。

模型告訴我們想讓用戶進行某個行為有3個步驟，第一個步驟是檢查有沒有(合理的)行為提示，我把它翻譯成能否吸引用戶注意，感興趣的同學可以查看《交互設(shè)計之吸引用戶注意》。第二個步驟是檢查用戶有沒有行為能力，我把它翻譯成降低用戶負荷，以提升用戶行為能力。具體用戶負荷可拆解為視覺負荷、認知負荷和操作負荷三大類，下面我們就逐一來看。

一、視覺負荷

視覺負荷是指界面信息的視覺復(fù)雜度。

我們回顧一下交互設(shè)計四策略：合理刪除，分層組織，適時隱藏，巧妙轉(zhuǎn)移，這四個策略其實都是在幫助用戶降低視覺負荷，讓信息功能更精煉，主次更清晰。

視覺復(fù)雜度很重要，因為人對產(chǎn)品的第一印象在0.5秒內(nèi)就形成。視覺復(fù)雜度過低會讓人感覺簡陋無聊不滿足，但視覺復(fù)雜度太高，又會增加用戶的認知障礙，讓用戶覺得困惑煩躁想逃離。

▲圖1視覺復(fù)雜度與愉悅度的關(guān)系

當界面初始狀態(tài)為空時，或者出現(xiàn)錯誤無法顯示內(nèi)容時，設(shè)計師通常會為其設(shè)計插畫、動效、甚至小游戲，這可以看做是增加界面復(fù)雜度，以提升用戶情感愉悅度。

▲圖2增加視覺復(fù)雜度

當界面信息特別少時，我們也可以通過增加背景、插畫等裝飾性元素適當增加復(fù)雜度，以此來提升界面的視覺感受（如圖2）。但要注意增加的裝飾性元素不能影響到主體元素的視覺焦點（如下圖3）。

▲圖3降低視覺復(fù)雜度

對于一個登錄頁而言，顯然左圖登錄框的背景插畫太重，容易讓用戶把視覺焦點轉(zhuǎn)移到背景上，所以應(yīng)該降低背景元素的視覺復(fù)雜度，讓登錄框重新回歸主體地位。

多數(shù)產(chǎn)品都是越做越復(fù)雜，所以前期做交互設(shè)計時，就要充分貫徹交互設(shè)計四策略：

1. 合理刪除：能刪則刪，盡量降低要呈現(xiàn)的功能和信息總量。
2. 分層組織：將刪減之后的信息和元素進行歸類分組，并按組間和組內(nèi)的信息優(yōu)先級進行界面設(shè)計。
3. 適時隱藏：把多數(shù)用戶暫時用不到的功能和信息做一些折疊隱藏。
4. 巧妙轉(zhuǎn)移：把一些復(fù)雜的操作或計算轉(zhuǎn)移到PC端或者是產(chǎn)品服務(wù)端，還用戶一個簡單清爽的界面。

經(jīng)過這4大交互設(shè)計策略優(yōu)化后的界面，相對來說會具備比較合適的視覺復(fù)雜度。

二、認知負荷

認知負荷是指用戶在界面上理解、思考、回憶、計算信息的腦力消耗。

交互設(shè)計有一條經(jīng)典的原則叫“Don’t make me think”，指的就是不要讓用戶思考，不要增加用戶的認知負荷。

相對于視覺負荷和操作負荷而言，認知負荷消耗的能量更多。如果每個步驟都提供了用戶所預(yù)期的信息，他們不必動腦思考，即使步驟相對較多，用戶也會感覺輕松，因為思考的負荷比操作負荷更重。

降低認知負荷常見的策略也有3點。

1. 保持設(shè)計的一致性

一致性包含的內(nèi)容比較廣泛，既包括行業(yè)產(chǎn)品框架結(jié)構(gòu)的一致性，也包括產(chǎn)品內(nèi)部功能流程的一致性，還包括產(chǎn)品認知/操作模型與用戶心理模型的一致性。

所有一致性的設(shè)計，都可以降低用戶的認知成本。所以做交互時，對外，要考慮行業(yè)產(chǎn)品設(shè)計的一致性；對內(nèi)，要考慮各功能組件操作的一致性，對任何一個單一的功能設(shè)計，都要考慮其與用戶心智模型的匹配度（一致性），讓用戶在各產(chǎn)品相似功能之間漫游時，都可以調(diào)用已有的心智模型來認知理解，以此來降低用戶的認知負荷。

▲圖4 長視頻產(chǎn)品框架結(jié)構(gòu)的一致性

▲圖5短視頻主界面布局及操作一致性

正面案例：比如長視頻類產(chǎn)品，其產(chǎn)品框架及首頁結(jié)構(gòu)都是一致的，短視頻產(chǎn)品的主界面布局和操作交互也都是一致的。

▲圖6顏色設(shè)計與用戶認知的不一致性

反面案例：上圖中，設(shè)計師用了不同顏色來表示績效為SABC的占比，橙色用S表示的。但這種顏色的選取，沒有考慮橙色警示色的心理認知，導致色彩認知出現(xiàn)了沖突，會增加了用戶的認知負荷。

2. 漸進式呈現(xiàn)

如果一項任務(wù)比較復(fù)雜，我們可以將其步驟全部整理出來，然后根據(jù)步驟之間的親密性進行分組，把任務(wù)拆分成多個子模塊，每次只展示一個模塊，通過分步導航的模式進行漸進式的呈現(xiàn)。

▲圖7體溫采集的漸進式表單呈現(xiàn)

同時，在同一個子模塊內(nèi)，如果后面的內(nèi)容跟前面用戶的選項強相關(guān)，我們也可以先做隱藏，當用戶選擇特定的選項后再進行呈現(xiàn)，這兩種漸進式呈現(xiàn)的方式，都可以幫助用戶降低認知負荷。

3. 信息可視化

從信息傳達效率和易理解性上來講，圖表化，富媒體化的信息，會比文字信息更容易理解和吸收，所以網(wǎng)上才會有“字不如表、表不如圖”的說法。

▲圖8信息可視化降低認知成本

為了降低用戶的認知成本，我們要盡可能地將信息結(jié)構(gòu)化，可視化，盡可能地讓信息能夠一目了然，減少用戶閱讀理解的認知負荷。

▲圖9信息可視化降低認知成本

三、操作負荷

操作負荷指的是用戶移動頭部、肢體、胳膊、手指等身體部位的運動耗能。

降低操作負荷可以分為兩大步驟：

1. 盡可能地減少操作步驟/對象

在互聯(lián)網(wǎng)上，一般來講，每增加一個步驟，轉(zhuǎn)化率的漏斗就會降低X%，很少有100%轉(zhuǎn)化的漏斗。所以我們在設(shè)計時，還是要先貫徹交互設(shè)計的第一策略：合理刪除，先做減法，盡可能地減少用戶的操作步驟。

2. 在操作步驟確認的情況下，盡可能的減少每一步的操作負荷

降低單個步驟的操作負荷，常用的指導原則是費茨定律。

費茨定律告訴我們，操作負荷與操作對象的距離、和大小有關(guān)。

想讓用戶快捷地完成操作，需要盡可能的加大操作對象的面積，并減小與操作對象的距離。

▲圖10增大操作面積降低操作成本

比如vivo瀏覽器的搜索框的設(shè)計，當把搜索框的高度增加后，不僅用戶反饋滿意度提高了，而且點擊率也有微漲。

▲圖11減小操作距離降低操作成本

再比如手機系統(tǒng)的搜索設(shè)計，按照用戶固有的認知和習慣，多是位于屏幕上方的，但Android最新系統(tǒng)把搜索放到了底部，確實對于高頻搜索的用戶來講，點擊會更加方便。

除了根據(jù)費茨定律得出：

1. 交互對象面積越大越易用。
2. 交互對象距離越短越易用。

之外，考慮到人的手指在屏幕上滑動的軌跡很難做到直線，穩(wěn)定維持以及多指觸控，所以，

1. 交互方向越寬泛越易用。（要注意和其他交互方向的沖突避免誤觸）
2. 交互時間越短越易用。（所以點擊的易用性大于長按和雙擊）
3. 交互接觸點越少越易用。（單指易用性大于多指）

綜上所述，要降低用戶在觸屏上的操作成本，我們可以從大小、距離、方向、時間、觸點五個維度來綜合考慮。

好了，交互設(shè)計之降低用戶負荷，就介紹完畢了，我將在明天為大家更新《交互設(shè)計之提升用戶動機》，咱們分4篇文章，將福格行為模型的行為設(shè)計講透徹，歡迎持續(xù)關(guān)注~

#專欄作家#

悅有所思，人人都是產(chǎn)品經(jīng)理專欄作家。10年體驗設(shè)計經(jīng)驗，崇尚理論指導實踐，實踐迭代理論，熱衷于學習、解構(gòu)、建構(gòu)、傳播交互設(shè)計、服務(wù)設(shè)計、行為設(shè)計等設(shè)計相關(guān)領(lǐng)域知識。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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