產(chǎn)品中“非模態(tài)反饋”信息設(shè)計的意義與方式

劉東晨
5 評論 13752 瀏覽 101 收藏 14 分鐘
🔗 B端产品需要更多地依赖销售团队和渠道合作来推广产品,而C端产品需要更多地利用网络营销和口碑传播来推广产品..

本文作者將嘗試對非模態(tài)反饋進(jìn)行下定義,并提及了如何設(shè)計非模態(tài)反饋,以及舉一些案例進(jìn)行分析。

什么是非模態(tài)反饋?

艾倫·庫珀在《about face》第十五章中提到過“富視覺非模態(tài)反饋”(rich visual modeless feedback,RVMF)可能是最重要的一種非模態(tài)反饋方式了。它的“”在于能夠深入全面的信息,讓人了解一個進(jìn)程的狀態(tài)或者屬性,或者當(dāng)前應(yīng)用程序的對象。它的“視覺”是指按習(xí)慣方式利用屏幕上的像素(通常是動態(tài)的)。它的“非模態(tài)”在于信息能及時輕松地顯示出來,即不需要用戶做特殊動作或者轉(zhuǎn)換模式,就能看到和理解這些反饋。(參考http://flylib.com/books/en/2.153.1.174/1/

從淘寶的訂單頁我們可以看出幾個“富視覺非模態(tài)反饋”實例。

  • 反饋1:正在進(jìn)行的交易,框框用淺藍(lán)色表示,已完成或關(guān)閉的用灰色。
  • 反饋2:客服在線與不在線的狀態(tài)反饋。
  • 反饋3:用icon明確所售商品的性質(zhì)的反饋。
  • 反饋4:當(dāng)鼠標(biāo)移至第一個條目時,反饋用戶,還有更多操作(轉(zhuǎn)發(fā)與標(biāo)記)。
  • 反饋5:鼠標(biāo)移至“備注”icon時,顯示非模態(tài)彈窗,告知用戶詳細(xì)內(nèi)容。
  • 反饋6:第三個訂單有修改過價格。
  • 反饋7:這個訂單是在手機(jī)上下單的。

以上通過顏色、圖標(biāo)及詳細(xì)的文字等信息告知用戶某一訂單的所有狀態(tài)和屬性。這雖然能夠讓用戶掌控所有訂單情況,但是在視覺讀取上需要耗費(fèi)用戶很大的能量,并且一些某些反饋需要手動操作才行。因此這種“富視覺非模態(tài)反饋”需要一定的學(xué)習(xí)成本,它更適用于更多的后臺系統(tǒng)中的。

上面兩個圖都是為了提醒用戶輸入有誤,左圖非模態(tài)反饋,信息提示幾秒后便消失,并不妨礙用戶正常的操作行為。右圖為模態(tài)反饋,中斷了用戶的操作,需用戶手動確認(rèn)后方可進(jìn)行后續(xù)操作。

我的定義,非模態(tài)反饋(modeless feedback)是一種有效信息提示的表達(dá)方式,這種信息的反饋不會影響到用戶正常的操作,更不會打斷用戶的行為,它能夠在關(guān)鍵時刻提醒用戶任務(wù)的狀態(tài)是什么,是完成了還是失敗了還是出錯了甚至是操作提示,這就是非模態(tài)反饋。

模態(tài)是指界面中只有提醒彈框才具有可交互行為,其他一切都不可操作;非模態(tài)不會把提醒做成彈框,可能會處理成List Notification, Toast list等方式來提醒用戶

非模態(tài)反饋的意義?

上一段中,從我對“非模態(tài)反饋”的定義中,就不難得出其意義的所在。

存在的意義在于,幫助用戶更加有效的完成任務(wù)?!?b>有效”包含了提供有用的信息反饋,提高任務(wù)的操作效率。

有用的信息反饋

  1. 明確告訴用戶任務(wù)所處的狀態(tài),讓用戶感受到一切都在掌握之中。
  2. 及時的提醒用戶下一步需要做什么,這一步哪些地方操作有誤。

提高任務(wù)的操作效率

  1. 在不打斷用戶行為操作的前提下提供反饋。
  2. 在用戶“犯錯”之前及時制止,而不是“犯錯”后告訴他。

程序必須假裝用戶始終是正確的,并不意味著用戶實際上總是正確的。用戶出錯可能不是程序的故障,但是程序有責(zé)任。而非模態(tài)反饋的意義在于審核用戶的操作,然后給出相應(yīng)的判斷,但不能“自以為是”地糾正用戶的錯誤。

如何設(shè)計非模態(tài)反饋?

上文中,說到“富視覺非模態(tài)反饋”的應(yīng)用,更多的在于后臺系統(tǒng)中的行為。而“非模態(tài)反饋”則是簡單的用戶輸入信息或操作,系統(tǒng)給出相應(yīng)的答復(fù),在設(shè)計這個答復(fù)的信息界面時,我們則需要從用戶的角度出發(fā),以有效的幫助用戶完成任務(wù)為目標(biāo)設(shè)計。

上文中提到的案例,這其實并不是一個很好的“非模態(tài)反饋”設(shè)計案例,為什么?如左圖,第一,它需要用戶“提交申請”后才能反饋,并不能在用戶犯錯之前及時制止。第二,這種反饋搶占了視覺信息的中心,而用戶的這種犯錯并不是一個嚴(yán)重的不可挽救的行為。第三,這種反饋出現(xiàn)的位置占據(jù)了用戶的輸入信息框,一定程度上阻礙了用戶輸入信息的操作。

因此,更好的“非模態(tài)反饋”是如右圖,在用戶跳過金額或快遞直接輸入單號時,及時的在用戶提交之前反饋用戶那些遺漏的輸入,并以一種更和諧不打斷用戶操作的方式進(jìn)行。

一些“非模態(tài)反饋”案例

下面我將列舉一些具體的場景,舉例說明一些“非模態(tài)反饋”案例。

1、明確并告知用戶任務(wù)狀態(tài)

chrome瀏覽器中打開一個新的頁面,將已加載好的內(nèi)容呈現(xiàn)給用戶,同時標(biāo)簽欄中有個小轉(zhuǎn)頭提示用戶頁面并未全部加載完成。

qq郵箱發(fā)送郵件的過程同時允許用戶繼續(xù)瀏覽內(nèi)容。

百度云盤把保存的模態(tài)彈框設(shè)計成List
Notification這種方式的,提醒用戶保存成功并可立即查看,這種非模態(tài)的處理,讓流程更加順暢和輕松自如。

ins發(fā)布一條動態(tài)時,以非模態(tài)的形式告知用戶上傳進(jìn)度同時不影響用戶對其他內(nèi)容的繼續(xù)瀏覽。而下方某APP在上傳歌曲時以模態(tài)彈窗反饋用戶進(jìn)度,不僅打斷了用戶的后續(xù)操作同時無取消按鈕,上傳成功后依舊采用模態(tài)對話框,嚴(yán)重干擾到了用戶操作流程。

QQ在界面加載時,如左圖導(dǎo)航欄下面有個進(jìn)度條反饋加載情況。

QQ在綁定手機(jī)號碼后,如右圖會自動進(jìn)入到匹配通訊錄的任務(wù),并告訴用戶程序在干什么。

2、及時的操作及特殊情況反饋提醒,包括成功、失敗和提示

大家一直用的word辦公軟件,N多年之前關(guān)于錯誤單詞提醒反饋就做的很棒,它不會跳出一個彈窗告訴用戶“您有個單詞拼錯了”,而然在用戶輸完這個單詞準(zhǔn)備下一個單詞前及時的、友好的將錯誤信息以非模態(tài)形式反饋給用戶,在用戶犯錯之前制止。至于用戶改不改,就不是程序該關(guān)心的事了。

QQ在發(fā)送好友邀請后會以非模態(tài)的形式反饋用戶操作成功并自動返回消息界面,并不會balabala的彈出一個個對話框讓用戶確認(rèn)這確認(rèn)那。

如右圖,是QQ綁定手機(jī)時手機(jī)填寫錯誤的提示。

QQ在無網(wǎng)絡(luò)狀態(tài)下,會在消息條目上面以非模態(tài)形式反饋給用戶,而不是蹦出一個警告彈窗。

雖然QQ在非模態(tài)反饋中處理的非常出色了,但這里還存在一個問題。如右圖,當(dāng)我評論附近的人的新鮮事時,只有當(dāng)我準(zhǔn)備發(fā)送評論時才提醒我沒有權(quán)限。

解決方案:當(dāng)我打開鍵盤時即提示,不然辛辛苦苦打了幾百字不能發(fā)會是一種怎么樣的體驗?

(1)案例1:版本升級提示

軟件版本迭代是家常便飯,讓我們看看印象筆記是如何處理的。每次你打開不會跳出彈窗讓你立刻升級,因為用戶是不喜歡完全聽從程序的安排,而且打開軟件必定是當(dāng)前有任務(wù)需要處理,想想那些每次打開軟件求好評的彈窗,何不在我完成任務(wù)后再提醒升級呢?

印象筆記這中非模態(tài)反饋,不僅沒有打擾到用戶正常的操作,同時還在時刻提醒用戶軟件需要升級。 再看看下面sketch和春秋的升級提醒 是不是不太友好??

(2)案例2:聲音調(diào)節(jié)提示

  • 場景:用戶用APP觀看視頻,發(fā)現(xiàn)聲音聽不清,需要調(diào)節(jié)音量。
  • ios端:音量調(diào)節(jié)提示框居中,且較大,極大影響用戶開頭觀影體驗,可能造成用戶從頭觀看。
  • 安卓端:音量調(diào)節(jié)提示框在頂部,且較大,雖如圖不影響觀影體驗,但全屏后開頭觀影體驗較差。
  • INS APP:音量調(diào)節(jié)提示框在頂部,且較小,無論是否全屏均不影響觀影體驗。

分析:

  1. 用戶觀看視頻,關(guān)注點在于視頻內(nèi)容,對于用戶的操作雖然需要給出相應(yīng)的反饋,但是前兩個示范卻嚴(yán)重的干涉了用戶的主任務(wù),并且音量調(diào)節(jié)不屬于一個“突然”或“特殊”的情況,因此提示沒必要過分突顯。
  2. 聲音的本質(zhì)分析,其屬于聽覺范圍的體驗,相比明確的文字或圖片視覺反饋提示,不如用戶直接用耳朵在聽覺上感受音量變化來的更直接更有效。

(3)其他一些非模態(tài)的處理案例

網(wǎng)易云音樂PC端

非模態(tài)的處理更多的是應(yīng)用于游戲當(dāng)中。

以上就是我對“非模態(tài)反饋”的一些總結(jié)與思考??傮w來說,QQ在這方面的處理是同類軟件中比較出色的。謝謝大家耐心看完,第一次發(fā)文,可能有些地方表述不對,歡迎大家指出。

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 富視覺???

    來自上海 回復(fù)
  2. 學(xué)習(xí)了謝謝 希望還可以分享類似內(nèi)容

    來自江蘇 回復(fù)
  3. 雖說你第一次發(fā)文 但是我覺得你把反饋設(shè)計講的很到位 ??

    來自廣東 回復(fù)
  4. 看來你們都忘記了windows系統(tǒng)的無限模態(tài)彈窗攻擊了,哈哈哈哈哈

    來自廣東 回復(fù)
  5. 第一次聽到非模態(tài)反饋這個概念,要慢慢看,先支持下 :mrgreen:

    來自廣東 回復(fù)
专题
30633人已学习19篇文章
2018年过去了,你都收获了什么?新的一年,你需要如何前行?
专题
14893人已学习13篇文章
营销自动化是一个可用于自动执行营销任务的工具。本专题的文章分享了如何搭建自动化营销平台。
专题
125401人已学习18篇文章
你说你会竞品分析,我信!但是肯定写的不好,不服看看别人的。
专题
13166人已学习12篇文章
本专题的文章分享了金融产品经理需要知道的金融基础知识和产品观。
专题
47627人已学习18篇文章
如何提升用户留存率?——相信这是困扰无数产品和运营的问题。