從界面模式的角度,談?wù)劮答佋O(shè)計(jì)

0 評(píng)論 5523 瀏覽 24 收藏 17 分鐘

生活中充斥著各種各樣的反饋,而我們就是在這些輸入輸出中認(rèn)知事物。本文以界面模式的角度,聊一聊反饋模式,enjoy~

開燈會(huì)有光、開風(fēng)扇會(huì)有風(fēng),開電視會(huì)有影像……生活中充斥著各種各樣的反饋,而我們就是在這些輸入輸出中認(rèn)知事物。同樣,我們向系統(tǒng)輸入一些指令,如果沒(méi)有收到反饋,我們不可能認(rèn)知一個(gè)系統(tǒng)。

我之前已經(jīng)寫過(guò)一篇文章聊了一下反饋的重要性,當(dāng)時(shí)說(shuō)的是一種廣義的反饋,今天再以界面模式的角度,聊一聊反饋模式。

反饋的場(chǎng)景

回想一下一些生活場(chǎng)景:當(dāng)你想讓你的男/女朋友幫忙倒杯水,會(huì)有怎樣的情況會(huì)發(fā)生?

可能會(huì)這樣:

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

又或者這樣:

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

在上述場(chǎng)景中,我們可以看出任務(wù)是在多輪的執(zhí)行與反饋中完成的。而且每次反饋都會(huì)基于不同的場(chǎng)景。我們來(lái)拆解一下:

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

或者

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

可見,在日常生活中,我們可以有8種出現(xiàn)反饋的場(chǎng)景。同理,在人和系統(tǒng)的交互中,也會(huì)這8種場(chǎng)景。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

而每種場(chǎng)景都會(huì)有不同的原因、對(duì)被反饋者的決策要求和信息輸入要求等等。所以,如果界面模式需要覆蓋以上場(chǎng)景,單一的反饋模式遠(yuǎn)遠(yuǎn)不夠,而事實(shí)上現(xiàn)有的反饋模式確實(shí)是多種多樣的。

現(xiàn)有的反饋模式

1. 狀態(tài)切換

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

狀態(tài)切換是指用戶與界面元素交互的過(guò)程中,界面元素的狀態(tài)發(fā)生了變化,比如鼠標(biāo)懸停到按鈕中,按鈕會(huì)有高亮的顯示,當(dāng)鼠標(biāo)點(diǎn)擊按鈕時(shí),按鈕又有其他的變化等等。這是一種非常輕量而且常見的反饋模式。

而我個(gè)人認(rèn)為這也是一種最基礎(chǔ)最重要的反饋模式。好比,我們呼喊一個(gè)人的時(shí)候會(huì)預(yù)期他們會(huì)作出響應(yīng),所以,在我們操作系統(tǒng)的時(shí)候,同樣也會(huì)預(yù)期有響應(yīng),而狀態(tài)切換正契合我們這種預(yù)期。

分享一個(gè)經(jīng)歷,在一次用戶測(cè)試中,我們的系統(tǒng)出現(xiàn)了BUG:用戶填寫完彈窗上的表單后點(diǎn)擊保存,彈窗沒(méi)有關(guān)閉,但仍然出現(xiàn)一個(gè)Toast提示“保存成功”。我原以為這是一個(gè)不太嚴(yán)重的BUG,最多只會(huì)增加用戶的操作步驟去關(guān)閉彈窗,不會(huì)影響用戶整個(gè)任務(wù)的完成。

然而,用戶在此彈窗上足足停留了兩分多鐘,最后得知是因?yàn)椋核X(jué)得彈窗沒(méi)有自動(dòng)關(guān)閉就是沒(méi)有保存成功,但系統(tǒng)仍然提示“保存成功”,所以很疑惑到底有沒(méi)有保存成功。同時(shí)他不敢關(guān)閉彈窗,因?yàn)樗聸](méi)有保存,不想重頭再來(lái)。

這個(gè)經(jīng)歷提醒我,狀態(tài)切換能給予用戶最直觀的回應(yīng),一旦反饋缺失即會(huì)使用戶發(fā)生認(rèn)知沖突,而后果可能會(huì)很嚴(yán)重。

