交互設計 | 緩解用戶等待焦慮——進度指示

5 評論 8162 瀏覽 46 收藏 9 分鐘

編輯導語:在應用軟件使用過程中,用戶可能會經歷等待場景,此時在交互設計層面,要如何緩解用戶的等待焦慮,降低用戶流失、保障用戶的產品使用體驗?也許你可以利用進度指示來緩解用戶的等待焦慮。本文作者便對進度指示的表現形式、應用場景等方面做了總結,一起來看一下。

一、為什么需要進度指示?

人對等待的忍耐是有限度的,當一個操作需要等待較長時間時,用戶會產生焦慮感,也更容易放棄這個操作甚至放棄整個產品,所以系統在適當的時機向用戶反饋當前的進度就十分必要。

根據《可用性工程》一書中的研究:

  • 0.1 秒大約是讓用戶感覺到系統正在立即做出反應的極限,這意味著除了顯示結果之外不需要任何特殊的反饋。
  • 1.0 秒大約是用戶思想流保持不間斷的極限,即使用戶會注意到延遲。正常情況下,大于 0.1 秒但小于 1.0 秒的延遲不需要特別的反饋,但用戶確實失去了直接對數據進行操作的感覺。
  • 10 秒大約是將用戶的注意力集中在對話上的限制。對于更長的延遲,用戶將希望在等待計算機完成的同時執行其他任務,因此應向他們提供反饋,指示計算機預計何時完成。如果響應時間可能變化很大,則延遲期間的反饋尤其重要,因為用戶將不知道會發生什么。

由于數據量大或網絡原因,不可避免地會出現等待時間長的情況。以下是常見的例子:

  • 對大文件的操作。如打開大文件、復制大文件、刪除大文件等。
  • 軟件啟動過程。如一些大型游戲、Adobe軟件等。
  • 需聯網的操作。如上傳、下載、播放等。
  • 搜索。無論聯網與否,只要數據量太大,都可能出現等待時間長的情況。
  • 安裝軟件。

所以,如何通過進度指示來解決用戶焦慮的問題,就是用戶體驗設計需要考慮的了。

二、進度指示的表現形式

當說到進度指示時,你的第一反應可能就是一個條形進度條,其實除了條形進度條,進度指示的表現形式還有很多種。

1. 進度條 Progress

這是大多數人能想到的一種形式,細分的話還可以分為條形進度條、環形進度條、步驟進度條、水波進度條(如手機充電效果)等。進度條通常會與百分比一起使用。

交互設計 | 緩解用戶等待焦慮——進度指示

progress bar

2. 加載 Loading

循環加載動畫,最常見的樣式是菊花型。循環加載動畫能讓用戶知道程序現在還在運行,而不是誤以為頁面卡住或死機。用于加載中狀態。但在加載過程中用戶無法進一步操作,需等待加載完畢后才能繼續操作,所以更適用于加載過程中用戶不需繼續操作的情況。

交互設計 | 緩解用戶等待焦慮——進度指示

loading

3. 骨架屏 Skeleton Screen

也叫加載占位圖。是在頁面數據加載前,在需要等待加載內容的位置,先用占位圖形給用戶展示出頁面的大致結構,等到數據請求返回后再顯示具體數據內容。

交互設計 | 緩解用戶等待焦慮——進度指示

skeleton screen

4. 步驟條 Step

將某項流程拆分為具體的幾個步驟,引導用戶按流程完成任務。

交互設計 | 緩解用戶等待焦慮——進度指示

step

三、進度指示的應用場景

進度指示的方法這么多種,具體的場景我們應該如何運用,需要注意哪些問題呢?

針對上面提到的那些不可避免的等待時間長的情況,推薦使用這些方法。

1. 打開大文件

有時文件過大時,打開的時間會很長,這時就可以用一個條形進度條顯示當前的狀態。

交互設計 | 緩解用戶等待焦慮——進度指示

打開文件進度條

2. 拷貝文件、刪除文件

一次性拷貝或刪除多個文件時,常常也需要很長的時間,比較好的顯示當前狀態的方式是,明確告知用戶一共有多少個文件,現在已經進行到多少百分比了,甚至還可以告知大概還需多長時間。

交互設計 | 緩解用戶等待焦慮——進度指示

拷貝或刪除文件

3. 啟動畫面

有些軟件的啟動時間會很長,比較正面的做法是在啟動畫面中根據軟件的特性向用戶展示軟件相關的圖像。

比如Adobe Illustrator啟動時會展示由設計師或插畫師精心設計的圖像,這不僅緩解用戶在等待加載時的焦慮感,還能提高用戶對軟件特性的印象,一些游戲軟件在啟動畫面也做了很好的示例,例如在啟動時通過游戲中的相關動畫來增加趣味感(前提是不要犧牲加載時間),或者提供一些游戲中的小技巧。

一個負面的例子就是很多手機APP的啟動畫面,滿屏都是廣告,非常影響用戶體驗,對于一些年紀大的人來說,還很容易誤點進自己根本不需要的網站。

交互設計 | 緩解用戶等待焦慮——進度指示

AI啟動畫面

4. 上傳與下載

條形進度條 + 網速 + 預估時間

經常使用云盤的話,會發現在云盤上進行上傳與下載操作時,常會遇到因為網絡差或文件太大而造成等待時間過長的情況。所以云盤一般會實時顯示網絡速度和文件大小。

交互設計 | 緩解用戶等待焦慮——進度指示

上傳與下載

5. 渲染列表

在網絡較慢或圖文數據較多時可使用骨架屏來渲染列表,比Loading視覺效果好,也可以適當使用一點動畫效果,緩解用戶的焦慮感。

交互設計 | 緩解用戶等待焦慮——進度指示

骨架屏渲染列表

6. 填寫表單

步驟條

如過注冊操作需要的信息很多,可以把信息分類,每一類為一個步驟,用戶就按照順序完成整個操作, 步驟條一般不得少于 2 步。

四、緩解用戶等待焦慮問題的其他Tips

  • 可后臺進行;
  • 可控制,如可暫停、可取消。

 

本文由 @Tifa Tang 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 需要較長處理時間的項目,多一個咨詢窗口會更好。有的軟件會在一個進度上卡很久,能便捷的咨詢客服情況對緩解焦慮也有不錯的幫助。

    來自上海 回復
  2. 確實有進度條的時候,只能安慰自己耐心等待,這就好像下載軟件、視頻一樣,急不得。感謝總結~~

    來自廣東 回復
    1. 是的,只能是緩解一下等待的焦慮

      來自上海 回復
  3. 以后寫文章麻煩注意一下錯別字,錯別字太多了

    來自浙江 回復
    1. 謝謝提醒,現在已經改過來了

      來自上海 回復