在本文中,厦门网站建设将仔细研究一个设计案例研究,并讨论其客户放弃在线购物车的可能原因以及在每个特定案例中推荐的解决方案。
Sunuva是一个成立于 2007 年的全球儿童时尚品牌。如今,他们的产品在著名的奢侈品商店品牌中都有特色,如 Bloomingdale’s、Harrods、Barneys、Harvey Nichols 和其他奢侈百货连锁店。这是一个很好的例子,说明了在进行 UX 审计之后,我和 Turum-burum 的团队如何根据可以产生显着结果的分析数据进行更改。
用户体验审计和对建议实施的支持
由于我们的客户 Sunuva 已经拥有一个开发团队,我们的任务是进行彻底的用户体验审核,并进一步支持建议的实施。
Turum-burum 受雇于泳装公司从事以下工作:
- 对每个站点细节进行深入研究,进行彻底的站点可用性审核;
- 为用户的问题提供最优的解决方案和解释;
- 随时为客户的开发团队提供任何进一步的说明。
我们使用数据分析工具、Hotjar 记录和点击地图以及客户提供的已知用户障碍点数据对网站进行了彻底的审核。
项目审查过程包括以下三个主要阶段:
- 网站的用户体验审计(移动和桌面);
- 采访业务代表;
- 就任何进一步的澄清提供进一步的支持和建议。
审核完成后,我们做了以下工作:
- 创建一个文档,列出每个关键页面的问题;
- 优先考虑所有这些问题;
- 提供完整详细的修订提案,并附有文档示例,并说明每项修订如何改善用户体验。
关键问题和建议
对网站指标的分析表明,该网站的参与度指标、流量构成以及新老用户的转化率以及跳出率和退出率均在该细分市场的正常范围内。
然而,我们发现了几个需要解决的问题,例如对关键指标产生不利影响并阻止客户转换的界面错误。主要增长点包括:
- 提高移动端的转化率;
- 增加商品详情页面的浏览量;
- 提高桌面上的购物篮率;
- 最小化购物车放弃率;
- 提高结帐完成百分比。
我们发现的最关键点如下:
- 目录结构,
- 没有预防用户的错误,
- 结帐页面的陷阱,
- 标题元素没有优先级,
- 没有“最近浏览”的区块,
- 类别块的问题。
它们都在下面进行了概述和详细描述。让我们深入研究吧!
目录结构
问题
目录结构导致产品列表包含各种混合产品。反过来,用户更难找到他们需要的产品。根据热图,如果未在所选类别中指定,用户经常使用过滤器 – 大小(年龄)和性别。那些从未使用过过滤器的人很难在列表中找到项目。根据我们的分析数据,在查看产品列表的用户中,只有 37% 的用户找到了他们需要的产品,并对它们产生了兴趣,并决定前往产品详情页面。
建议
为了便于搜索产品,应在产品列表下添加具有常见组(例如,男孩、女孩、婴儿、儿童、青少年;短裤、西装、背心)的快速标签。此外,建议默认显示尺寸和性别过滤器的扩展列表,以便用户可以快速找到并使用它们。这应该会缩短搜索所需的时间。在移动设备中,当用户向下滚动页面时,过滤器按钮应始终保持在固定位置。
用户的错误
问题
每当用户在未事先选择尺寸的情况下单击“添加到购物篮”按钮时,都不会弹出错误通知。它使他们返回,选择一个尺寸,然后再次单击该按钮。
建议
每当用户没有选择尺码并单击“添加到购物篮”按钮时,尺码列表就会自动打开,用户倾向于将注意力转移到它上面。
结帐页面上的错误通知
问题
每当用户转到结帐页面时,他们都会看到有关免费送货中缺少一些金额的通知。这将使用户离开结帐页面并继续购物。在这种情况下,用户可能永远不会返回结帐页面。根据我们的分析数据,高达 38% 的用户从未在结帐页面上完成交易,这很可能是他们从未完成交易的原因。
建议
最好不要在结帐页面上显示免费送货中缺少一些金额的通知。在购物篮中添加进度条或添加有关免费送货的信息消息以及所有详细信息应该会更好。
标题元素和信息没有优先 级
问题 #
信息没有优先级,标题元素中的视觉重音有足够的差异。口音的不正确放置使许多用户感到困惑。这个问题破坏了客户体验。
带有下划线标题元素的网站屏幕截图,视觉口音没有足够的差异
这是进行 UX 审核时网站的显示方式。(大预览)
建议
视觉上分离的元素,例如货币、愿望清单、搜索、我的帐户和购物篮。
更加强调目录类别。
将货币、愿望清单、搜索、帐户元素等与徽标对齐。它可以帮助用户专注于网站更重要的部分,并缩短搜索必要产品的时间。
带有分离和对齐标题元素的网站屏幕截图
实施:标题中的所有元素和信息都经过优先排序和结构化,这将有助于改善客户体验 (CX) 并提高转化率。(大预览)
问题
很难注意到汉堡菜单中的目录类别并将它们与信息类别区分开来。用户不得不花费更多时间来寻找必要的类别及其项目。
汉堡菜单的屏幕截图,其中难以区分目录和信息类别
这是移动版本在更改之前的显示方式。(大预览)
建议
最好在视觉上区分目录类别和信息类别。减少对信息类别的重视。它将帮助用户专注于产品类别并更快地找到所需的项目。
目录和信息类别之间不同颜色的汉堡菜单截图
实施:通过使第一个更亮以将用户的注意力集中在它们上,更改了目录类别和信息类别的颜色。