用戶體驗設計----(進度指示器)

目前只是分享一下,用戶等待的形式和目前一些常見類型,代碼正在整理中,會在以後的博客中展現,歡迎你們指正和討論用戶體驗的方式和實現,以及何爲最優的用戶體驗。服務器

如今,你必需要理解進度條的顯示方式跟動畫效果是可以影響到用戶的心理感知的。 進度條的目的在於經過向用戶反饋當前的響應進度和合理的時間消耗來讓用戶在等待過程當中放鬆下來。用戶不該該被傻傻的丟到一邊本身去猜程序正在處理的事情。正是在這樣的情境下,彷佛進度指示器恰好能構建起鏈接用戶和系統間的一條友好橋樑。在本文中,咱們將探討集中不一樣類型的進度指示器以及他們的使用方法:網絡

一、反饋的關鍵性能

沒錯,咱們固然都喜歡一個應用程序可以即時響應。可是有些時候你的程序確實不夠快,緩慢的加載速度和延遲問題均可能下降你的程序性能。在這個時候,你就必須保證用戶能清楚的知道程序正在按着他們的請求做出並在逐步完成響應動做。一個優秀的交互設計就是那些能經過視覺反饋向用戶傳達系統當前的狀態(正在發生什麼?),產生的結果(剛剛發生了什麼?)以及將來的狀態(下一步會發生什麼?)。動畫

若是一個進度指示器可以面向用戶提供一些類型的即時反饋信息,那它就是發揮了有效的做用。想辦法告訴用戶程序確實須要一些更多的時間來響應他們發出的動做甚至告訴他們須要花費的大概時間,這對用戶來講都是極其友好的。用戶的等待時間通常開始於他們觸發屏幕動做的那一刻,而理想上,系統應該在用戶觸發動做後馬上給予一些視覺上的反饋以告訴用戶系統收到他們的請求了。這樣作帶來的積極一面就是:網站

(1)它們打消了用戶對程序響應的疑惑,使他們可以確信程序是正常工做的。設計

(2)這種視覺信息向用戶傳達了一個有根據的等待緣由,減小了他們對無聊的等待時間的感知。它可以從必定程度上分散轉移用戶對等待時間的注意力。其實,對於任何須要花費1秒鐘以上的動做來說,使用一個進度指示器都是合適的。不過對於更快的動做,若是還來使用這種動畫效果,那隻會拔苗助長激怒用戶。blog

二、進度指示器類型進程

進度指示器總體上分爲兩大類: 1) 肯定性的 2) 不肯定性的圖片

對於肯定性的進度指示器而言,它們可以告訴用戶當前動做須要多久時間方能完成,由於用戶能從視覺上看到百分比。開發

1470041598626371.gif

而若是一個指示器要求用戶在動做執行的全程中只能傻傻等待卻沒有告訴這個過程須要多久的話,那它就是不肯定的進度指示器。

bf74e8ad80032c24144a5731a61d1d4d.gif

更進一步的,還有將這兩類指示器組合起來一塊兒使用的狀況。

1470041621926911.gif

三、 圓形進度指示器

f488854708fd07a4fba18179728e52a4.gif

另一種能確保用戶知曉系統正在響應的方法是使用一個循環的環形動畫,不過這種方法沒有足夠的信息告訴用戶在當前動做完成以前他們還得等多久。以往的經驗法則代表,只有在執行2-10秒鐘內這種快速的動做時再考慮使用圓形進度指示器。若是讓用戶盯着這麼一個圓環更久的話,用戶可能就不會再有耐心轉而放棄。另外,若是能經過文字向用戶傳達一些更明確的信息,好比告訴他們爲什麼要等待,這時候使用「正在加載評論信息」這樣的文字就能讓用戶變得更有耐心一點。

實際上,加載圖標每每並無傳達出動做的真實意義。由於它們普遍應用於多種功能之間,好比運行系任務的時候,在系統引導時通知用戶當前狀態的時候,網絡鏈接異常的時候以及數據加載的時候。這種一勞永逸的作法沒有針對具體動做設置特定的加載方式,這就是爲什麼人們討厭看到一個環形加載動畫的緣由。另外請記住,若使用這種環形動畫表明從服務器加載數據的過程,那是充滿風險的,由於客戶端跟服務器間的網絡鏈接狀況並非掌握在開發人員的手裏。 若是這樣作,在糟糕的網絡鏈接狀況下等待時間可能要達到15秒鐘,而正常狀況下可能僅僅須要2秒鐘,因此可控性不好。

四、整合後的圓形進度指示器

1470041665400767.gif

若是再進一步,你也能夠將這種圓形的進度指示器動畫跟現有的控件結合起來,尤爲是按鈕。好比在 Android 平臺中,一個圓形的加載器能夠將一個懸浮按鈕整合進來。這種作法保證了能讓用戶看獲得加載後的提交動做也確實完成了。它依靠圓形的逐漸閉合來表明了這個過程。

五、系統/自定義的循環動畫

1470041682506035.png

