每個(gè)電子商務(wù)網(wǎng)站都有自己的結(jié)帳流程，來(lái)將用戶從挑選商品的環(huán)節(jié)帶到購(gòu)買的環(huán)節(jié)上。結(jié)賬流程的細(xì)節(jié)會(huì)因?yàn)橛脩糍?gòu)買的商品以及其目的而有所不同，但是，最終付款的環(huán)節(jié)都同樣重要 。

我們?cè)O(shè)計(jì)的結(jié)賬流程要讓用戶保持一種參與感，并且并鼓勵(lì)他們完成結(jié)帳過(guò)程。 我想分享一些可用性設(shè)計(jì)的建議，以便改進(jìn)帳單表單的設(shè)計(jì)，并提高用戶結(jié)帳轉(zhuǎn)化率。

澄清意圖

我們的目標(biāo)是設(shè)計(jì)能夠鼓勵(lì)用戶購(gòu)買的表單形式。 所以你要讓這個(gè)過(guò)程盡可能的簡(jiǎn)單，特別是在付款階段。我們?nèi)绻麩o(wú)法一下子闡明整個(gè)結(jié)算流程，那么只需要保持每個(gè)環(huán)節(jié)的清晰和簡(jiǎn)明，永遠(yuǎn)不要讓用戶對(duì)他的行為感到困惑或不確定而退出結(jié)算。

有一些你應(yīng)該牢記在心的技巧會(huì)讓你的工作做的更好：

• 更大的字體
• 易讀的標(biāo)簽
• 字段間的間隔
• 更易用的導(dǎo)航

此外還可以添加適量的icon來(lái)突出視覺(jué)效果。

Threadless的結(jié)帳頁(yè)面提供了一個(gè)很好的例子。

信用卡圖標(biāo)的使用，讓用戶對(duì)自己選擇的支付方式清晰明了。

同樣，下方的圖標(biāo)也清晰明了地展示了CVV驗(yàn)證碼的位置。

你要做的就是盡你所能讓用戶在付款的每一個(gè)階段準(zhǔn)確地知道他們?cè)谧鍪裁础?/p>

不應(yīng)該有模糊的術(shù)語(yǔ)，不明確的方向，并且在整個(gè)流程中應(yīng)該有大量提示 / 圖標(biāo)等等來(lái)解答用戶使用過(guò)程中可能會(huì)遇到的問(wèn)題。

定義文本格式

有些數(shù)據(jù)需要一定的文本格式，如電話號(hào)碼和信用卡號(hào)。

這種動(dòng)態(tài)的間隔可以地使用JavaScript生成，這是您可以添加到網(wǎng)站的最佳技術(shù)之一。

定義間隔讓用戶知道在填寫表單字段時(shí)處于正確的路線上。

比如在在表單中，當(dāng)用戶輸入了正確的郵政編碼時(shí)，表單自動(dòng)切換到下一個(gè)字段。

同樣的電話號(hào)碼，你可以自動(dòng)的匹配的電話號(hào)碼的數(shù)字。

你可以在易趣網(wǎng)的結(jié)賬單上看到這個(gè)。

但最有用的是信用卡的4位間隔格式。

信用卡號(hào)碼很長(zhǎng)，很容易出錯(cuò)了。一個(gè)不正確的信用卡號(hào)給用戶帶來(lái)的挫折感可能會(huì)讓用戶會(huì)否定你其他所有的設(shè)計(jì)。

這個(gè)自定義的信用卡號(hào)數(shù)字間距在您的帳單字段中，使客戶更容易輸入他們的數(shù)字，并再次檢查他們是否正確。

你可以參考BodyBuilding的設(shè)計(jì)，其中還包括錯(cuò)誤信息的反饋。

簡(jiǎn)化操作路徑

因?yàn)榻Y(jié)算流程的長(zhǎng)短不一，所以每個(gè)網(wǎng)站的處理過(guò)程總是不同的。這可能會(huì)讓許多訪問(wèn)者感到困惑，這也是為什么電子商務(wù)在2000年代初期停滯不前的原因之一。

