案例分析:產(chǎn)品的信息反饋設(shè)計(jì)

3 評(píng)論 18047 瀏覽 143 收藏 15 分鐘

在產(chǎn)品設(shè)計(jì)中,“信息反饋”是很重要的一個(gè)產(chǎn)品交互特征,用以給用戶正確的引導(dǎo)信息,幫助用戶做出判斷和決策。而反饋的形式也是多方面的,視覺、聽覺、觸覺、正面的、負(fù)面的,都是在為用戶傳遞信息。良好的信息反饋,有時(shí)會(huì)出其不意的調(diào)動(dòng)起用戶的積極性,讓用戶有產(chǎn)品的掌控感。

信息反饋概述

互聯(lián)網(wǎng)產(chǎn)品存在兩種界面反饋機(jī)制:

  • 第一種是通過快速的界面改變來進(jìn)行反饋,例如點(diǎn)擊視頻播放按鈕,視頻立即開始播放;微信點(diǎn)擊聊天文本框,立即彈出鍵盤等。正常情況下,這類反饋無需設(shè)置任何反饋信息提示。
  • 第二種是,當(dāng)界面變動(dòng)很慢或者界面沒有響應(yīng)時(shí),如果不給予提示,用戶不確定自己的操作是否成功,會(huì)讓用戶感到困惑,這類提示是今天要闡述的信息反饋提示。

如果網(wǎng)絡(luò)是正常的,用戶點(diǎn)擊視頻播放按鈕,先提示:視頻即將播放,提示被關(guān)閉或自動(dòng)消失后視頻才開始播放;填表單時(shí),點(diǎn)擊“下一步”,提示“操作成功”,關(guān)閉提示才跳轉(zhuǎn)到下一步的操作頁面;這樣的提示顯然是很多余的,中斷了用戶的正常操作流程,容易引起用戶的反感。

那么多長時(shí)間給出反饋提示才是合適的呢?

  • 0.1秒:這是用戶感受系統(tǒng)是在即時(shí)反應(yīng)的閾值,系統(tǒng)除了直接顯示操作結(jié)果外,不需要其它特殊的反饋提示。例如,用戶點(diǎn)擊播放按鈕,視頻立即播放,而不會(huì)提示“視頻將要播放”。
  • 1秒:通常來說,操作反饋的延遲時(shí)間在0.2秒到1.0秒之間仍然不需要特殊的反饋提示,但此時(shí)用戶已經(jīng)感覺到自己對(duì)數(shù)據(jù)失去了直接的操控。以點(diǎn)贊為例,如果不能在1秒內(nèi)響應(yīng),用戶就會(huì)感到UI控件響應(yīng)很慢,失去了操作的流暢感,極有可能點(diǎn)擊以后再次點(diǎn)擊才發(fā)現(xiàn)已取消點(diǎn)贊,連續(xù)多次點(diǎn)擊導(dǎo)致操作失敗。你是不是有疑問,才1秒,怎么可能導(dǎo)致連續(xù)點(diǎn)擊?別忘了信息經(jīng)過神經(jīng)傳到人的大腦進(jìn)行處理也是需要時(shí)間的,等大腦做出反應(yīng),時(shí)間早已不止過去1秒。
  • 1秒到10秒:對(duì)于超過1秒的延遲,有必要通過加載動(dòng)畫、反饋提示語等手段進(jìn)行提示,告知用戶服務(wù)沒有宕機(jī),程序正在處理相關(guān)的任務(wù),請(qǐng)繼續(xù)安心使用。
  • 超過10:10秒是用戶將注意力保持在當(dāng)前任務(wù)的時(shí)間閾值。任何需要超過10秒才能完成的任務(wù),需要有明確的進(jìn)度指示器(條狀進(jìn)度條、餅狀進(jìn)度條、倒計(jì)時(shí)等)提醒用戶,以緩解他們的焦慮。同時(shí)為用戶指明中斷當(dāng)前操作的方法,讓用戶可以切換任務(wù),合理安排自己的時(shí)間去處理其它事務(wù)。例如,愛奇藝片頭廣告的倒計(jì)時(shí)提示,同時(shí)可以下滑頁面查看其它內(nèi)容。

信息反饋的設(shè)計(jì)

信息反饋的提示形式

1、氣泡提示(toast提示)。屬于弱反饋,多以圓角矩形的形式出現(xiàn),點(diǎn)擊提示框以外區(qū)域不會(huì)消失,1-2秒后自動(dòng)消失,無操作按鈕。

2、Snackbar提示。具有toast的所有特性,小型彈窗,會(huì)自動(dòng)消失,但也有不同點(diǎn):a 除了取消按鈕外,還有一個(gè)“確定”或其它操作按鈕;b 點(diǎn)擊Snackbar以外的區(qū)域,Snackbar會(huì)消失;c 多出現(xiàn)在屏幕底部;d Snackbar多出現(xiàn)在Android平臺(tái)。

