進度條 vs. 轉圈圈,用哪一種好?

如果你在店裡問別人「某某商品在哪裡?」,但對方卻毫無反應呆站著,那你大概只能失望地走開。使用者看到螢幕上出現轉個不停的圈圈時,也會有一樣的感受。
評論
評論

原文為《Progress Bars vs. Spinners: When to Use Which》,刊登於 UX Movement,作者為 Anthony,擁有人機互動學位,並在 UX 領域有多年經驗。INSIDE 獲授權編譯。

如果你在店裡問別人「某某商品在哪裡?」,但對方卻毫無反應呆站著,那你大概只能失望地走開。使用者看到螢幕上出現轉個不停的圈圈時,也會有一樣的感受。

長時間的載入不適合轉圈圈

旋轉圈無法告訴使用者還要載入多久,如果用在長時間載入的情況,使用者容易覺得是程式出錯。缺乏足夠的資訊回報,會讓使用者自動假設最糟的可能。

他們會認為接下來要等非常久才會載入,開始不耐煩並按下返回鍵或者乾脆跳出程式。

4 秒規則

Photo Credit: UX Movement
Photo Credit: UX Movement

如果你想讓使用者待在程式裡,載入時間超過 4 秒就不要再用旋轉圈了。一項 內布拉斯加大學林肯分校的研究 發現大多數使用者只能忍 4 秒,超過 4 秒後就會開始想做別的事。

Photo Credit: UX Movement
Photo Credit: UX Movement

使用旋轉圈的時機

使用者通常預期程式會即時反應,也就是少於 1 秒鐘。要是超過 1 秒都沒得到回應,他們就會開始擔心。

所以如果程式要花超過 1 秒來處理,就應該要開始轉圈圈,讓使用者知道程式正在載入來安撫他們。

進度條能讓人容忍長時間的載入

如果處理過程超過 4 秒,那你就應該採用進度條。當使用者看到進度條的時候會比較願意多等一會兒。

Photo Credit: UX Movement
Photo Credit: UX Movement

這是因為進度條定出了清楚的預期載入時間,要是使用者一直盯著旋轉的圈圈,根本看不到進度,甚至無從得知進度到底有沒有在跑,也就失去了等待的誘因。

進度條要怎麼顯示?

進度條必須讓使用者知道完成了多少進度。你的顯示條應該要以穩定的速度 由左向右 移動,如果動作定格太久,使用者會以為卡住了而放棄等待。

Photo Credit: UX Movement
Photo Credit: UX Movement

你還應該替進度條加上一些預估數字,如果載入過程小於 1 分鐘,就顯示完成百分比或者載入檔案數目,告訴使用者這個程式現在在做什麼。

如果過程大於 1 分鐘,那你最好提供剩餘時間,讓他們做好心理準備這次載入會比平常還要久。顯示剩下幾分鐘,他們就知道可以先起身做點別的事而不是乾等。

結論:別濫用旋轉圈

很多設計師只要碰到載入一律使用旋轉圈,但是當等待時間過長的時候,這會讓使用者很挫折。盡量避免這種情況,需要的時候請用進度條來代替。

進度條讓人更能忍受長時間的載入。只要他們知道程式有在運作,使用者並不介意等待,但如果花費的時間比預期更久,就需要讓他們看到進度回報。當使用者不知為何而等待的時候,就會不耐煩地離開。


精選熱門好工作

產品經理 / Product Manager

奔騰網路科技有限公司
臺北市.台灣

獎勵 NT$15,000

行銷企劃專員(海外市場/電商)

VeryBuy非常勸敗
臺北市.台灣

獎勵 NT$15,000

客服督導/客服主管

VeryBuy非常勸敗
臺北市.台灣

獎勵 NT$15,000

評論