本文是筆者負(fù)責(zé)微眾銀行App設(shè)計(jì)規(guī)范時(shí)，引發(fā)的“反饋設(shè)計(jì)”相關(guān)思考。本文中，筆者具體介紹了什么是反饋設(shè)計(jì)以及反饋設(shè)計(jì)中要注意的要點(diǎn)。

這是負(fù)責(zé)微眾銀行App部分交互規(guī)范時(shí)寫的，在這個(gè)過(guò)程中，思考了一些規(guī)范定義的問(wèn)題……后來(lái)延伸至到“反饋設(shè)計(jì)”的思考，于是就有了這篇文章。

這里需要說(shuō)明一點(diǎn)，以下所講的反饋設(shè)計(jì)主要針對(duì)App渠道來(lái)說(shuō)。在實(shí)際設(shè)計(jì)中，反饋的渠道不僅只有App，還包含短信、電話、郵件、微信公眾號(hào)等渠道。

一、什么是反饋設(shè)計(jì)

用戶在日常使用App操作各種流程中，會(huì)遇到各種信息反饋，如：進(jìn)度條指示、購(gòu)買確認(rèn)信息、填寫錯(cuò)誤提示、購(gòu)物車添加動(dòng)效等，這些都屬于信息反饋。而信息反饋的目的是告知用戶自己操作的結(jié)果，以及系統(tǒng)發(fā)生的變化。換句話說(shuō)，就是讓用戶明白發(fā)生了什么。

如果從交互類型來(lái)看，我們可以把反饋信息分為兩種類型，一種是非模態(tài)反饋，另一種是模態(tài)反饋。

非模態(tài)反饋，是將信息反饋干擾度最小化地傳達(dá)給用戶。

模態(tài)反饋，則是強(qiáng)調(diào)反饋信息的重要性，一般帶有可操作的選項(xiàng)。

這兩種類型最大的差異在于“反饋信息是否會(huì)中斷當(dāng)前的操作流程”。

二、如何做好反饋設(shè)計(jì)

對(duì)于反饋設(shè)計(jì)來(lái)說(shuō)，可以分為三個(gè)步驟：確定恰當(dāng)?shù)哪Ｊ健⒃O(shè)計(jì)清晰的內(nèi)容、及時(shí)告知用戶。它們相互作用影響反饋設(shè)計(jì)方案的體驗(yàn)，所以單獨(dú)考慮其中一點(diǎn)是不合適的，需要做一個(gè)全局的權(quán)衡。

第一步：確定恰當(dāng)?shù)哪Ｊ?/h3>

在反饋設(shè)計(jì)中，反饋信息需要通過(guò)恰當(dāng)?shù)哪Ｊ?，傳達(dá)給用戶。讓用戶知道發(fā)生了什么。前面也簡(jiǎn)單介紹了非模態(tài)反饋和模特反饋這兩種類型，而在實(shí)際運(yùn)用中，還需要考慮場(chǎng)景來(lái)選擇恰當(dāng)?shù)哪Ｊ健?/p>

對(duì)于大多數(shù)反饋場(chǎng)景來(lái)說(shuō)，在用戶獲知反饋信息時(shí)，要盡量減少對(duì)流程操作的影響，避免為了獲取反饋信息，而出現(xiàn)中斷操作流程的情況。因此采用非模態(tài)反饋，可以有效的引導(dǎo)用戶正確完成流程；

如：在按鈕的反饋設(shè)計(jì)中，當(dāng)操作不被允許時(shí)，對(duì)按鈕進(jìn)行置灰處理，比使用模態(tài)對(duì)話框告知用戶的反饋方案要更友善，因?yàn)槟B(tài)對(duì)話框會(huì)打斷當(dāng)前用戶的操作流程，還會(huì)擋住所出現(xiàn)的問(wèn)題。

總的來(lái)說(shuō)，非模態(tài)反饋的優(yōu)點(diǎn)是不打斷用戶的操作。缺點(diǎn)則是用戶容易忽略反饋內(nèi)容，不夠聚焦；同時(shí)有些情況存在異步校驗(yàn)數(shù)據(jù)，這種情況也無(wú)法用非模態(tài)反饋展示。

