關(guān)于進(jìn)度條的交互設(shè)計要點(diǎn)

時間：2022-05-29 13:48:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 13:48:01 來源：網(wǎng)絡(luò)營銷

排隊(duì)等待是一種日常中常見的現(xiàn)象，例如：排隊(duì)上下車、去排隊(duì)購買首發(fā)的產(chǎn)品、每天中午去食堂排隊(duì)購買午餐……，排隊(duì)等待在我們的生活中無處不在，且看似是一個簡單的現(xiàn)象。

但即便是這種簡單的存在，但也有其復(fù)雜的一面，當(dāng)存在著很多條隊(duì)列時，確定每條隊(duì)列是做什么的就變得困難了。在加入隊(duì)列后，人們會產(chǎn)生：大概要等多久？為什么隊(duì)伍很久沒有往前移動？等諸多疑問。無法解釋的等待是令人煩躁的，不公平的等待則可能引發(fā)人們的怒火。

經(jīng)歷過領(lǐng)開工紅包是的同學(xué)應(yīng)該對于當(dāng)天排隊(duì)等待的回憶不會很糟，甚至覺得還不錯，是一個值得回憶的經(jīng)歷，明年應(yīng)該還會去參加，但經(jīng)歷過去火車站購買車票的同學(xué)多半會不愿意再去第二次了，不管痛苦還是愉快也好，排隊(duì)等待有時是不可避免的，那有沒有辦法可以降低其中的痛苦程度呢？下面億企邦就結(jié)合進(jìn)度條的交互設(shè)計要點(diǎn)來逐一介紹提升用戶等待體驗(yàn)的方法。

1、什么是進(jìn)度條？

進(jìn)度條(或進(jìn)度表)可以幫助用戶對過程的長度和步驟有個預(yù)期，并且知道自己當(dāng)前在哪個步驟，也被稱作“進(jìn)度指示器(Progress Indicator)”、“多步驟進(jìn)度條(Multi-step Progress Bar)”、“向?qū)?Wizard Steps)”、“進(jìn)度表(Progress Train)”、“剩余步驟(Steps Left)”。

通俗的來講，進(jìn)度條即計算機(jī)在處理任務(wù)時，實(shí)時的，以圖片形式顯示處理任務(wù)的速度，完成度，剩余未完成任務(wù)量的大小，和可能需要處理時間，一般以長方形條狀顯示。

進(jìn)度條可以讓用戶預(yù)估整個流程的長度，對于全部流程有個預(yù)覽，并時刻告訴他們在整個流程中已經(jīng)完成多少了。

2、提供清晰的體驗(yàn)概念模型

概念模型可以使令人迷惑的產(chǎn)品或者設(shè)計轉(zhuǎn)變?yōu)闂l理清晰和可以理解的，周圍環(huán)境的語義符號可以讓我們明白下一步要做的是什么（具體可查看億企邦的《基于交互體驗(yàn)的防呆設(shè)計應(yīng)用與策略》相關(guān)介紹）？

當(dāng)這種語義符合用到軟件或產(chǎn)品中后，也就產(chǎn)生了進(jìn)度條的使用。

在使用殺毒軟件的經(jīng)歷中，用戶已經(jīng)非常熟悉點(diǎn)擊“掃描”按鈕，出現(xiàn)進(jìn)度條指示，然后等待掃描的結(jié)束這一整個過程，所以如下圖所示，用戶點(diǎn)擊“快速掃描”，接著出現(xiàn)等待進(jìn)度條，這樣的操作概念是符合用戶記憶，容易理解的，用戶不會產(chǎn)生疑惑。

3、什么時候該使用進(jìn)度條？

在向?qū)е袘?yīng)該使用，在那些預(yù)先設(shè)計好的，用戶可能只需完成一次或頂多在個別情況下需要完成的多步驟流程中需要使用。

在常規(guī)的任務(wù)中就不要用了，因?yàn)槟欠N笨重的，一步一步的手把手式的方式最終會變得討人厭。

