中心思想：如何增加移动端网站支付转化。

您需要了解如何增加移动付款转换  （

What You Need To Know To Increase Mobile Checkout Conversions

）

作者： Suzanne Scacca

全文共计：7080字  预计阅读时长：15分钟

原文链接：https://www.smashingmagazine.com/2018/04/increasing-mobile-checkout-conversions/

正文（再次感谢伟大的谷歌，可以让一个英语渣渣查找阅读国外文献资料，纯机翻，如果内容词汇晦涩难懂....见谅，上文已提供原文连接。）

移动搜索引擎就在这里。那么，无论如何对于一些网站。对于我们其余的人来说，它很快就会到来，如果我们不希望搜索排名受到变化的负面影响，我们的网站就需要处于最佳状态。

这就是说，响应式网页设计并不新鲜。我们多年来一直在创建定制的移动用户体验，因此我们的大多数网站都应该做好准备采取这项措施......对吗？

问题在于：研究表明，用户平均访问网络的主要设备是智能手机。诚然，这可能不是每个网站的情况，但数据表明这是我们前进的方向，所以每个网页设计师都应该为它做好准备。

不过，说白了，手机结账转换并不好。这有很多原因，但这并不意味着移动商务设计人员应该采取这种说法。

随着越来越多的移动用户依靠他们的智能设备访问网站，网站需要更加专业地设计，为他们提供他们想要的简单，方便和安全的结账体验。在下面的综述中，我将探讨移动收银台转换的一些障碍，并着重介绍网页设计人员如何改善体验。

为什么移动检测转换滞后？

根据这些数据，在我们的网页设计策略中优先考虑移动体验是每个参与者的明智之举。人们通过移动设备花费大约51％的时间用数字媒体（而桌面上只有42％），搜索引擎和网站确实需要与用户趋势保持一致。

现在，尽管统计数据为以移动优先方式设计网站提供了积极的支持，但其他统计数字却浮现出来，可能会让您对此感到警惕。这就是我为什么这么说的原因：Monetate为2017年第一季度发布的电子商务季度报告有一些非常有趣的数据可供展示。

在第一张表格中，他们分析了2016年第一季度到2017年第一季度期间使用不同设备的电子商务网站访问者的百分比。如您所见，智能手机互联网访问的确已经超越了桌面：

设备访问网站	2016年第一季	Q2 2016	2016年第三季度	2016年第四季度	2017年第一季
传统	49.30％	47.50％	44.28％	42.83％	42.83％
手机	36.46％	39.00％	43.07％	44.89％	44.89％
其他	0.62％	0.39％	0.46％	0.36％	0.36％
片剂	13.62％	13.11％	12.19％	11.91％	11.91％

Monetate关于哪些设备用于在互联网上访问的发现。

在下一个数据集中，我们可以看到电子商务网站的平均转化率并不高。事实上，自2016年第一季度以来，这一数字已经大幅下降。

转化率	2016年第一季	Q2 2016	2016年第三季度	2016年第四季度	2017年第一季
全球	3.10％	2.81％	2.52％	2.94％	2.48％

Monetate关于整体电子商务全球转换率（针对所有设备）的调查结果

更令人震惊的是设备转换率之间的差异：

设备转换率	2016年第一季	Q2 2016	2016年第三季度	2016年第四季度	2017年第一季
传统	4.23％	3.88％	3.66％	4.25％	3.63％
片剂	1.42％	1.31％	1.17％	1.49％	1.25％
其他	0.69％	0.35％	0.50％	0.35％	0.27％
手机	3.59％	3.44％	3.21％	3.79％	3.14％

Monetate关于平均转换率的发现，按设备细分。

尽管智能手机是用户访问网络的主要设备，但其获得的转化次数始终少于桌面。

这里有什么问题？为什么我们能够让用户访问移动网站，但我们在结账时会失去他们？

在2017年名为“ 移动的需求层次 ”的报告中，comScore打破了移动支付转换率如此之低的前五大原因：

移动商务购物者不转换的最常见原因。

以下是移动用户不转换的细节：

——20.2％ - 安全问题

——19.6％ - 不清楚的产品细节

——19.6％ - 无法打开多个浏览器标签进行比较