回到狀態(tài)切換這種反饋模式,它可以適用于很多場(chǎng)景:收到請(qǐng)求、遇到阻礙、遇到風(fēng)險(xiǎn)請(qǐng)?jiān)俅未_認(rèn)、等待中、任務(wù)完成等等。

2. 加載

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

加載能表示系統(tǒng)正在運(yùn)行,需要用戶再稍等片刻。通常,都會(huì)用一些小動(dòng)效來(lái)表現(xiàn)加載中,以降低用戶在等待中的焦慮感,甚至有些產(chǎn)品會(huì)以不同的等待時(shí)間劃分加載動(dòng)效。例如:去哪兒的加載動(dòng)效以0-3秒、3-6秒和6秒以上,三種時(shí)長(zhǎng)來(lái)提供不同的動(dòng)效。

這樣做的好處在于,能持續(xù)地給予用戶反饋,讓用戶知道系統(tǒng)確實(shí)在運(yùn)行中,而不是卡死在這里。否則用戶可能會(huì)頻繁地刷新頁(yè)面,或者直接離開。

加載模式可以分為模態(tài)加載和非模態(tài)加載:模態(tài)加載即在加載過(guò)程中不允許用戶進(jìn)行其他操作,非模態(tài)加載即允許用戶其他操作。設(shè)計(jì)時(shí)要特別留意考慮周全,因?yàn)楹芏鄷r(shí)候我們會(huì)忽略兩者的區(qū)別,過(guò)多地使用模態(tài)加載。

3. Toast

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

Toast在移動(dòng)端非常常見,是一個(gè)很輕量的反饋模式,打斷感弱。Toast適用于:任務(wù)完成、遇到阻礙等場(chǎng)景。弊端在于不能承載過(guò)多的內(nèi)容。而且提醒性較弱,用戶往往會(huì)將其忽略。

4. Snackbar

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

Snackbar與Toast提示類似,不同點(diǎn)在于:

  1. Snackbar位于界面頂部或底部,對(duì)內(nèi)容的遮擋更弱。
  2. 可以帶有操作按鈕允許用戶繼續(xù)操作。
  3. 能提供不同的顏色,可以用顏色區(qū)分信息的重要程度。

可以說(shuō)Snackbar是Toast的加強(qiáng)版,適用于:任務(wù)完成、遇到阻礙和提供更多可選方案等場(chǎng)景。

5. 氣泡

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

氣泡在移動(dòng)端和PC端都很常見,適用場(chǎng)景也很廣泛,包括:任務(wù)不明確、遇到阻礙、遇到風(fēng)險(xiǎn)和提出更多選擇。氣泡有諸多優(yōu)點(diǎn):

  1. 屬于非模態(tài)提示,打斷感較輕。
  2. 出現(xiàn)位置在操作區(qū)域附近,用戶不容易忽略,同時(shí)符合菲茨定律,使得用戶操作更輕快。
  3. 可拓展性強(qiáng),能承載各種樣式的內(nèi)容。

而缺點(diǎn)在于空間有限,無(wú)法適用于內(nèi)容較多的情況。

6. Action Sheet

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

Action Sheet 與氣泡提示類似,有同樣的適用場(chǎng)景。而且具有更強(qiáng)的拓展性,即使遇到內(nèi)容較多的情況也游刃有余。由于極高的可拓展性,它不僅僅能用于反饋,還能適配成為各類的界面模式,如信息錄入、信息列表、詳情展示等等。而且能減少頁(yè)面跳轉(zhuǎn),讓界面層級(jí)扁平化。所以,Action Sheet 這種模式也正越來(lái)越流行。

7. 彈窗

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

可以說(shuō),彈窗是一個(gè)萬(wàn)能的反饋模式,可用于所有的場(chǎng)景。但由于彈窗的打斷感極強(qiáng),所以需要謹(jǐn)慎使用。

8. 整頁(yè)反饋

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

