原文：True Lies Of Optimistic User Interfaces
? ? ? ? ? https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
作者：Denys Mishunov
譯者：不究
三個(gè)UI去了一個(gè)酒吧，第一個(gè)點(diǎn)了一杯酒，然后點(diǎn)了更多，幾個(gè)小時(shí)以后，他醉了，付了款，離開了。第二個(gè)點(diǎn)了一杯酒，馬上付了款，又點(diǎn)一杯，又付款，繼續(xù)點(diǎn)，繼續(xù)付，幾個(gè)小時(shí)以后，他醉了，離開了。第三個(gè)一進(jìn)這個(gè)酒吧就醉了，然后馬上就離開了。因?yàn)樗涝趺磁莅桑趺醋霾抛钣行?、不浪費(fèi)時(shí)間。你聽說過最后一個(gè)UI嗎？它叫“樂觀UI”。
最近在一些致力于前端開發(fā)和UX的會(huì)議上討論心理性能優(yōu)化的時(shí)候，我非常驚訝地發(fā)現(xiàn)，大家都不怎么談?wù)摌酚^UI設(shè)計(jì)這個(gè)主題，實(shí)際上，這個(gè)名詞都未被明確定義。在這篇文章中，我們會(huì)討論它背后的概念，舉一些例子，也會(huì)探討它后面的心理學(xué)。然后我們將探討它的概念、要點(diǎn)，和怎樣運(yùn)用。
但正式開始前，我要說，樂觀UI并不是一個(gè)單獨(dú)的東西，應(yīng)該說它是一個(gè)界面執(zhí)行過程背后的心理模型，它有自己的由來和理由。
很久以前
很久以前，當(dāng) tweet 這個(gè)詞還只指鳥叫、蘋果公司還處于破產(chǎn)邊緣、人們?cè)诿线€會(huì)放傳真號(hào)碼的時(shí)候，網(wǎng)絡(luò)界面是非常禁欲的，大多數(shù)看上去都沒有一點(diǎn)樂觀。
比如，當(dāng)你點(diǎn)擊一個(gè)按鈕，會(huì)這樣：
1、用戶點(diǎn)擊按鈕；
2、按鈕變成禁用狀態(tài)；
3、請(qǐng)求被發(fā)到服務(wù)器；
4、服務(wù)器發(fā)回響應(yīng)；
5、頁面加載相應(yīng)的狀態(tài)。
這在2016年可能看起來效率低下，然而令人驚訝的是，相同的情景仍然在許多網(wǎng)頁和應(yīng)用中發(fā)生，并且仍然是許多產(chǎn)品交互過程的一部分，因?yàn)樗深A(yù)測(cè)和易錯(cuò)：用戶知道請(qǐng)求已經(jīng)被發(fā)送到服務(wù)器（按鈕的禁用狀態(tài)暗示了這個(gè)），服務(wù)器一旦響應(yīng)，頁面會(huì)刷新，從而清楚地指示了這個(gè)交互過程的結(jié)束。
這種交互方案的弊病是顯而易見的：
首先，用戶必須等待，現(xiàn)在我們知道即使最短的服務(wù)器延遲都會(huì)讓用戶對(duì)整個(gè)品牌（而不僅是這個(gè)特定頁面）產(chǎn)生消極的評(píng)價(jià)；
另外，每次用戶得到的反饋都會(huì)以一種非常打擾的方式出現(xiàn)——比如加載一個(gè)新的頁面，而不是在當(dāng)前頁面上刷新。這會(huì)打斷用戶的任務(wù)和心流。盡管我們不必非要討論多任務(wù)，但在這種情況下，任何心理狀態(tài)的轉(zhuǎn)換都是不讓人愉快的。所以如果用戶不是本來就要轉(zhuǎn)換心理的話（比如在線付款就是一個(gè)轉(zhuǎn)換心理很自然的例子），轉(zhuǎn)換就是一件非常不友好的事情。
不久以前
之后 Web 2.0 到來，提供了一種新的交互模式。核心技術(shù)是 XMLHttpRequest 和 AJAX.
這些新交互模式是用來補(bǔ)充“spinner”（旋轉(zhuǎn)的圈圈）的，一種最簡單的進(jìn)度指示器，唯一作用就是告訴用戶系統(tǒng)很忙?，F(xiàn)在我們不需要在得到服務(wù)器響應(yīng)后重加載整個(gè)頁面，我們只需要刷新渲染好的頁面的一部分。這讓網(wǎng)頁更加的動(dòng)態(tài)，讓用戶的整個(gè)操作流更加順滑和愉悅。
現(xiàn)在點(diǎn)擊按鈕是像下面這樣：
1、用戶點(diǎn)擊按鈕；
2、按鈕被觸發(fā)為禁用狀態(tài)，中間會(huì)出現(xiàn)一個(gè)spinner（一個(gè)圈圈轉(zhuǎn)了轉(zhuǎn)），表示系統(tǒng)正忙；
3、請(qǐng)求被發(fā)送到服務(wù)器；
4、服務(wù)器發(fā)回響應(yīng)；
5、按鈕或頁面的一部分做相應(yīng)刷新。
這個(gè)新的交互模式解決了上面提到的一個(gè)弊病——頁面的更新不再是破壞式的，能很好地保留用戶的心流。
這種新的交互模式已經(jīng)廣泛應(yīng)用于各種數(shù)字媒體，但它仍有一個(gè)問題，用戶必須等待服務(wù)器響應(yīng)。是的，我們可以用一些手段讓我們的服務(wù)器響應(yīng)得更快，但無論我們?cè)趺醇铀?，用戶仍然必須等待。我再說一次，用戶不喜歡等待。有研究表明，78%的消費(fèi)者曾因?yàn)榫W(wǎng)速慢或感覺不可靠而對(duì)網(wǎng)站產(chǎn)生了負(fù)面情緒。此外，根據(jù) Harris Interactive 的調(diào)研，在在線交易遇到問題的時(shí)候，23%的用戶承認(rèn)他們?cè){咒過手機(jī)，11%的人對(duì)手機(jī)尖叫，還有4%的人摔了手機(jī)，延遲是其中的一個(gè)問題。
即使你在用戶等待的時(shí)候給他們顯示了某種進(jìn)度指示器，除非你的指示器非常有創(chuàng)意，不然遠(yuǎn)遠(yuǎn)不夠。在大多數(shù)情況下，用戶已經(jīng)習(xí)慣了旋轉(zhuǎn)的圈圈表示系統(tǒng)很慢，但是圈圈暗示了一種純消極等待——這個(gè)用戶沒有任何其他的選擇，只能等服務(wù)器響應(yīng)，或者干脆點(diǎn)關(guān)閉。
所以現(xiàn)在讓我們前進(jìn)一步，來看看樂觀UI的概念吧！
樂觀UI
如前所說樂觀UI只是一種處理人機(jī)交互的方式。為了理解背后的理念，還是拿用戶點(diǎn)擊按鈕的例子來說明——但是原則是通用的，可以用在任何你想要它變得樂觀的交互過程中。
樂觀，對(duì)未來充滿希望和信心?！＝蛴⒄Z詞典。
讓我們從“對(duì)未來充滿信心”這部分說起。
你認(rèn)為你的服務(wù)器返回錯(cuò)誤的概率是多少？例如，當(dāng)用戶點(diǎn)擊按鈕時(shí)你的 API 會(huì)經(jīng)常出錯(cuò)嗎？或者，當(dāng)他們點(diǎn)擊鏈接時(shí)？坦白說，我認(rèn)為錯(cuò)誤率很低。當(dāng)然，數(shù)據(jù)會(huì)隨著 API、服務(wù)器負(fù)載、錯(cuò)誤處理級(jí)別，以及其他一些前端工程師和 UX 專家都不愿意卷入的因素不同而不同。但只要 API 是穩(wěn)定的可預(yù)測(cè)的，前端正確地處理了動(dòng)作，反饋給用戶“出錯(cuò)了”的概率就應(yīng)該很低，我會(huì)說他們不應(yīng)該超過1%到3%。這意味著在97%到99%的情況下，用戶點(diǎn)擊一個(gè)按鈕后，服務(wù)器返回的應(yīng)該是成功，而不是失敗。
想想吧，如果我們對(duì)服務(wù)器返回成功響應(yīng)有97%到99%的確定，那我們就應(yīng)該對(duì)未來充滿信心，嗯，好吧，至少應(yīng)該比對(duì)薛定諤的貓更確定。
我們可以寫一個(gè)嶄新的故事：
1、用戶點(diǎn)擊按鈕；
2、按鈕馬上變?yōu)槌晒顟B(tài)。
就這么簡單！至少從用戶的角度看沒有更多了，沒有等待，不用盯著一個(gè)禁用的按鈕，或者另一個(gè)討厭的圈圈，交互是無縫的，不會(huì)有任何粗暴的提示。
從開發(fā)者的角度是這樣的：
1、用戶點(diǎn)擊按鈕；
2、按鈕馬上變?yōu)槌晒顟B(tài)；
3、請(qǐng)求被發(fā)送到服務(wù)器。
4、服務(wù)器返回響應(yīng)；
5、我們知道在97%到99%的情況下這個(gè)響應(yīng)肯定是成功，所以我們不需要麻煩用戶；
6、只有在服務(wù)器返回失敗的情況下，界面才會(huì)說明，先別擔(dān)心這個(gè)，我們后面會(huì)說的。
讓我們看一些例子吧！你可能很熟悉喜歡（like）按鈕，就像 Facebook 和 Twitter 上的那種。我們先來看看 Twitter 的。
用戶點(diǎn)擊紅心后，紅心馬上變?yōu)槌晒顟B(tài)。
讓我們打開瀏覽器開發(fā)者工具的“網(wǎng)絡(luò)”，來看看發(fā)生了什么。
向服務(wù)器發(fā)出的請(qǐng)求還在進(jìn)行中，紅心右邊的數(shù)字也沒有更新，但是隨著紅心變色，用戶很明確地知道：成功了——在得到服務(wù)器響應(yīng)以前。
服務(wù)器傳回成功響應(yīng)之后，紅心右邊的數(shù)字更新了，但是這個(gè)變化幅度明顯比紅心變色這種形式要小。這讓用戶的體驗(yàn)非常的順滑流暢，不被打擾，沒有任何等的感覺。
另一個(gè)例子是 Facebook 的，情景是相似的，除了 Facebook 不僅立即變換了顏色，而且更新了數(shù)字。
需要指出的是，如果我們?nèi)タ捶?wù)器響應(yīng)時(shí)間會(huì)發(fā)現(xiàn)超過了1秒，考慮到 RAIL 模型推薦的一次簡單交互最佳服務(wù)器響應(yīng)時(shí)間——100毫秒，1秒顯得太長了，但是，因?yàn)槲覀冇昧藰酚^UI，所以用戶根本沒感覺到慢。好極了，這就是另一個(gè)心理性能優(yōu)化的例子。
但是讓我們面對(duì)現(xiàn)實(shí)，仍然有1%到3%的幾率，服務(wù)器會(huì)返回一個(gè)錯(cuò)誤，或者，用戶離線了，或者，更可能服務(wù)器返回了一個(gè)成功響應(yīng)，但是響應(yīng)中包含著需要客戶端處理的進(jìn)一步信息，這種情況下，用戶不會(huì)得到一個(gè)失敗提示，但是也不能說這就是成功。為了處理這些情況，我們需要首先知道樂觀UI是為什么和怎么樣在心理上作用于用戶的。
樂觀UI背后的心理學(xué)
至今我還沒有聽到過任何主流社交網(wǎng)絡(luò)上關(guān)于樂觀UI的抱怨，所以，樂觀UI能起作用。但是為什么它們能起作用？簡單地來說，是因?yàn)槿藗冇憛挼却?，好了，你可以跳過這節(jié)剩下的部分了。
但如果你愿意繼續(xù)讀下去，你可能會(huì)對(duì)原因感興趣。所以讓我們探索一下這背后的心理學(xué)。
樂觀UI有兩個(gè)值得心理學(xué)分析的組成部分：
1、對(duì)用戶行為的快速響應(yīng)；
2、對(duì)服務(wù)器、網(wǎng)絡(luò)或其他潛在失敗的處理。
對(duì)用戶行為的快速響應(yīng)
當(dāng)我們談?wù)摌酚^UI時(shí)，我們談?wù)摰氖侨藱C(jī)交互的最佳響應(yīng)時(shí)間。早在1968年，Robert B. Miller 就發(fā)表了一篇影響深遠(yuǎn)的文章——《論人機(jī)交互中的響應(yīng)時(shí)間》，他定義了一個(gè)用戶可能從計(jì)算機(jī)得到的多達(dá)17種不同類型的響應(yīng)。其中有一種叫做“對(duì)控制激活的響應(yīng)（response to control activation）”，指的是用戶按下一個(gè)鍵到得到視覺反饋之間的延遲，就算在1968年也不應(yīng)超過0.1到0.2秒。是的，RAIL模型不是第一個(gè)這么提的，這個(gè)建議早在五十年前就出現(xiàn)了。Robert 寫道，這么短的延遲對(duì)于一些熟練用戶來說都還是顯得太長了，理想情況下，用戶得到反饋不應(yīng)超過100毫秒。這是考慮到人類可以執(zhí)行的最快無意識(shí)動(dòng)作之一——眨眼的時(shí)間，100毫秒間隔通常被感知為即時(shí)的。倫敦大學(xué)學(xué)院神經(jīng)病學(xué)研究所的 Davina Bristow 說：“大多數(shù)人每分鐘眨眼15次，眨眼平均持續(xù)100到150毫秒?！彼a(bǔ)充道：“這意味著我們每年至少要花9天時(shí)間眨眼?！?/p>
因?yàn)樗囊曈X上立即反饋的特性（甚至在實(shí)際請(qǐng)求完成之前），樂觀UI是早期心理性能優(yōu)化的手段之一。但我們真的不必驚訝于人們喜歡在一次眨眼之間得到反饋這個(gè)事實(shí)，而且這也不難做到。早在之前，我們就在用戶點(diǎn)擊之后把按鈕立即變?yōu)榻脿顟B(tài)來告訴用戶他點(diǎn)擊了。但是，禁用狀態(tài)僅僅表示一種消極等待，用戶不能做任何事情，也無法控制進(jìn)程，這會(huì)讓用戶非常沮喪。這就是為什么我們?cè)跇酚^UI設(shè)計(jì)中完全跳過禁用狀態(tài)，我們只傳達(dá)積極結(jié)果，而不是讓用戶等待。
處理潛在失敗
讓我們進(jìn)入第二個(gè)有趣的心理學(xué)部分，處理潛在失敗。有大量的信息和文章指點(diǎn)我們?nèi)绾我宰詈玫姆绞教幚鞺I錯(cuò)誤，但在我們講具體實(shí)現(xiàn)方法之前，最重要的并不是如何處理錯(cuò)誤，而是，我們什么時(shí)候處理。
人類自然地把他們的活動(dòng)組織成塊，以目的或子目的的完結(jié)為塊的結(jié)束。有時(shí)候我們把這些塊稱作“思路（train of thought）”、“思想流（flow of thought）”或簡單地稱作“心流（flow）”。心流狀態(tài)以巔峰快感（peak enjoyment）、精力集中和創(chuàng)造力集中為特點(diǎn)。用戶在心流狀態(tài)下完全沉浸于活動(dòng)中。
在網(wǎng)上，塊與塊的間隔時(shí)間要短得多。讓我們回顧一下 Robert 的工作，響應(yīng)類型包括：
1、對(duì)列出信息的簡單查詢的響應(yīng)；
2、對(duì)圖形形式的復(fù)雜查詢的響應(yīng)；
3、對(duì)“系統(tǒng)，你明白我嗎？”的響應(yīng)。
他認(rèn)為不管是哪種查詢，用戶得到相應(yīng)結(jié)果的用時(shí)都不應(yīng)該超過2秒。這個(gè)間隔時(shí)間也取決于一個(gè)人的工作記憶（指一個(gè)人可以保持一定量的信息在其腦海中，更重要的是，能夠運(yùn)用它們的時(shí)間跨度）。對(duì)我們開發(fā)人員和UX專家來說，這意味著，與元素交互的2秒內(nèi)，用戶處于心流中，并且專注于他們期望獲得的回應(yīng)。如果服務(wù)器在此期間返回了錯(cuò)誤，用戶會(huì)保持在與界面的對(duì)話中。有點(diǎn)像兩個(gè)人對(duì)話，一個(gè)人說了點(diǎn)什么，然后另一個(gè)人溫和地表示不同意。想象一下，如果另一個(gè)人點(diǎn)了很長一段時(shí)間的頭（就像我們?cè)赨I中提供的成功狀態(tài)），但是最后突然說“不”。很奇怪，對(duì)吧？所以一個(gè)樂觀UI設(shè)計(jì)，必須要在2秒心流內(nèi)向用戶傳達(dá)失敗。
終于，有了如何在樂觀UI設(shè)計(jì)中處理失敗的心理學(xué)，讓我們來看看那些1%到3%的失敗請(qǐng)求吧。
樂觀UI設(shè)計(jì)的悲觀面
目前我聽到的最常見的說法是，樂觀UI是一種黑色模式——欺騙，如果你要這么說的話。采用這種設(shè)計(jì)，我們對(duì)用戶的交互結(jié)果撒了謊。任何法院可能都會(huì)這么判呢。不過，我把這種技術(shù)視為一種預(yù)測(cè)或希望。還記得關(guān)于樂觀的定義嗎？現(xiàn)在我們來到了“希望”的部分?！罢f謊”和“預(yù)測(cè)”之間的區(qū)別，在于如何處理這些1%到3%的失敗請(qǐng)求，讓我們來看看 Twitter 的樂觀的喜歡按鈕在離線狀態(tài)下的表現(xiàn)。
首先，根據(jù)樂觀UI設(shè)計(jì)模式，按鈕在被點(diǎn)擊后立即切換到成功狀態(tài)，完全與用戶在線時(shí)的行為一樣。
但由于用戶離線了，請(qǐng)求失敗。
因此錯(cuò)誤盡可能快地在心流時(shí)間內(nèi)傳遞給用戶。通常是2秒內(nèi)。Twitter 以最可能簡單的形式做——直接恢復(fù)按鈕的狀態(tài)。
這里有些好心讀者可能會(huì)說，這種錯(cuò)誤處理還可以更進(jìn)一步，告訴用戶請(qǐng)求不能被發(fā)送，或者發(fā)生了錯(cuò)誤。這可以讓系統(tǒng)盡可能透明。但是這會(huì)產(chǎn)生一個(gè)，或者說一系列的問題：
突然出現(xiàn)在屏幕上的任何類型的通知都會(huì)切換用戶的上下文，提示他們分析故障背后的原因，而這可能是錯(cuò)誤消息中顯示的原因；
像任何類型的錯(cuò)誤信息或通知一樣，應(yīng)該在新內(nèi)容中提供可操作的信息來引導(dǎo)用戶；
這個(gè)可操作的信息將指向另一個(gè)內(nèi)容。
好了，現(xiàn)在我們都同意這變得有點(diǎn)復(fù)雜了。雖然這種錯(cuò)誤處理方法對(duì)于像網(wǎng)站上的大型表單來說是合理的，但是對(duì)于像點(diǎn)擊一個(gè)喜歡按鈕這樣的簡單操作來說，無論考慮到開發(fā)還是用戶的工作記憶，都有點(diǎn)過度了。
我們對(duì)于樂觀UI中出現(xiàn)的錯(cuò)誤應(yīng)該要保持開放態(tài)度，我們應(yīng)盡可能快地通知用戶，讓它不成為一個(gè)謊言。但要根據(jù)內(nèi)容的輕重來做。對(duì)一個(gè)失敗的喜歡，輕輕地把按鈕變回以前的狀態(tài)就足夠了，除非這個(gè)喜歡對(duì)用戶來說特別重要——而那時(shí)，點(diǎn)喜歡最好總是有效。
極端悲觀主義
還有一個(gè)問題，如果用戶在看到成功反饋之后，服務(wù)器返回響應(yīng)之前，關(guān)閉了瀏覽器選項(xiàng)卡，會(huì)發(fā)生什么？最不愉快的情況是，在用戶的請(qǐng)求被發(fā)送到服務(wù)器之前就關(guān)閉了選項(xiàng)卡。但除非用戶非常靈活，或有減慢時(shí)間的能力，否則這幾乎是不可能的。
如果一個(gè)樂觀UI被正確地實(shí)現(xiàn)了，并且只適用于那些服務(wù)器響應(yīng)時(shí)間少于2秒的元素，這個(gè)用戶就不得不在2秒內(nèi)關(guān)閉選項(xiàng)卡。2秒對(duì)一次按鍵來說可能不是特別困難，但是就像我們說過的，有97%到99%的用戶請(qǐng)求都是成功的，不管選項(xiàng)卡是開著還是關(guān)著，只是回應(yīng)沒有被傳回到客戶端而已。
所以這個(gè)問題?？赡苤怀霈F(xiàn)在那些1%到3%的用戶身上，但是又有多少人會(huì)急急忙忙地在2秒內(nèi)關(guān)閉一個(gè)選項(xiàng)卡呢？除非他們是在一個(gè)關(guān)閉選項(xiàng)卡競速比賽上。我不認(rèn)為這個(gè)數(shù)量會(huì)很多。但是如果你認(rèn)為這會(huì)影響你的特殊項(xiàng)目或者造成任何負(fù)面后果，那么可以用工具做一些用戶行為分析，如果出現(xiàn)這種情況的概率足夠高，那就把樂觀交互限制在那些非關(guān)鍵性元素上。
我故意沒有提到請(qǐng)求被人為延遲的例子。這些不是通常的樂觀UI設(shè)計(jì)討論的范疇。此外，我們已經(jīng)花了足夠多的時(shí)間在悲觀面了，最后讓我們來總結(jié)一下實(shí)現(xiàn)一個(gè)樂觀UI的要點(diǎn)。
經(jīng)驗(yàn)法則
我真誠希望本文幫助你了解樂觀UI設(shè)計(jì)背后的一些主要概念。也許你有興趣在你的下一個(gè)項(xiàng)目中嘗試這種方法。如果是這樣，在開始之前，請(qǐng)注意以下幾點(diǎn)：
我們迄今為止討論的所有事項(xiàng)的先決條件——確保你所依賴的 API 是穩(wěn)定的，并返回可預(yù)測(cè)的結(jié)果。說得夠多了。
在將請(qǐng)求發(fā)送到服務(wù)器之前，接口應(yīng)捕獲潛在的錯(cuò)誤和問題。更好的是，完全消除可能導(dǎo)致 API 錯(cuò)誤的任何事情。UI元素越簡單，運(yùn)用樂觀UI就越簡單。
將樂觀模式應(yīng)用于簡單的二元元素，只有成功或失敗響應(yīng)的那種。例如，如果點(diǎn)擊按鈕后，服務(wù)器會(huì)響應(yīng)“是”，“否”或“可能”（各種不同程度的成功），則這樣的按鈕最好不要用樂觀模式。
了解你的 API 的響應(yīng)時(shí)間。這是至關(guān)重要的。如果你知道特定請(qǐng)求的響應(yīng)時(shí)間從來不會(huì)低于2秒，那么最好先對(duì)你的 API 進(jìn)行一些優(yōu)化。如前所述，樂觀UI用于服務(wù)器響應(yīng)時(shí)間小于2秒時(shí)最好。超過這個(gè)范圍可能會(huì)導(dǎo)致意想不到的結(jié)果和用戶的沮喪情緒。這是警告哦。
樂觀UI不僅僅用于點(diǎn)擊按鈕。該方法可以應(yīng)用于頁面生命周期中的不同交互和事件，包括頁面的加載。例如，漸進(jìn)加載頁面（skeleton screen）遵循相同的理念——你預(yù)測(cè)服務(wù)器將成功響應(yīng)，所以預(yù)先給圖片、文本段等留好占位，以盡快向用戶顯示頁面。
正如我們所看到的，樂觀UI設(shè)計(jì)在網(wǎng)絡(luò)上并不是一個(gè)新東西，也不是一種特別先進(jìn)的技術(shù)，它只是另一種方法，另一種心理模型，以幫助你管理產(chǎn)品的感知性能?；谌藱C(jī)交互的心理知識(shí)，聰明地運(yùn)用樂觀UI設(shè)計(jì)方法，可以幫助你在網(wǎng)絡(luò)上構(gòu)建更好、更無縫的體驗(yàn)，而且也不費(fèi)什么事。但是，為了使模式真正有效，不讓它變成謊言，我們必須了解樂觀UI設(shè)計(jì)的背后機(jī)制。
