UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮

行為生物學家指出:人和大多數動物一樣,都偏好即時滿足,天生不願意等待。

當用戶在完成某個任務時,隨着等待的時間延長,用戶會逐漸感到焦慮→不耐煩→憤怒→放棄,從而減低對網站/APP的整體評價,甚至毫不猶豫地離開並轉身投入到競爭

(當然,如果您有足夠的信心能找回用戶,或者網站/APP有用戶不得不使用的理由,那~這篇文章應該對您的用處不大……)

那麼,有什麼方法可以緩解用戶在等待過程中的無聊和焦慮感?

正常情況下,我們可以通過一些網頁製作技術來加快程序的響應速度,但如果遇到一些硬件問題,例如設備性能不佳、環境網絡緩慢等,那用戶可能別無選擇、唯有等待。

話雖如此,但我們也可以在任務流程中增加進度條來幫助用戶追求信息,利用實時反饋當前進度讓用戶具有掌控感,以及通過趣味化的UI設計或提供有幫助的信息來消耗他們等待的時間,甚至一度超出用戶的預期,用戶的接受度自然就會大大提高。

下面,香港網頁將為大家整理有關「UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮」。

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

▏UI設計技巧:常見的進度條有哪些類型?

❶ 動態型進度條

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

動態型進度條一般用於系統自動處理某個任務而提供的實時進程提醒,在此期間用戶無需進行其他操作、安心等待結果即可。其主要目的在於讓用戶明確知道系統正在做什麼以及當前所處的狀態,以便用戶在等待的過程中有心理預期。

由於這種進度條需要進程達到100%才能進行下一步操作,因此用戶有權知道任務所處的進程。

❷ 靜態型進度條

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

靜態型進度條弱化了「進度」的概念,通常需要用戶做出一定操作後才會發生進度的變化。其主要目的是讓用戶知道當前系統所處的狀態,以便為其他任務決策提供一定的參考條件。

❸ 動/靜結合型進度條

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

動/靜結合型進度條既有明顯的進程狀態,同時明確系統的當前狀態,可系統自動或人為手動控制進程。由於這種進度條有非常密切的時間關係,因此無需考慮緩解用戶等待的焦慮感。

在使用動/靜結合型進度條時,通常「動態」和「靜態」之間需要維持着平衡的關係,如果存在優先級問題,需要結合實際使用場景的變化來確定進度條的設計目標。

▏UI設計技巧:設計進度條時需考慮哪些問題?

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

① 明確設計目標:確定設計進度條的目標是什麼?是為了更好地幫助用戶明確當前狀態;還是為了緩解用戶在等待過程中的焦慮感……

② 選擇合適的進度條類型:根據進度條設計目標來選擇進度條類型,如動態型、靜態型、動+靜態型,或者是其他特殊類型的進度條等。

③ 信息元素及優先級:結合進度條的使用場景及類型綜合分析,確定需要展示的信息元素並羅列其優先級,以便用戶優先看到重要信息。

④ 視覺表現方式:若要設計出使用性強且易用性高的進度條,需要結合上述分析綜合考慮,確保各圖形、文字元素清晰可見,信息層級劃分明確,盡量減少用戶思考時間及認知成本。

▏UI設計技巧:設計進度條時需遵循哪些原則?

● 原則一:不主動干擾用戶

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

對部分內容型產品(尤其是視頻類APP)而言,儘管用戶對動態進度條有一定操作需求,但為了讓用戶更加專注內容,因此盡量不要讓進度條對用戶造成更多的干擾。

否則,用戶注意力一旦受到干擾,將會讓產品的用戶體驗大打折扣,甚至令用戶產生生一些可控的想法,如降低繼續使用產品的慾望、因為誤操作而跳出頁面……這對產品來說都是得不償失的。

● 原則二:合理的反饋

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

不管是動態型進度條,還是靜態型進度條,都應該及時向用戶提供實時的反饋。這不僅限於前面所說的信息提示,而是在條件允許下,需要結合實際使用場景,盡可能給予用戶更明確的提示。

