設計更好的移動支付流程
設計更好的移動支付流程-移動閱讀二維碼

發展電子商務已經不能僅關注桌面平臺了,目前越來越多的用戶通過智能手機來發現和瀏覽商品,與此同時,一個更大的問題產生了——這些用戶是否愿意在他們的移動設備上完成支付呢?——答案馬上揭曉。拿美國為例,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風格的按鈕。這在原生系統中沒有任何問題,但移動網頁版是一個跨平臺和瀏覽器的應用,在其他系統中可能就看不到這些原生應用 的效果,甚至可能會看起來更糟。

總結

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

來自:shejidaren
英文原文:smashingmagazine,
編譯:吳敏龍

本文鏈接:http://www.casaleticia.com/design-better-mobile-payment-process.html
本文標簽: , , ,