如何設計一個優秀的移動支付流程?

發表於2013-03-25

英文原文:Designing A Better Mobile Checkout Process,編譯:吳敏龍 (@名字要夠長才霸氣咧)

越來越多的使用者通過智慧手機來發現和瀏覽商品,與此同時,一個更大的問題產生了——這些使用者是否願意在他們的移動裝置上完成支付呢?——答案馬上揭曉。拿美國為例,2012年在移動電商(m-commerce)上的消費同比增長了81%, 達到了驚人的250億美元。

而這當中,移動網頁端對應用佔據了壓倒性優勢。使用者更願意通過移動端網站來搜尋比價,瀏覽產品,參與促銷活動及完成支付。大部分受訪者(61%-81%)表示更願意用瀏覽器而非原生應用。

在今後的一段時間裡,零售商們更加需要通過建立一種無縫的,更加友好可信的支付流程並且充分利用移動裝置的優勢來推動這種增長。就讓我們一起來深入挖掘幾個移動支付的例子,看看我們能從中學到什麼吧。

如何設計一個優秀的移動支付流程?

1. 只保留重要的輸入區域

‘你是從什麼途徑知道我們的?’,我們已經不止一次地回答過類似的問題了。這些問題可能對供應商有用,但它們對那些真正在你這花著血汗錢,應該真正做主的顧客沒有任何價值。

如何設計一個優秀的移動支付流程?

如果說這類問題出現在桌面端,是令人厭煩的;那麼它們出現在移動端的話,就一定是致命的。左側的響應式支付流程,通過刪減不必要的資訊,只保留重要的部分,成功地將支付過程濃縮為一個精華頁面。而右側則展示了一次簡單的支付體驗是如何變得臃腫不堪的。頁面列出了很多非必填資訊,如’Evening Phone’,‘Mobile Phone’,還將地址輸入區域分為三個不同部分,而非用一個郵編來代替,而且還要求使用者輸入兩次郵箱地址。

2. 允許非註冊使用者直接支付

給使用者提供一個無需登入註冊就能直接支付的選項,本該是理所應當的一件事,尤其是在移動端,然而卻有24%的電商網站沒有這麼做。使用者如果需要去建立並驗證一個賬戶,才能完成一個訂單,那麼他很可能會就此放棄。資料表明,事實就是如此。一個零售巨頭聲稱通過移除‘註冊按鈕’,銷售額提升了3億美元。

如何設計一個優秀的移動支付流程?

Burton給使用者開始支付提供了三種不同的方式:登入,建立一個新賬號,直接支付

3. 充分利用移動端UI優勢

Fandango有著十分順暢的支付體驗。其中一個重要的原因就是它充分利用了觸控控制元件在移動端比輸入控制元件對使用者更友好的優勢。

如何設計一個優秀的移動支付流程?

Fandango的桌面版與移動版

在Fandango的桌面版(左側)中,使用者需要通過下拉框來選擇商品數量。而在它的移動端(右側)中,則採用了更高效的加減選擇器(同樣還包含了輸入框)。

4. 移除干擾資訊,而非內容

當使用者身處支付流程中時,就已經很顯然地表達了付款的意願。換句話說,此時網站所承擔的角色就已經從一個銷售者轉變為訂單填寫中心了。考慮到這一點,我們應該移除一切會干擾到使用者完成訂單的資訊。

在Amazon的購物經歷,想必已經讓你意識到閉環的支付流程有助於提升轉化率。通過這一方法,網站會移除包括選單連結和搜尋框在內的,容易導致使用者跳出的頂部通用模組。因此,支付頁面在移動端可以變得極簡。

如何設計一個優秀的移動支付流程?

一旦使用者進入Dillard’s的支付環節,離開頁面的唯一方式就點選左上角的logo

如何設計一個優秀的移動支付流程?

像 GNC購物車中的社會化網站連結就不應該出現在購物車中,它們會導致跳出一個內容豐富的支付頁面看起來可能不錯,但它卻常常會打消使用者付款的意願。這並不意味著我們要移除所有的內容。移動端通常需要保留桌面端80%的資訊量,且這個指數還在增長。使用者可能仍然會對配送方式,退換貨政策等資訊存有疑問。一個完美的支付流程則應該給他們提供找尋答案的入口。

