感謝nini提供的博文分享，更多交流請(qǐng)?jiān)L問nini的新浪博客http://blog.sina.com.cn/ninilanma

———————————————————————————————————————————–

又是好文一篇，雖然說這篇是說付款流程的guideline，但是很多都可以應(yīng)用到各種注冊(cè)或者索取用戶信息的流程當(dāng)中，非常值得引起重視。
原文 Fundamental Guidelines Of E-Commerce Checkout Designhttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

Introduction:
據(jù)調(diào)查，有59.8%用戶在付款過程中放棄付款操作，因?yàn)椤昂芏嗑W(wǎng)購(gòu)的付款流程都在無(wú)視最基本的可用性準(zhǔn)則，而他們卻恰恰沒有注意到因此他們流失了大量可能發(fā)生的付款行為。(By Nielsen)”所以在做付款流程的時(shí)候，請(qǐng)最先檢查這個(gè)流程各個(gè)角落的可用性問題。

作者Christian Holst在2010年對(duì)15個(gè)網(wǎng)站進(jìn)行的可用性測(cè)試，觀察用戶從“放入購(gòu)物車”到“付款結(jié)束”這一步驟碰到的問題，測(cè)試中被試們要求用“大聲思考”的方式說出他們碰到問題。經(jīng)過該測(cè)試，發(fā)現(xiàn)各種可用性問題500多個(gè)（其中包括“分散用戶注意力的不必要的動(dòng)畫”，“不符合邏輯的流程”，等等）。另一個(gè)有意思的發(fā)現(xiàn)是，大多數(shù)放棄的用戶都是在付款流程的最后一步放棄的。

11 guidelines:
本文列出了最應(yīng)該注意的11點(diǎn)會(huì)導(dǎo)致用戶放棄付款的痛點(diǎn)：
1.付款流程必須是“直線”流程

（點(diǎn)擊看大圖）
當(dāng)付款流程不是“直線”的時(shí)候，用戶就會(huì)感到迷惑，他會(huì)不明白為什么同樣的頁(yè)面的會(huì)看到兩次，以為自己操作失誤。因此“非直線”的流程成為最容易讓用戶放棄付款的痛點(diǎn)，一定要盡量避免“步驟中的步驟”這樣的問題。

2.對(duì)填寫框注以必要的說明
因?yàn)橄啾忍顚懫渌?cè)表單，用戶會(huì)更認(rèn)真的填寫付款表單。用戶可能因?yàn)椴焕斫饽骋惶顚懣虻膬?nèi)容而放棄付款。所以在填寫框后面注以簡(jiǎn)短的說明文字引導(dǎo)用戶填寫，對(duì)于確保用戶付款非常必要的。
反例1）“這里的first是指什么？”

反例2）apple的網(wǎng)站上，用戶在填地區(qū)編碼的地方填寫郵政編碼（注：美國(guó)郵政編碼和地區(qū)編碼不一樣）

正例：在填寫項(xiàng)后面加入必要的說明，如有可能的話，最好附上例子（如下圖）

3.避免使用“情景性”詞匯作為按鈕上的文案
情景詞匯如“繼續(xù)”，如“返回”，這樣的情景詞匯會(huì)使用戶迷惑，“繼續(xù)什么？”“返回哪兒？”。所以按鈕上的文案最好使用清楚明白的詞匯。比如“繼續(xù)購(gòu)物”，“繼續(xù)付款”，“返回購(gòu)物車”等等

4.加強(qiáng)視覺“可信度”
因?yàn)檫@樣那樣的原因，用戶對(duì)網(wǎng)上付款的行為都存在很大的顧慮。所以想要促使用戶付款，必須先要增強(qiáng)網(wǎng)站的可信度，增加他付款的信心。所以盡可能加入各種各樣能讓用戶覺得“可信，安全”的視覺信息，比如icon,文案，等等。

（點(diǎn)擊看大圖）
上面的A/B對(duì)比顯示，盡管對(duì)一個(gè)不懂“技術(shù)”的用戶，B看上去更讓人覺得可信。雖然內(nèi)容完全沒有任何變化，就只是因?yàn)锽在卡信息的地方加入了灰色的底色，安全鎖的icons這樣的視覺小tips，就獲得了更多的信任。

5.避免在付款流程中出現(xiàn)多個(gè)使用”apply（應(yīng)用/確認(rèn)）”鍵
當(dāng)頁(yè)面中有真正引向“下一步”的按鈕時(shí)，盡量確保頁(yè)面中沒有其他“apply確認(rèn)”按鈕。

因?yàn)檫@樣會(huì)使用戶迷惑，“我點(diǎn)了apply會(huì)發(fā)生什么？會(huì)去哪兒？”同理產(chǎn)生了會(huì)不會(huì)發(fā)生流程不是直線的問題。所以盡量不要在有最主要的“下一步”按鈕的頁(yè)面，使用apply按鈕。
如果需要確認(rèn)任何信息的話，盡量使用ajax來進(jìn)行判斷。