反之，模態(tài)反饋更多時(shí)候運(yùn)用在需要強(qiáng)化告知內(nèi)容的場(chǎng)景，比如一些重大公告的通知，常常會(huì)在首頁(yè)自動(dòng)彈出信息，一來(lái)是為了有效傳達(dá)信息內(nèi)容，二來(lái)有一些是行業(yè)規(guī)定限制。

在實(shí)際工作運(yùn)用中，可以通過(guò)幾個(gè)考慮方向，選擇最合適的反饋模式：

a. 獲取流程：是同步獲取反饋信息，還是異步獲??？

當(dāng)反饋信息可以同步獲取時(shí)，則考慮非模態(tài)反饋。特別是對(duì)于異常信息的反饋，能提前反饋給用戶的信息，就不要等到用戶操作完，最后才反饋異常情況給用戶。

b. 反饋類型：是對(duì)流程中某個(gè)元素結(jié)果的反饋，還是對(duì)流程最終結(jié)果的反饋？

當(dāng)反饋內(nèi)容針對(duì)任務(wù)流程的某個(gè)元素時(shí)，則優(yōu)先考慮非模態(tài)反饋。

如：反饋是針對(duì)表單中的輸入框填寫有誤；因?yàn)檫@種反饋模式可以最大程度減少對(duì)用戶的干擾。

當(dāng)反饋內(nèi)容針對(duì)任務(wù)流程的最終結(jié)果時(shí)，則優(yōu)先考慮模態(tài)反饋。

如：反饋是針對(duì)表單提交后的狀態(tài)；因?yàn)槟B(tài)反饋可以聚焦用戶的關(guān)注點(diǎn)，明確讓用戶知道流程的最終結(jié)果狀態(tài)。

c. 重要程度：忽略這個(gè)反饋的后果，對(duì)當(dāng)前主任務(wù)是否有重大影響？

當(dāng)忽略反饋內(nèi)容會(huì)對(duì)當(dāng)前主任務(wù)造成重大影響時(shí)，則采用模態(tài)反饋。如：驗(yàn)證交易密碼雖然是購(gòu)買主任務(wù)中的一環(huán)，但是驗(yàn)證交易密碼的重要性很高，同時(shí)決定著購(gòu)買主任務(wù)后面的流程能否繼續(xù)進(jìn)行。因此采用模態(tài)反饋，可以讓用戶更聚焦于當(dāng)前的反饋內(nèi)容，明確當(dāng)前流程遇到的問(wèn)題。

d、行業(yè)規(guī)定：是否存在某些行業(yè)硬性規(guī)定，必須讓用戶看？

在某些行業(yè)中，確實(shí)存在一些硬性規(guī)定，如：金融行業(yè)有些公告信息，根據(jù)監(jiān)管要求，必須讓用戶看。這種情況，只能采用模態(tài)反饋了。

e. 設(shè)計(jì)規(guī)范：是否有相關(guān)的設(shè)計(jì)規(guī)范？

這里要了解的主要有平臺(tái)的規(guī)范和自家App的設(shè)計(jì)規(guī)范，主要出于一致性的考慮，避免同一類反饋，有些頁(yè)面采用非模態(tài)反饋，有些頁(yè)面采用模態(tài)反饋。

第二步：設(shè)計(jì)清晰的內(nèi)容

（1）從認(rèn)知方式出發(fā)

如何將信息清晰高效的展示給操作者？想要實(shí)現(xiàn)這個(gè)目標(biāo)，就需要我們先了解人的認(rèn)知方式，從認(rèn)知的過(guò)程中，尋找機(jī)會(huì)點(diǎn)去完善反饋內(nèi)容設(shè)計(jì)。

從心理學(xué)角度，大體上可以將認(rèn)知過(guò)程分為“精神活動(dòng)引發(fā)”和“環(huán)境刺激引發(fā)”兩種類型。

a. 精神活動(dòng)引發(fā)

