將動畫進度指示器部署到您的優勢的最佳實踐

已發表: 2017-01-31

如果您曾經使用過 PC，您可能會知道系統啟動時出現的動畫 Windows 符號。設計和動畫發展到今天我們看到的樣子，需要經過一次演變，但在 Windows 1995 中，圖像根本沒有移動。你們中的一些人可能會想，為什麼還要使用這些動畫指標？

但是考慮到這一點，您是否寧願等待並觀看一個空白屏幕來查看您的操作已完成？或者在屏幕再次出現之前保持某種有意義的娛樂？

用戶界面設計最重要的功能之一是能夠將其進度顯示為系統狀態。用戶需要知道系統是否知道它的動作並相應地響應它們。動畫進度指示器能夠在幾乎任何給定時間顯示操作的當前上下文，而無需使用大量文本或視頻功能。這使得它們非常適合在後台完成進度時提供系統狀態。

為什麼在系統進程期間與用戶交互很重要？

誰不喜歡應用程序或網站的快速響應？雖然它對用戶來說確實意義重大，但它不可能以堅定的一致性運行。某些因素總是會添加到等式中，這些因素會阻礙您的應用程序的速度。這些因素主要包括糟糕的互聯網連接、由於負載過重而導致的性能下降甚至程序故障。在這種情況下，最好的做法是盡量減少用戶的緊張情緒，並確保應用程序正在運行並且正在取得進展。為此，您必須向用戶提供反饋，這樣時間就不會影響用戶的耐心。

讓用戶對反饋著迷

當用戶進行操作時，等待時間幾乎立即開始。但更糟糕的是，沒有適當的指標來代表系統的進展。當應用程序沒有顯示系統正在花費時間的通知時，用戶自然會認為應用程序沒有響應。結果可能從猖獗的點擊到甚至用戶放棄，僅僅因為應用程序沒有及時提供反饋。

當加載時間超過預期時，通常會執行用於重新啟動進度或刷新系統的操作。再一次，即使請求是在後台進行的，沒有反饋也不能顯示請求的響應。這就是為什麼必須引入動畫指示器以在需要時隨時宣傳應用程序的系統進度。

如何將進度指示器用於任何耗時超過一秒的操作？

通常，當一個應用程序的加載時間少於 1 秒時，進度似乎幾乎沒有阻礙，用戶也不會失去他/她的注意力。但是，如果加載時間超過 1 秒，則必須採取措施保持用戶參與。短暫的延遲變得明顯，用戶開始在應用程序上完成任務的有效性徘徊。

這就是為什麼應用程序必須通過進度指示器做出響應，以提供可信的等待理由，並在其失控之前減少用戶的不確定性。需要注意的是，加載不到一秒的動作不一定需要動畫指示器，但圖像可以。建議這樣做，因為每次執行操作時都會在屏幕上閃爍的動畫可能會使用戶迷失方向。動畫進度指示器最適合用於消除長時間等待的影響，並讓用戶繼續使用應用程序或網站。

進度指標的類型

Indeterminate ：動畫等待指示器旨在與用戶溝通並讓他們了解他們最後的用戶操作。最常見且相當簡單的等待指示器類型是“不確定”。這種類型的指示器告訴用戶等待操作完成，同時讓他們不知道完成進度可能需要的時間。幾乎可以理解，不確定進度指示器應該用於快速動作，最好在 2-10 秒內。任何超過此時間的時間都可能會影響用戶的耐心。這可以增加網站的跳出率和應用程序的放棄率。
Determinate ：在“Determinate”進度指示器的情況下，動畫中的時間相當長。這種類型的指示器讓用戶了解完成進度所涉及的大致或確切時間。它們是更受歡迎的等待指示器類型，因為它們顯示了從開始的位置開始的進度、已完成的工作量以及結束等待還需要多少時間。這有助於用戶對動畫所取得和顯示的進度保持信心，同時增加他們繼續參與網站或應用程序的意願。

循環動畫指示器和完成百分比指示器

循環動畫：循環動畫指示器旨在表示進度，而不顯示大概或確切的加載時間。這就是為什麼多數循環動畫進度指示器是不確定的。例如，Windows 7 進度指示器旨在顯示相同的動畫重複，而沒有任何關於完成進度可能需要的精確時間的反饋。此外，它還包括從啟動功能、設置界面操作和其他形式的數據加載等所有內容。由於這兩個原因，用戶不希望看到循環等待指示器來表示網站或應用程序的加載時間。
完成百分比指示器：顧名思義，完成百分比指示器通過將動畫跨度、圓圈或條形填充 0% 到 100% 來顯示加載進度。由於它顯示了完成進度所花費的時間，因此完成百分比指標被歸類為確定的等待指標。對於這種特殊的質量，對於需要超過 10 秒才能完成的任務，最好使用完成百分比指示器。