如何設計一個優秀的移動支付流程?

Crate & Barrel’s mobile website中,常用問題都列在了購物車頁面底部,允許使用者直接檢視而不用跳出

5. 顯示進度

使用者往往會想要知道他們到哪一步了,下一個流程是什麼,還要多久才能完成。而進度條的存在有助於緩解這種焦慮。最近的調查顯示大部分的電商網站都有展示進度條,雖然其中的大部分都還有待改進。

如何設計一個優秀的移動支付流程?

Under Armour

6. 如無必要,勿增實體

時間就是金錢,移動端尤其如此。74%的移動端使用者會直接放棄響應時間超過5秒的網站。使用者此時的目的是完成一個操作,而且他們已經確信要這麼做了,那麼,我們要做的就是為他們開路,掃清一切不必要的障礙。

具體方法請參見“Seven Guidelines for Designing High-Performance Mobile User ExperiencesMobitest by Akamai is my choice.”及使用測試工具來優化載入速度。

如何設計一個優秀的移動支付流程?

Tom’s Shoes的移動網站很好地詮釋了這一點

7. 提供安全保證

電商網站在移動端給使用者帶來的最大隱憂之一就是安全問題。想要跨越這個障礙,設計就不應該太過隱晦。開門見山,提供儘可能多的安全保證。這也就是說,需要用圖解、SSL安全證書、安全標識等形式來告知體驗的安全性。

如何設計一個優秀的移動支付流程?

1-800-Flowers.com通過各種手段來告知使用者安全性保障

8. 善用Google Wallet, PayPal 和Amazon

與其讓使用者一步步填寫訂單資訊,不如用一些像Google Wallet, PayPal和Amazon這樣的權威第三方服務來幫助使用者儘快完成訂單。這樣訂單資訊會被自動填充,而此時,整個支付流程也差不多接近完成了。

如何設計一個優秀的移動支付流程?

Shopify上像DODOcase這樣的移動電商網站,視覺上看起來雖然平淡無奇,但這不是關鍵。它通過允許使用者用第三方應用完成快速支付,消除了頁面上的多餘噪點。

9. 充分利用地理位置資訊和一鍵呼叫

如何設計一個優秀的移動支付流程?

The Home Depot的移動版允許使用者上門自取,通過GPS來查詢最近的提貨點和庫存。巧妙地使用GPS資訊來定位使用者的地理位置,也是提升網站轉化率的一種有效手段。通過在移動端使用一組像 http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location這樣的字串,Google將會自動檢索使用者的方位,並提供導航。百思買調查發現訪問它們移動平臺的使用者中28%的人,通過使用GPS定位來完成店內購買,這也證明了GPS資訊的價值。同樣的,通過使用tel: protocol來允許使用者完成一鍵呼叫,是一種比讓使用者記下號碼更友好的體驗。

10. 測試不同的裝置和系統

如何設計一個優秀的移動支付流程?

在Chrome上用User Agent Switcher進行測試

做手機網站測試很麻煩也很耗時間,但由於市場上存在著各種各樣的作業系統,針對不同的市場份額做優化,並測試不同的解析度是必要且重要的。能直接用不同作業系統的手機來測是最理想的,但如果這麼做有些難度,那麼你可以通過使用Firefox或Chrome上一個叫User Agent Switcher的外掛來完成測試。它允許你直接在電腦桌面上體驗不同的作業系統,能夠很好的縮短測試時間。

和作業系統有關的另一個話題就是設計。設計師在設計移動端網站時常犯的一個錯誤就是從他們選擇的作業系統借鑑UI元素。比如,一個使用iOS裝置的設計師可能就會使用Apple風格的按鈕。這在原生系統中沒有任何問題,但移動網頁版是一個跨平臺和瀏覽器的應用,在其他系統中可能就看不到這些原生應用的效果,甚至可能會看起來更糟。

總結

在此之前,移動端支付流程體驗的優劣並沒有對網站收入有著如此深遠的影響。如果零售商們在認清了上述移動端體驗的優勢和劣勢之後能夠給使用者提供一個更加清晰,簡明,輕巧的路徑來幫助使用者完成支付,那麼,大家都將受益無窮。

相關文章