您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

設計更優(yōu)的移動支付流程

 

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

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

 

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

 

  1、 只保留重要信息

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

 

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

 

good-vs-bad-22-500

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

 

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

  2、 允許以訪客身份結賬

 

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

 

burton-500

  伯頓開始對結帳過程對沖賭注,為用戶提供三個選項:“登錄”,“創(chuàng)建帳戶”或“訪客結帳。”

 

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

 

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

fandango1-500

  Fandango的桌面端UI和移動端UI

 

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

 

  4、 消除干擾,而不是內容

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

 

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

 

dillards

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

gnc-500

  社交媒體鏈接,像在GNC的購物車,給用戶展示太多內容,很容易把用戶導向其他地方

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

 

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

 

crate-and-barrel

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

  5、 展示步驟

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

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

under-armour-screen

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

 

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

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

 

toms1

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

  7、 提供安全保障

 

  移動電子商務安全是用戶最關心的問題。克服這個障礙,設計師不必非常的微妙:為用戶在網(wǎng)頁上提供安全電話、SSL認證等必要的安全信息。

1800flowers-2

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

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

dodocase

  Shopify 的 No-frill移動電子商務體驗

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

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

 

homedepot

  The Home Depot 的手機頁面讓用選擇店內產品然后用GPS尋找最近的店面并且查看物品欄(可能是指購物車)

 

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

 

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

 

  10、跨平臺測試

useragentswitcher-500

  Chrome用戶代理?后面說是一種手機測試軟件

 

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

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

 

  總結

 

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

原文鏈接:http://uxdesign.smashingmagazine.com/2013/03/14/designing-a-better-mobile-checkout-process/

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di1452.html
為多層面用戶而設計
從細節(jié)提高用戶體驗,用戶體驗的76個要素
圖趣網(wǎng)微信
建議反饋
×