《Web 推送通知》系列翻譯 | 第四篇:請求許可權的互動

閱文前端團隊發表於2019-02-28

原文地址:permission-ux

譯文地址:請求許可權的互動

譯者:楊芯芯

校對者:張卓劉鵬

獲得 PushSubscription 並將其儲存到我們的伺服器之後,就可以觸發推送訊息了,但是有一件事我之前一筆帶過了,那就是向使用者請求許可權時的使用者體驗。

令人遺憾的是,很少有網站會考慮他們應該如何向使用者請求許可權,所以讓我們簡單地看看好的和不好的使用者體驗。

常見模式

現有的一些常見模式可以指導並幫助你們決定哪種做法最適合你們的使用者和需求。

體現價值

在好處顯而易見時才請求使用者訂閱推送。

舉個例子,一個使用者剛好在網上商店買了東西而且完成了付款流程。這時網站就能提供之後的物流狀態更新。

此處還有一系列適用的場景:

  • 這種特定商品已經賣完了,您要不要來個到貨通知?
  • 這個驚天大新聞會持續更新,您要不要訂閱一下?
  • 您目前是出價最高的人,是否需要在有人出價更高的時候通知您?

這些都是使用者投資你的服務的要點,啟用推送通知對他們來說有清晰的價值體現。

Owen Campbell-Moore 建立了一個虛擬的航空公司網站演示了這種方法。

在使用者預訂好一個航班之後,它會詢問使用者是否需要提供通知來提示可能的延誤。

Owen Campbell-Moore 的例子:優秀的推送交

請注意,這是網站自定義的使用者介面。

這個 demo 的另一個優點是,假如使用者點選啟用通知,該網站會在顯示許可權提示時,在整個頁面上新增半透明層,從而讓使用者注意到許可權提示。

Owen Campbell-Moore 的例子:優秀的許可權彈窗互動

與之相對的,即較差的使用者互動,是在使用者開啟航空公司網站時立刻就請求許可權。

Owen Campbell-Moore 的例子:不推薦的推送互動

這種方法沒有告訴使用者為什麼他需要通知,或是通知對他是否有用。這種方法也會阻礙使用者達成其原有的目標(例如,預訂一張機票)。

雙重許可權

你也許覺得你的網站的推送需求十分明確,因此可以立即向使用者索要許可權。

例如說即時通訊軟體或是郵件客戶端,在各個平臺顯示資訊或者郵件都是常見的使用者體驗。

對於這類軟體,則更應考慮雙重許可權模式。

首先顯示一個假的許可權提示,這個提示由網站自己控制,由兩個按鈕組成,分別讓使用者允許或無視許可權申請。如果使用者點選了允許按鈕,就會觸發瀏覽器的許可權提示。

通過這個方法,你可以在網站上展示一個自定義的彈窗來請求使用者開啟通知許可權,無論使用者現在開啟還是不開啟通知許可權,你的網站都不會有被永久遮蔽的風險。當使用者在自定義彈窗中選擇了啟用通知,你就可以展示真正的許可權請求彈窗,反之,你可以隱藏自定義彈窗然後在其他時機展示。

Slack 就是一個很好的例子。一旦使用者登入,他們就會在頁面頂部展示一個彈窗,去請求使用者啟用通知。

設定皮膚

你可以將通知功能放在設定皮膚中,讓使用者可以輕鬆地啟用或關閉推送,也能夠避免頁面 UI 被打亂。

Google I/O's 2016 網頁就是一個很好的例子. 當使用者首次載入網站時,他們並不向使用者請求任何許可權,使用者可以自由地探索頁面。

首次載入頁面,無彈窗,使用者可以將注意力集中在 Google IO

幾次訪問後,單擊右側的選單項會顯示一個設定皮膚,允許使用者設定和管理通知。

Google IO 網頁上的推送訊息設定皮膚

單擊核取方塊將顯示許可權彈窗,沒有任何隱藏的驚喜。

Google IO 網頁顯示的許可權彈窗

使用者只要選中核取方塊,授予許可權即可。這個使用者介面的優點在於使用者可以在頁面的固定位置啟用或關閉通知。

被動方法

向使用者推送訊息的最簡單的方法之一,是在頁面的固定位置——同時貫穿全站的位置,放置一個按鈕或開關,讓使用者可以隨時啟用或關閉通知。

這不會促使使用者啟用推送通知,但為使用者提供了一種可靠且簡單的方式與網站互動。對於擁有常規讀者以及高跳出率的部落格網站而言,這是一個不二選擇,因為它針對的是常規讀者,並且不會打擾到路過的新使用者。

我的個人網站的頁尾就有這樣一個開啟推送的開關。

例子:Gauntface.com 頁尾上的推送開關

這種方法相當不錯,對常規使用者來說,想要獲取更新的使用者能充分地注意到它。一次性訪問者則完全不受影響。

如果使用者訂閱了推送訊息,開關的狀態就會在全站更改,並保持開啟。

例子:Gauntface.com 開啟通知的樣式

不好的互動

這些是我在網上注意到的一些常見做法,然而並不是一些好的嘗試。

最差的方法就是在使用者進入網站時立即展示許可權對話方塊。

對於收到的許可權提示,使用者沒有任何心理準備。他們可能甚至都不知道你的網站是做什麼的,或者提供了什麼。他們在此時阻止授權並不罕見,因為這個彈窗阻礙了他們想做的事情。

記住,如果使用者阻止了你的許可權請求,你的網站就再也無法請求通知許可權了。要在被阻止後獲得許可權,使用者需要在瀏覽器中修改許可權,這對使用者來說並不容易、明顯或有趣。

無論如何,不要在使用者一開啟頁面時就請求許可權。可以考慮其他的使用者介面或方法,來激勵使用者授予許可權。

提供退路

除了考慮使用者訂閱推送的互動外,請務必考慮使用者要取消訂閱或推送訊息的情況。

令人震驚的是,依然有很多網站在使用者進入頁面時立即請求許可權,並且不提供禁用推送的使用者介面。

你的網站應該向使用者說明如何禁用推送。否則使用者可能會採取極端的方案——永久禁用推送許可權。

更多分享,請關注YFE:

《Web 推送通知》系列翻譯 | 第四篇:請求許可權的互動

上一篇:《Web 推送通知》系列翻譯 | 第三篇:訂閱一個使用者

下一篇:《Web 推送通知》系列翻譯 | 第五篇:使用 Web 推送庫傳送訊息 && 第六篇:Web 推送協議

相關文章