轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   m.shtzxx.cn  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.lins.im/

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

譯者注：在電子商務(wù)中，我們發(fā)現(xiàn)用戶在支付環(huán)節(jié)的流失率非常高，支付流程的用戶體驗是至關(guān)重要的環(huán)節(jié)。本文介紹了一些移動端支付流程的方法，怎樣讓我們的支付流程更加易用。業(yè)余時間翻譯了這篇文章跟大家共享，若大家發(fā)現(xiàn)任何錯誤，歡迎隨時給予糾正。

數(shù)據(jù)顯示越來越多的用戶具有使用智能手機進(jìn)行付款的傾向?！?這些用戶愿意在移動設(shè)備上完成購買嗎？ ”這個問題得到了迅速回答。2012年，美國移動電子商務(wù)銷售額飆升81%,形成了250億美元的市場。

值得注意的是，這些成交貢獻(xiàn)只有一部分來自于app。根據(jù)調(diào)查顯示，61％-81％的用戶更傾向于在移動端的網(wǎng)頁上來完成購物的各種操作：研究商品和價格，查看商品詳情，參加促銷活動，下單和支付等。比起功能相互獨立的app，他們更傾向于在瀏覽器中來進(jìn)行購物（來獲得瀏覽與支付環(huán)節(jié)之間的無縫體驗）。

讓我們深入看一些移動端結(jié)賬流程的例子。

1、 只保留重要信息

我們也許都回答過很多令人討厭的問題，比如“你是怎么知道我們的？”這樣的問題可能是對商家有用，對消費者來說沒有任何作用。然后這些消費者需要付出辛苦賺來的錢，他們也更有權(quán)力決定是否關(guān)閉這個頁面。

雖然這些問題在網(wǎng)頁上不那么重要，但是在移動端卻是致命的。讓我們來看兩個例子：

左邊是是由Moby設(shè)計的響應(yīng)式移動支付流程，他減少了不必要的信息只保留了必要的信息。成功的把整個支付流程聚合到了一個頁面。

右邊是kayjeweler把一個簡單的體驗變得非常繁瑣。總共有三頁，展示了很多不必要的信息，例如“晚上電話”和“手機號碼”兩個沒有用的信息，把地址欄分成了三欄（而不是只有一個郵政編碼欄），還需要用戶重復(fù)輸入email地址。

2、    允許以訪客身份結(jié)賬

提供訪客身份支付在媒介中應(yīng)該是一個標(biāo)準(zhǔn)的做法（盡管24%的電子商務(wù)網(wǎng)站不會這樣做），尤其在移動端。統(tǒng)計數(shù)據(jù)顯示，如果用戶必須去建立一個賬戶并確認(rèn)，他們可能不會完成訂單，這有時候還是非常令人震驚的。據(jù)報道，一個商家刪除了“注冊”按鈕后，看到了銷售額3億美元的飛躍。

伯頓開始對結(jié)帳過程對沖賭注，為用戶提供三個選項：“登錄”，“創(chuàng)建帳戶”或“訪客結(jié)帳?！?/span>

3、    利用移動用戶界面元素

Fandango有一個流暢的手機支付體驗。其中很大一個原因在于它善于利用媒介的優(yōu)勢，更多使用觸控設(shè)備，用戶使用起來比打字更容易。

Fandango的桌面端UI和移動端UI

 Fandango的桌面版UI（左邊），提供給用戶使用一個典型的下拉菜單選擇數(shù)量。在移動UI（右邊），則提供他們使用的的增量選擇器（也有輸入選項），更快速的選擇數(shù)量。

4、    消除干擾，而不是內(nèi)容

 一旦用戶到達(dá)了支付的頁面，他們顯然已經(jīng)有意愿購買這個產(chǎn)品了。這個時候，該網(wǎng)站已切換從一個銷售人員轉(zhuǎn)變成一個訂單執(zhí)行中心。由此，支付的頁面應(yīng)當(dāng)去掉影響用戶注意力的多余信息。

當(dāng)你在亞馬遜購物時會注意到封閉的支付策略，頁面去除了標(biāo)準(zhǔn)的頁頭，包括可能推動用戶去其他地方的菜單鏈接和搜索欄，支付頁面在移動端可以做的更加簡單。

用戶一旦來到 dillard支付頁面，, 他們唯一的逃生艙就是左上角的logo。

