Shopify 设计技巧和用户体验最佳实践

Shopify 为 175 个国家/地区的超过 50 万家电子商务企业提供支持。 自 2012 年以来，Shopify 平台上的商家数量平均每年增长 74%，由于 Shopify 是当今最知名和最容易使用的电子商务平台之一，这些商家的销售额已超过 550 亿美元。

随着 Shopify 负责域、托管、所有后端和一些前端功能，可以将更多时间、金钱和资源用于 UX 设计。 到 2021 年，全球电子商务销售额预计将达到 4.9 万亿美元的新高，而不合标准的用户体验设计是放弃结账的最大原因之一，很明显电子商务最佳实践的实施将继续证明非常有效。

在本文中，我们将探讨顶级 Shopify 设计技巧。

Shopify 有哪些功能？

Shopify 附带您期望从顶级电子商务平台获得的所有功能：

• 与外部支付网关集成，例如 Stripe 和 PayPal
• 访问 Shopify Payments，与外部选项相比，费用为零
• 允许通过礼品卡或商店信用付款的能力
• 可自定义的结帐页面（仅适用于 Shopify Plus 客户）
• 用户帐户或访客结帐选项
• 静态页面（例如，隐私政策或条款和条件）
• 带有促销内容的登陆页面
• 开发中商店的密码访问
• 具有一系列可定制选项的产品变体
• 智能集合以自动化产品分类
• 搜索和标记功能以帮助产品发现
• 具有将产品嵌入帖子的博客功能
• 帮助开发人员构建动态网站和移动应用程序的 API

促进电子商务产品发现

与实体店按部门组织的方式类似，客户可以通过询问工作人员来找到特定商品，在线购物者需要能够浏览、过滤和搜索，以便他们可以轻松找到他们想要的东西，并且快点。

40% 的电子商务客户放弃加载时间超过 3 秒的网站，这表明他们在产品发现方面有多么不耐烦。 幸运的是，Shopify 具有许多功能，可以轻松构建自定义导航、组织产品和类别以及实现搜索功能。

自定义导航

向客户提供太多选项可能会导致分析瘫痪（当有太多可用选项无法有效做出决策时，会导致沮丧和放弃）。 通过设计自定义导航，我们可以优先考虑转换效率最高的产品和“集合”——例如，如果桌面产品最受欢迎，则明显显示“桌面”集合。 这些自定义导航也可以在 Shopify CMS 中进行编辑，以启用临时 A/B 测试。

从视觉上讲，转换效果最好的 Shopify 主题清楚地显示了产品系列的标题，并使用足够的空白来帮助用户轻松识别他们在提供的所有产品、产品系列和页面中寻找的内容。

收藏品

集合是一组有组织的类似产品。 产品可以手动分类到集合中，也可以根据匹配的条件自动分类（例如，如果产品标题包含某个关键字，被分配了某个标签，或者在特定的价格范围内）。 收藏也可以是临时的（即季节性或限时销售），以确保 Shopify 网站设计始终具有相关性、及时性，并且最重要的是，具有很高的转化率。

虽然这些集合是在幕后定义的，但电子商务设计人员在为 Shopify 进行设计时了解此功能很有用。

产品标签

显示/可见标签帮助客户找到相似的产品，如上所述，它们也可以在内部用于创建集合。 然而，标签的最大好处在于它们可用于创建分面搜索，允许客户根据“黄色”等标签定义属性过滤产品。

请牢记这些 Shopify 设计技巧：

• 为了进一步说明，请显示应用了哪些过滤器。
• 允许客户删除过滤器以扩大搜索范围。
• 截断过滤器以仅显示最流行的第一眼。

搜索

搜索功能对于确切知道他们在寻找什么的客户很有用，对于那些因为在移动设备上进行交互的自然尴尬而发现浏览和过滤令人沮丧的移动购物者来说尤其重要。

以下是设计搜索体验时要考虑的 Shopify 最佳做法：

• 永远不要隐藏搜索框； 通过使其立即可用来减少摩擦。
• 将搜索放在客户期望的位置（即右上角或集中）。
• 显示整个输入框，而不仅仅是搜索图标。
• 结合自动完成功能以帮助用户更快地搜索。
• 通过使用建议的结果和自动更正来设计人为错误。
• 如果没有销售，保存用户搜索并发送后续电子邮件。

Shopify 产品页面的最佳实践

