提醒、 校驗與通知: 選擇正確的傳達(dá)方式(譯文)標(biāo)題文章

摘要:狀態(tài)反饋對任何系統(tǒng)的成功至關(guān)重要渊胸。知道何時使用3種常見的傳達(dá)方式是給用戶提供支持的關(guān)鍵旬盯。

在交互設(shè)計中,不論是應(yīng)用程序翎猛,網(wǎng)站還是硬件設(shè)備(小到智能手表胖翰,大到恒溫器的任何設(shè)備),系統(tǒng)都應(yīng)該通過適當(dāng)?shù)姆答佔層脩袅私猱?dāng)前的狀況办成。確保系統(tǒng)的狀態(tài)始終可見是界面設(shè)計10個可用性原則之一泡态。系統(tǒng)狀態(tài)信息,如錯誤提示和系統(tǒng)活動通知等迂卢,可以讓用戶充分理解系統(tǒng)當(dāng)前狀況某弦。

傳達(dá)系統(tǒng)狀態(tài)的最佳方式取決于以下幾個關(guān)鍵因素:

* 需要被傳達(dá)的信息的類型

* 信息的緊要性 — — 用戶是否需要立即看到它

* 信息是否要求用戶執(zhí)行操作

三種常見的系統(tǒng)狀態(tài)傳達(dá)方式包括校驗、通知和狀態(tài)指示而克。在產(chǎn)品設(shè)計中這些術(shù)語有時可互換使用靶壮,但是他們代表在不同情境下使用的不同的傳達(dá)方式。理解它們之間的差異將有助于提高反饋的可用性员萍,幫助用戶根據(jù)需要選擇最佳的處理方式腾降。

提醒

提醒是一種使頁面元素 (不論是內(nèi)容還是用戶界面的一部分)用以告知用戶是有一些特別的值得用戶關(guān)注的信息存在。通常情況下碎绎,該指示將通過一些元素表達(dá)相應(yīng)的項目存在一些變化螃壤。

盡管我們在下文中會論述到,指示很大程度上會頻繁地運用于標(biāo)志驗證錯誤或通知中筋帖,但提醒也可以獨立的運用奸晴。提醒是一種為了吸引用戶注意力集中到一個特定內(nèi)容或交互界面元素上的視覺提示,它本質(zhì)上是動態(tài)的日麸。(如果一個標(biāo)識永遠(yuǎn)是一種狀態(tài)寄啼,那無論它設(shè)計得如何華麗,它都不是提醒)。

指示至少有三種可能的途徑來實現(xiàn):

* 盡管不能一概而論墩划,但大多數(shù)情況下涕刚,指示表現(xiàn)為圖標(biāo)的形式。易于識別的圖標(biāo)可以作為非常有效的傳達(dá)工具乙帮。

* 排版的變化也可以作為指示杜漠,比如,用粗體字的公告來標(biāo)識未讀的電子郵件察净,或是在用不同的顏色來象征投資賬戶價格的漲跌碑幅,等等。

* 還有一種不常見的途徑塞绿,就是通過放大尺寸或加入特效(如震動)來使某些項目顯得更為突出沟涨,這也可作為一種指示。

美國最大的點評網(wǎng)站“Yelp”就在搜索結(jié)果中以綠色標(biāo)記的提醒來表示“Tea Market”正在進(jìn)行折扣優(yōu)惠异吻。這種指示就向用戶傳達(dá)了“Tea Market”的附加信息裹赴。

提醒的特性

* 提醒是有情境的。它們與交互元素或某些內(nèi)容相關(guān)聯(lián)诀浪,應(yīng)該與其所要被指示的元素或內(nèi)容緊密結(jié)合棋返。

* 提醒是有條件的——它們不是一直存在的,而是根據(jù)特定的條件來設(shè)置或改變雷猪。以下圖“American Centure Investments”網(wǎng)站為例睛竣,一個顯示股票行情的指示會根據(jù)股票價格的漲跌而產(chǎn)生變化。此外求摇,在上文點評網(wǎng)站“Yale”的例子中所示的標(biāo)簽提醒射沟,只在該商品進(jìn)行折扣優(yōu)惠的時候才會出現(xiàn)。

* 提醒是被動的与境。它不需要用戶去主動做什么验夯,而是作為一種交互工具來提示用戶其需要注意的地方。


