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

本文概述

• 为信任和安全设计电子商务
• 电子商务UI设计注意事项
• 无摩擦电子商务网站导航的重要性
• 电子商务产品页面设计
• 购物车设计
• 电子商务结帐设计
• 摘要

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

决定电子商务网站整体成功的因素包括产品质量, 品牌知名度, 运输成本, 退货政策, 可信赖性和客户服务。但是, 周到的用户体验设计对于为客户提供令人满意的, 无摩擦的体验也是至关重要的。它将不仅将潜在的点击转化为实际的电子商务交易, 而且使客户一次又一次地回来。

这是有关创建出色的电子商务网站的全面的电子商务UX设计指南, 并附带示例。

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

首先, 最重要的是设计一个让购物者感到可以信任的网站。大多数购物者都担心隐私, 以及网站是否会通过提供安全交易来保护其个人数据。如果网站不值得信赖, 他们只会选择在其他地方购物。

ASOS通过在页脚中共享有关业务的相关信息和安全付款来提供出色的电子商务UX。

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

包括业务概述：

• 提供一般信息

• 业务背后的人的照片

• 联系信息

• 社交媒体链接

• 常见问题(FAQ)页面

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

• 运输和退货政策

• 概述退货流程以及可以退货的产品

• 轻松访问涵盖购物者的个人和财务信息的隐私权政策(这一点至关重要)

用通俗易懂的语言写出来, 避免使用法律或内部政策行话。

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

信任印章的一些示例, 用于显示在线客户信任。

• 添加公认的信任印章：信任印章可验证网站的合法性和安全性。如果交易证明是欺诈性的, 一些信托公司甚至会通过提供一些保险来增加额外的保护层。使用公认的信任印章可确保潜在的购物者进行安全的交易流程, 从而提高销售量并提供更好的电子商务UX。
• 注重细节：避免错别字, 图片丢失, 链接断开, 404错误(找不到页面)或其他杀死电子商务的UX错误, 从而使网站看起来合法且专业。

电子商务UI设计注意事项

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

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

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

响应式电子商务网站设计。 (由Giga Tamarashvili撰写)

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

无摩擦是必经之路。导航是关于人们在网站上移动, 查找所需内容并最终采取行动的难易程度。电子商务的购物体验应该是无缝的, 这样购物者就不会在购物过程中途放弃。

便于浏览的电子商务网站设计的一些关键方面包括：

定义明确的产品类别

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

产品搜寻

简而言之, 如果购物者找不到产品, 他们就无法购买产品-建立一个搜索功能, 可帮助他们轻松找到所需的商品：

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

Sportsgirl允许对搜索结果进行排序和过滤。

过滤产品

给出的选择越多, 选择就越困难。通过实施过滤器来帮助购物者找到合适的产品。这将帮助他们缩小选择范围, 并直接跳至所需的产品范围。

产品快速浏览

“快速浏览”通过消除不必要的页面加载, 减少了购物者找到合适产品所需的时间。通常, 产品详细信息显示在查看页面上方的模式窗口中。不要尝试显示所有产品详细信息, 而应包括指向完整产品页面的链接, 以查看完整的详细信息。此外, 请确保包括醒目的位置的”添加到购物车”按钮以及”保存到收藏夹”功能。

Urban Outfitters的”快速浏览”模态窗口。

特别优惠

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

电子商务产品页面设计

对于出色的电子商务UX, 当购物者成功找到所需的产品时, 请让他们了解该产品。设计一个产品页面, 通过包含大量图像, 详细说明以及与该产品有关的任何其他有用和相关信息, 创建一种尽可能创造与亲自购物体验相似的体验。让我们深入了解这意味着什么。

提供优质的产品图片

MR PORTER的产品图像包括缩放功能, 甚至是视频。

使用电子商务, 购物者无法触摸, 感觉或试用产品。相反, 一切都取决于他们在网上看到的内容。这就是为什么提供清晰显示产品各个方面的产品图像至关重要的原因。以下是完善产品图片的清单：

• 使用白色背景：产品图片的背景不应分散注意力或与产品本身冲突。白色背景效果最佳, 因为它可以使产品脱颖而出, 并且几乎可以使用任何样式或配色方案。
• 使用高质量, 大图像：优质图像可以销售产品。高质量的图像可以吸引购物者的兴趣, 并向他们确切显示他们所购买的商品。拥有大图像可以使购物者放大并仔细检查产品。

极简的用户界面上的高质量产品图像使产品对客户更具吸引力, 并为出色的电子商务UX做出了贡献。 (由Greg Dlubacz撰写)

