您的加載微調器是 UX 殺手！ 這是一個替代方案

我們知道你討厭等待。 每個人都這樣做。

在 2017 年的一項研究中，谷歌發現：

• 1-3 秒的加載時間將跳出率提高了 32%。
• 1-5 秒的加載時間將跳出率提高了 90%。
• 1-6 秒的加載時間將跳出率提高了 106%。

除非有充分的理由，否則人們不喜歡等待，等待的時間越長，等待的理由就越少。 這就是為什麼系統狀態的可見性是 Nielsen 的 UI 設計的 10 個可用性啟發法之一。 系統狀態的可見性意味著：

“設計應始終通過在合理時間內通過適當的反饋讓用戶了解正在發生的事情。”

這就是加載指示器的用武之地。一個好的加載指示器：

1. 讓用戶知道應用程序正在運行。
2. 讓等待變得可以忍受。
3. 給用戶一些可以看的東西。

UI 設計中最常見的加載指示器是——你猜對了——加載微調器。

但有時，您必須質疑常規做法才能突破界限並發現創新解決方案。 在這種情況下，加載微調器存在設計人員長期忽視的缺陷。

微調器設計：為什麼加載微調器很糟糕

就加載動畫而言，加載微調器是一個不幸的選擇，尤其是等待超過 10 秒的情況。 為什麼？

讓我們從一個短篇故事開始。

我對加載微調器的第一次回憶是十多年前，早在我了解用戶體驗之前。 正是在學校的計算機實驗室裡，我遇到了我和我的朋友們學會了稱之為死亡紡車的致命而可怕的東西。 事實證明，對於 macOS 等待光標來說，這並不是一個不常見的名稱。

來自 How-To Geek 的 macOS 等待光標的圖像。

就像死亡的紡車一樣，加載微調器沒有反饋——沒有進展的跡象。 它們無限旋轉，沒有告訴我們應用程序已經取得或尚未取得的進展。 當您趕時間時，這會讓用戶感到沮喪，並且會引起徹頭徹尾的憤怒。

你會發現自己在問這樣的問題：

• 什麼時候可以完成加載？
• 快完成了嗎？
• 它壞了嗎？

但是你的問題沒有得到回答，所以你放棄了。

更糟糕的是，紡紗廠減慢了時間。

您是否曾經在鍛煉過程中迫切希望計時器結束？ 還是急於逃課？ 在這些情況下，看著時鐘和漫無目的地等待會使時間爬行。 微調器做同樣的事情，減去倒計時的好處。 他們就像在餐館裡等著食物，肚子咕咕叫； 只是，您不知道廚師是否收到您的訂單。

當然，加載動畫實際上並不能控制時間，但我們對任務的享受會影響我們對它的感知。 當我們玩得開心時，時鐘會加快。 當我們討厭等待時，它就會慢下來。

再一次，微調器鼓勵用戶放棄。

此外，您希望您的內容對用戶有價值——滿足甚至超出他們的期望。 如果碰巧頁面不是他們所希望的，那麼長時間盯著微調器所增加的挫敗感會進一步加劇損害。

回顧一下，加載微調器：

1. 沒有任何進展的跡象。
2. 無法回答用戶的問題。
3. 讓等待感覺比實際更長。
4. 不准備用戶期望。

您的加載動畫選項

解決用戶對加載微調器的挫敗感的最佳方法是從一開始就消除這種挫敗感。 這意味著減少等待時間，直到它不存在或使用替代進度指示器。

同樣，一個好的加載或進度指示器：

1. 讓用戶對時間的感知感覺更快。
2. 給人以應用程序正在取得進展的感覺。

UX 設計中使用的兩種主要類型的進度指示器是不確定進度指示器和確定進度指示器。 決定因素是時間。

這個想法是，當您不知道加載需要多長時間時，您可以使用典型的加載微調器，而當您知道時，您可以使用確定的指示器，如進度條。 確定的加載動畫指示用戶必須等待多長時間，並顯示完成百分比、剩餘分鐘數或已填滿條等提示。

來自 Material Design 的不確定與確定進度指示器。

這種策略的問題是你永遠不知道加載需要多長時間。 您可以做出有根據的猜測，但僅此而已。 這就是為什麼許多倒計時指標會這樣計數：還剩 10 分鐘、還剩 9 分鐘、還剩 8 分鐘、還剩 7 分鐘、還剩 10 分鐘、還剩 8 分鐘等等。 它將完成加載並最終達到 0，但不是在它帶用戶上車之前。

如何充分利用加載動畫

我們在下面討論微調器和進度條的替代解決方案。 儘管如此，如果您決定採用更傳統的路線或進行 UX 研究，並發現這些是您的受眾的首選，則有一些指導方針可供遵循。

首先，僅使用加載微調器等待 10 秒以下。 對於超過 10 秒的延遲，使用確定的指標創建進度錯覺，以使用戶感興趣的時間更長。

當您設計微調器或其他加載動畫時：

