前言

隨著產(chǎn)品不斷迭代，產(chǎn)品功能會(huì)逐漸豐富全面，但對(duì)于用戶(hù)來(lái)說(shuō)，是不是齊全的功能就等同于好的體驗(yàn)?zāi)?？本文將?quot;騰訊會(huì)議設(shè)置布局"交互優(yōu)化為例，結(jié)合《設(shè)計(jì)心理學(xué) 2》的相關(guān)理論，分享關(guān)于簡(jiǎn)化復(fù)雜任務(wù)的設(shè)計(jì)心得。

一、為何要"簡(jiǎn)化"任務(wù)

一款產(chǎn)品是不是功能越齊全多樣就意味著越好的產(chǎn)品體驗(yàn)?zāi)兀?/p>

對(duì)于專(zhuān)家用戶(hù)來(lái)說(shuō)，當(dāng)然是功能越全面越能滿(mǎn)足自己的需求，但對(duì)于新手用戶(hù)來(lái)說(shuō)，全面的功能未必等同最佳的體驗(yàn)，過(guò)多操作擠在同一任務(wù)中，可能會(huì)讓用戶(hù)感到不知所措，難以上手。因此設(shè)計(jì)師應(yīng)盡可能幫助用戶(hù)簡(jiǎn)化任務(wù)，避免用戶(hù)因?yàn)榻缑鎻?fù)雜而放棄任務(wù)。

專(zhuān)業(yè)類(lèi)軟件的核心用戶(hù)通常是掌握某項(xiàng)技能的專(zhuān)家用戶(hù)，他們?cè)谑褂们?，已?jīng)有預(yù)期需要先系統(tǒng)學(xué)習(xí)整個(gè)軟件的操作，因此它們的復(fù)雜和全面是符合專(zhuān)家用戶(hù)要求的。

即便如此，近年來(lái)，F(xiàn)igma 之類(lèi)的軟件也在持續(xù)打磨易用性，降低用戶(hù)使用門(mén)檻。

專(zhuān)業(yè)圖形建模類(lèi)軟件操作界面

作為一款面向普通大眾、以高效協(xié)同為第一初衷的產(chǎn)品，騰訊會(huì)議更需要不斷簡(jiǎn)化復(fù)雜操作，讓大多數(shù)用戶(hù)都能快速上手，流暢地主持或參與一場(chǎng)會(huì)議。下面我將結(jié)合騰訊會(huì)議設(shè)置布局的交互優(yōu)化案例，來(lái)分享關(guān)于簡(jiǎn)化復(fù)雜任務(wù)的一點(diǎn)點(diǎn)心得。

會(huì)議場(chǎng)景矩陣

相比線(xiàn)下會(huì)議，線(xiàn)上開(kāi)會(huì)不免缺乏臨場(chǎng)感，因此在騰訊會(huì)議里，主持人常常需要通過(guò)設(shè)置布局來(lái)讓成員關(guān)注重要的視頻畫(huà)面。在無(wú)特殊需求的普通會(huì)議中，官方提供的兩種默認(rèn)布局就能滿(mǎn)足常見(jiàn)的會(huì)議場(chǎng)景：

騰訊會(huì)議默認(rèn)布局

實(shí)際上，真實(shí)的會(huì)議場(chǎng)景需求多種多樣。例如，企業(yè)匯報(bào)更關(guān)注發(fā)言人，而小組討論則更側(cè)重輕松的溝通，如何在同一個(gè)界面里滿(mǎn)足不同的訴求成為難點(diǎn)。為此，騰訊會(huì)議在默認(rèn)布局的基礎(chǔ)上，推出了"自定義布局"和"會(huì)聚模式"功能，來(lái)提供更豐富的會(huì)議布局選擇。

豐富的布局模式

因概念陌生，且需要設(shè)置成員順序、位置以及畫(huà)面比例，對(duì)于普通用戶(hù)來(lái)說(shuō)，這兩個(gè)功能有一定的使用門(mén)檻。在該功能推出一段時(shí)間后，我們發(fā)現(xiàn)：用戶(hù)普遍找不到設(shè)置布局的入口，在具體設(shè)置過(guò)程中也遇到較多困難，認(rèn)為設(shè)置布局是"高階"而"復(fù)雜"的功能而不愿嘗試。要讓用戶(hù)能把布局能力真正用起來(lái)，簡(jiǎn)化布局的設(shè)置過(guò)程就顯得尤為重要。

布局操作路徑

為了探究具體是什么原因讓用戶(hù)覺(jué)得功能復(fù)雜，我們開(kāi)展了易用性測(cè)試，得出以下幾個(gè)交互層面的具體問(wèn)題，包括：1）入口難找；2）操作難理解；3）流程任務(wù)多；4）效果無(wú)預(yù)期。