• 使用各种图像：从多个不同角度显示产品, 并包含特写镜头, 以提供更完整的产品感觉。他们可以在其中移动产品的360度视角是提供一种亲身体验到商店并与其互动的好方法。 VR电子商务是这种体验的下一波浪潮。
• 使用视频：视频具有在短时间内传递大量信息的能力。使用视频显示正在使用的产品, 并提供尽可能多的功能信息。
• 保持一致：使用在多个页面上保持一致且与网站其他部分外观保持一致的图像。这样可以使一切看起来干净整洁。产品的主要产品图片在网站的所有区域都应该相同, 例如产品亮点或特色项目部分中的图片。

选择产品选项并将产品添加到购物车。 (由丹妮尔)

提供正确数量的产品信息

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

HODINKEE显示详细的产品信息。

采用说服力设计

根据稀缺性原则, 人类对稀缺的物体赋予较高的价值, 而对丰富的物体赋予较低的价值。通过显示稀缺性来显示销售过程中的紧迫感-显示剩余的产品数量, 缺货的灰色尺寸或显示销售截止日期。稀缺性会激发潜在的买家采取行动。

公司越来越多地使用高级心理学研究, 并且为了推动更多的参与和购买, 已经将过去的艺术变成了科学。电子商务中的说服设计是吸引更多购买的非常有效的方法。

ICONIC提供带有通知选项的实时库存信息, 从而创建了出色的电子商务UX。

显示相关和推荐产品

显示购物者可能也喜欢的类似产品, 它们可以与当前产品或其他人购买的产品很好地配合使用。它可以显示在产品详细信息页面上或购物车中, 并将帮助引导购物者找到满足他们需求的产品, 从而有可能鼓励他们继续购物-这是交叉销售相关产品的一种好方法。

French Connection显示了适用于出色电子商务UX的补充产品和推荐产品。

购物车设计

购物车是必不可少的, 因为这是购物者检查所选产品, 做出最终决定并进行结帐的地方。购物车的主要目标是引导购物者结帐。以下是设计易于使用的购物车的技巧, 这些购物车将鼓励购物者进一步购物。

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

Ovothings的购物车。

• 显示产品详细信息：在购物车中显示诸如产品名称, 图像, 尺寸, 颜色和价格之类的详细信息可帮助购物者记住每个产品以及比较产品。将购物车中的产品链接回其完整的产品页面, 以便购物者在必要时可以查看更多详细信息。
• 使购物车易于编辑：删除, 保存以供以后使用或更改详细信息(例如大小, 颜色或数量)的功能应易于访问。
• 避免意外的运输成本和税收带来的意外：意外的运输成本是购物者放弃购物车的主要原因之一。通过精确计算成本以及预计的交货日期来安排运输选项和税款。

电子商务结帐设计

时尚和新潮的设计不能确定成功的电子商务网站, 也不一定能提供出色的电子商务UX。电子商务的成功仅取决于购买的数量。以下是构建精心设计的结帐页面的几种方法, 这些方法将有助于成功进行转换：

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

Crumpler具有单页结帐功能, 可以选择以客人身份购物。

• 将注册设为可选：强迫购物者在首次购买之前创建一个帐户, 这会驱使购物者离开。购买完成后, 请给他们选择注册的机会, 并在要求他们注册时突出显示注册的好处。好处包括：由于保存了送货地址或付款信息等个人信息, 结帐速度更快, 并且可以访问仅适用于注册会员的独家优惠。
• 使用明确的错误指示：没有什么比无法购买或弄清楚原因更令人沮丧的了。提交表单后, 实时显示错误通知, 而不是显示错误。在需要纠正的物品的正上方或旁边放置清晰明了的错误消息, 以便购物者会注意到并理解它们。

lululemon演示了完成购买所需的三步过程。

• 保持人们的步调：使用多页结帐时, 请包含一个进度条, 该进度条显示完成购买还需要多少步。这将消除任何歧义, 并确保购物者处在正确的轨道上。购买完成后, 显示订单确认和带有货运跟踪的订单状态。
• 提供支持：在结帐过程中包括实时聊天或联系电话, 因此, 当购物者有疑问时, 他们可以快速获得答案, 而不必离开网站去其他地方。

摘要

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

希望此电子商务网站设计指南能够帮助你做出重要的设计决策, 以构建出色的, 专业的, 有吸引力的, 用户友好的电子商务UX, 并使购物者一次又一次地回来。快速增长和相对较低的市场份额意味着, 新的参与者仍然有巨大的机会超越传统的行业领导者。

• • •

在srcmini设计博客上进一步阅读：

• 电子商务UX –基本设计策略和原则
• 用于移动体验的电子商务UX
• 如何通过UX设计吸引电子商务购物者
• 重新设计了电子商务：微小的变化如何使用户体验得到重大改善