1. 盡可能富有創意和娛樂性
2. 讓它成為品牌
3. 提供盡可能準確的完成估算
4. 解釋用戶等待的原因
   – 我們正在計算您的結果，請稍候。
   – 我們正在為您進行設置，請稍候。
   – 我們正在收集您的數據。
   – 檢查了 30 個文件中的 21 個。
5. 如果頁面將在一秒鐘內加載，請不要使用動畫。

來自 Hacker Noon 的加載屏幕 gif 示例。

我們可以繼續讓您的加載動畫更好，但這不是本文的主題。 因為無論你的加載動畫多麼有趣，它都強調等待時間，並不能提供清晰的進度感。

這就是骨架屏幕的用途。

帶有骨架屏幕的漸進式加載

比較微調器和骨架屏幕的研究表明，骨架屏幕被認為更快並且讓用戶更快樂。 那麼，這個所謂的英雄是什麼？

如您所知，加載微調器會佔用一個屏幕，直到用戶界面完全加載，此時它會同時出現。

骨架屏幕使用不同的策略，並在加載過程中顯示 UI 的每個部分。 它從界面設計的骨架輪廓開始，然後在元素完成加載時繼續顯示它們。 這種策略稱為漸進式，細節通常以骨架輪廓（也稱為佔位符 UI）、文本然後圖像的順序出現。

Facebook Engineering 的 Facebook 骨架屏幕示例。

被 LinkedIn、Instagram、Facebook 和 Google 等大牌公司使用的骨架屏幕通過將被動等待變為主動等待，提供了更好的加載屏幕體驗。

被動等待是指你只是坐在那裡無所事事地等待，就像看著旋轉器轉來轉去。 主動等待是當你在等待時做一些感覺像是進步的事情。 骨架加載通過在每次屏幕更新時為用戶提供要處理的新信息來鼓勵主動等待。

通過這種方式，骨架屏幕將焦點從您等待的時間量上移開，並將其放在您面前發生的實際進度證明上，從而使加載過程感覺更快。 當它顯示已加載和剩餘的內容時，它允許用戶構建準確的用戶界面預期。

Instagram 的漸進式加載正在運行。

實現骨架屏幕時，請確保您的佔位符 UI 準確表示最終 UI 的外觀。 否則，您會在期望和現實之間造成差距。

一些工具和網站，如 Medium 和 Google 圖片，利用漸進式圖片加載來增加進度。 漸進式圖像加載是在完全加載之前顯示圖像的主要顏色或模糊版本。

您還可以在骨架屏幕中設計加載動畫以指示加載。 例如，Facebook 讓其骨架屏幕上的灰色文本欄在頁面加載時執行它們自己的加載動作。

用戶認為具有從左到右加載動作和緩慢而穩定的加載動作的屏幕更快。

骨架屏幕問題

與往常一樣，批評者們最擔心的是，對於希望看到精彩內容的用戶來說，灰色塊是一種乏味且沒有吸引力的解決方案。

在某種程度上，這種擔憂忽略了骨架屏幕的重點：暗示正在迅速出現的精彩內容。 根本沒有用戶期望或想要加載屏幕，但骨架屏幕提供了知道界面正在工作並且將在幾秒鐘內可用的舒適感。

當然，當每個進度階段之間的等待時間過長時，灰色塊確實會變得煩人。 等待時間越長，情況就越糟糕。 所有加載指標都是這種情況，因為正如我們一開始所確定的那樣，沒有人喜歡等待很長時間。

使用骨架屏幕，它有助於實現多個進度階段以保持激活用戶的注意力。 那裡有設計不佳的骨架屏幕，從灰色的佔位符 UI 到所有內容，這違背了目的。 有效的漸進式加載會在準備好讓用戶了解情況、感興趣和充滿希望時立即顯示內容。

如果等待時間比理想時間長一點，您可以考慮使用微調器幾秒鐘，然後再顯示佔位符 UI 並加載您的內容。 只要佔位符 UI 顯示實質性進展，這樣做就可以為您爭取少量時間。

如果您的加載時間太長，減少等待時間始終是最佳選擇，應該是您的首要任務。 您的網站運行緩慢的原因有很多。

測試它：好的用戶體驗從用戶開始

用戶體驗始於用戶，沒有適合所有人的答案，即使適合大多數人。 這就是為什麼提供良好的用戶體驗首先要測試您的想法，以確定最適合您的受眾的方法。

在過去，提供最好的微調器設計是您能做的最好的事情。

現在，精心設計的漸進式加載是一個值得考慮的替代方案。 它加快了感知的等待時間，提供了一種進步感，暗示了要加載的內容並建議用戶期望。

但這並不意味著是時候停止質疑最佳實踐了。 使用冗長的、無信息的加載動畫的日子可能已經過去，但總有一天，某些東西會克服骨架屏幕的限制，就像加載微調器一樣。

在那之前，如果您想了解更多關於如何改進您的用戶體驗的信息，請聯繫我們。 我們喜歡談論戰略。