“American Centure Investments”使用了一個條件性的指示來反映一支特定股票的行情摔刁。如果日行情是下跌的挥转,其提醒是一個紅色向下的箭頭,如果日行情是上漲的共屈,其提醒就是一個綠色向上的箭頭绑谣。股市行情的狀況將影響顯示下一次股票價格時的提醒。

提醒也可能會造成整體界面的雜亂拗引,甚至分散用戶的注意力借宵,所以重要的是要在你的設(shè)計中考慮到底使用多少個(如果必要的話)提醒。

判斷一個提醒是否適當(dāng)時寺擂,需要考慮以下幾點:

* 這個提醒所反映的信息對用戶來說有多重要?它值得占用頁面上的空間來通知用戶嗎?

* 這個信息的使用頻率如何?

* 用戶希望看到這個信息嗎?

* 如果不作提醒暇务,這個信息會被遺漏嗎?

* 這個提醒的設(shè)置對用戶發(fā)現(xiàn)信息有多大的影響?

校驗

校驗消息是與用戶輸入相關(guān)的錯誤提示: 它們告知用戶剛輸入的數(shù)據(jù)不完整或不正確。例如怔软,在電子商務(wù)系統(tǒng)中垦细,校驗信息往往涉及名稱、 帳單地址和信用卡等信息挡逼。

Cobragolf.com

提供校驗消息清楚表明哪些字段是存在錯誤的括改。不過信息復(fù)雜、令人困惑家坎。更好的表達(dá)方式可能會是"請輸入一個有效的電子郵件地址嘱能。”

校驗的特性

用戶需要進(jìn)行操作才能消除校驗消息虱疏。

校驗消息中信息是與上下文情境以及用戶存在問題的特定輸入相關(guān)的惹骂。

根據(jù)不同的需求形式校驗消息也應(yīng)該有所不同。然而做瞪,在一般情況下对粪,如果用戶的輸入不正確,系統(tǒng)應(yīng)通過提供可識別的装蓬、明確的消息通知用戶著拭,幫助用戶糾正錯誤。校驗消息應(yīng)遵循錯誤消息的準(zhǔn)則 牍帚,而不是簡單地找出問題儡遮,應(yīng)該告訴用戶如何解決。例如暗赶,相比于"你沒有輸入信息"鄙币,“請輸入您的街道地址"更有禮貌,且指向解決方案蹂随。

由于校驗是有情境的爱榔,同時使用圖標(biāo)指示以及校驗消息有助于幫助傳達(dá)哪些項目需要輸入或需要糾正。

Bestbuy.com 提供有助于校驗消息告訴用戶如何解決這個問題糙及,也用圖標(biāo)指示以及不同的顏色將用戶的注意力吸引到需要更正的地方详幽。

通知

通知是信息式的消息提醒用戶系統(tǒng)內(nèi)發(fā)生了常規(guī)事件。與校驗不同浸锨,通知可能不直接與用戶輸入掛鉤唇聘,甚至與用戶當(dāng)前在系統(tǒng)中的活動無關(guān)。但它們通常告知用戶系統(tǒng)狀態(tài)的變化或有用戶可能感興趣的事件發(fā)生柱搜。在電子郵件迟郎、 社交網(wǎng)絡(luò)和移動電話應(yīng)用程序中,即使用戶離開應(yīng)用程序聪蘸,通知依然可以被推送宪肖。

通知可以根據(jù)情境應(yīng)用到特定的用戶界面中表制,或全局的應(yīng)用到整個系統(tǒng)中。

Facebook APP在新鮮事頁面使用了一個基于情境的通知控乾,用于告訴用戶有新的事件么介。此通知不需要用戶進(jìn)行任何操作。

通知的特點

* 通知沒有引導(dǎo)的用戶立即進(jìn)行操作蜕衡。

* 通知告知用戶發(fā)生了特定的事件壤短。

通知有兩種主要類型,他們的區(qū)別在于是否要求用戶根據(jù)通知進(jìn)行操作慨仿。

1. 需要進(jìn)行操作的通知久脯;用于通知需要用戶進(jìn)行操作的事件。在這個層面上镰吆,它們是類似于校驗帘撰,但由于它們不是由用戶自己操作而引發(fā)的,在設(shè)計中需要被區(qū)別万皿。

