用戶體驗設(shè)計中的分步導(dǎo)航
設(shè)計大型電商網(wǎng)站或者復(fù)雜的在線服務(wù)時,你很可能需要設(shè)計一套系統(tǒng),來梳理順序與結(jié)構(gòu)。把它設(shè)計得簡單直觀,讓用戶順利通過,是提升轉(zhuǎn)化率的關(guān)鍵。沿途所有的挫敗都可能導(dǎo)致他們離開,去選擇其他的產(chǎn)品。
易用的分步流程有助于用戶避免挫敗,成功地完成主要任務(wù)。本文中,我們來了解分步導(dǎo)航的各種形式,看如何使用它們。
分步導(dǎo)航是什么?
分步導(dǎo)航(或者說分步指示器)將一系列的過程分解成多個合理的步驟。它引導(dǎo)用戶通過一些步驟最終完成一項復(fù)雜的任務(wù)。好的分步導(dǎo)航應(yīng)當(dāng)告知用戶以下信息:
- 他們已經(jīng)完成了哪些步驟(或任務(wù)),最好要有適當(dāng)?shù)囊曈X反饋
- 現(xiàn)在處在哪一步(用戶當(dāng)前在整個流程中的位置)
- 還有哪些步驟,多少步(最好都要有清晰的名稱)
分步導(dǎo)航通過步驟編號表達出整個過程
有3大理由應(yīng)該使用分步流程:
- 合理地將數(shù)據(jù)輸入分組
- 為用戶建立明確的期望
- 在復(fù)雜的過程中追蹤整個流程
為什么有效?
分步導(dǎo)航清晰地指明了完成任務(wù)的路徑。研究表明,它給用戶以明確的概念,完成最終目標(biāo)需要多少步,能夠顯著降低放棄的概率。從心理學(xué)角度來看,這頗具意義。如果你知道完成這個過程需要多少步,你就更容易完成它。
分步注冊賬號
分塊展現(xiàn)內(nèi)容,便于用戶瀏覽,有助于他們理解。實際上,分塊其實就是在有意創(chuàng)造視覺分隔的內(nèi)容單元,在整體環(huán)境中有它的意義。
分步導(dǎo)航的使用。
分步導(dǎo)航可以用在許多種情景中。下面3個領(lǐng)域最常見。
在線下單
目前為止,分步導(dǎo)航最廣泛的使用案例,就是與在線購買相結(jié)合,因為這個任務(wù)可以很自然地分割成多個步驟。
多步表單
如果表單需要用戶填寫許多信息,最好將它分成多步。
引導(dǎo)頁
分步導(dǎo)航也可以用來引導(dǎo)用戶了解一個應(yīng)用或服務(wù)的功能。如果步驟不多,也可以使用小圓點來表示(就像下圖Dropbox的例子)。
Dropbox的引導(dǎo)頁
分步導(dǎo)航設(shè)計最佳實踐
創(chuàng)建優(yōu)秀的分步導(dǎo)航,并沒有通用的方案。但有一點是肯定的——你時刻要考慮用戶如何與該系統(tǒng)交互。簡單說,就是要把流程步驟設(shè)計得盡可能簡單清晰,不要讓用戶困惑。
設(shè)定用戶的期望
當(dāng)用戶要進行一項復(fù)雜的任務(wù)時,重要的是事先營造他們的期望,告訴他們需要多少時間和精力。如果用戶認(rèn)為這個任務(wù)只要2分鐘,但實際上花了10分鐘,這個體驗就很糟糕。
提供簡單的描述,能夠幫助用戶為復(fù)雜的任務(wù)做好準(zhǔn)備。這也很有助于估計完成任務(wù)所需的時間,尤其當(dāng)這些步驟并不均等時(例如有些步驟比其他的更長)。
建立合理的流程
顯示流動的方向。最好使用箭頭來強調(diào)方向,因為線條本身并沒有提供“流程”的含義。
結(jié)合圖形與文字描述其中步驟。要讓用戶清楚步驟的順序。
過程不要太長。3-5步就足夠了。
使用數(shù)字序號描述步驟,指示用戶當(dāng)前所處的步驟(例如第3步、第5步)。
讓用戶清楚自己當(dāng)前位置
“我進行到哪兒了?”這是導(dǎo)航需要用戶回答的基本問題之一。所以優(yōu)秀的分步導(dǎo)航設(shè)計,最關(guān)鍵的就是保持用戶了解當(dāng)前所處位置。這能夠提升連續(xù)性,因為用戶知道當(dāng)前位置與之前步驟和后續(xù)步驟之間的關(guān)系。
要為流程設(shè)計一套良好的視覺展現(xiàn)。用戶依賴導(dǎo)航元素中的這些視覺線索來回答這個至關(guān)重要的問題。
圖片來源:Dribbble
狀態(tài)的變化要清晰,告訴用戶當(dāng)前的步驟不只是改個顏色。適合的圖形和文字標(biāo)簽,能幫助用戶理解菜單項。
異常標(biāo)簽的錯誤狀態(tài)
避免多層分步導(dǎo)航
避免在一個頁面上多次使用,或者嵌套使用分步導(dǎo)航。這會導(dǎo)致界面的混亂。
顯示出流程反饋
分步導(dǎo)航可以在每步保存后,短暫顯示反饋信息。只應(yīng)該在步驟間有較長延遲時使用這種反饋。
這個分步指示器在步驟保存后,短暫顯示了反饋信息。
移動應(yīng)用中的分步導(dǎo)航
因為橫向空間有限,在移動應(yīng)用和網(wǎng)頁上,縱向分步導(dǎo)航也許是不錯的方案。不過要確保每步內(nèi)容是響應(yīng)式的。
小屏幕上使用縱向分步設(shè)計。
結(jié)論
把分步導(dǎo)航設(shè)計得簡單易懂、低調(diào)含蓄,也別忽視它們的視覺表現(xiàn),應(yīng)當(dāng)在視覺上吸引和引導(dǎo)用戶?!坝脩糁辽稀薄S涀∥覀儾皇窃跒樵O(shè)計師而設(shè)計,我們?yōu)槠胀ㄓ脩粼O(shè)計。最終,優(yōu)秀的分步導(dǎo)航能讓用戶停留,完成任務(wù),并且讓你的網(wǎng)站和應(yīng)用留下正面的印象。
感謝閱讀!
#專欄作家#
可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計師,至少是個快樂的設(shè)計師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
?? ?? ?? ??