社交媒體鏈接,像在GNC的購物車，給用戶展示太多內(nèi)容，很容易把用戶導(dǎo)向其他地方

內(nèi)容豐富的支付頁面看來是個不錯的想法,但這會很容易分散用戶的購買注意力。

這并不意味著我們就要把所有內(nèi)容都移除。用戶可能對于快遞、交貨、條款等存在質(zhì)疑，好的體驗應(yīng)該讓用戶找到想要的答案。

在Crate & Barrel的手機網(wǎng)站，一些基本的問題展示在購物車頁面的底部，使用戶無需離開支付頁面就可以得到答案。

5、 展示步驟

用戶想知道他們在哪里，他們將要去哪里，完成這個過程需要多久。進(jìn)度條在這里可以緩解用戶的焦慮。

最近的研究表明,大多數(shù)商家會顯示一個進(jìn)度條。

Armour移動網(wǎng)站展示給用戶一個簡潔清晰的進(jìn)度條

6、建立輕量化的網(wǎng)站

首先，時間是寶貴的。如果一個網(wǎng)站加載時間超過5秒，74%的用戶都會離開。

他可能不會贏得任何設(shè)計獎，但是toms shoes頁面加載極速，極其簡潔的支付頁面

7、 提供安全保障

移動電子商務(wù)安全是用戶最關(guān)心的問題?？朔@個障礙，設(shè)計師不必非常的微妙：為用戶在網(wǎng)頁上提供安全電話、SSL認(rèn)證等必要的安全信息。

8、 使用谷歌錢包, PayPal And Amazon 等方式

用谷歌錢包,Paypal, 亞馬遜等方式可以讓用戶僅僅觸屏兩次就可以完成付款，而不是在訂單表上亂點半天。 用戶信息會自動填寫，完成大部分的付款過程

Shopify 的 No-frill移動電子商務(wù)體驗

例如這個DODOcase, Shopfy的移動電子商務(wù)并沒有太多的視覺設(shè)計，但是這不是重點。他們的設(shè)計非常簡潔， 讓用戶用第三方信托程序快速的提交訂單。

9、 提供地理位置服務(wù)以及電話撥出功能

The Home Depot 的手機頁面讓用選擇店內(nèi)產(chǎn)品然后用GPS尋找最近的店面并且查看購物車

相對于傳統(tǒng)的網(wǎng)頁習(xí)慣，用GPS信息給用戶做地址引導(dǎo)。比如在手機上用一個這樣的網(wǎng)頁地址：http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location， 谷歌會自動找出最近的地點并且提供路線指引。 Best Buy 發(fā)現(xiàn)28%的登陸移動平臺的用戶會來店內(nèi)購買商品，這證明移動平臺有極大的價值。

此外，用tel :protocol的一觸撥號功能撥打客服電話是一種比按電話號碼更簡潔的用戶體驗

10、跨平臺測試

Chrome插件user-agent switcher（后面說是一種手機測試軟件)

手機測試是非常困難并且消耗時間的，但是在現(xiàn)有的多系統(tǒng)競爭的市場中，根據(jù)市場占有率進(jìn)行優(yōu)先級排序并且測試多種分辨率是非常重要的。親自在每種系統(tǒng)上測試當(dāng)然是最好的方式，但是如果這種辦法行不通，你可以使用Firefox或者Chrome的插件 User Agent Switcher。他可以節(jié)省你很多時間，讓你迅速的在不同手機系統(tǒng)間切換。

系統(tǒng)交流之間的另一因素是設(shè)計。很多手機網(wǎng)頁體驗設(shè)計人員會犯借用手機系統(tǒng)界面設(shè)計元素的錯誤。比如，一個使用蘋果系統(tǒng)的設(shè)計員可能會用蘋果式的按鈕。盡管可以在做應(yīng)用的時候這樣，但是手機頁面是多瀏覽器的體驗，一個以某種系統(tǒng)界做的網(wǎng)頁可能會丟失其他使用其他系統(tǒng)的用戶，或者最壞的情況，頁面根本不好看。

總結(jié)

最后，手機商務(wù)開始走向成熟。一個好的和差的訂單提交體驗對收入的影響是有很大的不同。如果給用戶一個干凈，有效，流暢，簡便的過程來完成購物——在了解了以上提及的手機體驗的優(yōu)勢和局限——那么用戶和商家都可以盈利。