电子商务网站设计终极指南

美国电子商务销售额在 2018 年继续达到新的高度。在全球范围内，电子商务将继续实现 2.3 万亿美元的稳健收益。 但是，是什么让一个电子商务网站胜过另一个？

有几个因素决定了电子商务网站的整体成功，包括产品质量、品牌知名度、运输成本、退货政策、可信度和客户服务。 然而，周到的用户体验设计也是为客户提供令人满意的无摩擦体验的关键。 它不仅可以将潜在的点击转化为实际的电子商务交易，还可以让客户一次又一次地回来。

这是一个全面的电子商务 UX 设计指南，用于创建出色的电子商务网站，并附有示例。

为信任和安全设计电子商务

首先，重要的是设计一个购物者认为他们可以信任的网站。 大多数购物者都关心隐私以及网站是否会通过提供安全交易来保护他们的个人数据。 如果网站感觉不值得信赖，他们只会选择到别处购物。

以下是一些传达可信度的方法：

• 包括业务概述：

  • 提供一般信息
  • 企业背后的人的照片
  • 联系信息
  • 社交媒体链接
  • 常见问题 (FAQ) 页面

• 发布商店政策并确保它们不太难找到：

  • 运输和退货政策
  • 概述退货流程以及可以退货的产品
  • 提供对涵盖购物者个人和财务信息的隐私政策的轻松访问（这是至关重要的）

用通俗易懂的语言写作，避免使用法律或内部政策术语。

• 分享产品评论。 提供产品评论，帮助购物者更多地了解产品； 这将有助于减轻他们可能存在的任何担忧并提供出色的电子商务用户体验。 通过提供产品评论以及有关评论者的其他信息或总结评论，更进一步。 此步骤可以帮助购物者更轻松地充分利用他人的意见。
• 使用安全的服务器。 购物者希望他们的个人信息在他们在线购物时能够保持安全。 SSL（安全套接字层）证书验证网站的身份并加密需要保持安全的信息。 这是一个重要的标志，表明结账是安全的。 通过实施 SSL 和显示 SSL 证书徽章向购物者保证他们的数据受到保护。

• 添加公认的信任印章。 信任印章验证网站的合法性和安全性。 如果交易被证明是欺诈性的，一些信托公司甚至通过提供一些保险来增加额外的保护层。 使用公认的信任印章可确保潜在购物者的交易流程安全，从而增加销售额并提供更好的电子商务用户体验。
• 表现出对细节的关注。 通过避免拼写错误、丢失图像、断开链接、404 错误（未找到页面）或其他电子商务 UX 扼杀错误，使网站看起来合法和专业。

电子商务 UI 设计注意事项

网站的外观和感觉是第一印象的主要驱动力。 研究得出结论，人们将在 50 毫秒内确定他们是否喜欢一个网站。

以下是一些基本的用户界面设计技巧：

• 遵循品牌标识。 品牌应该在整个网站上都很明显。 选择反映品牌的颜色，并设置风格，以明确销售的产品类型。 确保品牌体验在所有渠道（无论是在线、店内还是移动设备上）都保持一致。 这将有助于建立牢固的品牌与客户关系。
• 采用视觉层次结构。 最关键的内容应显示在首屏。 在某些情况下，使用较少的空白将项目拉得更近比将关键内容推到首屏更好。
• 不要过度设计。 限制字体格式，例如字体、大小和颜色。 当文字看起来太像图形时，就会被误认为是广告。 使用高对比度的文本和背景颜色使内容尽可能清晰。
• 坚持已知的符号。 使用易于识别的图标或符号。 不熟悉的图标只会让购物者感到困惑。 避免任何可能的混淆的一个好方法是为图标提供标签。
• 避免弹出窗口。 弹出窗口会分散注意力。 即使它们包含有价值的信息，购物者也很可能会立即将其解雇——一旦离开，即使他们愿意，购物者也很难再次找到这些信息。

无摩擦电子商务网站导航的重要性

无摩擦是存在的方式。 导航是关于人们在网站上移动、找到他们正在寻找的内容并最终采取行动的难易程度。 电子商务购物体验应该是无缝的，这样购物者就不会在整个过程中途放弃。

易于导航的电子商务网站设计的一些关键方面包括：

定义明确的产品类别

