上期補充|產品中"非模態”信息設計的意義與方式

[交互設計] [用戶體驗]

本文轉載自:PMCAFF

市面上關于“非模態反饋”的文章很少,本文作者描述了自身觀點并舉例一些產品實例,來談談什么是非模態反饋,非模態反饋的意義和如何設計非模態反饋。

什么是非模態反饋?

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

淘寶的訂單頁

從淘寶的訂單頁我們可以看出幾個“富視覺非模態反饋”實例:

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

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

以上兩圖都是為了提醒用戶輸入有誤,左圖非模態反饋,信息提示幾秒后便消失,并不妨礙用戶正常的操作行為。右圖為模態反饋,中斷了用戶的操作,需用戶手動確認后方可進行后續操作。

非模態反饋是一種有效的信息提示的表達方式,這種信息的反饋不會影響到用戶正常的操作,更不會打斷用戶的行為,它能夠在關鍵時刻提醒用戶任務的狀態是什么,是完成了還是失敗了還是出錯了甚至是操作提示,這就是非模態反饋。

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

非模態反饋的意義?

非模態反饋存在的意義在于,幫助用戶更加有效的完成任務。“有效”包含了提供有用的信息反饋,提高任務的操作效率。

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

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

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

如何設計非模態反饋?

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

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

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


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

一、明確并告知用戶任務狀態

chrome瀏覽器中打開一個新的頁面,將已加載好的內容呈現給用戶,同時標簽欄中有個小轉頭提示用戶頁面并未全部加載完成。
qq郵箱發送郵件的過程同時允許用戶繼續瀏覽內容。
Gmail是第一個把刪除的模態彈框設計成List Notification這種方式的,提醒用戶撤銷剛才的刪除操作,這種非模態的處理,讓刪除的流程更加順暢和輕松自如。
ins發布一條動態時,以非模態的形式告知用戶上傳進度同時不影響用戶對其他內容的繼續瀏覽。
QQ在界面加載時,如左圖導航欄下面有個進度條反饋加載情況。QQ在綁定手機號碼后,如右圖會自動進入到匹配通訊錄的任務,并告訴用戶程序在干什么。

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

QQ在發送好友邀請后會以非模態的形式反饋用戶操作成功并自動返回消息界面,并不會balabala的彈出一個個對話框讓用戶確認這確認那。如右圖,是QQ綁定手機時手機填寫錯誤的提示。
QQ在無網絡狀態下,會在消息條目上面以非模態形式反饋給用戶,而不是蹦出一個警告彈窗。雖然QQ在非模態反饋中處理的非常出色了,但這里還存在一個問題。如右圖,當我評論附近的人的新鮮事時,只有當我準備發送評論時才提醒我沒有權限。解決方案:當我打開鍵盤時即提示,不然辛辛苦苦打了幾百字不能發會是一種怎么樣的體驗?
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容