6.銀行卡的到期日期的書寫方法嚴(yán)格遵守銀行卡上的書寫方法

以上4個(gè)銀行卡到期日期的書寫全部不正確。正確的書寫方式應(yīng)該是月份在前，年在后”xx/xx”（xx為數(shù)字）。當(dāng)在月份小于10的情況下，在月份前面加“0”，比如2011年1月到期，寫作01/11。寫成和卡上一樣的好處在于，方便用戶檢查是否正確書寫。

7.填寫表格寫在一列

當(dāng)填寫表單有兩列時(shí)，用戶會(huì)產(chǎn)生疑惑。50%以上的用戶產(chǎn)生“我是不是兩列都要填寫”這樣的疑惑。
反例1）perfume.com“不知道填寫哪兒”

在用戶填寫以上表格時(shí)，出現(xiàn)了三種填寫方式

• 兩列都寫（錯(cuò)誤）
• 只填寫左邊的email和右列全部（錯(cuò)誤）
• 只填寫一列（正確）

反例2）petsmart.com“漏看了需要填寫的信息”

大多數(shù)用戶都“沒有看到”右側(cè)的2.是需要填寫的一項(xiàng)。
因此，建議所有填寫項(xiàng)，都放在一列進(jìn)行填寫。

8.“郵寄賬單地址”，“收貨地址”，不要讓用戶寫兩遍
（注：國(guó)外一些國(guó)家的確是把“賬單”和“收貨單”分開的郵寄的。但是這個(gè)問題好像在國(guó)內(nèi)不會(huì)出現(xiàn)，國(guó)內(nèi)不會(huì)郵寄賬單）
首先，大部分用戶的收貨地址和郵寄賬單地址都是用戶的家庭住址，所以，當(dāng)你向用戶二次詢問地址時(shí)，不只增加了用戶負(fù)擔(dān)，反而提高了用戶“寫錯(cuò)”的概率。
有網(wǎng)站使用至灰“賬單”地址的方法也不好，因?yàn)檫@個(gè)時(shí)候用戶會(huì)疑問，為什么會(huì)至灰。

（點(diǎn)擊看大圖）
反例1）Apple Store使用copy按鈕來讓用戶把收貨地址復(fù)制到郵寄賬單的地址，這也不是一個(gè)好方法，因?yàn)橐坏┏鲥e(cuò)，用戶需要更改兩個(gè)地方，有的用戶會(huì)忘記更改；想起來更改的用戶，也不知道只需要點(diǎn)擊一下copy按鈕就可以把另外的那個(gè)地方的錯(cuò)誤改正過來。全部用戶都是再重新更改了一遍地址。
正確的方法是，使用checkbox來告知用戶（如下圖）

9.使用“可見”，“可懂”的錯(cuò)誤反饋信息
錯(cuò)誤反饋信息必須及時(shí)的讓用戶看到，并且讓用戶理解為什么出錯(cuò)。
反例1）反饋信息在頁(yè)面的最上方，不能及時(shí)被看到

反例2）反饋信息用一個(gè)小箭頭指出，可視度太低

正確的做法，反饋信息“及時(shí)”“可視度高”（如下圖）

10.“成為會(huì)員/注冊(cè)用戶”應(yīng)該是可選項(xiàng)

調(diào)查顯示30%的用戶放棄購(gòu)買是因?yàn)樗枰粡?qiáng)制注冊(cè)成為會(huì)員，40%的用戶不想填寫注冊(cè)信息是因?yàn)椴幌朐谧?cè)后被垃圾廣告所攻擊，在他們的觀念里，給出了email地址，就等于訂閱了這個(gè)公司的newsletter。
如果非要讓用戶注冊(cè)，可以再購(gòu)買完成后誘導(dǎo)他。

11.不要詢問不必要的私人信息
當(dāng)用戶被詢問電話號(hào)碼這樣的私人信息時(shí)，很多用戶產(chǎn)生懷疑放棄而購(gòu)買。
但是，用戶卻是很“寬容”的，只要給用戶做出解釋“為什么需要您的信息”時(shí)，用戶就會(huì)填寫。如果可能的話，盡可能將這個(gè)“解釋”顯示在外面，讓用戶直接看到。

另外有一個(gè)有趣的發(fā)現(xiàn)，當(dāng)用戶購(gòu)物的東西越貴時(shí)，用戶越容易填寫他的電話號(hào)碼，因?yàn)樗J(rèn)為“物品貴重，需要留下聯(lián)系方式以便及時(shí)聯(lián)系到我”。他認(rèn)為電話號(hào)碼是“必要信息”。

來源：http://www.userfree.cn/?p=2159