這種類型主要受到操作者精神活動(dòng)內(nèi)容的影響，這些精神活動(dòng)包含了過(guò)往經(jīng)驗(yàn)、期望結(jié)果、記憶喚醒等。

比如：用戶進(jìn)行一次理財(cái)產(chǎn)品的購(gòu)買操作時(shí)，當(dāng)用戶點(diǎn)擊提交按鈕后，就會(huì)由過(guò)往經(jīng)驗(yàn)引發(fā)期望看到訂單提交的信息，而這時(shí)候的反饋信息展示的內(nèi)容，就需要跟操作者心理的認(rèn)知結(jié)果匹配。

b. 環(huán)境刺激引發(fā)

這種類型主要受到環(huán)境刺激的影響，相對(duì)于“精神活動(dòng)引發(fā)”的認(rèn)識(shí)結(jié)果類型，這種類型可以說(shuō)是更被動(dòng)的。當(dāng)用戶看到界面視覺時(shí)，就會(huì)通過(guò)自身感受階段和知覺階段，形成認(rèn)知結(jié)果。

比如：當(dāng)用戶第一次看到Banner輪播模塊時(shí)，會(huì)先通過(guò)視網(wǎng)膜像輸入基本視覺元素；然后通過(guò)知覺組織處理接收到的感受信息，形成初步的辨認(rèn)結(jié)果；最后才形成用戶自己的認(rèn)知結(jié)果。

當(dāng)環(huán)境刺激多了，用戶對(duì)該事物的認(rèn)知熟悉后，就會(huì)積累成自身經(jīng)驗(yàn)，也算是用戶習(xí)慣之一，下次用戶再接觸該事物，就會(huì)通過(guò)“精神活動(dòng)引發(fā)”渠道去感知。

（2）運(yùn)用認(rèn)知方式來(lái)設(shè)計(jì)清晰內(nèi)容

反饋設(shè)計(jì)要遵循人的認(rèn)知心理過(guò)程，反饋內(nèi)容傳達(dá)也要符合用戶的認(rèn)知結(jié)果?？梢赃\(yùn)用前面介紹的認(rèn)知方式，來(lái)設(shè)計(jì)清晰的反饋內(nèi)容。

如：在信息通知的“小紅點(diǎn)”設(shè)計(jì)，因?yàn)樵缙谕ㄟ^(guò)微信、QQ已經(jīng)讓用戶形成了認(rèn)知經(jīng)驗(yàn)，讓用戶對(duì)小紅點(diǎn)的認(rèn)知模式從“環(huán)境刺激”轉(zhuǎn)變?yōu)椤熬窕顒?dòng)”，所以在信息通知的反饋形式上，直接采用小紅點(diǎn)反饋形式，就比較符合用戶的認(rèn)知。

對(duì)于展示的反饋內(nèi)容來(lái)說(shuō)，應(yīng)該是符合當(dāng)前場(chǎng)景的。在什么流程，展示什么內(nèi)容，而不是脫離場(chǎng)景，展示無(wú)關(guān)的內(nèi)容。

如：在購(gòu)買基金產(chǎn)品時(shí)，當(dāng)購(gòu)買成功后，將交易結(jié)果反饋給用戶，同時(shí)將該基金未來(lái)的產(chǎn)生收益日反饋給用戶，讓用戶心理對(duì)未來(lái)發(fā)現(xiàn)的事有預(yù)期準(zhǔn)備，這種反饋信息內(nèi)容是結(jié)合場(chǎng)景需求來(lái)優(yōu)化。

我們除了需要結(jié)合實(shí)際場(chǎng)景來(lái)考慮反饋信息展現(xiàn)的內(nèi)容，還可以通過(guò)視覺暗示、為異常流程提供出口等方法來(lái)優(yōu)化反饋內(nèi)容。

a. 視覺暗示

視覺是用戶接觸反饋內(nèi)容最表面的一層，卻相當(dāng)重要。以“精神活動(dòng)引發(fā)”的認(rèn)知為原理，借助視覺暗示，可以讓用戶及時(shí)了解到清晰的反饋內(nèi)容。