因此,在設計進度條時一定要分清楚以下三種情況:

• 靜態型進度條:通過其他信息的處理才會發生變化,因此無需讓用戶可以關注。

• 動態型進度條:由於用戶的焦點完全聚焦在進度條及信息變化上,因此拋開系統的硬件問題,做好視覺反饋更容易滿足用戶需求。

• 動+靜態型進度條:雖然用戶在操作,但其主要精力還停留在產品內容上,所以除了視覺反饋外,還可以從聽覺、觸覺下手,為用戶提供更好的即時反饋。

● 原則三:極致的用戶體驗

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

關於進度條的UX設計問題,下面小編從三個重要方面來簡單說說:

a.可觸控區域

在空間區域允許的條件下,可觸控區域的高度盡量不要低於40px。就算無法達到此條件,亦要將可觸控區域開發到最大化。

b.操作方式

盡量避免將操作方式限制於進度條上,多一種操作方式相當於多匹配一個使用場景,亦給予用戶更多的方便。

c.引導用戶

為了緩解用戶在等待過程中的焦慮感,設計進度條時適當添加動效、插畫、幫助信息等其他內容,以分散用戶的注意力,協助他們平靜地度過等待期。

▏UI設計技巧:進度條設計時經常遇到的問題有哪些?

○ 進度條總是卡在最後的1%

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

進度的目的更多是為了滿足用戶心理、緩解焦慮而設計的,然而在很多使用場景中,我們往往無法衡量進度條的實際情況,基於這一問題,網站開發人員會為進度條設定一個「完成時間」。

當系統達到設定時間,但進程又未完成時,那就只能卡在最後的1%。通常用戶等待時間不是太長就很容易接受,或者是有種「即將完成」的激動心理。

需注意的是:卡頓在99%只為應付意外情況而使用的備用方案,因此切勿讓進程一開始就飆升太快,隨後又將大部分時間壓在最後的1%上,這種UI設計手法只會讓用戶的心理預期出現較大落差而引起他們的反感。

○ 避免出現讓用戶不知所措的進度指示

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

在一些需要等待的任務進程中,如果用戶只看到一些類似「加載中,請稍後」或一個無法預估結果的Loading頁,但系統遲遲都無法完成進程,這只會放大他們焦慮、憤怒等負面情緒。

因此,就算介面不適合出現進度條,同樣需要添加一個輔助說明,以給用戶一個大概的預期,降低他們的逆反心理。

○ 提供必要的步驟/節點

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

在部分進度條場景中,除了應有的基本進程信息外,還需要進行適當的分類,增加必要的步驟,確保用戶清楚知道當前所處位置的同時,還能根據任務量預測每個步驟的大概完成時間,增加他們對系統的掌控感。

○ 不要嘗試威脅你的用戶

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

部分產品為了避免系統運行過程中發生意外,便會出現帶有警告、威脅口吻的文案,以阻止用戶重複操作或進行下一步操作,特別是用戶無需付出太多等待時間且產品缺少進度條的情況下。

如果系統明確的進度條提醒,那就不應該威脅用戶,而是通過限制用戶再次發送請求及並說明原因以撫慰他們的心情,避免用戶因不知所措而增加對產品的不滿。

○ 進度條什麼時候可以拖動

UI設計技巧之如何設計進度條,讓用戶的等待不再焦慮
UI設計技巧

進度條是否提供拖動操作,這主要取決於產品的定位。以視頻類APP位例,由於人們從大腦發出指令→尋找進度條滑動位置→手動觸發,這一過程需要好幾秒的時間,因此針對過度短視頻根本無需設置拖動操作。

【最後】

雖然做好進度條對提升產品價值並沒有明顯的影響,但從UI設計和UX設計來說,優秀的進度條不僅讓用戶的等待過程變得清晰流暢,還可在一定程度上提升他們對產品的耐心,使其更願意花時間來等待程序運行!