——19.3％ - 导航困难

——18.6％ - 难以输入信息。

这些是从智能手机转到桌面以完成购买的合理理由（如果他们没有完全按照该点的经验关闭，那就是）。

总而言之，我们知道消费者希望通过他们的移动设备访问网络。我们也知道转换障碍阻止它们继续存在。那么，我们该如何处理呢？

2018年增加手机结账转换的10种方法

对于您设计的大多数网站，当Google的移动优先索引变为正式时，您不太可能在搜索排名中看到很大变化。

您的手机友好型设计可能“足够好”，可以让您的网站保持在搜索的首位（无论如何要开始），但如果访问者不坚持转换，会发生什么？Google会开始惩罚你，因为你的网站无法与大多数访问者达成协议？诚实地说，这种情况只会出现在极端的情况下，移动收银系统的结构如此糟糕，以至于跳出率急剧上升，人们根本不想访问该网站。

假设结账流量的下降不会导致谷歌的处罚。这对于搜索引擎优化目标来说很棒。但是对于商业来说呢？你的目标是让访问者转换而不会分心，没有摩擦。然而，这似乎是移动访问者所获得的。

展望未来，您的目标需要双重展现：

——设计Google的移动优先使命和指南的网站，

——保持移动用户在网站上，直到他们完成购买。

本质上，这意味着减少用户必须完成的工作量并提高安全措施的可见性。您可以采取以下措施更有效地设计转化的移动收银台。

1.将ESSENTIALS保留在拇指区域中

研究用户如何保持自己的手机是旧帽子现在。我们知道，无论他们使用单手还是双手，移动屏幕的某些部分对于移动用户来说只是不方便。如果在结账时期望有方便，这件事你不想惹恼。

对于单手用户来说，屏幕中间是主要的比赛场地：

单手机用户的好，好，坏地区。

虽然为了更好的稳定性而使用手机的用户有几个选项可供手指用来与屏幕互动，但只有28％使用食指。所以，让我们关注拇指用户的功能，这也意味着让屏幕的中心部分最突出：

移动用户支持手机的好的，好的和坏的领域。

一些用户用两只手握住他们的电话。由于水平方向更可能用于视频，因此这与移动式结帐无关。因此，请注意用户拇指可以触及的屏幕空间有多大：

双手移动用户的好，好，坏地区。

总而言之，无论左手，右手还是双手握着智能手机，我们都可以使用“ Smashing”杂志将内容集中在哪里进行细分：

移动设备上良好，良好和不良区域的摘要。

JCPenney的网站是如何做到这一点的一个很好的例子：

JCPenney的联系表格从页面中间开始。

虽然信息包含在结帐页面的顶部，但输入字段只有在中间低于其中间位置时才会启动 - 直接在任何类型的用户的理想拇指区域内。这确保了访客以任何方式握住他们的手机并使用不同的手指与其进行交互将无法达到表单域。

2.尽量减少内容以最大限度地提高速度

我们一再被教过，最小的设计最适合网站。在移动式结账中尤其如此，在这种情况下，已经很慢或令人沮丧的体验很容易推动客户超越边缘，当他们想要完成的所有事情都是在购买时完成的。

要在移动结帐过程中最大限度提高速度，请记住以下提示：

——只添加要领结帐。现在不是尝试向上推销或交叉销售，推广社交媒体或以其他方式分散眼前  行动的时候。

——保持结帐免费的所有图像。真正可以接受的唯一引人注目的视觉效果是信任标记和行动号召（更多关于这些内容）。

——包含在页面上的任何文本都应该具有教学性或描述性。

——避免任何特殊的字体风格。您的结帐页面越少，“哇”越容易让用户完成整个过程。

以Staples的网站为例，说明一个非常简单的单页结账应该是什么样子的：

斯台普斯有一个单页结账和最少数量的字段填写。

正如你所看到的，Staples不会因为产品图像，品牌，导航，内部链接或其他任何可能（1）分散手头任务而导致的结账流程，或者（2）当服务器试图处理您的客户的请求。

这个结账页面不仅容易通过，而且每次都会快速加载并且没有问题 - 客户在下次需要购物时会记住这些内容。通过将结账页面保持在设计中，您可以确保在各个方面获得快速体验。