顶级导航应显示网站提供的类别集。 将产品分组到有意义的类别和子类别中。 类别标签最适合作为描述产品范围的单个词，因此购物者可以浏览它们并立即了解它们所代表的内容。 最好尽可能多地对用户测试网站导航以获得出色的电子商务 UX，因为它是网站的关键成败功能。

产品搜索

简而言之，如果购物者找不到产品，他们就无法购买产品——建立一个搜索功能，帮助他们轻松找到他们正在寻找的东西：

• 让搜索无处不在。 将搜索框放在每个页面和熟悉的位置。 该框应可见、可快速识别且易于使用。 实现搜索框的标准位置是页面的右上角或顶部中心，或者在主菜单上。
• 支持各种查询。 搜索需要支持所有类型的查询，例如产品名称、类别和产品属性，以及客户服务相关信息。 在输入字段中包含示例搜索查询以向购物者建议使用各种功能是一个好主意。
• 具有搜索自动完成功能。 自动完成功能使购物者更容易找到他们正在寻找的东西，并通过在他们已经搜索的区域内提出建议来增加销售潜力。
• 允许对结果进行排序和过滤。 让购物者根据各种标准（畅销商品、最高或最低价格、产品评级、最新商品等）对搜索结果进行排序，并排除不属于某个类别的商品。

过滤产品

给的选择越多，选择就越难。 通过实施过滤器帮助购物者找到合适的产品。 它将帮助他们缩小选择范围并直接跳转到他们想要的产品范围。

产品快速浏览

“快速查看”通过消除不必要的页面加载，减少了购物者找到合适产品的时间。 通常，产品详细信息显示在查看页面上方的模式窗口中。 不要尝试显示所有产品详细信息，而是包含指向完整产品页面的链接以查看完整详细信息。 此外，请务必包含一个显眼的“添加到购物车”按钮以及“保存到愿望清单”功能。

特别优惠

购物者总是在寻找特别优惠、折扣或最优惠的价格。 使独家优惠可见，以便购物者了解它们。 即使价格差异不是很大，节省一些钱的心理感觉也会产生占上风的错觉。

电子商务产品页面设计

当购物者成功找到他们想要的产品时，为了获得出色的电子商务用户体验，让他们了解产品。 设计一个产品页面，通过包含大量图像、详细描述和任何其他有用的和相关的产品信息，创造尽可能类似于亲身购物体验的体验。 让我们深入看看这意味着什么。

提供出色的产品图片

通过电子商务，购物者无法触摸、感受或试用产品。 相反，一切都取决于他们在网上看到的内容。 这就是为什么提供清楚展示产品所有方面的产品图像至关重要的原因。 这是完美产品图片的清单：

• 使用白色背景。 产品图片的背景不应分散注意力或与产品本身发生冲突。 白色背景效果最好，因为它可以让产品脱颖而出，并且适用于几乎任何风格或配色方案。
• 使用高质量的大图像。 好的图像销售产品。 高质量的图像会引起购物者的兴趣，并准确地向他们展示他们所购买的东西。 拥有大图像可以让购物者放大并详细检查产品。

• 使用各种图像。 从多个不同的角度展示产品，并包括特写镜头，以提供更完整的产品感。 一个 360 度的视图，他们可以在其中移动产品，这是一种很好的方式，可以提供一种接近实体进入商店并与之互动的体验。 VR 电子商务是这种体验的下一波浪潮。
• 使用视频。 视频能够在短时间内传递大量信息。 使用视频展示正在使用的产品，并提供尽可能多的功能信息。
• 始终如一。 使用跨多个页面一致的图像，并且与网站其余部分的外观和感觉保持一致。 这将使一切看起来干净整洁。 网站所有区域的主要产品图片应相同，例如产品亮点或特色商品部分。

提供适量的产品信息

向购物者提供有关产品的详细信息，以便他们做出明智的购买决定。 显示可用性、不同尺寸或颜色的选项、尺寸、尺寸表、使用的材料、总成本、保修等。 他们对产品的剩余问题越少，他们购买的可能性就越大。

采用有说服力的设计

根据稀缺性原理，人类对稀缺的事物赋予较高的价值，而对丰富的事物赋予较低的价值。 通过显示稀缺性来在销售过程中营造一种紧迫感——显示剩余的产品数量、将缺货的尺寸变灰或显示销售截止日期。 稀缺性将激励潜在买家采取行动。

越来越多的公司正在使用先进的心理学研究，为了推动更多的参与和购买，他们将曾经是一门艺术的东西变成了一门科学。 电子商务中的有说服力的设计是获得更多购买的一种非常有效的方式。

