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

穆斯塔法·库尔图尔杜
Mustafa Kurtuldu

简介

2020 年初,移动版和桌面版 Chrome 团队制定了一项计划,以提高已安装的 Web 应用的曝光度和互动度。我们的工作使 PWA 的安装率和互动度增长了 100% 以上。我们通过研究现有功能、运行 A/B 测试实验和用户访谈来深入了解用户的看法和期望,从而实现这一目标。本文主要介绍我们是如何做到这一点的。

统一安装语言

触发 PWA 安装的号召性用语在整个网络平台中不一致。对于 Android 版 Chrome,我们选择了添加到主屏幕,但在桌面平台上,我们则侧重于安装。出现这种差异的原因是,该团队在 2016 年开展的一项研究对不同的字符串进行了比较。该团队发现,在移动设备上,添加到主屏幕(即使只是使用性略有增收)效果更好。

2019 年对分类的进一步研究没有发现任何不同,因此希望统一 PWA 安装体验的团队决定将标签更新为 Android 上的安装用户感觉点按带有获取标签的按钮会将用户引导至一个网站,而选择下载时,他们会认为一个文件最终会出现在他们的“下载内容”文件夹或同等文件夹中。

考虑到这一切,我们得出安装标签最适合 PWA。我们建议所有 Web 平台的开发者今后都采用“Install”作为首选字符串。

桌面设备上的安装图标

在我们的桌面平台上,我们的设计模式是,每当网站加载 PWA 时,Chrome 都会在多功能框右侧显示一片药丸,其中包含一个图标和一个安装标签。此后,当用户访问某个网站时,系统只会显示图标。点击此药丸后,系统会安装桌面 PWA。

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

该图标最初是一个加号,部分源于移动设备上使用的比喻“添加到主屏幕”。不过,如上所述,我们使用的语言是安装。我们从开发者社区收到的反馈是,此图标让人感到困惑。此外,如果用户使用缩放功能放大文本,则用于缩放的图标看起来非常相似,更加让用户感到困惑。

显示缩放和安装图标的多功能框错误。
显示缩放和安装图标的多功能框错误。

我决定调查一下用户的看法,因为大部分反馈都是个例。我们与用户体验研究人员合作,面向美国和印度尼西亚的 10,000 名用户开展了一项研究,以确定用户对安装图标的理解程度。我们测试了五种不同的设计(包括现有设计),并询问了用户“安装”的含义。我们发现当前的图标(加号)最让我们的用户感到困惑。许多人将这个符号与“医疗”“急救”和“电池”混淆。

我们还发现,用户主要会将箭头和设备等图像与安装联系起来。根据这些结论,我们在 Chrome 中运行了 A/B/C 测试,将现有设计与两种替代方案进行比较。我们找到指向下方的箭头,指向一个监视器,其性能明显优于另外两个监视器。我们还发现,使用以下新图标时,安装界面的关闭次数有所减少。

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

结果就是您现在看到的设计,如网站所示,PWA 的安装率翻了一番以上。我们还添加了这个图标以及一个相当于 Material Design 图标集的移动版图标,让社区能够使用我们认为最具吸引力的图标。

当然,单个图标不会改变世界,这就需要我们继续开发下一项功能。

产品内的快捷帮助

产品内帮助是一个蓝色气泡提示,可根据特定条件帮助用户了解他们可能感兴趣的新功能。我们决定发布此设计模式,以告知用户有关安装功能的信息,并进一步支持全新图标的重新设计。

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

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

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

更丰富的安装界面

大多数用户的安装范式是应用商店。自 21 世纪中期以来,我们告诉用户,每当他们安装应用时,他们都会看到说明、屏幕截图和其他元数据,以帮助他们判断应用是否符合其需求。

使用 PWA 时,在用户决定安装 Web 应用后,我们显示的界面相对而言很少。因此,该团队决定探索更丰富的安装体验,既能为用户提供 Web 应用的背景信息,又能让开发者庆祝 PWA 与原生体验不相上下的效果。

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

今年早些时候,我们在 Android 版 Chrome 上推出了扩展的安装界面 Richer Install,以便开发者向清单中添加屏幕截图。开发者还可以添加说明,但这并非强制性要求。得益于这个新的界面,我们发现某些 PWA 的安装率翻了一番,这表明,如果我们提供更多上下文和更丰富的体验,用户会更放心地安装 Web 应用。此界面的桌面版本目前正在开发中。

总结

在过去两年中,该团队探索并试验了 Chrome 中的新功能,这些功能支持 PWA 开发者并赋能,并帮助用户了解网络体验的好处。我们仍有大量工作可以做,但我们可以共同改善和丰富用户的生活,并进一步支持开放网络。