Shopify设计技巧和UX最佳实践

本文概述

• Shopify有哪些功能？
• 促进电子商务产品发现
• Shopify产品页面最佳做法
• 整合购物体验个性化
• 结帐优化
• 总结

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

由于Shopify负责域, 托管, 所有后端以及某些前端功能, 因此可以在UX设计上花费更多的时间, 金钱和资源。到2021年, 全球电子商务销售额预计将达到4.9万亿美元的新高, 而且不合格的UX设计是导致放弃收款的最大因素之一, 很显然, 电子商务最佳实践的实施将继续被证明是非常有效的。

在本文中, 我们将探讨Shopify的主要设计技巧。

Shopify有哪些功能？

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

• 与外部支付网关(如Stripe和PayPal)集成
• 使用Shopify付款, 与外部选项相比费用为零
• 可以通过礼品卡或商店信用额付款的功能
• 可自定义的结帐页面(仅适用于Shopify Plus客户)
• 用户帐户或访客结帐的选项
• 静态页面(例如, 隐私政策或条款和条件)
• 具有促销内容的登录页面
• 密码访问, 用于开发中的商店
• 具有多种可定制选项的产品变型
• 智能馆藏可自动进行产品分类
• 搜索和标记功能有助于产品发现
• 博客功能, 可以将产品嵌入帖子中
• 帮助开发人员构建动态网站和移动应用程序的API

促进电子商务产品发现

类似于按部门组织实体商店的方式, 以便客户可以通过询问工作人员来查找特定商品, 在线购物者需要具有浏览, 过滤和搜索的能力, 以便他们可以轻松地找到想要的商品并很快。

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

自定义导航

向客户提供太多选项可能会导致分析瘫痪(当可用选项太多而无法有效地做出决定时, 就会感到沮丧和放弃)。通过设计自定义导航, 我们可以确定转换效率最高的产品和”集合”的优先级, 例如, 在桌面产品最受欢迎的情况下, 可视地显示”桌面”集合。这些自定义导航也可以在Shopify CMS中进行编辑以启用临时A / B测试。

从视觉上讲, 转换最佳的Shopify主题清晰地显示了商品集的标题, 并使用足够的空格来帮助用户轻松地确定他们在提供的所有产品, 商品集和页面中寻找的内容。

Grovemade的Shopify商店, 采用了优化的导航。

馆藏

集合是一组有组织的相似产品。产品可以手动分类到集合中, 也可以根据匹配的标准自动分类(例如, 如果产品标题包含某个关键字, 已被分配某个标签或在特定价格范围内)。集合也可以是临时的(即季节性或限时出售), 以确保Shopify网站设计始终是相关的, 及时的, 并且最重要的是高度转换。

尽管这些集合是在幕后定义的, 但对于电子商务设计师来说, 在为Shopify设计时意识到这一功能很有用。

产品标签

显示/可见标签可帮助客户找到相似的产品, 如上所述, 它们也可以在内部用于创建收藏。但是, 标签的最大优势在于可以用来创建多面搜索, 从而允许客户根据带有标签的定义属性(例如”黄色”)过滤产品。

在Shopify平台上为产品分配标签。

请牢记以下Shopify设计技巧：

• 为了进一步说明, 请说明应用了哪些过滤器
• 允许客户删除过滤器以扩大搜索范围
• 截断过滤器以乍一看仅显示最受欢迎的过滤器

使用标签进行有效的产品过滤。 Shopify商店采用Pure Cycles。

搜索

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

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

• 切勿隐藏搜索框；通过立即使用来减少摩擦
• 将搜索放置在客户期望的位置(即右上方或集中式)
• 显示整个输入框, 而不仅仅是搜索图标
• 合并自动完成功能以帮助用户更快地搜索
• 通过使用建议的结果和自动更正来设计人为错误
• 保存用户搜索并发送后续电子邮件(如果未进行销售)

周日某个地方进行全面但结构合理的搜索。

Shopify产品页面最佳做法

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

使用迷人的产品图片

打造出色电子商务网站的原因是吸引用户的图像。为此, Shopify允许上传多个图像和产品变体。但是, 作为Shopify的最佳做法, 应按比例显示这些产品图像中的至少一个(即被其他对象包围以说明产品有多大)以设置期望值。

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

Hardgraft在视觉上引人入胜的产品页面。

显示清晰的产品信息

由于缺乏有关实际成本的信息, 令人震惊(但不足为奇)的电子商务客户放弃了购物车。 60％的客户将意外成本(例如运输, 税金, 费用)作为放弃购物车的原因, 而23％的客户无法预先计算总成本。缺乏透明度是在电子商务网站上进行大量转化的必经之路, 因此请牢记以下Shopify提示和技巧：

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

Luxy Hair使用仔细的产品演示设计来阐明重要信息。

建立信任和保证

据Baymard Institute称, 缺乏信任是19％的客户在结帐时放弃的原因。幸运的是, 默认情况下, 所有Shopify商店都附带SSL(安全结帐), 但它们还允许客户留下评论作为社交证据。

社交证明是通过增强电子商务网站上的信任度来推动转换的不可否认的方法。根据Bright Local的调查, 有88％的消费者对在线评论的信任程度与个人推荐一样多, 因此, 有必要轻推以前的客户留下评论, 并在客户旅程中指出这一点。大多数Shopify主题还利用架构标记将这些评级直接集成到搜索结果中。

实施产品审查。 MVMT手表的Shopify商店。

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

显示相关产品推荐

所有领先的电子商务业务都利用交叉销售和追加销售策略。标签与Analytics(分析)和A / B测试集成(例如Optimizely的Web Recommendations)相结合, 可以帮助设计师通过显示客户可能感兴趣的替代商品或其他商品, 帮助企业提高转化率。

Hardgraft使用引人注目的追加销售策略。

整合购物体验个性化

集成(例如Optimizely的Web个性化)与Shopify集合和标签相结合, 使数据驱动型企业可以根据他们的兴趣和以前的购买历史对受众进行细分, 并相应地更改页面内容。

借助预期的设计技术, Shopify商店可以显示更多相关内容, 从而使受众保持更长时间的互动, 从而更有可能转化为销售。个性化是提高任何电子商务业务财务底线的关键。

结帐优化

访客结帐与客户帐户

根据Baymard Institute的说法, “该网站要我创建帐户”是客户放弃购物而未购买任何商品的第二大常见原因(占35％)。 Shopify建议允许客人结帐(尤其是在移动设备上), 为此, 禁用客户帐户是默认选项。

Shopify允许客户帐户和来宾结帐。

精确定位UX缺陷并减少脱落

尝试在没有强大分析能力的情况下解决放弃的结帐, 与在黑暗的房间里寻找黑猫一样有效。在数据驱动的过程中, 优化用户体验和结帐流程最有效。

Shopify设计人员可以将Google Analytics(分析)连接到Shopify并设置目标渠道, 在收集了足够的数据之后, 该渠道将准确说明客户决定不再购买的位置。

Patrick Han使用Google Analytics(分析)进行目标渠道可视化。

为了获得最佳结果, 请将Shopify与Crazy Egg, Hotjar和Fullstory之类的工具集成, 以使用热图和访客记录更详细地观察这些问题区域。

总结

为了使设计人员能够更好地交流Shopify平台的优势和功能, 并了解它可以为客户提供的解决方案, 以及不能为客户提供的解决方案, 最好开设免费的演示店。此外, 顶尖的电子商务设计师可以成为Shopify专家的注册成员, 这使他们作为Shopify网站设计师的履历更加可信。

• • •

进一步阅读：

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