因此簡(jiǎn)化任務(wù)流程是當(dāng)下急需解決的問(wèn)題。

具體問(wèn)題

二、復(fù)雜任務(wù)的"簡(jiǎn)化"原則

那么如何才能把任務(wù)變得簡(jiǎn)單呢？依照諾曼的《設(shè)計(jì)心理學(xué) 2—如何管理復(fù)雜》一書(shū)中所說(shuō)，系統(tǒng)復(fù)雜性的總量是恒定的，想要用戶(hù)操作變簡(jiǎn)單，那隱藏在幕后的復(fù)雜性就要增加，在管理復(fù)雜時(shí)，可以從以下角度出發(fā)：

1. 良好的概念模型
2. 易懂的語(yǔ)義符號(hào)
3. 自動(dòng)化、模塊化的配置
4. 鼓勵(lì)和系統(tǒng)默認(rèn)
5. 組織結(jié)構(gòu)
6. 學(xué)習(xí)的輔助工具

如何管理復(fù)雜

"概念模型"存儲(chǔ)在用戶(hù)腦中，也被叫做心理模型，它能幫助我們快速理解事物運(yùn)作的背后邏輯。若我們的界面沒(méi)有準(zhǔn)確地傳達(dá)出概念模型，用戶(hù)就需要通過(guò)不斷地摸索和猜測(cè)來(lái)嘗試，最終很有可能因?yàn)椴焕斫馄浜x而失去耐心。設(shè)計(jì)師應(yīng)當(dāng)通過(guò)淺顯易懂的語(yǔ)義符號(hào)，幫助用戶(hù)構(gòu)建合適的概念模型，以幫助他們更好地理解產(chǎn)品功能和操作邏輯。像 iphone 的"開(kāi)鎖"提示、微信的"漂流瓶"、深澤直人的 CD 機(jī)，都是通過(guò)用戶(hù)生活中熟悉的物理模型，讓用戶(hù)快速聯(lián)想到熟悉的事物，從而更好地理解接下來(lái)需要與產(chǎn)品互動(dòng)的操作。

概念模型案例

"自動(dòng)化"選項(xiàng)和默認(rèn)配置，則能幫助用戶(hù)擺脫繁瑣的選項(xiàng)和步驟。我們可以基于對(duì)場(chǎng)景和用戶(hù)習(xí)慣的了解，提供常見(jiàn)的選擇或智能配置。例如在表單設(shè)置頁(yè)內(nèi)提供默認(rèn)的模板和樣式，能夠讓用戶(hù)更輕松地理解產(chǎn)品功能和效果。相比起手動(dòng)添加內(nèi)容，可以大大減少理解成本，幫助用戶(hù)更輕松地完成設(shè)置過(guò)程。

通過(guò)"自動(dòng)化"簡(jiǎn)化用戶(hù)操作

"組織結(jié)構(gòu)"是指把集中在同一個(gè)頁(yè)面的任務(wù)進(jìn)行結(jié)構(gòu)重組，拆分成易于操作的小步驟，并保證每個(gè)模塊都簡(jiǎn)單易學(xué)，容易理解。用戶(hù)在進(jìn)入一個(gè)鋪滿(mǎn)選項(xiàng)和操作的頁(yè)面時(shí)，通常會(huì)不知所措，不知道從哪一部分先開(kāi)始。或許本身設(shè)置的難度并不大，但復(fù)雜的設(shè)置項(xiàng)也會(huì)在心理上給用戶(hù)帶來(lái)巨大的壓力，從本能上抗拒和排斥。好比完成一場(chǎng)馬拉松可以把每 5km 作為一個(gè)里程碑去逐個(gè)擊破，倘若我們能將原本用戶(hù)覺(jué)得困難的大目標(biāo)拆解成一個(gè)個(gè)簡(jiǎn)單的小目標(biāo)，明確每個(gè)步驟應(yīng)該做什么，并在完成每個(gè)步驟后都給予充分的鼓勵(lì)和反饋，用戶(hù)就會(huì)有持續(xù)去完成設(shè)置的耐心和動(dòng)力。

拆解關(guān)鍵步驟