但是，無(wú)論表單長(zhǎng)短，無(wú)非圍繞以下原則來(lái)進(jìn)行設(shè)計(jì)：

• 為了簡(jiǎn)潔，內(nèi)容較少的結(jié)算流程盡量在一頁(yè)處理
• 較復(fù)雜的流程應(yīng)該進(jìn)入步驟以面包屑來(lái)進(jìn)行導(dǎo)航

例如，semrush的結(jié)算流程是美妙的。

很快使用，容易閱讀，你需要知道的一切都清楚可見(jiàn)在頁(yè)面上。

但我不介意再結(jié)帳過(guò)程中要有面包屑導(dǎo)航。

這些提供了一個(gè)清楚的指示器，說(shuō)明用戶在結(jié)賬過(guò)程中走了多遠(yuǎn)，以及還有多少內(nèi)容需要進(jìn)行完善。

這使每個(gè)人在每個(gè)步驟中更容易完善和提交內(nèi)容。如果他們不知道結(jié)賬過(guò)程什么時(shí)候結(jié)束，他們可能會(huì)感到困惑，焦慮，或者只是生氣和離開(kāi)。

Wiggle的結(jié)帳使用清晰的面包屑在每個(gè)頁(yè)面的頂部。

兩種不同的形式可以同時(shí)嘗試，運(yùn)用一些A/B測(cè)試并且看看哪種風(fēng)格的表現(xiàn)更好。你可能會(huì)對(duì)結(jié)果感到驚訝。

概括購(gòu)買

用戶輸入他們的賬單信息之后，要點(diǎn)擊“提交”按鈕是最難的。

猶豫對(duì)于轉(zhuǎn)化率而言是致命的。

概括的訂單的基本信息，展示給客戶，他們可以看到一切從他們購(gòu)買的項(xiàng)目的總費(fèi)用（加加工），甚至交貨日期（如果適用的話）。

GitHub的Pro升級(jí)計(jì)費(fèi)領(lǐng)域的廣告購(gòu)買都在同一頁(yè)上。它闡明了你要多久付款，最后的費(fèi)用是什么，以及何時(shí)你可以期待下一個(gè)費(fèi)用。大多數(shù)字段都是從你的個(gè)人資料中填寫的，所以如果你有一個(gè)帳戶，這個(gè)過(guò)程非?？?。

另一個(gè)例子是亞馬遜，電子商務(wù)商店之母。

一旦你進(jìn)入付款的環(huán)節(jié)，訂單相關(guān)的所有的細(xì)節(jié)，如：送貨地址和付款信息等都將以一屏的形式進(jìn)行呈現(xiàn)，以確保你真的了解你的采購(gòu)。這減少了錯(cuò)誤項(xiàng)目的退貨率，并且能夠減少用戶在點(diǎn)擊“購(gòu)買”按鈕時(shí)的猶豫不決。

我們需要公開(kāi)透明與客戶分享盡可能多的關(guān)于訂單的細(xì)節(jié)。

結(jié)束

結(jié)算行為是將潛在客戶轉(zhuǎn)化為付費(fèi)客戶關(guān)鍵的一步。這就是為什么形式優(yōu)化如此重要。

我希望這些趨勢(shì)可以幫助你制作可用的和令人鼓舞的賬單形式，為你的商店和所有客戶帶來(lái)更多的收入。優(yōu)化是一個(gè)持續(xù)的過(guò)程，但如果你不斷測(cè)試新的想法，你將永遠(yuǎn)領(lǐng)先于競(jìng)爭(zhēng)對(duì)手。

總結(jié)：

• 內(nèi)容易讀；
• 智能輸入；
• 流程清晰；
• 展示到位。

編譯作者：張大俠，公眾號(hào)：「?jìng)b俠說(shuō)」

本文由 @張大俠 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。