譯文 | Web端購物結(jié)算流程的可用性設(shè)計建議
每個電子商務(wù)網(wǎng)站都有自己的結(jié)帳流程,來將用戶從挑選商品的環(huán)節(jié)帶到購買的環(huán)節(jié)上。結(jié)賬流程的細節(jié)會因為用戶購買的商品以及其目的而有所不同,但是,最終付款的環(huán)節(jié)都同樣重要 。
我們設(shè)計的結(jié)賬流程要讓用戶保持一種參與感,并且并鼓勵他們完成結(jié)帳過程。 我想分享一些可用性設(shè)計的建議,以便改進帳單表單的設(shè)計,并提高用戶結(jié)帳轉(zhuǎn)化率。
澄清意圖
我們的目標是設(shè)計能夠鼓勵用戶購買的表單形式。 所以你要讓這個過程盡可能的簡單,特別是在付款階段。我們?nèi)绻麩o法一下子闡明整個結(jié)算流程,那么只需要保持每個環(huán)節(jié)的清晰和簡明,永遠不要讓用戶對他的行為感到困惑或不確定而退出結(jié)算。
有一些你應(yīng)該牢記在心的技巧會讓你的工作做的更好:
- 更大的字體
- 易讀的標簽
- 字段間的間隔
- 更易用的導(dǎo)航
此外還可以添加適量的icon來突出視覺效果。
Threadless的結(jié)帳頁面提供了一個很好的例子。
信用卡圖標的使用,讓用戶對自己選擇的支付方式清晰明了。
同樣,下方的圖標也清晰明了地展示了CVV驗證碼的位置。
你要做的就是盡你所能讓用戶在付款的每一個階段準確地知道他們在做什么。
不應(yīng)該有模糊的術(shù)語,不明確的方向,并且在整個流程中應(yīng)該有大量提示 / 圖標等等來解答用戶使用過程中可能會遇到的問題。
定義文本格式
有些數(shù)據(jù)需要一定的文本格式,如電話號碼和信用卡號。
這種動態(tài)的間隔可以地使用JavaScript生成,這是您可以添加到網(wǎng)站的最佳技術(shù)之一。
定義間隔讓用戶知道在填寫表單字段時處于正確的路線上。
比如在在表單中,當用戶輸入了正確的郵政編碼時,表單自動切換到下一個字段。
同樣的電話號碼,你可以自動的匹配的電話號碼的數(shù)字。
你可以在易趣網(wǎng)的結(jié)賬單上看到這個。
但最有用的是信用卡的4位間隔格式。
信用卡號碼很長,很容易出錯了。一個不正確的信用卡號給用戶帶來的挫折感可能會讓用戶會否定你其他所有的設(shè)計。
這個自定義的信用卡號數(shù)字間距在您的帳單字段中,使客戶更容易輸入他們的數(shù)字,并再次檢查他們是否正確。
你可以參考BodyBuilding的設(shè)計,其中還包括錯誤信息的反饋。
簡化操作路徑
因為結(jié)算流程的長短不一,所以每個網(wǎng)站的處理過程總是不同的。這可能會讓許多訪問者感到困惑,這也是為什么電子商務(wù)在2000年代初期停滯不前的原因之一。
但是,無論表單長短,無非圍繞以下原則來進行設(shè)計:
- 為了簡潔,內(nèi)容較少的結(jié)算流程盡量在一頁處理
- 較復(fù)雜的流程應(yīng)該進入步驟以面包屑來進行導(dǎo)航
例如,semrush的結(jié)算流程是美妙的。
很快使用,容易閱讀,你需要知道的一切都清楚可見在頁面上。
但我不介意再結(jié)帳過程中要有面包屑導(dǎo)航。
這些提供了一個清楚的指示器,說明用戶在結(jié)賬過程中走了多遠,以及還有多少內(nèi)容需要進行完善。
這使每個人在每個步驟中更容易完善和提交內(nèi)容。如果他們不知道結(jié)賬過程什么時候結(jié)束,他們可能會感到困惑,焦慮,或者只是生氣和離開。
Wiggle的結(jié)帳使用清晰的面包屑在每個頁面的頂部。
兩種不同的形式可以同時嘗試,運用一些A/B測試并且看看哪種風格的表現(xiàn)更好。你可能會對結(jié)果感到驚訝。
概括購買
用戶輸入他們的賬單信息之后,要點擊“提交”按鈕是最難的。
猶豫對于轉(zhuǎn)化率而言是致命的。
概括的訂單的基本信息,展示給客戶,他們可以看到一切從他們購買的項目的總費用(加加工),甚至交貨日期(如果適用的話)。
GitHub的Pro升級計費領(lǐng)域的廣告購買都在同一頁上。它闡明了你要多久付款,最后的費用是什么,以及何時你可以期待下一個費用。大多數(shù)字段都是從你的個人資料中填寫的,所以如果你有一個帳戶,這個過程非常快。
另一個例子是亞馬遜,電子商務(wù)商店之母。
一旦你進入付款的環(huán)節(jié),訂單相關(guān)的所有的細節(jié),如:送貨地址和付款信息等都將以一屏的形式進行呈現(xiàn),以確保你真的了解你的采購。這減少了錯誤項目的退貨率,并且能夠減少用戶在點擊“購買”按鈕時的猶豫不決。
我們需要公開透明與客戶分享盡可能多的關(guān)于訂單的細節(jié)。
結(jié)束
結(jié)算行為是將潛在客戶轉(zhuǎn)化為付費客戶關(guān)鍵的一步。這就是為什么形式優(yōu)化如此重要。
我希望這些趨勢可以幫助你制作可用的和令人鼓舞的賬單形式,為你的商店和所有客戶帶來更多的收入。優(yōu)化是一個持續(xù)的過程,但如果你不斷測試新的想法,你將永遠領(lǐng)先于競爭對手。
總結(jié):
- 內(nèi)容易讀;
- 智能輸入;
- 流程清晰;
- 展示到位。
編譯作者:張大俠,公眾號:「俠俠說」
本文由 @張大俠 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!