案例分析:產(chǎn)品的信息反饋設計
在產(chǎn)品設計中,“信息反饋”是很重要的一個產(chǎn)品交互特征,用以給用戶正確的引導信息,幫助用戶做出判斷和決策。而反饋的形式也是多方面的,視覺、聽覺、觸覺、正面的、負面的,都是在為用戶傳遞信息。良好的信息反饋,有時會出其不意的調(diào)動起用戶的積極性,讓用戶有產(chǎn)品的掌控感。
信息反饋概述
互聯(lián)網(wǎng)產(chǎn)品存在兩種界面反饋機制:
- 第一種是通過快速的界面改變來進行反饋,例如點擊視頻播放按鈕,視頻立即開始播放;微信點擊聊天文本框,立即彈出鍵盤等。正常情況下,這類反饋無需設置任何反饋信息提示。
- 第二種是,當界面變動很慢或者界面沒有響應時,如果不給予提示,用戶不確定自己的操作是否成功,會讓用戶感到困惑,這類提示是今天要闡述的信息反饋提示。
如果網(wǎng)絡是正常的,用戶點擊視頻播放按鈕,先提示:視頻即將播放,提示被關閉或自動消失后視頻才開始播放;填表單時,點擊“下一步”,提示“操作成功”,關閉提示才跳轉(zhuǎn)到下一步的操作頁面;這樣的提示顯然是很多余的,中斷了用戶的正常操作流程,容易引起用戶的反感。
那么多長時間給出反饋提示才是合適的呢?
- 0.1秒:這是用戶感受系統(tǒng)是在即時反應的閾值,系統(tǒng)除了直接顯示操作結(jié)果外,不需要其它特殊的反饋提示。例如,用戶點擊播放按鈕,視頻立即播放,而不會提示“視頻將要播放”。
- 1秒:通常來說,操作反饋的延遲時間在0.2秒到1.0秒之間仍然不需要特殊的反饋提示,但此時用戶已經(jīng)感覺到自己對數(shù)據(jù)失去了直接的操控。以點贊為例,如果不能在1秒內(nèi)響應,用戶就會感到UI控件響應很慢,失去了操作的流暢感,極有可能點擊以后再次點擊才發(fā)現(xiàn)已取消點贊,連續(xù)多次點擊導致操作失敗。你是不是有疑問,才1秒,怎么可能導致連續(xù)點擊?別忘了信息經(jīng)過神經(jīng)傳到人的大腦進行處理也是需要時間的,等大腦做出反應,時間早已不止過去1秒。
- 1秒到10秒:對于超過1秒的延遲,有必要通過加載動畫、反饋提示語等手段進行提示,告知用戶服務沒有宕機,程序正在處理相關的任務,請繼續(xù)安心使用。
- 超過10:10秒是用戶將注意力保持在當前任務的時間閾值。任何需要超過10秒才能完成的任務,需要有明確的進度指示器(條狀進度條、餅狀進度條、倒計時等)提醒用戶,以緩解他們的焦慮。同時為用戶指明中斷當前操作的方法,讓用戶可以切換任務,合理安排自己的時間去處理其它事務。例如,愛奇藝片頭廣告的倒計時提示,同時可以下滑頁面查看其它內(nèi)容。
信息反饋的設計
信息反饋的提示形式
1、氣泡提示(toast提示)。屬于弱反饋,多以圓角矩形的形式出現(xiàn),點擊提示框以外區(qū)域不會消失,1-2秒后自動消失,無操作按鈕。
2、Snackbar提示。具有toast的所有特性,小型彈窗,會自動消失,但也有不同點:a 除了取消按鈕外,還有一個“確定”或其它操作按鈕;b 點擊Snackbar以外的區(qū)域,Snackbar會消失;c 多出現(xiàn)在屏幕底部;d Snackbar多出現(xiàn)在Android平臺。
3、對話框彈窗提示。一般不會自動消失,用戶必須點相關按鈕才會消失,因此會打斷用戶當前任務,增加用戶的焦慮和不安感,影響用戶體驗,需謹慎使用。如果一定要用對話框形式來提示用戶,可以嘗試在UI上做得更加美觀有趣,以取悅用戶。
4、聲音提示。通過音效提醒用戶,如:來電語音提醒、地圖的女明星語音導航、虛擬鍵盤在按下時的噠噠聲、微信“搖一搖”的咔嚓聲。恰當?shù)氖褂寐曇舴答佊悬c睛效果,但是過多的使用反而會變成一種打擾,不可將聲音作為主要反饋形式,而且要給予用戶關閉提示音的選擇,因為用戶所處的場景多樣,有可能很吵而聽不見聲音,也有可能不適合打開聲音(比如會議中)。
5、震動提示(常用于手持設備)。是一種比較強烈的觸覺反饋,在手機系統(tǒng)中應用廣泛,比如來電、短信、已連接充電,在手機App中較少用到。
6、動畫。作為情感化設計中的一個重要元素,動畫能給用戶提供有意義的信息反饋,幫助用戶直觀了解操作的結(jié)果,精美而有趣的動畫,能提升使用時的愉悅感,給用戶留下深刻印象,甚至成為產(chǎn)品吸引用戶的一個因素。例如:下載、刪除大量文件,用動態(tài)的進度條展示已完成的進度,并提供解釋信息,能夠減少用戶的焦慮。
7、文本提示。最常見的一種提示方式,常和圖標、字體顏色等一起使用,及時給予用戶反饋。
信息反饋形式的選擇
過度的界面反饋會影響用戶的操作體驗,必須根據(jù)提示信息的重要程度來選擇提示的強弱程度。如果頻繁跳出對話框彈窗來打斷用戶的操作,用戶會是怎樣的心情?這就需要理解不同的反饋形式對用戶打擾強度的差異。反饋的強弱程度主要看該反饋提示是否會打斷用戶的當前操作,如果是,則為強反饋提示,如果不是,則屬于弱反饋提示。
弱反饋
比如,在用戶在完成表單操作過程中,用戶每填錯(或填對)一項時,系統(tǒng)會在文本框的附近顯示實時的校驗結(jié)果,用戶根據(jù)看到的信息反饋,了解填寫是否正確,并做出相應操作。整個過程用戶始終處于主任務流程之中(填寫表單),任務流程沒有被中斷,所以該反饋提示可以定義為弱反饋提示。
弱反饋提示最明顯的特點就是單方向向用戶傳遞反饋信息和引導,無需用戶對反饋進行回應確認。其主要作用是告訴用戶當前操作是否被執(zhí)行以及執(zhí)行的結(jié)果,是一種友好而又不過分打擾用戶操作的提示。這種形式常常被用在用戶的操作不會產(chǎn)生嚴重后果、不涉及利益交易(如金錢、資源等)、可以及時撤銷、修改等操作成本小的場景。如:收藏、喜歡、點贊、表單填寫、加入購物車、添加、關注等。
強反饋
強反饋一般會以對話框的形式展現(xiàn),在向用戶傳遞提示信息的同時讓用戶為自己接下來的操作做出決定或選擇,使用戶暫時脫離主流程,只能對提示框進行操作,無法同時進行其他操作。
比如當用戶進行刪除本地圖片、狀態(tài)、聯(lián)系人、退出登錄等操作時,系統(tǒng)會提醒用戶并需要用戶確認該操作是否繼續(xù)執(zhí)行。
強反饋相對于弱反饋就會顯得不那么“友好”,但是卻能夠讓用戶對當前操作有一個很清晰的認識和判斷,從而決定是否繼續(xù)進行,起到警告的作用。強反饋主要用于該操作會產(chǎn)生嚴重后果(這種后果往往需要用戶自己承擔)、涉及到自身利益、不能夠及時撤銷修改操作(一旦操作便無法挽回,永久性生效)等高成本且?guī)в幸欢L險性的場景,比如說因為失誤而觸碰到刪除按鈕,導致資料丟失,或者因為誤點擊購買按鈕購買了不想買的商品。常用場景:刪除、文件轉(zhuǎn)移、購買交易、系統(tǒng)調(diào)取訪問權(quán)限、版本升級、操作列表選擇、營銷活動提醒彈窗等。
信息反饋的設計要點
內(nèi)容
信息要盡量簡潔實用,避免大段文字的描述。不要在反饋中給出本來就顯而易見的信息或者重復屏幕上的文字。用戶希望看到的是實用的,能有效幫助他們決斷的提示信息。
重要的信息經(jīng)常由以下部分組成:圖標 +?提示 +?文字描述 +?需要如何處理。
文案設計要簡明扼要,以讓用戶一眼就能看懂文案的意思為原則,避免含糊不清、文字贅述。
位置
1、在當前頁面,信息反饋提示應該放在操作發(fā)生地附近。根據(jù)心理學的注意力分配模型,不熟悉或十分關注的操作都會占據(jù)人腦相當多的注意力資源。若任務有延時反饋,則操作完成后注意力發(fā)生聚焦,投射在行為發(fā)生地附近,以關注產(chǎn)生的結(jié)果。
2、刷新頁面或頁面跳轉(zhuǎn),信息反饋提示應該放在用戶最渴望看到它的地方或最容易注意到它的地方。網(wǎng)頁加載刷新的特性常常讓用戶分散注意力。新的頁面中,用戶會短暫失憶,不一定會推動滾動條來找到剛才操作的區(qū)域,因為原來聚焦范圍已經(jīng)消失掉了。他們會渴望一目了然看見信息的反饋。這個時候,把反饋信息提示放在新頁面中的顯著位置是最佳的選擇。
我們的設計案例
現(xiàn)以我負責過的產(chǎn)品舉例:
案例一。在交易品的行情頁面中,展示有不同交易所的商品以及實時更新的行情數(shù)據(jù)。
首先,根據(jù)全球金融各市場開盤時間不同,有些交易所六日或國際節(jié)假日是閉市的。其次,在網(wǎng)絡信號不好的情況下,交易品具體的價格可能會有延遲,不能實時更新交易數(shù)據(jù)。
在這些情況下,用戶最為關注的就是交易品最后更新的交易數(shù)據(jù)。所以,我在設計中采用了如下方案:在網(wǎng)絡異?;蜷]市時,最新價和漲跌幅全部灰色顯示,同時以Snackbar的形式展示提示信息,展示數(shù)據(jù)異常的原因和交易品最后更新的時間,此提示信息只有用戶手動點擊“確定”才可關閉。
案例二。在網(wǎng)站的金幣提現(xiàn)過程中,由于我司在淘寶網(wǎng)上有自己的淘寶店鋪,所以在用戶提現(xiàn)后考慮引導用戶到淘寶店鋪采購一些小商品,可以為用戶多一種選擇,也可以達到為公司淘寶店鋪引流的一個目的??梢钥吹剑以谔岈F(xiàn)的頁面同時也中加入了其他一些文本形式的信息提示。在用戶提現(xiàn)之后頁面最下方出現(xiàn)提示信息。
最后
寫本文的一個原因是,我在測試項目過程中發(fā)現(xiàn)開發(fā)哥哥在一些頁面中沒有按照我的設計方式做出信息反饋提示的實現(xiàn),詢問原因時得到“我就是覺得這個提示有些復雜,都是alert提示也沒影響吧!”這樣的回復。所以,我決定將信息反饋的設計做一個這樣的總結(jié)。開發(fā)哥哥們,記得要看哦!
作者:流年,互聯(lián)網(wǎng)產(chǎn)品設計師,4年互聯(lián)網(wǎng)產(chǎn)品設計經(jīng)驗。
本文由 @流年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖由作者提供
此軟件的收藏和點贊就是反饋太慢,收藏沒反應再點結(jié)果取消了
加精了