"學(xué)習(xí)的輔助工具"是指在合適的時(shí)機(jī)給予用戶(hù)有效的幫助指引和提示，對(duì)于 Saas 類(lèi)產(chǎn)品來(lái)說(shuō)，在用戶(hù)需要的時(shí)候及時(shí)提供幫助和指導(dǎo)，能給用戶(hù)充分的安全感，緩解用戶(hù)操作時(shí)的不安和緊張。關(guān)于操作的提示，我們不能只是告知用戶(hù)哪里出錯(cuò)了，更重要的是給出原因并提供解決方案。提前引導(dǎo)而非指責(zé)，將能大大提升用戶(hù)持續(xù)操作和探索的信心。另外需要注意的是，用戶(hù)很可能第一次遇到時(shí)未必能記住所有指引的內(nèi)容，因此對(duì)于復(fù)雜的操作任務(wù)，還需要提供穩(wěn)定常駐的幫助入口，便于用戶(hù)二次查閱。

輔助學(xué)習(xí)

三、產(chǎn)品"簡(jiǎn)化"的設(shè)計(jì)策略

有了設(shè)計(jì)原則的指導(dǎo)，我們的設(shè)計(jì)目標(biāo)也會(huì)更加清晰。在具體的方案設(shè)計(jì)層面，我們需要結(jié)合設(shè)計(jì)對(duì)象的特點(diǎn)，將理論指導(dǎo)轉(zhuǎn)化成可落地的設(shè)計(jì)方案。

布局設(shè)置一般由主持人在會(huì)議中統(tǒng)一設(shè)置，因此在場(chǎng)景上，具有"設(shè)置時(shí)間緊張"、"自定義程度高"、"生效范圍廣"、"角色復(fù)雜"等特點(diǎn)。結(jié)合前文梳理的設(shè)計(jì)理論原則及業(yè)務(wù)場(chǎng)景特點(diǎn)，我們將設(shè)計(jì)理論轉(zhuǎn)化成了具體可落地的設(shè)計(jì)策略。

設(shè)計(jì)策略

具體包括以下四點(diǎn)：

1. 簡(jiǎn)化入口，及時(shí)幫助

通過(guò)便捷的入口和及時(shí)的引導(dǎo)，讓功能在合適的時(shí)機(jī)曝光，保證用戶(hù)在需要時(shí)輕松地找到功能。針對(duì)"入口深"這個(gè)問(wèn)題，我們將原本不穩(wěn)定的入口改為常駐入口，待用戶(hù)選擇布局后再提示相應(yīng)條件，及時(shí)引導(dǎo)用戶(hù)在使用前先打開(kāi)攝像頭。同時(shí)在移動(dòng)端和應(yīng)用面板也都增加入口，降低用戶(hù)尋找的門(mén)檻。

增加入口

另一方面，我們將原本需從客戶(hù)端跳轉(zhuǎn)到 Web 頁(yè)面的操作，都簡(jiǎn)化至客戶(hù)端內(nèi)，減少用戶(hù)跨端操作，避免因?yàn)檫^(guò)多的窗口跳轉(zhuǎn)讓用戶(hù)感到迷惑。同時(shí)精簡(jiǎn)了高級(jí)功展示，在會(huì)議的客戶(hù)端只保留核心操作，這樣用戶(hù)就不需要在多個(gè)頁(yè)面之間來(lái)回跳轉(zhuǎn)，完成設(shè)置項(xiàng)后，也可以在會(huì)議的客戶(hù)端立即生效。

縮短路徑，減少跳轉(zhuǎn)

考慮到新手用戶(hù)并不一定能理解"布局"、"輪詢(xún)"等功能的作用，我們?cè)陧?yè)面頂部增加"新手指引"常駐入口，用戶(hù)可以通過(guò)步驟引導(dǎo)圖來(lái)詳細(xì)了解每一步操作。對(duì)于用戶(hù)比較陌生的高級(jí)功能，也在功能的啟用選項(xiàng)旁提供 GIF 動(dòng)圖，幫助用戶(hù)全面、直觀地了解功能。

通過(guò)新手指引快速學(xué)習(xí)

2. 自動(dòng)配置，提供模板

"系統(tǒng)默認(rèn)"具體落地到設(shè)計(jì)方案，即可以根據(jù)用戶(hù)的使用頻率，自動(dòng)設(shè)置常用選項(xiàng)，同時(shí)提供默認(rèn)模板，減少用戶(hù)的決策壓力和理解成本。例如，用戶(hù)在進(jìn)入設(shè)置頁(yè)時(shí)，可能不太理解"布局"、"視圖"、"背景圖"及"模式"等陌生的概念名詞之間的區(qū)別，也不知道這些布局樣式適用的場(chǎng)景，因此，我們通過(guò)提供默認(rèn)模板和效果示意，幫助用戶(hù)快速理解概念之間的區(qū)別和不同的效果。

常見(jiàn)模板及官方背景圖