3、對(duì)話框彈窗提示。一般不會(huì)自動(dòng)消失,用戶必須點(diǎn)相關(guān)按鈕才會(huì)消失,因此會(huì)打斷用戶當(dāng)前任務(wù),增加用戶的焦慮和不安感,影響用戶體驗(yàn),需謹(jǐn)慎使用。如果一定要用對(duì)話框形式來提示用戶,可以嘗試在UI上做得更加美觀有趣,以取悅用戶。

4、聲音提示。通過音效提醒用戶,如:來電語音提醒、地圖的女明星語音導(dǎo)航、虛擬鍵盤在按下時(shí)的噠噠聲、微信“搖一搖”的咔嚓聲。恰當(dāng)?shù)氖褂寐曇舴答佊悬c(diǎn)睛效果,但是過多的使用反而會(huì)變成一種打擾,不可將聲音作為主要反饋形式,而且要給予用戶關(guān)閉提示音的選擇,因?yàn)橛脩羲幍膱?chǎng)景多樣,有可能很吵而聽不見聲音,也有可能不適合打開聲音(比如會(huì)議中)。

5、震動(dòng)提示(常用于手持設(shè)備)。是一種比較強(qiáng)烈的觸覺反饋,在手機(jī)系統(tǒng)中應(yīng)用廣泛,比如來電、短信、已連接充電,在手機(jī)App中較少用到。

6、動(dòng)畫。作為情感化設(shè)計(jì)中的一個(gè)重要元素,動(dòng)畫能給用戶提供有意義的信息反饋,幫助用戶直觀了解操作的結(jié)果,精美而有趣的動(dòng)畫,能提升使用時(shí)的愉悅感,給用戶留下深刻印象,甚至成為產(chǎn)品吸引用戶的一個(gè)因素。例如:下載、刪除大量文件,用動(dòng)態(tài)的進(jìn)度條展示已完成的進(jìn)度,并提供解釋信息,能夠減少用戶的焦慮。

7、文本提示。最常見的一種提示方式,常和圖標(biāo)、字體顏色等一起使用,及時(shí)給予用戶反饋。

信息反饋形式的選擇

過度的界面反饋會(huì)影響用戶的操作體驗(yàn),必須根據(jù)提示信息的重要程度來選擇提示的強(qiáng)弱程度。如果頻繁跳出對(duì)話框彈窗來打斷用戶的操作,用戶會(huì)是怎樣的心情?這就需要理解不同的反饋形式對(duì)用戶打擾強(qiáng)度的差異。反饋的強(qiáng)弱程度主要看該反饋提示是否會(huì)打斷用戶的當(dāng)前操作,如果是,則為強(qiáng)反饋提示,如果不是,則屬于弱反饋提示。

弱反饋

比如,在用戶在完成表單操作過程中,用戶每填錯(cuò)(或填對(duì))一項(xiàng)時(shí),系統(tǒng)會(huì)在文本框的附近顯示實(shí)時(shí)的校驗(yàn)結(jié)果,用戶根據(jù)看到的信息反饋,了解填寫是否正確,并做出相應(yīng)操作。整個(gè)過程用戶始終處于主任務(wù)流程之中(填寫表單),任務(wù)流程沒有被中斷,所以該反饋提示可以定義為弱反饋提示。

弱反饋提示最明顯的特點(diǎn)就是單方向向用戶傳遞反饋信息和引導(dǎo),無需用戶對(duì)反饋進(jìn)行回應(yīng)確認(rèn)。其主要作用是告訴用戶當(dāng)前操作是否被執(zhí)行以及執(zhí)行的結(jié)果,是一種友好而又不過分打擾用戶操作的提示。這種形式常常被用在用戶的操作不會(huì)產(chǎn)生嚴(yán)重后果、不涉及利益交易(如金錢、資源等)、可以及時(shí)撤銷、修改等操作成本小的場(chǎng)景。如:收藏、喜歡、點(diǎn)贊、表單填寫、加入購物車、添加、關(guān)注等。

強(qiáng)反饋

強(qiáng)反饋一般會(huì)以對(duì)話框的形式展現(xiàn),在向用戶傳遞提示信息的同時(shí)讓用戶為自己接下來的操作做出決定或選擇,使用戶暫時(shí)脫離主流程,只能對(duì)提示框進(jìn)行操作,無法同時(shí)進(jìn)行其他操作。

比如當(dāng)用戶進(jìn)行刪除本地圖片、狀態(tài)、聯(lián)系人、退出登錄等操作時(shí),系統(tǒng)會(huì)提醒用戶并需要用戶確認(rèn)該操作是否繼續(xù)執(zhí)行。

強(qiáng)反饋相對(duì)于弱反饋就會(huì)顯得不那么“友好”,但是卻能夠讓用戶對(duì)當(dāng)前操作有一個(gè)很清晰的認(rèn)識(shí)和判斷,從而決定是否繼續(xù)進(jìn)行,起到警告的作用。強(qiáng)反饋主要用于該操作會(huì)產(chǎn)生嚴(yán)重后果(這種后果往往需要用戶自己承擔(dān))、涉及到自身利益、不能夠及時(shí)撤銷修改操作(一旦操作便無法挽回,永久性生效)等高成本且?guī)в幸欢L(fēng)險(xiǎn)性的場(chǎng)景,比如說因?yàn)槭д`而觸碰到刪除按鈕,導(dǎo)致資料丟失,或者因?yàn)檎`點(diǎn)擊購買按鈕購買了不想買的商品。常用場(chǎng)景:刪除、文件轉(zhuǎn)移、購買交易、系統(tǒng)調(diào)取訪問權(quán)限、版本升級(jí)、操作列表選擇、營銷活動(dòng)提醒彈窗等。

信息反饋的設(shè)計(jì)要點(diǎn)

內(nèi)容

信息要盡量簡潔實(shí)用,避免大段文字的描述。不要在反饋中給出本來就顯而易見的信息或者重復(fù)屏幕上的文字。用戶希望看到的是實(shí)用的,能有效幫助他們決斷的提示信息。

重要的信息經(jīng)常由以下部分組成:圖標(biāo) +?提示 +?文字描述 +?需要如何處理。

文案設(shè)計(jì)要簡明扼要,以讓用戶一眼就能看懂文案的意思為原則,避免含糊不清、文字贅述。

位置

1、在當(dāng)前頁面,信息反饋提示應(yīng)該放在操作發(fā)生地附近。根據(jù)心理學(xué)的注意力分配模型,不熟悉或十分關(guān)注的操作都會(huì)占據(jù)人腦相當(dāng)多的注意力資源。若任務(wù)有延時(shí)反饋,則操作完成后注意力發(fā)生聚焦,投射在行為發(fā)生地附近,以關(guān)注產(chǎn)生的結(jié)果。

2、刷新頁面或頁面跳轉(zhuǎn),信息反饋提示應(yīng)該放在用戶最渴望看到它的地方或最容易注意到它的地方。網(wǎng)頁加載刷新的特性常常讓用戶分散注意力。新的頁面中,用戶會(huì)短暫失憶,不一定會(huì)推動(dòng)滾動(dòng)條來找到剛才操作的區(qū)域,因?yàn)樵瓉砭劢狗秶呀?jīng)消失掉了。他們會(huì)渴望一目了然看見信息的反饋。這個(gè)時(shí)候,把反饋信息提示放在新頁面中的顯著位置是最佳的選擇。

我們的設(shè)計(jì)案例

現(xiàn)以我負(fù)責(zé)過的產(chǎn)品舉例:

案例一。在交易品的行情頁面中,展示有不同交易所的商品以及實(shí)時(shí)更新的行情數(shù)據(jù)。

首先,根據(jù)全球金融各市場(chǎng)開盤時(shí)間不同,有些交易所六日或國際節(jié)假日是閉市的。其次,在網(wǎng)絡(luò)信號(hào)不好的情況下,交易品具體的價(jià)格可能會(huì)有延遲,不能實(shí)時(shí)更新交易數(shù)據(jù)。

在這些情況下,用戶最為關(guān)注的就是交易品最后更新的交易數(shù)據(jù)。所以,我在設(shè)計(jì)中采用了如下方案:在網(wǎng)絡(luò)異?;蜷]市時(shí),最新價(jià)和漲跌幅全部灰色顯示,同時(shí)以Snackbar的形式展示提示信息,展示數(shù)據(jù)異常的原因和交易品最后更新的時(shí)間,此提示信息只有用戶手動(dòng)點(diǎn)擊“確定”才可關(guān)閉。

案例二。在網(wǎng)站的金幣提現(xiàn)過程中,由于我司在淘寶網(wǎng)上有自己的淘寶店鋪,所以在用戶提現(xiàn)后考慮引導(dǎo)用戶到淘寶店鋪采購一些小商品,可以為用戶多一種選擇,也可以達(dá)到為公司淘寶店鋪引流的一個(gè)目的??梢钥吹?,我在提現(xiàn)的頁面同時(shí)也中加入了其他一些文本形式的信息提示。在用戶提現(xiàn)之后頁面最下方出現(xiàn)提示信息。

最后

寫本文的一個(gè)原因是,我在測(cè)試項(xiàng)目過程中發(fā)現(xiàn)開發(fā)哥哥在一些頁面中沒有按照我的設(shè)計(jì)方式做出信息反饋提示的實(shí)現(xiàn),詢問原因時(shí)得到“我就是覺得這個(gè)提示有些復(fù)雜,都是alert提示也沒影響吧!”這樣的回復(fù)。所以,我決定將信息反饋的設(shè)計(jì)做一個(gè)這樣的總結(jié)。開發(fā)哥哥們,記得要看哦!

 

作者:流年,互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師,4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。

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

題圖由作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 此軟件的收藏和點(diǎn)贊就是反饋太慢,收藏沒反應(yīng)再點(diǎn)結(jié)果取消了

    回復(fù)
  2. 加精了

    回復(fù)