
網站和應用加載時間讓用戶感覺更快的技巧
無論您的網站用戶界面設計得多麼好,在某些時候,使用它的人都將不得不等待加載某些內容。加載時間可能會損害整體體驗。讓用戶等待您的應用加載時間過長會使用戶不耐煩。如果用戶有這種感覺,他們就會放棄您的應用程式並轉到其他地方。希望你可以做一些事情來加快用戶的時間感,讓他們覺得你的應用加載速度比其它的快。
永遠不要讓用戶等待而不給他們任何反饋
如果用戶的連接速度很慢,應用程式可能需要一段時間才能在螢幕上填充內容。用戶的等待時間從他們啟動操作的那一刻開始,當應用程式未能通知用戶需要一些時間來完成操作時,用戶通常會認為應用程式沒有收到請求,並再次嘗試。由於缺乏反饋,導致了大量額外的點擊。為了避免發生這些情況,我們需要給出正在發生的事情的提示,提供視覺反饋。
避免靜態進度提示器
靜態進度指示器是具有靜止圖像或文本的指示器,例如「正在加載...」或「請稍候...」以提示已收到請求。雖然有任何反饋總比沒有好,但靜態提示是糟糕的用戶體驗。
使用動畫加載提示器
等待時間的心理學研究表明,用戶的注意力在沒有任何反饋的等待一秒後開始轉移。為了減少用戶的不確定性,對任何需要比這更長的操作使用進度提示器(注意:不建議對加載時間少於一秒的任何操作使用動畫,因為用戶可能會對剛剛閃爍的內容感到焦慮螢幕)。
無限加載微調器,用於合理快速的操作
動畫提示的最簡單形式是加載微調器。這種類型的視覺反饋只是說明用戶必須等待,但沒有說明他們應該等待多長時間。作為一般規則,您應該將這種類型的進度指示器用於快速操作(2-10 秒)。
iOS中的默認加載指示器是從中心點輻射的灰色線的旋轉器。
持久操作的完成百分比動畫
加載旋轉器不是表示持久加載的正確方式。如果我們知道什麼時候會發生,那麼等待就更容易忍受了。這就是為什麼對於長期操作,您應該讓您的用戶清楚地表明他們需要等待多長時間。作為一般經驗法則,對於需要10秒或更長時間的較長過程,您應該使用完成百分比動畫。
或者,您可以提供操作的一般時間估計。不要試圖精確,簡單的「這可能需要一分鐘」就足以通知用戶並鼓勵他們等待。
調整用戶對時間的感知
用戶心目中的應用加載速度有多快。在嘗試建立更快的用戶體驗時,您可以縮短感知時間而不是實際時間。為此,您可以使用用戶可以執行的內容、動畫或操作來填充等待時間。
進度條
進度條讓用戶對操作的處理速度產生預期。進度條的移動方式會影響他們對加載時間的看法。為了讓用戶感覺進度條更快,您可以使用以下簡單技術:
進度條永遠不要停止,否則用戶會認為應用程式卡住了。最糟糕的情況是進度條接近 99% 並突然停止。大多數用戶會對這種行為感到沮喪,因為這會讓他們認為應用程式被凍結了。
您可以通過即時和穩定地移動進度條來掩蓋進度條中的小延遲。
在開始時緩慢移動進度條,然後將其加速到最後,讓用戶快速了解完成時間。
骨架螢幕
等待時間是骨架螢幕(又名臨時訊息容器)的正確時間。骨架螢幕本質上是頁面的空白版本,訊息逐漸加載到其中。它提供了傳統動畫指標的替代方案。骨架螢幕不是顯示抽象的小部件,而是建立對即將發生的事情的預期,並使用戶更多地關注進度而不是等待時間。
骨架圖像加載速度很快,因為它是一個通常由簡單形狀組成的小圖像。這些技術可以在行動應用程式中進一步採用,因為骨架模板可以與應用程式的數據一起存儲在本地。適用於iOS 的Facebook應用程式會在應用程式加載時向用戶顯示灰色塊和線條來表示圖像和文本。加載完成後,圖像和文本會代替臨時容器出現。這並不比有一個帶有微調器的加載螢幕快,但在用戶的心目中,感覺就是這樣。
漸進式圖像加載
隨著現代應用程式和網站加載越來越多的圖像,最好考慮一下它們的加載過程,因為它會影響性能和用戶體驗。使用模糊效果,您可以建立漸進式圖像加載效果。
一個很好的例子是Medium,它會模糊帖子圖像的封面以及帖子內容中的圖像,直到圖像完全加載。首先,它加載一個小的模糊圖像(縮略圖),然後過渡到大圖像。縮略圖非常小(只有幾千字節),結合模糊效果,可以在不犧牲有效負載的情況下提供比純色更好的占位符。
視覺干擾
如果你不能縮短排隊時間,你應該總是儘量讓等待更愉快。為了確保人們在等待某事發生時不會感到無聊,請讓他們分心。精美的動畫會分散訪問者的注意力,並使他們忽略較長的加載時間。