Shopify 提供了吸引电子商务购物者并流畅地引导用户直接结账所需的所有功能。 如果我们将这些功能与电子商务最佳实践相结合，我们可以将放弃结账的数量推至低于平均统计数据。

使用迷人的产品图片

打造一个好的电子商务网站的要素是能够在情感上吸引用户的图像。 为此，Shopify 允许上传多个图像和产品变体。 尽管如此，作为 Shopify 的最佳实践，至少按比例显示这些产品图像中的一个（即，被其他对象包围以说明产品有多大）以设定期望值。

客户希望在承诺购买产品之前对产品进行彻底调查，以确保所有产品图像都是生动的、高质量的和可缩放的。

显示清晰的产品信息

由于缺乏有关实际成本的信息，数量惊人（但并不令人惊讶）的电子商务客户放弃了他们的购物车。 60% 的客户将意外成本（例如，运输、税收、费用）作为放弃购物车的原因，23% 的客户无法预先计算总成本。 缺乏透明度是在电子商务网站上进行转化的万无一失的方式，因此请牢记这些 Shopify 提示和技巧：

• 使用渐进式披露技术来清晰地构建信息。
• 预先显示完整的成本明细。
• 明确地传达价值主张。
• 使立即购买/添加到购物车按钮在视觉上与众不同。

建立信任和保证

根据 Baymard Institute 的说法，缺乏信任被认为是 19% 的客户在结账时放弃的原因。 幸运的是，所有 Shopify 商店都默认使用 SSL（安全结账），但它们也允许客户留下评论作为社交证明。

社交证明是通过增强对电子商务网站的信任来提高转化率的不可否认的方式。 据 BrightLocal 称，88% 的消费者对在线评论的信任程度不亚于个人推荐，因此有必要推动以前的客户留下评论并在客户旅程中表明这一点。 大多数 Shopify 主题还利用 Schema 标记将这些评级直接集成到搜索结果中。

除了社交验证之外，还可以考虑通过实施对讲机、Zendesk、Drift 或 Kayako 等实时聊天解决方案来建立客户信心。 Shopify 允许通过其应用商店和手动安装与第三方服务集成。

显示相关产品推荐

所有领先的电子商务企业都利用交叉销售和追加销售策略。 标签与分析和 A/B 测试集成（例如 Optimizely 的 Web 推荐）相结合，可以帮助设计人员通过显示客户可能感兴趣的替代或附加项目来提高企业的转化率。

整合购物体验个性化

Optimizely 的 Web Personalizations 等集成与 Shopify 产品系列和标签相结合，允许数据驱动的企业根据他们的兴趣和以前的购买历史来细分受众，并相应地更改页面内容。

借助预期设计技术，Shopify 商店可以展示更多相关内容，让受众更长时间地参与其中，从而更有可能转化为销售。 个性化是提高任何电子商务业务财务底线的关键。

结帐优化

访客结帐与客户帐户

根据 Baymard Institute 的说法，“该网站希望我创建一个帐户”是客户在没有购买任何东西的情况下放弃结账的第二大常见原因（占 35%）。 Shopify 建议允许访客结账（尤其是在移动设备上），为此，禁用客户帐户是默认选项。

查明用户体验缺陷并减少流失

在没有强大分析的情况下尝试解决废弃的结账问题就像在黑暗的房间里寻找一只黑猫一样有效。 当它是一个数据驱动的过程时，优化用户体验和结帐流程最有效。

Shopify 设计师可以将 Google Analytics 连接到 Shopify 并设置一个目标漏斗，在收集到足够的数据后，该漏斗将准确说明客户决定他们不想继续购买的确切位置。

为获得最佳效果，请将 Shopify 与 Crazy Egg、Hotjar 和 FullStory 等工具集成，以使用热图和访客记录更详细地观察这些问题区域。

结论

为了让设计师能够更好地传达 Shopify 平台的优势和功能，并了解它可以和不能为客户提供哪些解决方案，最好开设一个免费的演示商店。 此外，顶级电子商务设计师可以成为注册 Shopify 专家，为他们作为 Shopify 网站设计师的简历增加更多可信度。

进一步阅读 Toptal 设计博客：

• 阅读 Shopify 博客，了解更多 Shopify 提示和技巧。
• 电子商务用户体验——基本设计策略和原则
• 移动体验的电子商务 UX
• 如何通过 UX 设计吸引电子商务购物者
• 响应式设计——最佳实践和注意事项