权限用户体验

Matt Gaunt

获取 PushSubscription 并将其保存到我们的服务器后的自然步骤是触发推送消息,但我明确忽略了一点。请求用户授予权限以向其发送推送消息时的用户体验。

遗憾的是,很少有网站会考虑如何请求用户授予权限,所以我们简单地看一下用户体验的优劣。

已经出现几种常见的模式,应该引导您确定最适合您的用户和使用场景的模式。

在益处明显时,请用户订阅推送。

例如,用户刚刚在网店购买了商品,并完成了结账流程。然后,网站便可提供有关传送状态的最新动态。

这种方法适用于多种情况:

  • 特定商品缺货,您希望在新商品有货时收到通知吗?
  • 此重大新闻报道将定期更新,您是否愿意在这篇报道的进展时收到通知?
  • 您是出价最高者,是否希望在出价过低时收到通知?

这些都是用户在您的服务上投入的地方,并且对于他们启用推送通知有明确的价值主张。

Owen Campbell-Moore 的推荐良好用户体验示例。

我们创建了一个虚构的航空公司网站的模拟来演示这种方法。

用户预订航班后,系统会询问用户是否想要接收航班延误通知。

请注意,这是网站的自定义界面。

Owen Campbell-Moore 关于权限提示良好用户体验的示例。

Owen 的演示中还有一项值得注意的一点是,如果用户点击以启用通知,网站会在显示权限提示时在整个页面上添加一个半透明叠加层。这会吸引用户注意权限提示。

作为此示例的替代方案是,请求权限带来的糟糕的用户体验是在用户登录航空公司的网站后立即请求权限。

Owen Campbell-Moore 的推广不佳用户体验示例。

此方法不会让用户了解为何需要通知或为何通知有用。此权限提示还会禁止用户完成原始任务(即预订航班)。

双重权限

您可能觉得您的网站有明确的推送消息用例,因此希望尽快向用户请求权限。

例如即时通讯和电子邮件客户端。针对新消息或电子邮件显示消息是一种可在各种平台上建立的用户体验。

对于这些类别的应用,值得考虑双重权限模式。

首先,显示由您的网站控制的虚假权限提示,其中包含用于允许或忽略权限请求的按钮。如果用户点击“允许”,则请求权限,从而触发实际的浏览器权限提示。

通过这种方法,您可以在 Web 应用中显示自定义权限提示,要求用户启用通知。这样一来,用户就可以选择启用或停用,而不会使您的网站面临被永久屏蔽的风险。如果用户在自定义界面上选择“启用”,则显示实际的权限提示,否则隐藏自定义弹出式窗口并询问其他时间。

就是一个很好的例子。登录后,它们会在其页面顶部显示提示,询问您是否要启用通知。

设置面板

您可以将通知移至设置面板中,让用户能够轻松启用和停用推送消息,而无需让 Web 应用的界面变得杂乱无章。

首次加载页面时,系统不会显示提示。

。 首次加载 Google I/O 网站时,系统不会要求您执行任何操作,而是留待用户探索网站。

Google IO 大会 Web 应用中的推送消息设置面板。

几次访问后,点击右侧的菜单项即会显示一个设置面板,用户可通过该面板设置和管理通知。

显示权限提示的 Google IO 大会 Web 应用。

点击复选框将显示权限提示。没有隐性费用。

授予权限后,系统会勾选该复选框,用户就可以开始使用了。此界面的优势在于,用户可以从网站上的一个位置启用和停用通知。

被动方式

向用户提供推送的最简单方法之一是使用一个按钮或切换开关,用于在页面上与整个网站一致的位置启用 / 停用推送消息。

这不会促使用户启用推送通知,但可让用户轻松可靠地选择接受或停止与您的网站互动。对于像博客这样可能拥有一些常客且跳出率非常高的网站,这是一个不错的选择,因为它只面向常客,不会让驾车的访问者感到厌烦。

在我的个人网站上,我在页脚中添加了用于推送消息功能的切换开关。

页脚中的 Gauntface.com 推送通知切换开关示例

这基本上不会妨碍用户浏览,但对于想要了解最新动态的读者来说,它应该能引起他们的注意。一次性访问者完全不受影响。

如果用户订阅推送消息,切换开关的状态会更改并在整个网站上保持状态。

启用了通知的 Gauntface.com 示例

糟糕的用户体验

以上是我在网上发现的一些常见做法。遗憾的是,有一种非常常见的错误做法

最糟糕的做法是在用户到达您的网站后立即向其显示权限对话框。

他们对为何请求授权一无所知,甚至都不知道您的网站的用途、功能或功能。出于失望考虑,此时屏蔽权限并不罕见,这个弹出式窗口妨碍了用户执行的操作。

请注意,如果用户阻止权限请求,您的 Web 应用将无法再次请求权限。若要在被屏蔽后获得权限,用户必须在浏览器界面中更改权限,这样做对用户来说并不容易、显而易见或有趣。

无论如何,不要在用户打开您的网站后立即请求权限,不妨考虑采用能够诱使用户授予权限的其他界面或方法。

提供出路

除了考虑订阅用户推送消息的用户体验之外,考虑用户应如何退订或选择停用推送消息。

越来越多的网站在页面加载后立即请求权限,但却未提供用于停用推送通知的界面。

您的网站应向用户说明如何停用推送功能。否则,用户可能会选择核对选项并永久屏蔽权限。

下一步做什么

Codelab