显示相关和推荐产品

展示购物者可能也喜欢的类似产品，这些产品与当前产品或其他人购买的产品配合得很好。 这可以显示在产品详细信息页面或购物车中，有助于引导购物者找到满足他们需求的产品，从而可能鼓励他们继续购物——这是交叉销售相关产品的好方法。

购物车设计

购物车是必不可少的，因为购物者可以在这里查看他们选择的产品、做出最终决定并进行结账。 购物车的主要目标是引导购物者结账。 以下是有关设计用户友好型购物车的提示，并将鼓励购物者进一步购买。

• 使用明确的号召性用语 (CTA)。 购物车页面上的主要号召性用语应该是结帐按钮。 使用明亮的颜色、大量的可点击区域和简单的语言使结帐按钮可见、简单且易于使用。
• 提供充分的反馈。 确保在将产品添加到购物车时立即明确确认。 购物者会因反馈不足而感到困惑，例如显示不显眼的确认文本。 一个好主意是使用动画，因为运动会吸引人的眼睛。
• 使用迷你购物车小部件。 允许购物者使用迷你购物车将产品添加到购物车，而无需离开他们所在的页面。 它还允许他们导航、发现和添加更多产品。 迷你购物车小部件应始终链接到整页购物车。

• 显示产品详细信息。 在购物车中显示产品名称、图像、尺寸、颜色和价格等详细信息有助于购物者记住每个产品，并比较产品。 将购物车中的产品链接回其完整的产品页面，以便购物者在必要时查看更多详细信息。
• 使购物车易于编辑。 删除、保存以备后用或更改尺寸、颜色或数量等细节的功能应该很容易访问。
• 避免意外的运输成本和税收带来的惊喜。 意外的运费是购物者放弃购物车的主要原因之一。 将运输选项和税款与成本的精确计算以及预期的交货日期提前联系起来。

电子商务结帐设计

时尚和新潮的设计并不能决定一个成功的电子商务网站，也不一定能提供出色的电子商务用户体验。 电子商务的成功仅通过完成购买的数量来衡量。 以下是构建精心设计的结帐页面的几种方法，这将有助于成功转换：

• 提供多种付款方式。 不同的购物者在付款方面有不同的偏好。 迎合尽可能多的付款方式（视目标受众而定），以扩大客户群，让购物者轻松完成订单。
• 把事情简单化。 尽量减少完成购买的字段和步骤的数量。 默认情况下使用送货地址作为账单地址是减少字段数量的好方法——理想情况下，设计一个单页结账，购物者可以在其中查看他们的购物车并输入送货和付款信息。

• 使注册成为可选的。 强迫购物者在第一次购买之前创建一个帐户将把购物者赶走。 在购买完成后为他们提供注册选项，并在要求他们注册时突出注册的好处。 好处包括通过保存的送货地址或付款信息等个人信息加快结帐速度，并获得仅注册会员可用的独家优惠。
• 使用明确的错误指示。 没有什么比无法购买或找出原因更令人沮丧的了。 不是在提交表单后显示错误，而是实时显示错误通知。 将清晰简洁的错误消息直接放在需要更正的商品上方或旁边，以便购物者注意到并理解它们。

• 让人们走上正轨。 使用多页结账时，包括一个进度条，显示完成购买还剩多少步骤。 这将消除任何歧义，并向购物者保证他们走在正确的轨道上。 购买完成后，显示订单确认和订单状态以及发货跟踪。
• 提供支持。 在整个结账过程中加入实时聊天或联系号码，这样当购物者有问题时，他们可以快速得到答案，而不必离开网站去其他地方。

概括

无论如何，在线购物者都希望获得顺畅的体验。 在设计电子商务网站时，不仅仅是建立一个网站，而是创造一种在线购物体验，将被动购物者转变为付费客户。

希望本电子商务网站设计指南能够帮助您做出重要的设计决策，以构建专业、有吸引力、用户友好的出色电子商务用户体验，并让购物者一次又一次地光顾。 快速增长加上相对较低的市场份额意味着新参与者仍有巨大机会超越传统行业领导者。

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——基本设计策略和原则
• 移动体验的电子商务 UX
• 如何通过 UX 设计吸引电子商务购物者
• 电子商务重新设计：微小的变化如何带来重大的用户体验改进