3.让他们放心与信任标记

信任标记是网站上的任何指标，可以让客户知道，“嘿，这里绝对没有什么可担心的。我们保证您的信息安全！“

每个移动商务网站应该有哪一个信任标记？一个SSL证书。没有地址栏，地址栏将不会显示锁定标记或绿色https域名 - 两者都会让客户知道该网站具有额外的加密功能。

您也可以在结帐时使用其他信任标记。

Big Chill包含一个RapidSSL信任印章，让客户知道其数据已加密。

虽然您可以使用诺顿安全，PCI合规性和其他安全软件中的徽标让客户知道您的网站受到保护，但用户也可能会受到可识别且值得信赖的名字的影响。当你考虑这个问题时，这与在客户推荐书旁边或在夸耀你的大牌联系的标注旁显示企业徽标并没有多大区别。如果你能够利用像下面提到的那样的合作伙伴关系，那么你可以利用固有的信任对你有利。

以下午6点，这在结账使用“登录亚马逊”选项：

晚上6点将亚马逊名称作为信任标记。

对于一个品牌来说，这是一个明智之举，它绝对没有像亚马逊这样的公司的品牌知名度。通过为客户提供方便的选项，以便与速度，可靠性和信任度相同的品牌登录，该公司现在可能因为与亚马逊庆祝的结账品质相称而闻名。

然后，有像Sephora上的移动结账页面：

Sephora使用可信的支付网关提供商作为信任标记。

丝芙兰也使用这种技术来利用另一个品牌的好名声，以便在结账时建立信任。然而，在这种情况下，它向客户提供了两个明确的选择：现在就与我们联系，或跳到贝宝，这将安全地照顾你。由于安全性是让移动客户无法转换的主要问题，这种信任标记和付款方式对丝芙兰来说是一个很好的举措。

4.提供更容易的编辑

一般来说，绝对不要让访客（在任何设备上）远离他们在您网站上做的任何事情。网上已经有足够的分心; 他们所需要的最后一件事是你在那让他们从转换方向点他们。

但是，在结帐时，如果顾客决定在购物车中需要不同的颜色，大小或数量的商品，则可能会觉得他们不得不做这件事。不要让他们通过网站回溯，给他们一个在结帐编辑选项，以保持他们的位置。

维多利亚的秘密做得很好：

维多利亚的秘密不强迫用户远离结账编辑项目。

当他们第一次到达结帐屏幕时，顾客将看到他们即将购买的物品清单。当点击每个项目旁边的大型“编辑”按钮时，将打开一个lightbox（如上所示）并显示产品的变体。它基本上是原始产品页面，只是叠加在结帐上面。用户可以调整他们的选项并保存更改，而无需离开结账页面。

如果您在查看网站分析时发现，用户偶尔会在结帐后回溯（可以在销售渠道中查看），请添加此内置编辑功能。通过防止这种不必要的移动倒退，您可以节省自己迷失或分心的客户失去的转换。

5.启用快速结账选项

当消费者通过桌面设备登录电子商务网站时，如果他们每次都必须输入他们的用户名，电子邮件地址或付款信息，这可能不是什么大问题。当然，如果可以避免，他们会找到解决方法（如允许网站保存其信息或使用LastPass等密码管理器）。

但是在移动设备上，重新输入这些信息是一种痛苦，尤其是如果联系表格没有得到很好的优化（更多内容见下文）。因此，为了简化移动用户的登录和结账流程，请考虑可以简化流程的方式：

——允许客人结帐。

——允许一键加急结账。

——启用可信来源（如Facebook）的一键登录。

——在可信付款提供商的网站上启用付款，例如PayPal，Google电子钱包或条形。

关于Sephora已经方便的结帐流程的好处之一是客户可以通过简单的切换自动执行登录过程：

丝芙兰可以让退货客户保持登录状态，以便在退房时再次避免这种情况。

当移动客户感到匆忙并想要进入结账的下一阶段时，丝芙兰的自动登录功能肯定会派上用场，并鼓励客户从移动网站更频繁地购买。

许多移动网站都会等到登录页面的底部，告诉客户他们有什么选项可供退出。但维多利亚的秘密不是让他们感到惊讶，而是以最大的大按钮在最上面显示这些信息：

维多利亚的秘密通过提供三种有吸引力的选择来简化和加快结账。

客户可以选择使用其帐户登录，作为访客退房或直接前往PayPal。他们后来发现没有提供他们偏好的结帐或付款方式并不感到惊讶。

我也很喜欢维多利亚的秘密如何选择这样做。坐在较静音的“作为客人签出”按钮旁边的颜色鲜艳的“登录”按钮有一些好处。首先，它为结帐添加了一些维多利亚的秘密品牌颜色，这总是一个很好的接触。但它的颜色按钮也明确表示主要操作是什么（即创建帐户和登录）。

6.添加面包屑

当你发送移动客户结帐时，你最不想要的是让他们分心。这就是为什么网站的标准导航栏（或汉堡菜单）通常会从此页面中删除。

尽管如此，如果客户不知道未来的情况，结账流程可能会令人感到恐慌。他们需要填写多少表单？需要什么样的信息？在提交付款细节之前，他们是否有机会查看他们的订单？

如果您设计了多页结帐，请在页面顶部用明确标记的面包屑导航定义每一步，从而消除客户的担忧。此外，这将为您的结账提供更清晰的设计，减少每页的点击次数和滚动次数。

Hayneedle有一个面包屑导航的实例：

Hayneedle的面包屑设计干净，容易找到。

你可以看到有三个步骤被打破并清晰标记。这里绝对没有关于用户在这些步骤中遇到的问题，这将有助于让他们放心。有三个步骤似乎足够合理，用户将有机会在完成购买之前再次查看订单。

丝芙兰在结账时有另一种“面包屑”风格：

每完成一节，丝芙兰编号的面包屑就会出现。

Sephora的客户不是将每个“面包屑”放在结账页面的顶部，而是可以看到下一步是什么，以及当他们在表单中工作时还有多少。

如果您不想制作顶部导航或面包屑粘贴，这是一个很好的选择。相反，您可以优先执行号召性用语（CTA），您可能会发现更好地激励客户向下移动页面并完成购买。

不过，我认为这两种面包屑设计都是有效的。因此，如果您不确定哪些会为访问者带来更多转化，则可能需要进行A / B测试。

7.明智地格式化结帐表格

良好的移动签出表单设计遵循相当严格的公式，这并不奇怪。尽管在构建表单，每页步骤数量，包含图像等方面可以改变桌面上的规则，但您在移动设备上确实没有这种灵活性。

相反，您在构建表单时需要非常细致：

——设计结账表单的每个字段，以便延伸网站的整个宽度。

——将字段限制为唯一必需的字段。

——清楚地标出每个领域之外和之上。

——至少使用16点像素字体。

——对每个字段进行格式化，使其足够大，无需缩放即可进入。

——使用可识别的标记来指示何时需要（例如星号）。

——在信息输入到字段后，一旦发生错误，一定要让用户知道。

——将号召性用语放在表单的最底部。

由于结账表单是客户通过结账流程最重要的元素，因此您不能乱用经过验证的真实公式。如果用户不能无缝地从上到下，如果这些字段太难以参与，或者表单本身的功能充满了错误，那么你可能会亲吻你的移动购买（也许你的购买一般）再见。

Crutchfield展示了如何创建在手机上非常用户友好的表单域：

Crutchfield结帐页上的表单字段很大，很难错过。

正如你所看到的，每个字段都足够大，可以点击（即使是胖手指）。围绕当前选定字段的大胆轮廓也是一个很好的接触。对于多任务处理或被周围事物分散注意力的客户而言，使用这种类型的格式返回结账表单会容易得多。

丝芙兰再次以正确的方式处理移动式结账。在这种情况下，我想提醒您注意灰显的“下订单”按钮：

丝芙兰使用号召性行为作为未完成表单的客户的指南。

该按钮可作为向客户表明他们还没有准备好提交其购买信息的指标，这非常棒。即使表单设计精美 - 所有内容都有很好的标签，字段很大，表单也是逻辑组织的 - 移动用户可能会意外地滚动字段太远，直到点击号召性用语按钮才会知道它。

如果您可以阻止用户收到可怕的“缺失信息”错误，那么您将会更好地坚持购买。

