对话式过滤用户体验指南

成功实现对话式产品过滤功能取决于周到的用户体验设计。

视觉显示元素

对话过滤器的放置位置和外观会显著影响其效果。

竖屏布局与横屏布局

以下是一些关于设计垂直布局还是水平布局的注意事项:

  • 建议:优先考虑横向、纵向紧凑的设计。这样可以最大限度地降低将商品搜索结果推送到首屏下方的风险。

  • 原因:如果过滤条件横向显示在顶部,可能会将商品结果推到页面下方,从而降低即时商品曝光度,增加此功能的成本。此外,尽量减少元素之间的空白空间,可以为网页上的其他商品块腾出更多空间。

处理长属性

如果多项选择选项较长(例如品牌名称),请勿将其换行,因为这会增加元素的高度。而是允许它们在页面上水平延伸,并启用侧向滚动。

下面是一个横向滚动实现示例:

水平元素显示示例

最佳展示位置

考虑将对话式过滤条件放在 3-5 行商品之后。这种方法可防止对话元素取代初始产品列表。

此放置位置的关键要点是,对话过滤栏应尽可能在垂直方向上紧凑。当对话式商品过滤功能位于显眼位置时,可能会导致商品展示位置进一步下移,超出用户的即时视线范围。这可能是一个缺点,因为买家看到的商品会减少。因此,可供查看的商品必须尽可能相关。

  • 侧边(垂直)与顶部(水平):考虑将对话式过滤条件放置在 3-5 行商品之后。这种方法可防止对话元素取代初始产品列表。

  • 强烈建议:如果对话式商品过滤成为您缩小商品选择范围的主要方法,请考虑完全最小化或替换手动过滤栏。这样您就可以添加另一列商品。

桌面设备和移动设备

虽然桌面版实现已证明成功,但移动版实现的效果不太稳定,总体性能增幅也较低。移动设备上的屏幕尺寸有限,因此需要采用更具创意和审慎的展示位置选择方法。

  • 建议:最初优先考虑桌面设备上的实现。桌面设备上的屏幕尺寸更大,因此在广告素材设计方面具有更大的灵活性。移动设备上的屏幕较小,这迫使开发者优先考虑某些元素。

  • 避免:Chat 窗口界面。请勿将对话式过滤条件实现为聊天窗口。这会将用户从主网页界面带离,并可能会中断开发者通常会花费大量时间优化的预期网页结账流程设计。

其他移动设备注意事项

在测试方面,移动网站和应用也应单独对待。移动应用测试本身很难进行,但灵活性更高。移动网站通常更容易测试,但对于各种移动网络浏览器,其优缺点各不相同。

用户与过滤条件的互动

本部分介绍了如何配置对话式商品过滤。建议使用动态对话式过滤取代静态的硬编码过滤元素,从而释放屏幕空间以展示更具针对性的商品。无论过滤条件来自何处,所有已应用的过滤条件都可以全局更新商品网格。

后续对话式问题会根据整套已应用的过滤条件进行调整,并提供多项选择。

统一的全局过滤条件

买家可以同时与对话式过滤条件和应用的任何剩余过滤条件元素互动。您的前端实现必须能够处理此情况。

统一的全局过滤条件具有以下特征:

  • 全局应用:当用户从页面上的任何过滤条件元素(无论是对话式商品过滤条件还是静态过滤条件元素)中进行选择时,商品网格必须更新以显示应用了所有全局过滤条件的结果。
  • 智能后续问题:用户看到的下一个对话问题应与应用的所有过滤条件相关,无论用户选择哪个元素。例如,如果买家从对话元素中选择了 color 过滤条件,又从经典过滤元素中选择了 size 过滤条件,那么后续的对话问题就不应再询问买家想要的尺寸

过滤类型

对话式商品过滤功能支持在网站上使用多项选择。

单选题

Vertex AI Search 商务解决方案最多可根据商品目录中的值名称显示 20 个多项选择选项。系统会显示一个排序列表,其中包含最相关的选项。长选项(例如长品牌名称)有助于确保用户可以侧向滚动,而不是换行,从而保持垂直紧凑性。

替换硬编码元素

许多商业搜索网站开发者在其网页界面中预构建了手动类别过滤条件组件,这些组件旨在处理创收最多的查询。这些滤镜组件通常价格昂贵、制作耗时,并且与用户的互动性不强。

硬编码元素的示例 图 2. 硬编码元素显示示例。

  • 建议:对话式过滤的核心理念是让您能够快速在所有产品中部署此类动态体验,而不仅仅是针对设计视觉元素时考虑的少数热门搜索查询。因此,请找出并移除对话式过滤功能旨在替换的元素。避免使用两组功能相似且相互干扰的过滤元素。这样可以释放屏幕空间,以便展示更具针对性的商品。

实验创意

以下是一些实验想法:

  • 商品行之间的展示位置:将组件插入到页面中间位置,即在 3-5 行商品之后。这种方法可防止对话元素显著取代初始产品展示。
  • 弹出式或悬浮式:使用可触发包含过滤条件问题的对话框或悬浮式菜单的按钮。此功能可以与现有的过滤条件弹出式窗口集成,也可以将飞出式菜单作为单独的元素。
  • 固定栏:屏幕上会显示一个持久性栏,其中包含问题和选项。它位于产品前面,而不是将产品推到后面。
  • 测试注意事项:在测试移动版和桌面版时,请确保这些实验是独立进行的。每种设备的购物行为差异很大,在一种设备上有效的视觉元素可能无法在另一种设备上发挥作用。

数据注入和质量

Vertex AI 模型的智能性基于用户互动数据。初始配置流程采用两阶段数据注入方法。

第 1 阶段:使用历史事件进行初始启动

该模型可以使用历史事件数据进行训练。历史事件数据最初会提取到 Google 环境中,这样一来,即使是没有任何实时互动数据的新项目,模型也能识别出来。

第 2 阶段:过渡到实时查询数据

该功能上线并开始收集历史捕获的数据后,Vertex AI 会使用实时查询数据流来优化服务模型。实时查询数据通常比历史捕获的事件数据质量更高,因为历史事件有时会遗漏关键信息。这样一来,实时查询数据便可更有效地用于持续优化。