Facebook 經過使用不一樣風格的循環動畫向用戶傳達出兩種不一樣的體驗感覺。針對它們的加載指示器,若是用戶看到是一個自定義的加載動畫,他們會把這種延遲歸咎於程序自己的緣由,而當他們看到是系統自帶的動畫效果的話,他們也會理所固然的認爲延時是系統的責任。

六、線性動畫

1470041706161368.gif

一個肯定線的線性進度指示器,其完成速度應該符合百分比的變化,並老是從0%到100%遞增而不減小。若是一個指示器針對的是多個線性任務,應該只用一個指示器來標明任務的總體執行進度而不要針對每一個任務都使用一個指示器。

7、顯示完成百分比的動畫

1470041738897239.png

顯示完成百分比的進度指示器是在有等待動畫的指示器中最爲有用的一種。它們突顯出當前的處理狀態,告訴用戶系統已經完成了多少工做量以及還剩餘多少。這種指示器能清楚的向用戶解釋當前動做的處理進度。就經驗法則來看, 它適用於那些須要花費10秒鐘或者更久的任務。其實,給用戶一個預估的大概時間每每就夠了,並非非得精確。相似於「這會耽誤您一分鐘的時間」這樣的文本描述就足夠。

這種指示器也能夠用在消耗時間少於10秒鐘的狀況下,例如系統正在加載一系列的文檔或註冊表文件的時候。此時最好包含諸如「 已更新3/50」這樣的文字解釋。另一點,對於那些消耗時間的動做,要給用戶中止當前進程的選項,以避免他們等的不耐煩想要退出。若是你忘了這麼作,那你的設計將會讓用戶失去控制權,而沒有能力根據本身的需求作出合適的選擇。

這種類型的動畫幫助用戶構建起一個關於動做執行速度的指望值。反過來,速度的變化又能夠見證到底是哪一個階段影響了用戶的滿意度。不管如何,若是指示器在接近完成的時候卻停下來耽誤過久,這種狀況就很容易激怒用戶(不信任你的指示器),這樣的話進度指示器在用戶內心彷佛也變得沒有用。

八、連續性動畫

1470041762254224.gif

進度條能表明一個動做還要多久才能完成,但一般狀況並不老是準確的。你能夠經過讓你的連續性動畫一開始較慢而接近完成時運行很快來把那些小的延遲隱藏起來。可是這裏要注意的一點是進度條切不可停下來,這樣的話容易誤導用戶覺得程序凍結出故障了。

九、顯示步驟

1470041800865266.gif

相比於僅顯示完成的百分比進度,更好的方法是顯示出加載進程中涉及到的多個步驟。這樣作,用戶雖然可能還判斷不出每一步要花費多長時間,可是若是能看到總的步驟數,他們至少在內心會有一個評估值。

10. 輪廓圖屏幕

QQ截圖20160801165615.png

長時間的等待會嚴重的影響到用戶的體驗過程,但仍是有可能使得這個等待過程使人愉快而具備說服力的。輪廓圖屏幕就正好能夠派上用場。它可以讓用戶專一於數據加載的過程而非等待時間自己。

輪廓圖屏幕其實仍是一個空白頁,只不過它在數據加載出來以前可以先向用戶傳達出頁面究竟會有哪些數據類型以及各數據量如何。這種作法的好處就是能讓用戶理解到程序對動做的響應速度是正常的,只是頁面中的具體信息尚須要一點時間陸續顯示出來。 Medium 就是採用這種方法,在數據加載過程當中先顯示出一些數據的佔位符, 這就將屏幕中的重點放到了這些正在加載的內容上而不是等待過程。

十一、避免靜態的進度指示器

靜態的進度指示器就是那些沒有任何動態圖片只配有一些相似於「加載中…」、「請稍後…」這樣的靜態文本信息的指示器,它們只能告訴用戶他們的動做請求系統已經收到了,卻沒有提供任何有價值的反饋信息。所以,這種作法必須被其餘更有效的指示器取代。

十二、避免有不可從新點擊的警告

設計的最大失禮之處就是程序經過諸如「再次點擊可能建立一個額外的訂單」這樣的信息來警告用戶針對同一操做不能點擊兩次。這樣的作法是極爲不友好的由於不論在任何狀況下你都不應威脅警告用戶。  並且,用戶基本不會有興趣去閱讀如此長的提示信息。

1三、 處理無聊的等待過程

1470041825525950.gif

注意不要讓用戶在等待的過程當中太過無聊,能夠嘗試一些可以分散他們在等待時間的注意力上的事情,讓這個過程變得有趣而使人愉快,甚至給他們一些超出預期的驚喜吸引他們,從而誘使他們多點耐心等待加載的完成。好比你能夠嘗試使用一些精美的動畫效果。

總結

進度條是使用戶的等待過程變得清晰而流暢的最好方法。給與用戶反饋信息將必定程度上提高他們的耐心,並且會促成一個積極有效的用戶體驗過程。反饋信息可以很好的處理不肯定性並使用戶更願意花些時間來等待程序做出響應。一個優秀的進度指示器可以指引用戶順利的完成目標任務,甚至能在用戶間,創建起對你的網站或應用程序的更好印象。

相關文章
相關標籤/搜索