漸進式網頁應用程式如何推動業務成長

Sébastien Fourault
Sébastien Fourault

因此,漸進式網頁應用程式正處於許多公司的藍圖,希望藉此改善網站,並滿足使用者的新期望。如同許多技術,PWA 提出的問題是:客戶想要什麼?這會對我的業務造成多少成長,在技術上可行的是什麼?

找出利害關係人。
找出相關人員。

為規劃數位策略,產品經理和行銷長是每項功能對業務影響的共同擁有者、技術長會評估技術的可行性和可靠性,使用者體驗研究員會驗證某項功能是否解答真正的客戶問題。

本文旨在協助您回答這三個問題,並形塑您的 PWA 專案。您將從客戶需求開始,將其轉換成 PWA 功能,並著重於評估各項功能對業務的影響。

PWA 能滿足客戶需求

Google 做出產品時,很喜歡遵守的規定,那就是「以使用者為先,一切水到渠成」。考量使用者優先:我的客戶需求為何?PWA 能如何滿足他們的需求?

瞭解客戶需求
瞭解客戶需求

我們進行使用者研究時,會發現一些有趣的模式:

根據這些觀察結果,我們發現客戶偏好快速、可安裝、可靠且引人入勝 (F.I.R.E.) 的體驗。

PWA 採用新型網路功能

PWA 提供一系列最佳做法和新型 Web API,旨在讓網站進入快速、可安裝、可靠且引人入勝,進而滿足客戶的需求。

例如,使用 Service Worker 來快取資源,並執行預測預先擷取,可以讓網站速度更快、更可靠。將網站設為可安裝,客戶就能直接在主畫面或應用程式啟動器中輕鬆存取網站。網路推播通知等 API 可讓您以個人化內容,輕鬆吸引使用者再次互動,進而培養忠誠度。

運用網路功能改善使用者體驗。
運用網頁功能改善使用者體驗。

瞭解業務影響

視活動而定,業務成功的定義可能有很多種:

  • 使用者花較多時間使用服務
  • 降低待開發客戶跳出率
  • 轉換率提高
  • 更多回訪者

多數 PWA 專案能提高行動裝置轉換率。如需更多資訊,請參閱眾多 PWA 個案研究。建議您根據自己的目標,優先採用 PWA 中對您的業務更適用的層面,但當然可以。PWA 功能可視需要個別挑選及啟動。

接著,我們會評估這些重要 F.I.R.E 功能對業務的影響。

提升網站載入速度後對業務的影響

最近一份 Deloitte Digital 的研究顯示,網頁速度對業務指標有很大的影響。

您可以藉由許多方式改善網站速度,讓所有使用者享有更關鍵的使用者歷程。如果不知道該從何處著手,請參閱「Fast」部分,然後使用 Lighthouse 優先修正最重要的項目。

進行速度最佳化時,請使用合適的工具和指標來定期評估網站速度,以便監控進度。舉例來說,您可以使用 Lighthouse 評估指標、修正「良好」網站體驗核心指標分數等明確目標,以及將效能預算納入建構程序。藉助每日測量結果和「速度價值」方法,您可以找出提升速度變化的影響,並計算工作產生的額外收益。

評估速度的價值,並將其與轉換建立關聯。
評估速度的價值,並將其與轉換建立關聯。

Ebay 在 2019 年加速達成公司目標。還運用效能預算、關鍵路徑最佳化和預測預先擷取等技術。結果發現,搜尋網頁載入時間每加快 100 毫秒,就增加了 0.5%。

載入時間縮短 100 毫秒,讓 eBay 加入購物車的次數增加了 0.5%。
載入時間縮短 100 毫秒,讓 eBay 將商品加入購物車的次數增加 0.5%。

可安裝的網站對業務的影響

為什麼您想讓使用者安裝您的 PWA?為方便您再次瀏覽網站如果 Android 應用程式安裝行為會新增至少三個步驟 (重新導向至 Play 商店、下載應用程式、啟動應用程式),只要按一下滑鼠即可順利完成 PWA 安裝作業,使用者不必離開目前的轉換漏斗。

安裝體驗應該會無縫接軌。
可以順利進行安裝體驗。

應用程式安裝完畢後,使用者只要使用主畫面上的圖示即可直接啟動應用程式,或是在切換應用程式時顯示在應用程式匣中查看,或是透過應用程式搜尋結果找到該應用程式。這就是所謂的動態「探索-啟動切換」;想讓 PWA 可供安裝,是解鎖存取權的關鍵。

使用者除了可透過熟悉的探索功能,也能在裝置上啟動介面,PWA 的啟動方式也與平台專屬應用程式完全相同:獨立體驗,與瀏覽器有所區隔。此外,它也能受益於作業系統層級的裝置服務,例如應用程式切換器和設定。

安裝 PWA 的使用者可能是參與度最高的使用者,其參與度指標也比一般訪客更高,包括回訪次數增加、網站停留時間較長,以及轉換率較高的使用者,這通常與行動裝置上的平台專屬應用程式使用者相同。

如要讓 PWA 可供安裝,應用程式必須符合基本條件。一旦符合這些條件,您就可以在電腦和行動裝置 (包括 iOS) 上的使用者體驗中宣傳安裝

可以在任何地方安裝 PWA。
PWA 可以在任何地方安裝。

開始推廣 PWA 的安裝程序後,您應該評估有多少使用者正在安裝 PWA,以及他們使用 PWA 的方式。

如要盡可能提高安裝網站的使用者人數,您可能會想要測試不同的宣傳訊息 (例如「一秒內安裝」或「新增可追蹤訂單的捷徑」)、不同的刊登位置 (標頭橫幅、動態饋給內),然後在安裝漏斗的不同步驟 (在造訪的第二個網頁或預訂之後) 提出建議。

