4種讓用戶感覺網(wǎng)站加載變快的設(shè)計形式
不管如何精心設(shè)計你的用戶界面,都有可能用戶從一個頁面切換到另外一個頁面時,不得不等待一些時間讓頁面加載完成。
加載時間可能會損害你的網(wǎng)站的整體用戶體驗,讓用戶等待時間過長。如果用戶有這樣的感覺,他們很可能會放棄繼續(xù)訪問你的網(wǎng)站,去別的地方。下面分享幾種方法讓用戶感覺等待的時間變得更快或者等待的時候更有趣。
一、不要讓用戶等待,提供視覺反饋
如果用戶的連接速度很慢,它可能需要一段時間對于一個站點來填充屏幕上的內(nèi)容。用戶的等待時間開始的時候,他們開始行動,而最壞的情況是當(dāng)他們沒有任何指示,該網(wǎng)站已收到它。當(dāng)你的網(wǎng)站沒有通知用戶,這需要一些時間來完成頁面加載時,用戶往往認(rèn)為沒有收到請求,并再次嘗試,額外的等待有很多由于缺乏反饋。讓用戶體驗更好,我們需要給網(wǎng)站一個暗示"網(wǎng)站正在發(fā)生的事情,提供視覺反饋"。
二、避免使用靜態(tài)進(jìn)度的提示
靜態(tài)提示是有一個進(jìn)度靜止圖像或文本的,如"加載中…"或"請稍候…"表示已收到請求。雖然比沒有任何反饋強,但靜態(tài)提示也并不是一個好的體驗。網(wǎng)站沒有提示內(nèi)容被加載的進(jìn)度,所以他們不知道是否加載被卡住了或者要等待的時長也不知道。
三、使用動態(tài)加載的提示
提示用戶需要等待的時間,為了減少用戶對事情的不確定性,使用進(jìn)度提示,加載頁面需要的時間比。
短時間的加載提示動畫
最簡單的形式是加載提示動畫這種類型的視覺反饋就說明了一個事實:用戶必須等待,但并沒有說他們應(yīng)該等多久。作為一般規(guī)則,你應(yīng)該快速行動,使用這種類型的加載提示動畫(2–10秒)。
一個旋轉(zhuǎn)的灰色線從中心點輻射是一個標(biāo)準(zhǔn)的方法。
加載動態(tài)圖通常用下拉刷新手勢一起使用。它作為UI的兩態(tài)之間的中介,幫助用戶理解屏幕變化狀態(tài)。
蘋果的iOS郵件應(yīng)用程序
需要等待長時間的加載提示動畫
如果需要用戶花較長的時間等待,那么你應(yīng)該給用戶一個明確的指示,告訴他們需要等待多長時間,你應(yīng)該使用百分比做動畫告訴用戶需要更長的等待時間(可能需要10秒或更多)。
或者你可以提供一個運行總時間估計,不用是精確的,一個簡單的,"這可能需要一分鐘就可以告知用戶,并鼓勵他們等待。
在Mac OS X安裝軟件更新
四、調(diào)整用戶對時間的感覺
如何快速讓您的內(nèi)容加載在用戶的頭腦,當(dāng)試圖網(wǎng)站加載有一個更快的用戶體驗,你可以縮短感知的時間比實際的時間短。你可以填補等待時間使用內(nèi)容、動畫、或行動用戶可以操作的內(nèi)容。
進(jìn)度條
一個進(jìn)度條,讓用戶期望網(wǎng)站如何快速的行動正在處理。你的進(jìn)度條的移動會影響他們?nèi)绾慰创?fù)載時間的方式。為了使一個進(jìn)度條感覺更快的簡單技術(shù):
1、進(jìn)度欄應(yīng)從未停止,否則用戶會認(rèn)為網(wǎng)站凍結(jié),最糟糕的情況是當(dāng)進(jìn)度條的方法99%、突然停止,大多數(shù)用戶會被這種行為感到沮喪。
2、你可以偽裝你的進(jìn)度條小延遲移動即時穩(wěn)定。
3、將進(jìn)度條在開始緩慢加速到最終給用戶一個快速的完成時間。
展示頁面的骨架
頁面的骨架基本上是一個空白的頁面,信息逐步加載。它對傳統(tǒng)動畫的指標(biāo)提供了一種替代。而不是顯示一個抽象的部件,骨架屏幕創(chuàng)建的預(yù)期是什么來讓用戶專注于過程而不是等待時間。
頁面的骨架加載迅速因為它是一個小的圖像,通常是由簡單的形狀。這些技術(shù)可以兼容移動應(yīng)用程序,因為骨架模板可以在本地存儲在應(yīng)用程序的數(shù)據(jù)。臉譜網(wǎng)的應(yīng)用為iOS顯示用戶的灰色塊和線條來表示圖像和文本為應(yīng)用程序加載。一旦它完成加載,圖片和文字的地方出現(xiàn)在頁面的骨架位置上,這讓用戶關(guān)注在加載過程而忽略等待的時長。
漸進(jìn)圖像加載
新的應(yīng)用程序和網(wǎng)站有更多的圖像,但他們的加載過程是好的,因為它會影響性能和用戶體驗??梢詣?chuàng)建一個漸進(jìn)圖像加載的模糊效果。
一個很好的例子中,模糊后的圖像以及圖像覆蓋在帖子內(nèi)容直到圖像完全加載。首先,它加載一個小模糊的圖像(縮略圖)進(jìn)而過渡到大的圖像。縮略圖很?。ㄖ挥袔譑B)結(jié)合模糊效果可以比純色更好的占位符,在不犧牲有效載荷。
介質(zhì)使用模糊創(chuàng)建一個漸進(jìn)圖像加載效果
視覺干擾
你應(yīng)該總是嘗試如果不能縮短線路使等待更愉快,保證用戶不厭倦在等待一些事情的發(fā)生,為他們提供一些分心動畫。好的動畫可以分散用戶關(guān)注等待的時長,讓他們忽略了等待的時間。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)