设计更好的移动支付流程

设计文章 / 交互设计, 移动前端 | 2014-12-25 | 发布者: mobileui

发展电子商务已经不能仅关注桌面平台了，目前越来越多的用户通过智能手机来发现和浏览商品，与此同时，一个更大的问题产生了——这些用户是否愿意在他们的移动设备上完成支付呢？——答案马上揭晓。拿美国为例，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 Experiences和Mobitest 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风格的按钮。这在原生系统中没有任何问题，但移动网页版是一个跨平台和浏览器的应用，在其他系统中可能就看不到这些原生应用的效果，甚至可能会看起来更糟。