网店店铺电商平台UI界面设计中如何设计出无缝且高效的结账表单体验

2018-03-30 09:13 Author: Chris Song

2008年的时候，我从企业品牌建站开始转型专注做国内外的电商平台设计。在这些电子商务贸易平台的ui界面设计当中，最为耗时耗精力的就是如何给一个网店店铺打造一条无缝且高效的结账表单良好用户体验之路。为了能做得比当时现有网上商店平台都要友好的结账表单页面，我们团队不得不对当时的newegg.com、lightinthebox.com、buy.com、bestbuy.com、amazon.com等等排名及成交量较靠前的平台注册和购买体验翻个遍。所有的界面页面表单设计中，如何有效、自然的引导用户注册及快速结账是非常有挑战性的。

前言

结账体验是所有网上商店最重要的一部分，表单的设计直接关系着电子商务网站的转换率 – 更快，更方便用户填写的表单，就意味着将获得更高的转换率。作为用户体验设计师，而你的工作就是确保用户有一个无缝且高效的结账体验。在本文中，我将分享十个非常实用的小技巧来帮助你设计出一款出色的结帐表单。

不要强迫用户创建帐户

据Baymard研究所称，强制性要求用户创建账户是人们放弃购买流程的首要原因之一。不要犯这样的错误！允许用户不需要创建账户即可购买商品。重要的是，你不仅要提供客人的结帐选项，还要使其清晰可见。Baymard 研究院发现，88％的移动支付表单未能使访客结账选项达到清晰可见的效果，因此用户经常忽略它。

eBay为用户提供了一个访客选项

减少用户注册所需的信息

谈到信息收集时，最重要的原则便是“少即是多”。Baymard的一项研究发现，近三分之一的美国在线购物者因“太长/太复杂的结账流程”而放弃了他们的购买。同一项研究发现，平均付款的时间是有可能缩短20-60％的。因此，作为设计师，你应该尽量减少用户的信息量。例如，如果你并不打算打电话给你的客户，则无需要求他们的电话号码。

通过减少所填字段，不仅可以提高完成时间，还可以让此过程进行的更加顺畅。字段数越少意味着用户的认知负担越小，因此潜在错误就会减少。

提示：清楚标记所有可选字段。如果你有可选字段，则应该用单词“optional（可选）”或“*”符号进行标记。这将让那些想要尽快填写完表单的用户快速的跳过这些字段。

不要使用字段标签作为占位符

带标签的主要目的不是在用户输入数据时隐藏它们。字段标签应始终保持可见; 理想情况下，他们应该位于字段的顶部或左侧。如果你设计的移动端并且屏幕空间有限，则可以使用浮动标签技术。当用户激活一个字段时，占位符文本会淡出，并且跳出显示在顶部。

标签应始终展现给用户图片来源：MDS

设计单列表格

在多列形式下，眼睛会遵循曲线型浏览，这使得用户更难专注于某些元素（眼睛不会注意到某些特定的元素）。因此，多列表格会增加完成时间。当表格由单列组成时，用户会更容易进行浏览 – 因为眼睛会遵循垂直扫描模式。

将大量相关信息分在一起

一次性显示出太多的信息，会让用户感到有些不知所措。分层技术可以帮助你提供相同数量的信息而无需过载。有两种类型的组块：

-页面上的分组。

你可以将相关信息分组在一起，并按逻辑顺序排列。

左：字段之间没有可视的划分。右图：相同数量的字段在视觉上被分成3个部分。图片：NNGroup

- 创建多步结帐过程。

你可以将结帐过程分解为多个单独的步骤。例如，典型的结账流程可以分为四个步骤 - 客户信息，运送方式，付款，订单汇总。将大任务分解为几个较小的任务可以让用户专注于一种特定类型的输入。但是如果你使用这种方法，请确保你的结帐过程是易于操作和理解的。用户需要了解他们花费多少时间来完成付款。如果你可以提供一个易于用户填写和操作的表单，这就太棒了。