如：在按鈕點(diǎn)擊態(tài)的設(shè)計(jì)中，當(dāng)用戶按下按鈕時(shí)，按鈕將切換成預(yù)備動(dòng)作（點(diǎn)擊狀態(tài)），當(dāng)用戶手指移開按鈕時(shí)，按鈕執(zhí)行動(dòng)作中斷，將恢復(fù)原態(tài)，這種順從響應(yīng)暗示也屬于反饋信息一種。

b. 為異常流程提供出口

不僅僅要將信息反饋給用戶，還因?yàn)榍逦鞔_的展示；如有必要，可提供額外子流程入口，避免用戶無(wú)法卡在主流程，無(wú)法正常操作。

如：在金額輸入框時(shí)，因?yàn)槭艿叫袠I(yè)規(guī)則的限制，有些銀行卡存在限額操作。當(dāng)用戶輸入金額超過(guò)可用額度時(shí)，則及時(shí)將信息反饋給用戶，并提供輔助解決方法的入口，將反饋信息內(nèi)容與主操作流程進(jìn)行優(yōu)化展示。

總而言之，反饋信息內(nèi)容要清晰，要符合用戶心理的認(rèn)知結(jié)果?；趫?chǎng)景思考是設(shè)計(jì)的前提，反饋信息內(nèi)容的呈現(xiàn)可以通過(guò)視覺暗示、為異常流程提供出口等方法來(lái)優(yōu)化。這也是反饋設(shè)計(jì)的重點(diǎn)。

第三步：及時(shí)告知用戶

這個(gè)理解起來(lái)還是比較簡(jiǎn)單的，顧名思義是指反饋信息的及時(shí)性，這里包含不限于出現(xiàn)的時(shí)機(jī)、動(dòng)效的時(shí)長(zhǎng)。這方面也很大程度影響著反饋設(shè)計(jì)的成敗。想象下，用戶正在進(jìn)行轉(zhuǎn)賬操作，在進(jìn)行一系列必要的操作后，本以為最后的反饋信息是提醒轉(zhuǎn)賬成功，結(jié)果反饋信息告訴用戶“今天系統(tǒng)維護(hù)，請(qǐng)明天再轉(zhuǎn)賬”，這樣的體驗(yàn)是多糟糕啊。

就拿輸入框的反饋設(shè)計(jì)來(lái)說(shuō)，購(gòu)買產(chǎn)品時(shí)，經(jīng)常需要輸入金額，在輸入過(guò)程中，如果金額數(shù)據(jù)有誤，則應(yīng)該在當(dāng)前頁(yè)，及時(shí)給予用戶提醒。而不是當(dāng)用戶點(diǎn)擊“完成”關(guān)閉鍵盤后，才提醒用戶金額有誤。

反饋信息要及時(shí)，同時(shí)不能脫離用戶操作場(chǎng)景，要讓用戶明白現(xiàn)在發(fā)生什么，未來(lái)結(jié)果可能會(huì)怎樣發(fā)展。

三、總結(jié)

反饋設(shè)計(jì)目的在于告知用戶發(fā)生了什么，讓用戶明白自己操作的結(jié)果，并知道系統(tǒng)發(fā)生的變化。

反饋設(shè)計(jì)可以分為三步，讓反饋設(shè)計(jì)恰當(dāng)、清晰、及時(shí)地傳達(dá)給用戶。

1. 確定恰當(dāng)?shù)哪Ｊ剑哼x擇非模態(tài)反饋還是模態(tài)反饋。
2. 設(shè)計(jì)清晰的內(nèi)容：內(nèi)容符合認(rèn)知原理，展示可通過(guò)視覺語(yǔ)言，流程引導(dǎo)，結(jié)合場(chǎng)景等方式，告知用戶現(xiàn)在發(fā)生什么。
3. 及時(shí)告知用戶：選擇恰當(dāng)時(shí)機(jī)出現(xiàn)和消失。

作者：mufly

來(lái)源：https://www.ui.cn/detail/439769.html

本文由 @mufly 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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