轉圈圈好還是進度條好?

Loading總是最讓人焦躁,但網路速度再快總是會碰到需要 Loading的時候,到底是用轉圈圈好呢?還是用進度條好?

不管網路的速度再快,面對現在愈來愈多五花八門的絢麗網頁,還是會遇到需要等待讀取的時間,如何讓人不會因為讀取時的動畫讓使用者焦躁而離開,就成為了UX設計師的一大課題。

我們最常使用的不免就是轉圈圈或者是進度條了,但到底該使用哪個呢?在UX設計上有多年經驗的設計師Anthony在UX Movement中提出了他的見解

沒有顯示進度的轉圈圈不適合長時間

因為轉圈圈並沒有辦法顯示現在讀取到哪裡,以及是否還有進度,會讓使用者不知道現在到底是當機了還是再等一下就會顯示出來,所以如果是需要長時間的讀取就不適合轉圈圈了

4秒規則

spinner-bar-4seconds

一個網頁你會願意等待它多久呢?

根據一項內部拉斯加大學對於網路使用者的研究,使用者大約只會等待4秒,若超過4秒就會放棄等待轉而做其他的事情。也就是說,如果超過4秒的等待時間就不適合使用轉圈圈。而且使用者大部分都預期所有的app或網頁會在按下時會有即時的反應,如果超過1秒就會開始擔心是否出了問題,所以如果讀取的時間超過一秒就應該使用轉圈圈來讓使用者知道程式正在載入資料,避免他們離開。

spinner-second

進度條應該顯示進度且不能停格太久

如果是用進度條要怎麼顯示呢?

進度條除了要顯示出現在的進度外,且應該要以穩定的速度從左向右移動,並要避免停格太久,讓使用者以為卡住而放棄。

適當使用進度條與轉圈圈

所以如果是短時間的等待就使用轉圈圈,而長時間的讀取則使用進度條,並且顯示出讀取的進度。

小心過久的轉圈圈很容易讓人抓狂喔

不過說到底,能夠劑量縮短讀取時間最好,不管是用哪個讀取顯示,等待總是大部分人都不喜歡的事情。

 

參考資料:

Progress Bars vs. Spinners : When to Use Which

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *