移动购物车设计的注意事项：6 个实用拆解（移动电子商务深度指南）

您已经知道您的购物车页面是您电子商务机器中的一个重要齿轮。 但是，您的移动购物车页面（访问者在结账前看到的页面）是否会影响他们的体重？

在 Growcode，我们反复发现购物车页面是我们客户商店中最容易被忽视的部分之一，尤其是在移动设备方面。 后果很严重，严重削弱了他们的底线。

到 2021 年，移动商务销售额预计将占所有电子商务销售额的 52.9%。然而，2017 年，移动购物车的平均放弃率高达 85.65%。

这意味着在将产品添加到购物车的所有客户中，近十分之九的客户没有完成购买。

#移动商务销售额预计到 2021 年将占所有电子商务销售额的 52.9%。#EcommerceStats点击推文
移动设备导致放弃购物车。 请记住，如上图所示，汇总数据并未说明行业之间的巨大差异。 来源。
在这篇文章中，我们将看一下购物车评论页面的六个示例。 前三个使用您应该考虑复制的可靠设计实践，而其余示例包括最好避免的元素。

还值得一提的是，虽然我们专注于某些购物车设计的错误，但这并不意味着它们总体上非常糟糕。 让我们深入了解移动购物车最佳实践。

1.做：亚马逊

亚马逊的移动网站购物车是一个出色的移动购物车设计案例。 它并不拥挤，但也不算太小。 所有必要的元素都包括在内，而不会将注意力从主要的 CTA 上移开。 还有一些不显眼的“附加组件”可以用来增加订单价值，从礼品包装到相关项目。
亚马逊的移动购物车 ux。 所有必要的元素都包括在内。

提示 #1：页面顶部的一个清晰的 CTA 设置为对比色。 当用户向下滚动时，此 CTA 继续浮动在屏幕顶部。

#Mobile #cart 优化提示：在页面顶部使用对比色设置一个清晰的 #CTA。 #ecommerce #optimization点击推文
当用户向下滚动时，CTA 会浮动在屏幕顶部。
提示#2： CTA 是全屏幕的，因此左手和右手用户都可以轻松点击它。
提示 #3：在页面顶部重申免费送货，以消除任何疑虑并“使交易更甜蜜”。
提示 #4：产品图片和名称链接到描述页面，供想要重新检查产品详细信息的人使用。
提示 #5：有清晰且易于点击的按钮来更改订单金额、删除项目并保存以备后用。
提示 #6： “有货”通知让客户放心，他们不必等待产品。
#Mobile #cart 优化提示：“有货”通知让#customers 放心，他们不必等待产品。 #ecommerce点击推文
提示#7：亚马逊展示了“已保存以备后用”的产品，下方有一个简单的“移至购物车”按钮。
为以后保存的项目清晰可见。
提示#8：包含相关产品——“客户也购买过”——可以在不离开页面的情况下添加到购物车。 作为第三个项目的此元素设计的附加加号未完全显示，因此建议使用滑动动作。
提示#9：大量空白和没有不必要的“填充”细节。 亚马逊只包含绝对必要的内容。
提示 #10：链接到页脚中的“页面顶部”。

想要更多这样的见解？

每周获取电子商务技巧、策略和领先的行业知识。
直接发送到您的收件箱。

在我已经阅读隐私政策，我接受的通讯条款和条件。

请选中此复选框以继续

呜呼！ 你刚刚注册。 检查您的收件箱以确认订阅。

2. 做：订书钉

Staples 购物车的美妙之处在于它的简单性。 可以在几秒钟内审查产品。 结果是更加强调所包含的选项。
Staples 购物车的美妙之处在于它的简单性。 最好的移动电子商务购物车之一。
提示#1：与亚马逊一样，产品将在页面顶部和付款摘要中免费运送这一事实引起了人们的注意。 更重要的是，文本是绿色的，这使得通知更加突出。 还显示了“预期交付”的确切日期。
提示＃2：设计非常简单，并且很好地利用了空白。 客户可以快速检查他们的订单，在不离开页面的情况下进行任何必要的更改，并验证总数。
提示 #3： “优惠券和奖励”框不显眼。 还提供了“到店取货”的重要选项，而不会将注意力从主要 CTA 上转移开。
提示 #4：结帐 CTA 中包含“安全”一词。
提示#5：页脚已被删除。

有什么问题吗？ 虽然 Staples 做对了很多，但这种购物车设计的一个问题是标题的简单性，它不包括可扩展的菜单或搜索表单。 如果一家公司只销售一种产品，这可能是一个可行的解决方案。 然而，对于多产品站点，如果客户愿意，让他们选择再次浏览总是值得的。

3.做：西尔斯