整頁(yè)反饋即使用一整個(gè)界面來(lái)顯示反饋信息,通常用于任務(wù)完成的場(chǎng)景。當(dāng)用戶任務(wù)的步驟比較多時(shí),可能需要用到整頁(yè)反饋。如下圖,當(dāng)用戶從一個(gè)主頁(yè)面的任務(wù)入口進(jìn)入任務(wù)時(shí),他需要執(zhí)行多個(gè)步驟,而當(dāng)任務(wù)完成時(shí),他需要返回主頁(yè)面而不是上一步驟的頁(yè)面。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

這種情況下,整頁(yè)反饋能讓用戶離開整個(gè)任務(wù),而不是仍停留在任務(wù)的某個(gè)節(jié)點(diǎn)。而在PC端,整頁(yè)反饋通常會(huì)與向?qū)ЫM件一起使用,讓用戶清楚了解任務(wù)的步驟和終點(diǎn),如下圖。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

9. 批量操作反饋

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

批量操作反饋是一個(gè)比較特殊的反饋模式,通常在B端產(chǎn)品才能看到。因?yàn)锽端用戶會(huì)經(jīng)常批量操作,但如果將操作后的結(jié)果一條條反饋給用戶顯然不實(shí)際,所以批量操作通常是集合式地將信息反饋給用戶。

一些思考點(diǎn)

1. 打斷感、頻次與注意力

打斷感對(duì)用戶的注意力有顯著影響,打斷感越強(qiáng)的模式越能吸引用戶的注意力。除打斷感外,頻次也同樣影響著注意力。

《邏輯思維》其中一期《這起醫(yī)療事故是誰(shuí)的錯(cuò)?》中舉了一實(shí)例:“在一次診斷中,醫(yī)生失誤開出遠(yuǎn)超安全標(biāo)準(zhǔn)劑量的藥物,醫(yī)療系統(tǒng)也給出了警報(bào),但醫(yī)生卻把警報(bào)忽略了,而導(dǎo)致了悲劇的發(fā)生”。但這不能全怪醫(yī)生,因?yàn)橐粋€(gè)臨床醫(yī)生每個(gè)月面對(duì)系統(tǒng)發(fā)出的警報(bào)有一萬(wàn)七千多條,在這種頻次下,誰(shuí)都會(huì)將警報(bào)當(dāng)耳邊風(fēng)。

所以,為了讓用戶能更專注于一些重要的提醒,我們的策略應(yīng)該是:讓打斷感強(qiáng)的模式更低頻出現(xiàn),讓高頻但次要的信息以打斷感更弱的形式呈現(xiàn)。如下圖,每種場(chǎng)景下的適用反饋模式有多種,模式的打斷感從左往右依次增強(qiáng),我們應(yīng)該盡量使用靠左的反饋模式。而彈窗作為一種已知的打斷感最強(qiáng)的模式,我們應(yīng)非??酥频厥褂盟?。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

另外,針對(duì)一些反饋頻次更多的B端產(chǎn)品,我們可以擴(kuò)展各個(gè)模式的顆粒度,讓不同重要程度的信息能有更細(xì)致的區(qū)分。例如下圖,ant design 的toast(其稱為message提示),將不同的結(jié)果按不同的顏色區(qū)分,如此一來(lái)用戶就可以通過(guò)顏色分辨他需要關(guān)注的信息。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

2. 時(shí)間

一些反饋模式會(huì)帶有時(shí)間屬性,例如Toast,它出現(xiàn)后會(huì)自動(dòng)消失,所以我們需要定義它的停留時(shí)間。2-3秒是現(xiàn)今比較常見的時(shí)長(zhǎng),但這種簡(jiǎn)單的邏輯能覆蓋的場(chǎng)景其實(shí)非常有限。

  • 首先,不同類型的反饋信息,用戶的關(guān)注程度不一樣,所以閱讀時(shí)間也不一樣。例如任務(wù)出錯(cuò)比任務(wù)成功的內(nèi)容需要消化的時(shí)間會(huì)截然不同。
  • 其次,反饋內(nèi)容的長(zhǎng)度也會(huì)影響時(shí)間。較長(zhǎng)的文本肯定需要更長(zhǎng)的時(shí)間去消化,而且較長(zhǎng)的問(wèn)題通常是比較特殊的場(chǎng)景下才出現(xiàn),不具備通用性,用戶理解起來(lái)也會(huì)更費(fèi)勁。
  • 最后,在高頻反饋的場(chǎng)景下,對(duì)時(shí)間的需求也會(huì)不一樣。例如,用戶操作單次時(shí),Toast停留3秒沒(méi)有問(wèn)題,但當(dāng)用戶重復(fù)多次操作時(shí),多條Toast就會(huì)在提留時(shí)間內(nèi)重疊顯示。