根據一項研究，10 秒是平均用戶耐心的閾值。除此之外，在提供進一步的反饋之前，用戶會變得魯莽並變得不耐煩。通過顯示加載時間超過 10 秒的進程的完成百分比進度指示器，您可以讓用戶保持對網站或應用程序的關注，而不會影響他們的耐心。

如何有效地使用進度指標？

在您的應用程序和網站中有效地使用進度指示器可能意味著成功和失敗的區別。這裡有一些提示，可確保您的進度指標表現達標。

讓用戶了解等待的原因：讓用戶忘記在後台進行的加載進度是一個新手錯誤。這增加了他們失去耐心並退出應用程序或網站的傾向。您可以通過顯示帶有一些文本的動畫進度指示器來讓用戶了解更多信息。您可以顯示具體針對哪個進程。例如，您可以顯示視頻遊戲的等待進度，其中包含加載欄和讀取正在執行哪個進程的文本，例如“加載圖形”或“加載地圖”等。
為需要較長時間的任務指出一個簡單的時間估計：不要把事情帶到微觀尺度。您可以通過提供簡單的估算來保持用戶的參與度。愚弄你無法遵守的承諾會激怒用戶並迫使他們離開。
顯示所需的精確時間量：但是，對於通常花費超過用戶平均等待限制的時間的操作，選擇確定的進度指示器將是更明智的舉措。理想的選擇是完成百分比進度指示器，因為它使精確的加載時間成為眾人矚目的焦點。對於處理時間更長的操作，請考慮使用步驟數來突出顯示已取得的進展。
保持進度：在加載任務期間盡量保持進度條的一致性。經過幾次體驗後，進度條會迫使用戶對動作完成的速度產生預期。因此，進展過程中的任何凍結都會嚴重打擊用戶的期望。例如，當 bar 達到 99% 並長時間保持這種狀態時，大多數用戶會對此行為感到沮喪，並讓應用程序認為它被凍結了。為了解決這個問題，您可以通過顯示進度條立即穩定地移動來掩蓋這些不一致的延遲。
在進度條中顯示比實際速度更快的進度：原始速度可以通過您可以創建的簡單感知來體現，以使進度條感覺更快。您可以通過將動畫設計為首先緩慢移動並在結束時選擇其速度來實現這一點。這將在不影響完成任務的時間的情況下產生快速進展的錯覺。
分散注意力：通過引入創造性的進度指標，可以大大減少用戶對時間的感知。如果應用程序在進行過程中顯示了一些有趣的文本或視覺細節，它可能會分散用戶的注意力，使其無法完成操作。您可以提供各種讓用戶忙碌的東西，例如短視頻、有趣的事實、動畫，甚至是瑣碎的遊戲。

替代方案 - 使用骨架屏幕來對抗動畫進度指示器

儘管進度動畫指標可以動搖幾乎所有因等待而產生的不良感覺，但一些觀眾對這些策略相當有彈性。在不使用進度指示器的情況下讓用戶等待的少數幾個好的替代方法是一種稱為骨架屏幕的方法。也稱為臨時信息容器，這些技術涉及向用戶實時顯示進度，而不是打開加載欄。想像一下，一個空白的屏幕逐漸被其組件和元素填充，直到完全放滿。這會產生一種錯覺，即應用程序正在按照加載時間進行操作，並且他們的等待會得到所顯示的進度的獎勵。

它不僅讓他們的觀眾與網站或應用程序保持互動，還讓他們隨時準備好完成下一個任務。雖然進度指示器也是滿足用戶的極好手段，但它們無法保持用戶在加載過程中骨架屏所保持的能量。

最後的想法

無論我們的應用程序或網站操作多麼迅速，總有可能出現不請自來的處理時間。使用動畫等待進度指示器（例如完成百分比指示器和加載微調器）有助於讓用戶放心正在進行的流程和系統的當前狀態。結果，它增加了他們留在網站或應用程序上等待加載並繼續執行剩餘任務的可能性。計算完成過程所需的時間，您必須為其分配適當類型的進度動畫指示器。

循環指示器非常適合需要 2-10 秒的操作，而完成百分比指示器可以幫助更耗時的操作。在循環動畫和骨架屏幕的情況下，最好使用骨架屏幕，因為它們能夠執行任何超過幾毫秒的動作，並且仍然讓用戶保持冷靜。