億企邦覺得最佳使用的時候，就的當(dāng)用戶決定開始流程時進(jìn)度條就該顯示，不過也要注意以下幾個要點(diǎn)：

（1）、進(jìn)度條上的最后一步應(yīng)該反映出會進(jìn)行必要操作的最后一頁(比如：完成注冊、提交訂單)，在進(jìn)度條上不要使用冷冰冰的“確認(rèn)”。

（2）、將流程按照用戶的心智模型分解成步驟，很顯然每個步驟指的是操作而不是單獨(dú)的頁面，所以沒有必要非要將步驟與頁面1:1的對應(yīng)上，比如：“登錄”會涉及到一個登錄頁和注冊頁。

（3）、步驟名字要短，并且是排比結(jié)構(gòu)的“以行動導(dǎo)向”(Action-oriented)的動詞比較好，但是只有在每一個步驟都能很恰當(dāng)?shù)耐ㄟ^這種方式描述的時候再用。

（4）、確保進(jìn)度條對每一個用例都是精確和可信的，用戶不該跳過步驟或忽然碰到進(jìn)度條沒顯示出來的步驟，如果有必要，億企邦建議需要為不同的用例設(shè)計不同的進(jìn)度條。

（5）、要確保進(jìn)度條的視覺設(shè)計不會被誤認(rèn)為是可點(diǎn)擊的導(dǎo)航條。

4、等待的過程應(yīng)有足夠的反饋

忙碌的維護(hù)秩序的工作人員、時而往前移動的隊(duì)伍以及后面不斷增多的等待同學(xué)等信息都給了我們足夠的反饋，說明距離領(lǐng)到利是的目標(biāo)越來越近了且排隊(duì)等待是合理的。

想象一下，如果當(dāng)進(jìn)度條出現(xiàn)后，所有信息都是靜止的：進(jìn)度條沒有移動、沒有當(dāng)前掃描進(jìn)度的指示、沒有變化的數(shù)字，這種等待讓用戶瞬間產(chǎn)生焦慮和不安，他們會疑惑“到底什么時候才會掃描完成？”、“到底電腦是否在正常工作呢？”。

所以，這就需要我們在做進(jìn)度條優(yōu)化設(shè)計時，就大量的提供了變化的信息，給出足夠的反饋，讓用戶明白電腦是正常的，他們的等待是合理的（這點(diǎn)我也曾在億企邦的《交互設(shè)計的三大隱形機(jī)制：加載、刷新和緩存》的一文中跟大家做過相關(guān)介紹，有興趣的朋友可以看下），如下圖所示：

5、符合或者超越期待

我們在開始排隊(duì)等待時常抱以消極的期望值，認(rèn)為等待會是個漫長的過程，億企邦覺得在設(shè)計時可以利用這點(diǎn)來作出符合或者超越用戶期待的假象，這樣可以對提升用戶體驗(yàn)有所幫助。

如果從技術(shù)上暫時無法提高掃描的效率，我們可以在掃描開始之前讓用戶有所心理準(zhǔn)備，降低他們的期待，例如在掃描前可以通過彈框的方式提醒用戶：掃描過程較為漫長，請您耐心等待。

這樣到最終掃描結(jié)束，用戶可能會發(fā)覺其實(shí)掃描并不是那么的漫長，這也就變相的超越了用戶的期待。

6、分散用戶的注意力

一個有很多事情發(fā)生的時間段會顯得比在一個相同時間但沒有任何事發(fā)生的時間段快得多，“度日如年”就是這個道理，比如一個經(jīng)典的案例就是在電梯口放置鏡子的故事就是利用分散用戶注意力的方法來提升用戶等待的體驗(yàn)。

億企邦看到很多游戲的加載都采用了這種方法來提高用戶等待的體驗(yàn)，比如某大型游戲在加載的過程中會出現(xiàn)“打地鼠”小游戲，將用戶的注意力吸引到小游戲上，從而不會關(guān)注加載等待的事情。