需要進(jìn)行操作通知往往緊急的骡和,應(yīng)該是直接顯示在用戶界面上;例如,它們可以以彈窗的形式出現(xiàn)在用戶界面上相寇,迫使用戶立即進(jìn)行操作慰于。它們需要用戶操作才會消失。

Mac 操作系統(tǒng)使用了這種通知用于通知用戶有可用的系統(tǒng)更新唤衫。用戶必須選擇安裝此更新程序或晚些時候再次提醒才能讓其從屏幕上消失婆赠。這種是侵入式的通知,需要用戶進(jìn)行操作佳励。

2. 被動式通知是信息式的; 他們通知用戶系統(tǒng)中發(fā)生的不需要進(jìn)行任何操作的事件休里。移動應(yīng)用程序中的許多通知是被動式的:通常用于通知用戶可能感興趣的事件。

被動的通知通常不緊急赃承,應(yīng)該是較少的干擾妙黍。實現(xiàn)中典型的被動的通知是標(biāo)記或出現(xiàn)在屏幕的角落上的氣泡提示。被動式的通知可以輕易消除瞧剖,因為他們不需要用戶進(jìn)行操作拭嫁。當(dāng)通知所提供的信息是理解系統(tǒng)狀態(tài)的關(guān)鍵時,使用容易被忽略的被動式通知是有會問題的抓于。

Adobe Creative Cloud 用非侵入式的被動式通知來通知用戶有可用的應(yīng)用程序更新做粤。此通知在屏幕上出現(xiàn)了幾秒鐘后就會消失。用戶不需要采取任何操作捉撮。

Uniqlo.com 用于非侵入式的被動式通知作為添加到購物車的反饋怕品。必要讓用戶操作來消除通知。這類通知有時會導(dǎo)致網(wǎng)購物者因沒有注意到簡訊而引發(fā)問題巾遭。用戶錯過提示消息可能會導(dǎo)致他們將一個東西多次添加到購物車中肉康,或者需要檢查到底什么東西被添加到了購物車中闯估,打亂他們購物流程。

通知的設(shè)計難點在于它們不是針對用戶特定的操作產(chǎn)生的即時的吼和、明顯的反饋涨薪。相反,用戶很可能正在做一些不想關(guān)的事情和也沒有思考通知提出的問題纹安。這就需要建立更多的上下文情境以及為用戶提供足夠的背景信息,以促進(jìn)用戶理解該通知的內(nèi)容是什么砂豌。

(相比之下厢岂,對于校驗,用戶剛剛做完那個需要糾正的事項阳距。因此塔粒,校驗消息不需要讓指導(dǎo)用戶理解當(dāng)前的任務(wù)。例如筐摘,如果網(wǎng)購結(jié)賬過程中信用卡到期日期未填卒茬,校驗消息不需要說"請輸入你為正在購買的Uniqlo.com的藍(lán)色無袖連衣裙支付$29.90的信用卡的到期日期”。然而咖熟,第二天圃酵,這件衣服從倉庫發(fā)貨時,通知需要比"你的包裹已經(jīng)發(fā)出"更加詳細(xì)馍管。)

如果通知是有關(guān)聯(lián)情境的郭赐,并涉及界面中的特定元素,在元素上的提醒標(biāo)記可以傳達(dá)通知發(fā)生的位置并吸引用戶的注意力确沸。例如捌锭,一個在移動應(yīng)用程序圖標(biāo)上的提醒標(biāo)記顯示用戶從相應(yīng)的APP收到的通知。

IPhone 的消息應(yīng)為收到新的消息發(fā)送通知罗捎。同時观谦,在消息應(yīng)用圖標(biāo)上出現(xiàn)一個提醒標(biāo)記用于傳達(dá)通知來自于何處。若要清除該標(biāo)記桨菜,用戶必須查看該訊息豁状。

Mint.com 同時使用通知和提醒標(biāo)記用于傳達(dá)的有一個賬單需要注意。警示提醒(1)出現(xiàn)在緊挨著用戶需要注意的賬戶摘要位置倒得,同時通知(2)和其他重要的信息出現(xiàn)在頁面的中央?yún)^(qū)域替蔬。(通知消息中的文字需要更有幫助。)

選擇正確的傳達(dá)方式是至關(guān)重要的