如要瞭解使用者離開何處,以及如何提升留存率,您可以透過下列四種方法評估安裝漏斗:

  • 符合安裝條件的使用者人數
  • 點按安裝提示的使用者人數
  • 同時接受及拒絕安裝提示的使用者人數
  • 成功安裝的使用者人數

您可以向所有使用者宣傳您安裝的 PWA,也可以針對一小群使用者進行測試,採取更謹慎的做法。

數天或數週應能為您提供足夠資料,評估對業務的影響。使用者透過已安裝的捷徑出現什麼行為?客戶是否更常互動,轉換是否更高?

如要區隔已安裝 PWA 的使用者,請追蹤 appinstalled 事件,並使用 JavaScript 檢查使用者是否為獨立模式 (代表使用者使用了已安裝 PWA)。然後用這些變數做為 Analytics (分析) 追蹤的變數或維度。

評估安裝的價值。
評估安裝的價值。

Weekendesk 個案研究很有趣。為了提高使用者安裝 PWA 的機會,他們會在造訪的第二個網頁提升安裝品質。從主畫面啟動 PWA 的使用者,透過 PWA 預訂 PWA 的機率是一般人的兩倍!

已安裝使用者的轉換率提高 2.5 倍。
已安裝使用者的轉換率提高 2.5 倍。

安裝是吸引使用者回訪網站的絕佳方式,提升客戶忠誠度。你也可以考慮為進階使用者 提供個人化體驗

即使您的應用程式含有特定平台,使用者可能還是會覺得不想安裝,或是不需要安裝。這些未參與的使用者可能會覺得 PWA 適合他們,因為他們通常覺得 PWA 較輕微,安裝起來也更順暢。

PWA 可以觸及一般使用者。
PWA 可以觸及未參與的使用者。

可靠網站的業務影響

Chrome 恐龍遊戲 (玩家可在離線狀態下) 每月玩遊戲超過 2.7 億次。這一數據顯示,網路可靠性是 PWA 的重要使用機會,特別是在網路不可靠或行動數據成本高昂的市場,例如印度、巴西、墨西哥或印尼。

從應用程式商店安裝的應用程式啟動時,無論使用者是否連上網際網路,都會希望應用程式能夠開啟。「漸進式網頁應用程式」也不該與眾不同。

請至少提供簡單的離線頁面,告知使用者應用程式在沒有網路連線的情況下無法使用。接著,建議您提供離線時可執行的功能,進一步打造更棒的使用體驗。舉例來說,您可以讓使用者存取票券或登機證、離線願望清單、客服中心聯絡資訊、文章或食譜等使用者最近查看過的文章。

提供協助,即使處於離線狀態也能使用。
提供實用協助,即使離線也能使用。

當您實作可靠的使用者體驗後,建議您評估成效:有多少使用者離線、位於哪些地理區域,以及網路恢復後,他們是否在網站上停留?Analytics (分析) 可讓您掌握使用者通常離線和線上的情況。這會顯示在網路恢復後,會繼續瀏覽網站的使用者人數。

讓 Trivago 的使用者回訪後繼續瀏覽網路的使用者增加了 67%。
Trivago 發現後,繼續上網瀏覽的使用者增加了 67%。

Trivago 個案研究說明這對您的業務目標有何影響。如果使用者的工作階段因離線期間而中斷 (約 3% 的使用者),回訪網站的使用者中就有 67% 會繼續瀏覽網站。

引人入勝的網站對業務的影響

網路推播通知可讓使用者選擇根據自己需要或關注的網站及時取得最新消息,也有助您運用自訂的相關內容,有效吸引他們的目光。

不過請小心。在使用者首次來到網站時要求訂閱網頁通知,而未暴露相關優勢可能會被視為垃圾內容,並對使用體驗造成負面影響。當系統提示您接收通知時,請務必遵循最佳做法,透過火車誤點、價格追蹤、缺貨商品等相關用途鼓勵客戶接受服務。

技術上來說,由於 Service Worker 的關係,於網路上在背景執行推播通知,而且通常是由用於管理廣告活動 (例如 Firebase) 的系統傳送。這項功能可以為行動裝置 (Android) 和電腦使用者帶來極大的業務價值。可增加重複造訪,進而增加銷售量和轉換次數。

如要評估推送廣告活動的成效,您必須評估整個漏斗,包括:

  • 有資格接收推播通知的使用者人數
  • 點選自訂通知 UI 提示的使用者人數
  • 授予推播通知權限的使用者人數
  • 接收推播通知的使用者人數
  • 與通知互動的使用者人數
  • 通知帶來的使用者轉換和參與度
評估網頁推播通知的價值。
評估網頁推播通知的價值。

網站推播通知有許多實用的個案研究,例如家樂福將轉換率乘以 4.5,藉此再次與放棄購物車的使用者再次互動。

PWA 中的 P:漸進式啟動,每個功能

PWA 是結合網路規模的新式網站,結合了 Android、iOS 或電腦版應用程式為使用者提供的所有易用功能。這些工具使用一組最佳做法和新型 Web API,可根據業務特性與優先順序獨立實作。

逐步啟動 PWA。
逐步啟動 PWA。

為加快網站翻新作業,並將網站打造成真正的 PWA,我們鼓勵您敏捷靈活地:依功能推出功能。首先,請向使用者研究哪些功能最能為使用者帶來最大價值,然後向設計人員和開發人員提供這些功能,最後別忘了評估 PWA 確切帶來的額外收益。