某款安全軟件也采用了這種方法，當(dāng)用戶進(jìn)入較長的掃描等待時，界面上會彈出氣泡提示用戶可以進(jìn)入皮膚中心換換界面的皮膚玩一玩。

從這點(diǎn)出發(fā)，我們也可以對自己設(shè)計的產(chǎn)品善以利用，如果有什么新的功能推出，可以采用這種形式向用戶推介，即提高了等待的體驗(yàn)也起到了功能宣傳的作用。

7、讓用戶感受到公平

一般情況下，我們都是很反感插隊(duì)的人，對不公平的現(xiàn)象會產(chǎn)生憤怒。有心理學(xué)試驗(yàn)表明即使所有的隊(duì)列都以平均速度來移動，不管人們在哪個隊(duì)伍里，他們都感覺自己那隊(duì)是移動得最慢的，這也是為什么最好的隊(duì)列設(shè)計是只采用一條隊(duì)列，這樣人們會認(rèn)為自己得到了公平的對待。

回到進(jìn)度條的設(shè)計，我們即使用再多的設(shè)計方法，其實(shí)也只是稍微減緩了用戶在等待感覺上的慢，我們從根本上還是要提高產(chǎn)品自身的掃描效率和性能，讓使用我們產(chǎn)品的用戶受到的待遇是與使用其他類似產(chǎn)品用戶所受待遇是同等的，最好是超越的。

用戶沒有道理去忍受一款性能低下的產(chǎn)品帶給他們的等待痛苦，這也就是讓用戶感受到公平是最基本的。

8、積極的開始，美好的結(jié)尾

一個漫長的活動過程，在記憶中的感受重要程度排序?yàn)椋航Y(jié)尾，開始，中間過程，其中結(jié)尾的感受對整個活動過程體驗(yàn)的影響是最大的，億企邦覺得如果能在結(jié)尾時增加稍許愉快的成分，即使整體過程是不愉快的，用戶仍然會對整個過程產(chǎn)生愉快的感受。

進(jìn)度條設(shè)計上也同樣在開始與結(jié)尾處做了優(yōu)化，在掃描剛開始，我們對進(jìn)度條做了假移動的處理，進(jìn)度條一開始會比較快的移動起來，其實(shí)移動的這段距離與實(shí)際的掃描比率是沒有關(guān)系的。

比如，有100個文件需要掃描，進(jìn)度條每移動1%的距離代表掃描了一個文件，假移動就是讓進(jìn)度條一開始快速的移動10%的距離，其實(shí)在后臺并沒有掃描10個文件，可能只是掃描了1個文件，這樣的做法會給用戶一個積極的起步感，用戶看到已經(jīng)開始掃描了可能就會去做其他事情。

美好的結(jié)尾通常在人的記憶中會占有很重要的影響力，當(dāng)掃描結(jié)束后會跳轉(zhuǎn)到結(jié)果頁面，在這個頁面上會展現(xiàn)此次掃描的詳細(xì)結(jié)果并且給予很強(qiáng)的成就感，比如沒有發(fā)現(xiàn)病毒會用顯眼的綠色對號，肯定的文本讓用戶確信自己的電腦是安全的。

如果掃描出病毒或電腦問題，界面上會給用戶明確的清除按鈕和其他特殊情況處理途徑，讓用戶能很方便的解決問題并使電腦恢復(fù)正常。當(dāng)用戶解決完所有問題后，會給出解決成功的成就感提示。

億企邦點(diǎn)評：

在日常生活中，需求大于資源是常態(tài)，我們必須面對各種的排隊(duì)等待，同樣，對于電腦或軟件的性能瓶頸也是暫時無法解決的，所以，我們只能在基于用戶體驗(yàn)的前提下，合理使用進(jìn)度條，讓等待不再顯得那么無奈！