何處安放的Loading

0 評(píng)論 4200 瀏覽 3 收藏 6 分鐘

可用性研究表明,當(dāng)響應(yīng)時(shí)間超過一秒鐘時(shí),用戶便能夠有所察覺。
雖然在反饋系統(tǒng)中,當(dāng)用戶需要等待時(shí),更好的解決方案的是應(yīng)該采用確定性的進(jìn)度條。但對(duì)于一些耗時(shí)短,且用戶的帶寬為主要影響要素時(shí),卻使用Loading這種低成本實(shí)現(xiàn)的反饋。

Loading圖標(biāo)的歷史來源已經(jīng)無法考究(據(jù)傳是蘋果最先使用),但是,它的動(dòng)態(tài)效果,在視覺上剛好是一個(gè)重復(fù)循環(huán)的“風(fēng)火輪”。非常適合做不確定等待時(shí)間的進(jìn)度反饋。

Loading的主要作用,在于提供反饋給用戶表示當(dāng)前狀態(tài),并且讓用戶的命令的執(zhí)行和完成過渡得更加平滑。從這種角度上說,它和很多流動(dòng)式反饋沒有多大區(qū)別,如MAC系統(tǒng)中窗口最小化的漸進(jìn)動(dòng)畫。

Loading的圖標(biāo)僅僅在web應(yīng)用當(dāng)中產(chǎn)生,而在客戶端中,則較少使用,因?yàn)槭髽?biāo)手型能夠代替它的工作。

但是對(duì)比客戶端,web端的Loading反饋可控性更好,創(chuàng)意也更加。如以下幾種:

那么在設(shè)計(jì)中,如何放置Loading圖標(biāo),也應(yīng)該有所章法。但是無論如何放置,都有一個(gè)規(guī)則:確保用戶可以注意到。

1.靠近點(diǎn)擊區(qū)域

靠近點(diǎn)擊區(qū)域,能夠讓你的Loading反饋得到最直接的呈現(xiàn),也最利于被注意到。如果能配合按鈕的Enabled與Disabled狀態(tài)的切換,這是很好的反饋。

2.位于內(nèi)容刷新區(qū)域上層

當(dāng)用戶選擇刷新頁面內(nèi)某塊區(qū)域內(nèi)內(nèi)容時(shí),其視覺焦點(diǎn)也將聚焦于此,如果此時(shí)讓Loading反饋不適合放置在點(diǎn)擊區(qū)域,那么將其放在內(nèi)容刷新區(qū)域上層,也是一個(gè)很直觀的反饋。如QQ郵箱廣播的評(píng)論展開區(qū)域:

但是需要注意的是,勿將Loading反饋采用模態(tài)形式,模態(tài)形式將導(dǎo)致用戶只能等待Loading完成而無法進(jìn)行其他操作,而且還有可能給用戶帶來損失。

如上圖,如果這個(gè)Loading反饋是模態(tài)形式,當(dāng)它出現(xiàn)時(shí),您就無法點(diǎn)擊頁面內(nèi)其他地方,萬一不走運(yùn),這個(gè)時(shí)候你網(wǎng)絡(luò)斷線,這辛苦寫的日志,你就可能再也找不回來了。(注:圖為Qzone發(fā)表日志截圖,其Loading反饋為非模態(tài)形式)

3.固定區(qū)域

固定區(qū)域呈現(xiàn),最好應(yīng)該是固定在瀏覽器窗口某位置(要確保用戶能很方便的注意到),而不是固定在頁面某位置。如同Gmail一樣,Loading反饋始終位于瀏覽器窗口頂端位置。

但也需切記,別把Loading反饋放置得離視覺焦點(diǎn)太遠(yuǎn)。這樣很難注意到。

Loading反饋雖然是一個(gè)小部件,但其能夠給用戶的,卻是系統(tǒng)可見性的有效提高,在平常的設(shè)計(jì)中,需對(duì)Loading反饋設(shè)計(jì)有所留意。

但Loading反饋不足的地方是,無法明確告知用戶具體等待時(shí)間。就像撥打客服電話中被告知的“稍等片刻”一樣。即使這樣我們依然能做得更好,像Gmail那樣。

當(dāng)用戶Loading了約10秒后,如果系統(tǒng)還在運(yùn)轉(zhuǎn),那么Gmail會(huì)自動(dòng)將Loading標(biāo)簽修改為Still Working,明確告知用戶,可能還需等待一段時(shí)間。

Loading反饋在實(shí)際設(shè)計(jì)中不容忽視,尤其是在用戶提交表單時(shí),Loading反饋和各控件的連鎖狀態(tài)變化場(chǎng)景當(dāng)中。忽視它的后果,將給用戶帶來嚴(yán)重的等待的焦灼感,給用戶帶來損失。

所以,請(qǐng)好好設(shè)計(jì)你們產(chǎn)品的Loading反饋。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!