權限使用者體驗

Matt Gaunt

取得 PushSubscription 並儲存我們的伺服器後,自然的步驟是觸發推送訊息,但有一件事我特別標示出來。當使用者要求取得傳送推送訊息的權限時,使用者體驗。

很遺憾,極少數網站會考量使用者如何要求取得權限,因此讓我們簡單說明使用者體驗的優缺點。

這裡有幾種常見的模式應可做為指引,有助您決定哪些模式最適合您的使用者和用途。

在明顯有利之處時請使用者選擇訂閱。

例如,使用者剛在網路商店中購買商品,然後完成結帳流程。然後提供配送狀態的最新資訊。

有許多情況都適用:

  • 你想在某個特定商品缺貨時接收通知嗎?
  • 這則即時新聞報導會定期更新,想在報導內容推出時收到通知嗎?
  • 您是出價最高的出價方。您希望在超越出價時接收通知嗎?

這些都是使用者投資您的服務點,有明確的價值主張可以啟用推播通知。

Owen Campbell-Moore 的例子是提升推送體驗。

建立一個模擬航空公司網站的模擬畫面 來示範這種方法

使用者預訂航班後,系統會詢問使用者是否想接收航班延誤通知。

請注意,這是網站提供的自訂使用者介面。

Owen Campbell-Moore 範例,顯示權限提示提供良好的使用者體驗。

Owen 的示範效果也很好,如果使用者點選啟用通知功能,當網站顯示權限提示時,網站就會在整個頁面上加上半透明重疊元素。這麼做可讓使用者註意權限提示。

以要求權限的不良使用者體驗為例,使用者抵達航空公司網站後,應立即要求權限。

Owen Campbell-Moore 的例子,說明推送應用程式時的使用者體驗不佳。

這個方法不用提供背景資訊,說明為何需要通知,或對使用者的用處為何。系統也會禁止使用者執行此權限提示,完成原始工作 (例如預訂航班)。

雙重權限

您可能會覺得網站有明確的發送訊息的用途,因此希望盡快要求使用者授予權限。

提供即時通訊和電子郵件用戶端的實用工具。顯示新訊息或電子郵件的訊息,有助於在多種平台上建立良好的使用者體驗。

針對這類應用程式,建議您考慮雙權限模式。

首先,顯示由網站控制的假權限提示,其中包含允許或忽略權限要求的按鈕。如果使用者點選「允許」,要求權限,就會觸發真實的瀏覽器權限提示。

使用這個方法時,您會在網頁應用程式中顯示自訂權限提示,以要求使用者啟用通知。如此一來,使用者就可以選擇啟用或停用網站,避免網站遭到永久封鎖。如果使用者選取在自訂 UI 上啟用,則顯示實際權限提示;否則請隱藏自訂彈出式視窗,並再詢問其他時間。

像 . 在登入詢問是否要啟用通知功能後,他們的頁面頂端就會顯示提示。

設定面板

您可以將通知移至設定面板,讓使用者輕鬆啟用和停用推送訊息,而無需清理網頁應用程式的 UI。

初次載入頁面時,系統不會顯示提示,

其中一種例子便是 . 首次載入 Google I/O 網站時,我們無需執行任何操作,使用者將離開該網站來探索該網站。

Google IO 網頁應用程式上的設定面板,用於推送訊息。

造訪幾次後,按一下右側的選單項目會顯示設定面板,讓使用者設定及管理通知。

Google IO 的網頁應用程式顯示權限提示。

勾選核取方塊即可顯示權限提示。沒有隱藏的驚喜。

授予權限後,請勾選該核取方塊,使用者便可開始使用。這個 UI 的好處是,使用者可以在網站上的一個位置啟用或停用通知。

被動方法

向使用者提供推送訊息最簡單的方法之一,就是提供按鈕或切換開關,以便啟用 / 停用網頁上在整個網站上固定位置的推送訊息。

這不會吸引使用者啟用推播通知,但可以透過可靠又可靠的方式,讓使用者選擇加入或退出您的網站。以網誌這類網站時,如果哪些網站擁有忠實觀眾,跳出率也很高,則適合以一般觀眾為目標對象,避免干擾。

在個人網站上,頁尾有用來推送訊息的切換按鈕。

頁尾 Gauntface.com 推播通知切換鈕範例

實際做法似乎是不夠的,但對一般訪客來說,應該能吸引想接收最新資訊的讀者投入足夠的注意力。只造訪一次的訪客完全不會受到影響

如果使用者訂閱推送訊息,切換開關的狀態會變更並維持整個網站的狀態。

啟用通知功能的 Gauntface.com 範例

使用者體驗不佳

這些是我在網路上觀察到的一些常見做法。可惜的是 這是很常見的不當做法

最糟糕的做法是,在使用者造訪網站時立即顯示權限對話方塊。

他們完全沒有背景資訊,說明為何需要授予權限,甚至可能不知道您的網站內容、功能或提供的服務。如果在不知所措的情況下封鎖權限,這個彈出式視窗並不常見,而且會妨礙他們嘗試執行的作業。

提醒您,如果使用者封鎖權限要求,您的網頁應用程式將無法再次要求權限。如要在封鎖後取得權限,使用者必須在瀏覽器 UI 中變更權限,這樣對使用者來說不僅顯而易見或有趣,

無論如何,請勿在使用者開啟您的網站後立即提出權限要求,請考慮使用其他能獎勵使用者授予權限的 UI 或方法。

提供輸出

除了考慮透過使用者體驗來訂閱使用者以進行推送之外,考量使用者該如何取消訂閱或選擇退出推送訊息功能。

至於在網頁載入後,又沒有提供用來停用推播通知的 UI 的網站數量,會令人感到厭惡。

您的網站必須向使用者說明該如何停用推送功能。否則使用者可能會選擇採用核子選項,並永久封鎖權限。

後續步驟

程式碼研究室