動畫進度指示器的最佳實踐：好的交互設計會提供反饋
作者：xElaine
全文共 3343 字，閱讀需要 7 分鐘
———— / BEGIN / ————
系統狀態的可見性是用戶交互設計最重要的原則之一。
在使用系統時，用戶想要感覺一切都在掌控之中，這意味著在任何特定時間下，他們想要知道並了解他們當前的處境，尤其是在系統正處於繁忙狀態時。
當系統在處理或者載入進程時，一個等待動畫進度指示器是向用戶展示系統狀態最為常見的形式。
在這篇文章中，我們將探討動畫進度指示器的幾種主要類型，並提供建議在什麼情況如何使用每種類型。
好的交互設計會提供反饋
儘管app的及時響應是最好的，但總有些app為了速度不能及時響應的時候。
一個緩慢的響應可能由於互聯網連接故障引起，或者源於這個操作本身就會佔用一段很長的時間（比如安裝OS系統的更新）。
對於這樣的情況，為了減少用戶的焦躁不安，你必須讓用戶明確這個app正在運行它的請求，真實的進程正在被處理。
因此，應該提供反饋給用戶，讓用戶了解app在適當時間內正在發生些什麼。
永遠提供及時反饋的類型
一個用戶的等待時間從他們發起操作便開始了，而最糟糕的是用戶沒有得到任何指示表明系統已經接收到了操作。
當一個app無法告知用戶完成這項操作需要花費一定時間，用戶會認為這個app並沒有接受到請求，並且再一次發起操作請求——大量的額外點擊和輸入輸出都歸咎於反饋信息的匱乏。
任何操作，比如點擊一個按鈕或者下滑刷新，都應當有一個及時的反饋。在接受到用戶操作請求後，給用戶一些及時的視覺反饋去表明操作已經被發起是非常重要的。
下滑刷新操作 來源：Behance
對任何操作的進程指示器花費超過1秒的時間
當app使用超過0.1秒但是少於1秒的時間去響應用戶輸入時，這感覺好像這個app正在促使結果出現。
儘管用戶注意到了一小段延遲，他們仍然會專註在他們當前的任務上。但在經過1秒後，用戶的注意力開始會分散，他們會意識到正在等待一個速度緩慢的app的響應。
為了減少用戶的不確定性，用進程指示器去為需要超過1秒時間響應的操作提供一個等待的原因。
（對於任何載入時間不到一秒的操作不推薦使用動畫，因為用戶對只是一閃而過的畫面可能感受到不安）
動畫進程指示器緩和了用戶等待時長帶來的負面影響，並延長了用戶在站點或者app上的注意力。
進程指示器的類型
進程指示器告訴用戶app需要更多的時間去處理最後的用戶操作。最簡單的進程指示器形式是不確定的——這些指示器的類型需要用戶在操作即將結束時等待，但是他們並不指示需要等待多長的時間。
無限循環動畫提供了系統正忙的反饋，但是並不提供任何關於用戶將要等待多久的信息。圖片來源：Behance
常規上，這種類型的進程指示器應該用於快速的響應（2-10秒內）。使用戶盯著旋轉輪或無限線性動畫更長的時間會增長網站的跳出率，或者使得人們關閉掉app。
另一種類型的進程指示器指示了一個操作需要花費多久的時間（大致上或者是確切的時間）。
這種類型的進程指示器被稱為確定模式——它們是等待動畫反饋時最能提供信息的指示器類型，因為它們展示了當前的進度，現在有多少已經被完成了，以及還剩下多少未完成。
一個進程趨於完成的視覺指示器使用戶感到放鬆，並且讓他們更願意等待。
不確定的指示器視覺化不具體的等待時間，而確定的指示器顯示了這個操作需要花費多久的時間。圖片來源：Material Design
兩種最受歡迎的動畫進程指示器
有兩種最受歡迎的動畫進程指示器類型——循環動畫進程指示器和百分比完成指標進程指示器。
循環動畫指示器
因為大部分的循環動畫都是不確定的，並且用於延遲的多種類型（包括很長的那些延遲），所以這種類型的進度指示器趨向於有許多消極影響。
比如，在Apple iOS里的一個默認的載入圖標（圍繞著一個中心點區域面向四周發散灰色線條的旋轉器）被用於多種操作系統功能延遲，表明了所有從啟動設備到連接網路或載入數據的問題的延遲。正因為如此，用戶不想只看見一個沒有任何進程或者時間指示的載入旋轉器。
看著載入旋轉器彷彿在看著時鐘轉動 —— 當你這樣做時，時間似乎停止了。圖片來源：appance
百分比指示器
百分比完成指標指示器是一種確定的進程指示器，它從0%填滿到100%，並且不會負增長。線性和環形進程指示器都可以是百分比完成指標的形式。
線性百分比完成指標進度指示器。圖片來源：Adobe Stock
環形百分比完成指標進度指示器。圖片來源：Adobe Stock
常規翻閱網站時，對於使用10秒或更多時間的長進程應該使用百分比完成指標的動畫指示器。
基於Jakob Nielsen的關於響應時間的研究，10秒是用戶在當前任務上保持注意力的極限，在10秒過後，如果沒有得到足夠的關於等待結果還需要多久的信息，用戶會迅速的變得不耐煩。
設計進程指示器的要點
如果不能縮短時間，應該始終試圖讓等待的時間變得更愉悅。
解釋為什麼用戶在等待
大多數情況下，如果用戶被提前告知情況，他們會更為有耐心。通過內含文本的形式，通知用戶發生了什麼，並且解釋為什麼用戶在等待，這對於增加用戶的清晰度是很有幫助的。
Skyscanner告知用戶它在檢查所有可用的服務商去搜尋最佳航班選擇。
為耗時的任務提供一個大致的預估時間
時間不用十分精確，舉個例子，「這可能要花費5分鐘」就足夠鼓勵用戶繼續等待結果出來。
Apple iOS的軟體更新預估時間
展示工作完成的絕對量
對無法提前知道需要完成多少工作量的消費時間的操作，使用一個百分比指標指示器是不太可能的，但是仍然可以就明確的已完成的工作量提供運行中的進度反饋。
在這種情況下，考慮到展示步驟的數量，因為了解步驟的數量可以至少讓用戶有一個大致的預估。
當進度無法被準確監控時，考慮展示步驟的數量而不是百分比。
不要停止進度條
進度條確保用戶對操作正在多快被處理保留了期待，因此，任何意料不到的停滯都將被注意到並且影響到用戶的滿意度——最壞可能的情況是：當進度條接近99%時突然停止了。
大部分用戶會對這樣的行為感覺挫敗，因為這會讓他們認為app有故障了。
開心的是，有一個簡單的解決方案——採用一致，穩定和持續增長進度條的方式掩飾進程中小的延遲。
圖片來源：Behance
讓用戶感覺進度條很快
記住看起來的感知就和計算機運算速度一樣重要。
為了讓用戶感覺進度條很快，可以讓進度條在開始時慢一些，而在接近結束的時候移動快一點——這種方式可以給用戶一種完成時間很快速的感覺。
圖片來源：Bechance
提供視覺上的干擾分散注意力
創造性的進度指示器可以減少用戶對於時間的時長觀念。
如果app在等待時為用戶提供了一些有趣的視覺干擾去觀看，這會讓用戶更少的留意到在等待這件事情。
因此，為了確保用戶在等待什麼發生的時候不感覺到無聊，可以提供用戶一個干擾來分散注意力。比如下面的例子，干擾可以是有趣的。
圖片來源：Behance
或者干擾也可以很可愛…
圖片來源：Vimeo
或者是出其不意的抓住用戶的注意力，等候app載入。
好的動畫可以分散訪問用戶的注意力，讓他們無視很長的載入時間。圖片來源：Behance
傳統進度指示器的絕佳替代
正如剛剛所了解到的，當操作需要花費一定時間時，應當讓用戶明白使用進度指示器。
然而，當隱藏在進度指示器後的意圖是好的時候，最後的結果常證明是壞的。
Luke Wroblewski在他的文章中提到：
定義上的進度指示器喚起注意到用戶需要去等待。這就好像等待時鐘運轉——當你這樣做的，時間似乎流逝得更慢了。
隨著進度指示器被引用到了UI領域，設計師經常讓用戶「觀看時鐘」。儘管這比什麼都不做更好，但是UI設計時應當永遠致力於讓等待變得更為愉悅。
好的是，有一個進度指示器的絕佳替代，技術使得用戶在等待時有了更好的體驗。
這種技術被稱為載入佔位符，載入佔位符（換句話說，臨時信息存儲器）本質上是一頁空白版。
比起展示一個進度指示器，載入佔位符專註在實際的進程上，並且創造了什麼即將到來的預期。隨著信息逐漸的顯示在屏幕上，這構建了一種事情正在立即發生的感覺，用戶會認為在他們等待的時候應用正在運行。
當內容載入的時候，媒體使用這個小技巧像佔位符一樣展示簡單的框架。
載入的屏幕也會讓用戶感覺熟悉載入內容的整體結構。
媒體的焦點在被載入的內容，而不是在載入的事實。圖片來源：merhl
結論
不管我們如何使我們的app或者網站運行快速，總是有一些操作和進程需要時間去處理。
等待動畫，比如旋轉等待動畫和完成百分比指示器，都通過告知用戶目前的工作狀態減少了用戶感知到的不確定性，並且增加了用戶願意停留等待信息載入的可能性。
經驗法則是對於花費2-10s的合理快速反應操作使用一個循環指示器或者載入佔位符，而對於超過10s的操作使用完成百分比指示器。
當考慮選擇載入佔位符還是循環指示器時，更傾向於選擇載入佔位符，因為它有一個重要的優勢：載入佔位符可以減少對於花費數毫秒的操作的時間感知從而改善體驗。
———— / END / ————
譯者：xElaine
來源：http://www.jianshu.com/p/c16b2fe97f3c
原文地址：https：//www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
本文由 @xElaine 授權發佈於人人都是產品經理，未經作者許可，禁止轉載。
點擊展開全文
※從紅包設計邏輯，看餓了么、美團外賣的各自煩惱
※迷茫與彷徨，那些有著產品夢想的人該何去何從
※如何讓進度條幫助你達到產品目標？
※不是獲取流量變難了，是你不會創造注意力
※基於AR/VR眼鏡設備，從用戶實際需求角度出發會有哪些新的解決方案？
TAG:人人都是產品經理 |