使用錯誤的傳達(dá)方式可會對用戶體驗產(chǎn)生負(fù)面影響屎暇。在前面提到Y(jié)elp在搜索結(jié)果中使用綠色標(biāo)記以指示茶葉市場有特殊交易方式承桥。此信息是有關(guān)聯(lián)情境的,對明確的想要尋找喝茶的地方的用戶非常重要根悼。

你可能會想到可以另一方式凶异,即當(dāng)促銷來臨時發(fā)送通知給潛在的茶消費用戶蜀撑。錯!不考慮用戶當(dāng)前的目標(biāo)隨意發(fā)送通知,可能會被忽略剩彬,甚至可能干擾用戶酷麦,因為通知會打斷用戶當(dāng)前的任務(wù),而且可能與用戶當(dāng)前的需要無關(guān)喉恋。

(一般情況下沃饶,任何與用戶的目標(biāo)和傾向無關(guān)的廣告都會被忽略.)

另外,“toast”——Android系統(tǒng)中一種消息框類型 (會幾秒鐘后消失的非彈出式小提示轻黑,如 Facebook APP中使用的新事件提示)糊肤,這種被動式通知并不適用于錯誤消息提示。使用校驗氓鄙,或其他方式馆揉。事實上,我們移動端用戶之所以要花5分鐘等待一些內(nèi)容加載僅僅是因為她沒有注意到在屏幕底部出現(xiàn)并在在5秒后迅速消失的小小的錯誤提示抖拦。

Allmodern.com 針對對商品收藏采用了需要用戶操作的通知方式升酣。對于正在將大量的商品加入收藏夾的用戶,這可能是麻煩的且會干擾操作的反饋方式态罪。更好地傳達(dá)方式應(yīng)該是在屏幕的角落顯示可見的但不需要用戶進(jìn)行操作來清除的被動式通知噩茄。

結(jié)論

三個傳達(dá)方式的主要區(qū)別是:

* 指示提供有關(guān)動態(tài)內(nèi)容或UI元素的補(bǔ)充信息。它們的出現(xiàn)是有條件复颈, 即它們可能會在特定條件下出現(xiàn)或被改變巢墅。

* 校驗是與用戶執(zhí)行的操作或輸入相關(guān)聯(lián)的。

* 通知適用于與系統(tǒng)相關(guān)的事件券膀。

下表中簡要的列出了它們的差異:

了解何時以及如何使用這些反饋方式有助于建立向用戶傳達(dá)信息的合理機(jī)制君纫。通過評估需要傳達(dá)的信息的類型,我們可以確定使用何種正確的途徑芹彬。

原文地址:http://www.nngroup.com/articles/indicators-validations-notifications/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蓄髓,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子舒帮,更是在濱河造成了極大的恐慌会喝,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玩郊,死亡現(xiàn)場離奇詭異肢执,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)译红,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進(jìn)店門预茄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人侦厚,你說我怎么就攤上這事耻陕∽净眨” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵诗宣,是天一觀的道長膘怕。 經(jīng)常有香客問我,道長召庞,這世上最難降的妖魔是什么岛心? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮篮灼,結(jié)果婚禮上忘古,老公的妹妹穿的比我還像新娘。我一直安慰自己穿稳,他們只是感情好存皂,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布晌坤。 她就那樣靜靜地躺著逢艘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪骤菠。 梳的紋絲不亂的頭發(fā)上它改,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機(jī)與錄音商乎,去河邊找鬼央拖。 笑死,一個胖子當(dāng)著我的面吹牛鹉戚,可吹牛的內(nèi)容都是我干的鲜戒。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼抹凳,長吁一口氣:“原來是場噩夢啊……” “哼遏餐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起赢底,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤失都,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后幸冻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粹庞,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年洽损,在試婚紗的時候發(fā)現(xiàn)自己被綠了庞溜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡碑定,死狀恐怖强缘,靈堂內(nèi)的尸體忽然破棺而出督惰,到底是詐尸還是另有隱情,我是刑警寧澤旅掂,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布赏胚,位于F島的核電站,受9級特大地震影響商虐,放射性物質(zhì)發(fā)生泄漏觉阅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一秘车、第九天 我趴在偏房一處隱蔽的房頂上張望典勇。 院中可真熱鬧,春花似錦叮趴、人聲如沸割笙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伤溉。三九已至,卻和暖如春妻率,著一層夾襖步出監(jiān)牢的瞬間乱顾,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工宫静, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留走净,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓孤里,卻偏偏與公主長得像伏伯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捌袜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容