西尔斯提供了许多额外的选择——包括付款计划、店内提货、礼品选择和促销。 他们的购物车是零售商的一个很好的例子，他们希望在一个页面上组合许多不同的元素，而不会破坏防止移动购物车放弃的设计。
西尔斯移动购物车设计包含很多元素，但仍然保持简单。
提示#1： CTA 包含在页面顶部的小计旁边。 锁定图标进一步建立信任，还提供使用 Paypal 结账的选项。
提示#2：作为高价项目，付款计划包括在此阶段消除任何犹豫。
提示#3：订单摘要部分的销售节省以红色显示，通过建立紧迫性和减少怀疑来鼓励客户点击结账。
提示 #4：提供一个链接以登录忠诚度计划，作为对新客户的进一步激励。 重要的是要注意，这不是没有任何好处的设置商店帐户的链接，最好将其合并到结帐表格中。
提示 #5：页面底部包含“安全结账”印章。
有什么问题吗？ 只是有点太多了，效果可能是一些客户的注意力分散。 例如，无需在底部提供杂志订阅和忠诚度计划链接。

4. 不要：Vitacost

尽管 Vitacost 使用了许多上述元素，但它们的实现往往存在缺陷。 结果是一个设计糟糕的购物车页面，通过一些小的调整可能会增加购物车的转化率。
Vitacost 使用了许多上述元素，但它们的实现往往存在缺陷。
错误 #1：包含一个引人注目的搜索栏，导致人们远离购物车页面。 对于想要继续浏览的人来说，最好包含一个搜索栏图标（如亚马逊示例中所示）。 但不要让它太大。

#Mobile #cart 优化提示：不要包含会导致人们远离购物车的引人注目的搜索栏。 #ecommerce点击推文
错误 2：自动包含可能混淆或惹恼客户的不明确的“BOGO”产品（买一送一）。
错误 #3：突兀的促销代码栏。 这分散了对主要 CTA 的注意力，并鼓励客户离开购物车在线搜索促销。 促销盒应该是可见的，但不要过于明显。 他们当然应该在 CTA 之后。
错误 #4：运费设置为“TBD”，这会引起怀疑（一般来说你应该避免缩写）
错误#5：页脚太大。 Vitacost 是否希望客户完成购买或下载应用程序？
错误 6：用于移除或增加项目的产品选项太小且难以挖掘。
错误 #7：可以在屏幕截图底部看到的浮动栏在较小的手机上占用太多屏幕空间。

5.不要：孤独星球

在 Staples 页面有效利用最小设计的地方，Lonely Planet 排除了太多元素。 没有减少犹豫和建立信任的功能，没有增加购买价值的推荐或产品建议，而且许多按钮难以点击。
孤独星球排除了太多元素。 它们留下了大量空间，可用于改进购物车用户体验。
错误#1：空间使用不当。 最好让购物车填充整个页面，并利用空白，而不是在当前内容上弹出。
错误#2：不包含有关交货、折扣或付款方式的信息。 这些可能会减少不确定客户的疑虑和恐惧。
错误#3：没有相关的产品建议。
错误#4：增加或减少产品数量的按钮太小以至于几乎无法点击。
错误#5： CTA——“Proceed to Checkout”——看起来不像一个按钮。
错误 #6：弹出格式使得从左侧点击 CTA 变得困难。 让客户同时使用他们的拇指！

6. 不要：耐克

耐克页面的主要问题是各种元素被随机包含的方式，几乎没有考虑将它们放在一起或放在页面上的不同点时会如何工作。 关于 CTA 也存在混淆。
在耐克的页面上，随机包含了各种元素。
错误 #1：运费折扣仅适用于会员。 这会增加不必要的摩擦，并且可能会抑制那些不想加入的客户，他们会认为他们正在失败。 为客户提供在结账阶段登录的选项，以及为新客户注册的选项。 购物车页面应专门用于查看订单。

错误 #2：使用两个 CTA。 在购物车页面上有一个 CTA 几乎总是更好，因为您正在寻求特定的行动方案。 提供多个 CTA 的唯一原因是让客户可以在不同的结帐选项之间进行选择。 在用户向您提供他的电子邮件地址后，最好显示正确的表单（登录表单或地址表单）。

错误 #3： “接受的付款类型”未在结帐 CTA 附近列出。 将这些徽章包含在您的购物车页面上是个好主意，特别是如果您不像 Nike 那样出名，但页脚不是放置它们的地方。

错误 #4：如果客户不以这种方式自我识别，“客人”一词可能会导致混淆（如果以客人身份购物，您能成为会员吗？）

结束移动购物车设计

大多数表现最好的购物车页面的设计简洁明了，但也提供了正确的类型和数量的信息。 当您重新设计自己的商品时，请记住购物车页面的目的是让购物者查看和确认他们的订单，删除任何不必要的商品并添加类似的商品。 任何其他所需的操作，例如登录他们的帐户或注册，都可以留在结帐页面。 所以请记住这些移动购物车最佳实践和其他购物车优化技术。

请记住，拆分测试是关键！ 使用此处描述的策略来形成您自己的测试，并承诺长期调整元素。 如果你这样做，你几乎肯定会看到你的转化率稳步增长。

获取 115 点电子商务优化清单

凭借八年的经验，我们将所有顶级见解汇集到一本书中：7+ 数字在线商店的电子商务优化清单。 如果您想提高所有页面的性能——从主页到结账，请在此处获取副本。