同時(shí)考慮到自主設(shè)置有一定操作門(mén)檻，我們把常用的樣式增加到默認(rèn)列表中，用戶(hù)選中后就可以直接使用（左圖，L 布局）。對(duì)于座位設(shè)置功能，我們也提供了"自動(dòng)填充"的默認(rèn)選項(xiàng)，新手用戶(hù)可直接選擇自動(dòng)排序，快速使用布局功能，而專(zhuān)家用戶(hù)若有特定的排座訴求，則可以切換到"手動(dòng)模式"來(lái)進(jìn)行更高級(jí)的設(shè)置（右圖，設(shè)置座位）。

提供多種模式，滿(mǎn)足不同訴求

3. 拆解任務(wù)，分解流程

"簡(jiǎn)化復(fù)雜頁(yè)面"非常重要的一個(gè)方面是重組頁(yè)面結(jié)構(gòu)，把聚合在一個(gè)頁(yè)面的任務(wù)根據(jù)先后順序拆解成不同的步驟，讓用戶(hù)不再迷失于平鋪了多個(gè)功能的龐大頁(yè)面。

拆解步驟

拆解成小步驟后，可以通過(guò)增加步驟條導(dǎo)航和引導(dǎo)提示，讓用戶(hù)更明確每個(gè)子環(huán)節(jié)的"小目標(biāo)"和當(dāng)前所處的進(jìn)度階段。

通過(guò)導(dǎo)航降低用戶(hù)心理門(mén)檻

除了將一個(gè)頁(yè)面拆解成多個(gè)步驟，還可以通過(guò)收起/隱藏側(cè)邊欄目錄，讓用戶(hù)更聚焦在某一具體的內(nèi)容，免除其他元素的干擾，這樣用戶(hù)能更專(zhuān)注于布局畫(huà)面本身的編輯。

4. 效果預(yù)覽，建立聯(lián)想

新手用戶(hù)初次設(shè)置布局時(shí)，可能缺乏安全感，不知道應(yīng)用范圍是自己還是全部成員。為此，在設(shè)計(jì)客戶(hù)端的設(shè)置流程時(shí)，我們提供了"場(chǎng)景示意圖"和"效果預(yù)覽區(qū)"，讓用戶(hù)在編輯的過(guò)程中也能快捷地聯(lián)想到應(yīng)用后的效果，實(shí)現(xiàn)所見(jiàn)即所得。

除了官方提供的場(chǎng)景圖模板，用戶(hù)還可以根據(jù)自己的訴求在編輯器內(nèi) DIY 創(chuàng)作自己的場(chǎng)景圖?？紤]到對(duì)于新手用戶(hù)來(lái)說(shuō)，場(chǎng)景圖編輯器的功能有一定使用門(mén)檻，在進(jìn)入編輯器時(shí)，我們都會(huì)提示用戶(hù)，可以通過(guò)調(diào)整模板場(chǎng)景圖來(lái)快速上手，理解創(chuàng)作后的效果。

通過(guò)效果圖構(gòu)建聯(lián)想

對(duì)于設(shè)置了座位、但未開(kāi)啟攝像頭的成員，我們通過(guò)"銘牌"的概念模型，讓用戶(hù)能夠聯(lián)想到線(xiàn)下會(huì)議室里的"座位牌"，從而更好地理解這個(gè)座位已被主持人提前預(yù)留給了重要的成員。

通過(guò)概念模型映射，幫助用戶(hù)理解抽象概念

可以看到，無(wú)論是場(chǎng)景效果"示意圖"還是"名牌"的概念模型，都是通過(guò)真實(shí)世界里的元素，喚起用戶(hù)在真實(shí)世界的心智，從而幫助用戶(hù)更快地理解軟件界面的功能邏輯。

總結(jié)與回顧

經(jīng)過(guò)持續(xù)半年的方案打磨和研發(fā)落地，上文提及的改版方案已全部上線(xiàn)，會(huì)聚模式和自定義布局的滲透率都有了非常大的提升。

通過(guò)該項(xiàng)目我們知道，在面對(duì)場(chǎng)景復(fù)雜多樣的產(chǎn)品時(shí)，我們需要遵循一些通用的簡(jiǎn)化設(shè)計(jì)策略，綜合考慮不同用戶(hù)的認(rèn)知門(mén)檻，盡可能降低上手難度。具體策略包括"簡(jiǎn)化功能入口"、"提供默認(rèn)設(shè)置"、"拆解復(fù)雜流程"、"構(gòu)建聯(lián)想概念"等。

為用戶(hù)打造更簡(jiǎn)易的使用流程，一步步簡(jiǎn)化用戶(hù)設(shè)置任務(wù)的操作，才能從根本上提升用戶(hù)使用產(chǎn)品的效率。

作者：騰訊設(shè)計(jì)族