帮助开发者构建功能强大、可安装的 Web 应用

简介

2020 年初,Chrome 团队在移动设备和桌面设备上制定了一项计划,旨在提高已安装的 Web 应用的可发现性和互动度。我们的工作使 PWA 安装量和互动度提高了 100% 以上。为此,我们研究了现有功能,开展了 A/B 测试实验和用户访谈,以深入了解用户的看法和期望。本文将介绍我们是如何达成这一目标的。

统一安装语言

触发 PWA 安装的号召性用语在 Web 平台上不一致。对于 Android 版 Chrome,我们选择了添加到主屏幕,但在桌面平台上,我们强调了安装。造成这种差异的原因来自该团队在 2016 年开展的一项研究,该研究比较了不同的字符串。该团队发现,添加到主屏幕在移动设备上的效果更好(虽然只是略微更好)。

2019 年对分类法进行了进一步研究,发现没有差异,因此希望统一 PWA 安装体验的团队决定在 Android 上将标签更新为安装。2021 年,我们进行了一项进一步的研究,比较了“安装”“获取”和“下载”这三种语言,发现用户会将“安装”理解为正在进行的过程。用户认为,点按标签为获取的按钮会将用户定向到某个网站,而点按标签为下载的按钮会将文件下载到下载文件夹或类似位置。

综合考虑所有这些因素,我们得出结论,安装标签最适合 PWA。我们建议 Web 平台上的开发者今后采用“安装”作为首选字符串。

桌面上的“安装”图标

在桌面平台上,我们采用了一种设计模式:每当网站加载 PWA 时,Chrome 都会在万能搜索框的右侧显示一个药丸状图标,其中包含一个图标和安装标签。之后,当用户访问网站时,系统只会显示该图标。点击此药丸会触发桌面 PWA 的安装。

原始安装加号图标。
原始安装加号图标。

该图标最初是加号符号,这在一定程度上是因为移动设备上使用了添加到主屏幕隐喻。不过,如前所述,我们使用的语言是安装。我们从开发者社区收到的反馈是,此图标令人困惑。此外,如果用户使用放大功能放大文本,放大图标看起来非常相似,这会让用户更加困惑。

多功能框存在缩放和安装图标的 bug。
存在缩放和安装图标的多功能框 bug。

由于大多数反馈都是基于个人经验,因此我决定调查用户的看法。我们与用户体验研究员合作,对美国和印度尼西亚的 1 万名用户进行了一项研究,以确定用户对安装图标的理解。我们测试了五种不同的设计(包括现有设计),并询问用户“安装”的含义。我们发现,当前的图标(加号)最容易让用户感到困惑。许多人将该符号与“药品”“急救”和“电池”混淆。

我们还发现,用户主要将箭头和设备等图像与安装相关联。根据这些结论,我们在 Chrome 中运行了 A/B/C 测试,将现有设计与两个备选方案进行了比较。我们最终选择了指向显示器的向下箭头,其效果明显优于其他两个。我们还发现,使用新图标后,用户关闭安装界面的次数有所减少。

安装 Material Design 图标集中的图标变体。
安装图标的变体,您可以从我们的 Material Design 图标集中下载。

最终,我们推出了您现在看到的设计,PWA 的安装率比网站提高了 2 倍多。我们还在 Material Design 图标集中添加了此图标及其移动版等效图标,以便社区使用我们认为最具吸引力的图标。

当然,单个图标无法改变世界,因此我们来看看下一个功能。

产品内帮助

产品内帮助是一种蓝色气泡式提示,可根据特定条件向用户介绍可能感兴趣的新功能。我们决定推出此设计模式,以便让用户了解安装功能,并进一步支持重新设计的新图标。

产品内帮助气泡。
产品内帮助提示气泡,用于向用户介绍功能。

当用户经常访问某个网站时,Chrome 会使用一项名为网站互动的服务。这提供了有关用户与网站互动程度的信息。访问 chrome://site-engagement/ 后,您可以查看自己经常互动的网站。利用这些得分,我们可以确定用户是否对某个网站感兴趣。如果网站是 PWA,并且用户感兴趣,我们会向他们显示安装产品内帮助界面。这意味着,我们只关注感兴趣的用户,不会干扰可能只访问过一次网站的用户。

通过在桌面设备上使用产品内帮助,我们发现 PWA 安装量增加了 100% 以上,这表明专注于互动度高的用户有助于提高 Web 应用的可安装性。

更丰富的安装界面

对于大多数用户,安装模式是商店。 自 2000 年代中期以来,我们一直向用户说明,每当他们安装应用时,都会看到说明、屏幕截图和其他元数据,以帮助他们判断应用是否符合他们的需求。

对于 PWA,在用户决定安装 Web 应用后,我们显示的界面相对较少。因此,该团队决定探索更丰富的安装体验,为用户提供有关 Web 应用的情境信息,并让开发者能够庆祝 PWA 与原生体验不相上下。

信息更丰富的安装界面。
信息更丰富的安装界面,收起和展开状态。

今年早些时候,我们推出了更丰富的安装体验,这是 Android 版 Chrome 上的扩展安装界面,可让开发者向清单中添加屏幕截图。开发者还可以添加说明,但这并非强制要求。由于采用了这个新界面,我们发现某些 PWA 的安装率翻了一番,这表明,当我们提供更多背景信息和更丰富的体验时,用户会更有信心安装 Web 应用。此界面的桌面版目前正在开发中。

总结

在过去两年中,该团队探索和实验了 Chrome 中的新功能,这些功能为 PWA 开发者提供了支持,并帮助用户了解 Web 体验的好处。我们仍有许多工作要做,但我们可以通力合作,改善和丰富用户的生活,并进一步支持开放网络。