起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識譯文｜進(jìn)度跟蹤器的體驗設(shè)計
在設(shè)計大型電商網(wǎng)站或是復(fù)雜在線服務(wù)系統(tǒng)的時候，遇到最核心的問題就是設(shè)計一個在線下單或是配置的流程。如果能把用戶流程設(shè)計得簡單并且符合用戶直覺，這絕對是提高轉(zhuǎn)化率的關(guān)鍵。過程中任何一個對用戶造成的挫折感都有可能讓他們離開去嘗試其他選擇。
易用的分步流程可以有效的避免用戶受挫，并且?guī)椭麄兂晒Φ耐瓿芍饕蝿?wù)。本文我將帶大家來看一下各式流程進(jìn)度的設(shè)計。
了解進(jìn)度跟蹤器
進(jìn)度跟蹤器（進(jìn)度指示）通過將流程切分成多個邏輯步驟，從而顯示了線性的進(jìn)度流程。他們可以引導(dǎo)用戶按照一系列的步驟進(jìn)行操作從而完成任務(wù)。好的進(jìn)度跟蹤器設(shè)計需要告知用戶如下信息：
- 哪些步驟（或是任務(wù)）用戶已經(jīng)完成了（最好使用合適的視覺表現(xiàn)）
- 當(dāng)前在哪個步驟（用戶在全流程中的當(dāng)前位置）
- 還有哪些步驟需要去完成（最好有明確的指引）
- 進(jìn)度追蹤器將流程用步驟的方式展現(xiàn)出來
這是使用步驟化流程的三個最主要原因：
- 可以把用戶需要輸入的信息更有邏輯的組合起來
- 給用戶設(shè)定一個清晰的預(yù)期
- 為用戶在一個復(fù)雜的長流程中跟蹤狀態(tài)
進(jìn)度跟蹤器有效的原因
進(jìn)度跟蹤器給用戶創(chuàng)造了清晰的路徑。研究表明，當(dāng)用戶對完成最終目標(biāo)需要多少步驟有了清晰的概念之后，中途放棄的情況得到顯著的減少。從心理學(xué)的角度來說，也十分站得住腳。
用分步操作來完成建立賬戶。
而且，將內(nèi)容展現(xiàn)在區(qū)塊中更有利于用戶進(jìn)行信息的掃描，從而可以提高用戶對流程的理解。事實上，區(qū)塊設(shè)計能提供符合邏輯且具有視覺差異的內(nèi)容模塊，這對于復(fù)雜的全局來說很有幫助。
進(jìn)度跟蹤器的使用
進(jìn)度跟蹤器在許多場景下都能使用，下面三種是最為常見的：
1、在線下單
至今為止，進(jìn)度跟蹤器最常用在在線購買中，因為購買的任務(wù)天生就是分為多個步驟。
2、多步表單
如果一個表單需要用戶提供許多的信息，最好將這個表單拆分成多個步驟。
3、引導(dǎo)
進(jìn)度跟蹤器也常于App引導(dǎo)。如果步驟不多的情況下可以使用屏幕下方的小點來進(jìn)行標(biāo)注（像如下Dropbx的案例）。
進(jìn)度跟蹤器設(shè)計案例
如何設(shè)計一個卓越的進(jìn)度跟蹤器，這個問題并沒有一個通用的答案。但是你始終需要確認(rèn)的是——用戶是如何和你的系統(tǒng)進(jìn)行交互的。通常來說，步驟的設(shè)計應(yīng)當(dāng)盡可能簡單清晰，以免讓用戶感到困惑。
設(shè)定用戶預(yù)期
當(dāng)用戶需要完成一個復(fù)雜的流程操作時，進(jìn)行用戶的預(yù)期管理就顯得尤為重要，我們需要在用戶開始操作前就告訴他們大致需要多少工作和時間能完成這個流程。如果用戶僅認(rèn)為他們只需要兩分鐘就能完成，但卻花了十分鐘，這體驗一定很糟糕。
給用戶提供合適的流程說明能幫助用戶做好進(jìn)行復(fù)雜操作的心里準(zhǔn)備。當(dāng)然如果能夠給用戶一個完成任務(wù)的時間預(yù)估就最好了，尤其當(dāng)這些步驟的復(fù)雜程度并不等同的時候（例如，某些步驟可能需要比其他的花去更多的時間）。
建立符合邏輯的流程
展現(xiàn)出流程的進(jìn)展方向。最好可以使用箭頭來強(qiáng)調(diào)流程的流向，因為單純使用線進(jìn)行連接無法提現(xiàn)出流程的概念。
使用圖標(biāo)配合文字來描述流程中這些步驟，這樣可以讓用戶更清晰地了解步驟。
不要把流程拆得過長，3-5步為宜。使用數(shù)字來體現(xiàn)步驟和當(dāng)前位置（例如，五步中的第三步）
時刻讓用戶知道自己的處境
“我在哪兒？”這是一個用戶在界面中進(jìn)行導(dǎo)航時常常會問自己的問題。這也是為什么一個好的進(jìn)度跟蹤器需要隨時保持讓用戶清楚地知道自己在流程中的哪個步驟的原因。這樣用戶就能清楚地知道自己都做了些什么以及接下來需要做些什么，有助于流程的推進(jìn)。
同時為進(jìn)度跟蹤器提供一個良好的視覺展示也是十分必要。用戶往往依賴于導(dǎo)航上的一些視覺線索進(jìn)行判斷。
來自Dribble的案例
可以使用一些清晰的狀態(tài)變化來表明當(dāng)前步驟，而不僅僅是改變簡單的顏色。合適的圖標(biāo)和文字有助于用戶理解。文字隨著狀態(tài)而改變。
避免多個進(jìn)度跟蹤器同時存在
不要在同一個頁面中多次使用進(jìn)度跟蹤器，也不要使用嵌套。這很有可能會給你的界面帶來混亂。
使用進(jìn)度反饋
進(jìn)度跟蹤器可以在用戶保存了某個步驟后顯示短暫的反饋。而這個反饋僅應(yīng)該存在于當(dāng)步驟間有一些潛在的等待的情況下。
進(jìn)度跟蹤器在移動端的應(yīng)用
由于水平空間在手機(jī)上非常局限，垂直方向上的進(jìn)度跟蹤器對于移動應(yīng)用或是站點來說也許是個更好的選擇。需要稍稍注意一下每一步的內(nèi)容都是響應(yīng)式的即可。垂直向的進(jìn)度跟蹤器很適合小屏，如下圖：
小結(jié)
設(shè)計進(jìn)度跟蹤器的時候需要謹(jǐn)記簡單、易理解，而且別忘了使用視覺表現(xiàn)對用戶進(jìn)行合適的引導(dǎo)。始終把用戶放在首位，不要為自己而設(shè)計。最后，好的進(jìn)度跟蹤器能夠保證用戶順利完成流程的同時，對你的產(chǎn)品有一個更好的印象。
#專欄作家#
Terryfan，微信公眾號：開卷有譯（terryfan_ux），人人都是產(chǎn)品經(jīng)理專欄作家。點融網(wǎng)用戶體驗總監(jiān)，喜歡設(shè)計、推理、邏輯分析搞腦子。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。
- 目前還沒評論，等你發(fā)揮！