8.简化表单输入

深入挖掘这些联系表单，让我们看看如何简化移动数据的输入：

——允许客户使用浏览器的自动填充功能填写表单。

——包含一条tabindexHTML指令，使客户可以在表单中上下点击箭头。这使得他们的拇指始终保持在智能手机的舒适范围内，而不是不断地进入新的领域。

——添加一个复选框，自动将帐单地址信息复制到发货字段。

——根据输入的字段类型更改键盘。

其中一个例子是Bass Pro Shops的移动网站：

低音专业版结帐表单中的每个字段都为用户提供正确的键盘类型。

对于初学者来说，键盘使用标签功能（参见键盘上方的向上和向下箭头）。对于手指短或不耐烦且只想在键盘上打字的顾客，这些标签有助于将双手保持在一个位置，从而加速结帐。

此外，当客户选择仅限数字字段（例如他们的电话号码）时，键盘会自动更改，因此他们不必手动切换。再次，这是增加在移动设备上进行购买的便利性的另一种方式。

亚马逊的移动收银台包括一个快速复选框，可简化客户提交的账单信息：

亚马逊给客户提供了一种简单的方法来将他们的送货地址复制到账单。

正如我们在移动式结账表单设计中看到的那样，简单一点总是更好。显然，您每次都需要收集客户的某些细节（除非他们的账户已经保存了这些信息）。尽管如此，如果您可以提供快速切换或复选框，以使他们能够将数据从一种表单复制到另一种表单，然后执行操作。

9.不要在CTA上吝啬

在设计桌面结帐时，您对CTA的主要担忧是按钮的重要位置以及选择引人注目的颜色以引起注意。

但是，在移动设备上，您也必须考虑尺寸 - 而不仅仅是在屏幕上占用多少空间。请记住拇指区域以及用户握住手机的各种方式。确保按钮足够宽，以便任何用户都可以轻松点击它，而无需改变其手的位置。

因此，您的目标应该是设计（1）位于移动结账页面底部的按钮，以及（2）从Staples的移动网站上的情况一直从左向右拉伸：

Staple的明亮的蓝色CTA在另外的普通结账中伸出。

无论谁正在进行购买 - 左手，右手或双手摇篮 - 该按钮将很容易到达。

在我们今天介绍的所有移动式结账增强功能中，CTA是最容易解决的问题之一。使其变大，赋予其独特的色彩，将其放置在移动屏幕的最底部，并使其跨越整个宽度。换句话说，不要让客户努力采取购买的最后一步。

10.提供一种替代方式

最后，给客户一个替代的出路。

假设他们在移动网站上购物，将商品添加到购物车中，但有些东西并不适合他们，他们也不想购买。您已尽全力向他们提供清晰，简单且安全的结帐体验，但他们只是没有信心在手机上进行付款。

而不是仅仅希望你完全不会失去购买，给他们一个机会来保存它以备后用。这样，如果他们真的有兴趣购买你的产品，他们可以在桌面上重新访问并拉动触发器。这并不理想，因为您确实希望将它们保留在手机上，但对于无法保存的客户而言，此选项非常有用。

正如您在LL Bean的移动网站上看到的那样，您可以在结账时选择“移至愿望清单”：

LL Bean为客户提供了另一个在结账时将物品移动到愿望清单的机会。

这对LL Bean来说很好，因为LL Bean显然不希望浏览愿望清单或删除某项作为主要操作。如果“移动到愿望清单”显示为一个大胆的CTA按钮，更多的客户可能会决定采取这个看似更安全的选择。正如现在所设计的，它更像是一个“嘿，我们不希望你做任何你不舒服的事情。这是为了以防万一。“

虽然网页设计中的选项通常较少，但如果您的结帐在移动设备上的购物车放弃率较高，则可能需要进行一些探索。

随着越来越多的移动访问者涌向您的网站，导致转换的每一步（包括结账阶段）都需要进行优化以提高便利性，速度和安全性。如果您的结帐不擅长针对移动用户的特定需求和期望进行设计，那么您会发现这些转化率下降或转移到桌面 - 这不是您想要的方向，特别是如果Google正在推动我们都朝着移动优先的世界迈进。