对话式过滤用户体验指南

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

视觉显示元素

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

垂直布局与水平布局

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

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

  • 原因:如果过滤器在顶部以水平方式显示,则可能会将商品结果推送到页面下方,从而降低即时商品曝光度,增加该功能的成本。此外,最大限度地减少元素之间的空白区域,可以在网页上增加主要空间,以显示更多商品图块。

处理长属性

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

以下是水平滚动实现示例:

横向元素显示示例

最佳展示位置

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

对于此展示位置,一个关键要点是,对话式过滤栏应尽可能垂直紧凑。当对话式商品过滤功能位于显眼位置时,可能会将商品展示进一步移至页面下方,超出即时视图。这可能是一个缺点,因为买家看到的商品会减少。因此,可见 的商品必须尽可能相关。

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

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

桌面设备和移动设备

虽然桌面设备上的实现已证明成功,但移动设备上的结果不太一致,且总体效果提升较低。移动设备上的屏幕尺寸有限,因此需要采用更具创意和审慎的展示位置方法。

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

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

其他移动设备注意事项

在测试时,移动网站和应用也应单独对待。移动应用测试本身就很难进行,但灵活性更高。移动网站的测试通常更快,但对于各种移动网站浏览器,其权衡取舍各不相同。

用户与过滤器的互动

本部分介绍如何配置对话式商品过滤。建议使用动态对话式过滤取代静态硬编码的过滤元素,以便为更多目标商品释放屏幕空间。无论来源如何,所有应用的过滤器都可以全局更新商品网格。

后续对话式问题会适应整套应用的过滤器,并提供多项选择选项。

统一的全局过滤器

买家可以与对话式过滤器以及应用的任何剩余过滤元素互动。您的前端实现必须能够处理这种情况。

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

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

过滤类型

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

多项选择

AI Commerce Search 最多可以显示 20 个多项选择选项,具体取决于商品清单中的值名称。选项会显示在最相关选项的排序列表中。较长的选项(例如较长的品牌名称)有助于确保用户可以侧边滚动,而不是换行,从而保持垂直紧凑性。

替换硬编码的元素

许多电子商务搜索网站开发者在其网页界面中预构建了手动类别过滤组件,这些组件适用于收入最高的热门查询。这些过滤组件的制作成本通常很高、耗时,且与用户的互动性不强。

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

  • 建议:对话式过滤背后的核心理念是,您可以快速地在 所有 商品中部署此类动态体验,而不仅仅是针对视觉元素所设计的少数热门查询。因此,请找出并移除对话式过滤旨在替换的元素。避免使用两组功能相似的相互冲突的过滤元素。这样可以释放屏幕空间,以显示更多目标商品。

实验建议

以下是一些实验建议:

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

数据注入和质量

Vertex AI 模型的智能基于用户互动数据。新手入门流程采用两阶段的数据注入方法。

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

该模型可以使用历史事件数据进行训练。历史事件数据最初会注入到 Google 环境中,这使得该模型即使在没有实时互动数据的情况下也能识别新项目。

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

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