所以,盡管是一個(gè)停留時(shí)間,我們也應(yīng)該對(duì)各種場(chǎng)景考慮周到,并歸類抽象出共性再定義時(shí)間的規(guī)則。

3. 位置

在我看來(lái),在移動(dòng)端反饋的出現(xiàn)位置其實(shí)并不是一個(gè)需要十分考究的點(diǎn),因?yàn)槠聊痪湍敲创?,無(wú)論在哪用戶都容易發(fā)現(xiàn)。但是在PC端卻是一個(gè)需要考究的問(wèn)題,因?yàn)槠聊粫?huì)大很多,在一些區(qū)域用戶很可能感知不到反饋的出現(xiàn)。

一些學(xué)者已經(jīng)指出,用戶在瀏覽網(wǎng)頁(yè)時(shí)對(duì)各個(gè)區(qū)域的偏好:中部為最高注視區(qū),而其他區(qū)域的關(guān)注度從左上角到右下角依次遞減,如下圖。這是一個(gè)非常有用的參考,我們可以根據(jù)信息的重要程度來(lái)定義反饋模式應(yīng)該在哪個(gè)區(qū),不干擾用戶的同時(shí)又不被用戶忽略。

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

另外一個(gè)問(wèn)題是大屏的趨勢(shì)。2k屏、4K屏甚至AR、VR等無(wú)邊界界面的流行,使得屏幕邊緣的信息將會(huì)越來(lái)越弱化,因?yàn)樗鼈冸x視中心會(huì)越來(lái)越遠(yuǎn)。這會(huì)使得反饋位置的定位方式發(fā)生改變:從以屏幕邊緣為錨點(diǎn)轉(zhuǎn)向以屏幕中心為錨點(diǎn)。這兩種選擇會(huì)在大小屏切換時(shí)呈現(xiàn)不一樣的效果,如下圖:

反饋設(shè)計(jì)的9種模式、8個(gè)場(chǎng)景及4個(gè)思考點(diǎn)

4. 反饋遠(yuǎn)不止反饋

讓我們跳出反饋的框架看一看,其實(shí)僅僅提供反饋是遠(yuǎn)不夠的:當(dāng)用戶收到一個(gè)報(bào)錯(cuò)反饋時(shí),他不是想要知道錯(cuò)誤的原因,而是需要知道下一步要怎么做;當(dāng)用戶收到一個(gè)警報(bào)信息時(shí),用戶不是想要知道原因,而是要知道如何解決。

一種好的反饋模式不僅僅是反饋,更是一種導(dǎo)航,引導(dǎo)用戶下一步應(yīng)該做什么、怎么解決問(wèn)題。真正能讓用戶開心的反饋永遠(yuǎn)只有一個(gè),就是“任務(wù)成功”,所以在給出反饋之前,我們應(yīng)該好好想想,怎么才能讓用戶更簡(jiǎn)單地到達(dá)這一步。

#專欄作家#

Genrry,公眾號(hào):設(shè)計(jì)師阿余,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注用戶體驗(yàn),擅長(zhǎng)多端交互設(shè)計(jì)、界面設(shè)計(jì)。曾負(fù)責(zé)大型B端產(chǎn)品及VR游戲產(chǎn)品體驗(yàn)設(shè)計(jì),制定設(shè)計(jì)規(guī)范,打磨細(xì)節(jié)體驗(yàn),探索創(chuàng)新交互體驗(yàn)。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!