協助開發人員打造功能強大且可安裝的網頁應用程式

穆斯塔法庫爾杜杜
Mutafa Kurtuldu

簡介

在 2020 年初,行動版和電腦的 Chrome 團隊擬定了一項計畫,希望提高已安裝網頁應用程式的曝光率和參與度。我們的工作使 PWA 安裝量和參與度提高超過 100%。為實現這個目標,我們藉由研究現有功能、進行 A/B 測試實驗和使用者訪談,深入瞭解使用者的觀感和期望。本文將介紹我們如何做到這一點。

統合安裝語言

觸發 PWA 安裝的行動號召在各網站平台上不一致。針對 Android 版 Chrome,我們已做出「新增至主畫面」,但在電腦版平台中,我們將強調「安裝」。造成這種差異的原因是團隊在 2016 年執行的研究,比較了不同字串。該團隊發現,如果只在極少數的情況下在行動裝置上,「新增至主畫面」效果較佳。

2019 年,對分類的進一步研究沒有任何差異,團隊希望統一 PWA 安裝體驗,於是決定在 Android 上將標籤更新為「安裝」。2021 年的進一步研究與語言、「Install」、「Get」和「Download」進行比較,並發現使用者瞭解「Install」是發生的轉換。使用者輕觸標示「Get」的按鈕後,就會前往網站;點選「Download」,系統則會假設檔案最終位於下載資料夾或對等項目中。

瞭解上述所有事項後,我們得出的結論是「Install」標籤最適合 PWA。建議網路平台的開發人員採用「安裝」做為日後偏好的字串。

電腦上的安裝圖示

我們的電腦平台有專屬的設計模式,每當網站載入 PWA 時,Chrome 都會在網址列右側顯示含有圖示和「安裝」標籤的藥丸。之後使用者造訪網站時,系統只會顯示這個圖示。 按一下這個藥丸會觸發電腦版 PWA 的安裝作業。

原始安裝加號圖示。
原始安裝加號圖示。

圖示一開始為加號,部分是因為行動裝置使用的「新增至主畫面」隱喻。但如上所述,我們使用的語言是「Install」。開發人員社群的意見回饋指出 這個圖示令人困惑此外,如果使用者使用縮放功能放大文字,縮放圖示看起來會十分相似,讓使用者更加困惑。

網址列出現縮放和安裝圖示的錯誤。
顯示縮放及安裝圖示的網址列錯誤。

我決定調查使用者的看法,因為大部分意見回饋都屬於普通。我們與使用者體驗研究人員合作進行了一項研究,調查對象為美國和加拿大的 1 萬名使用者。他們對於安裝圖像的瞭解程度,我們測試了五種不同的設計 (包括現有設計),並詢問使用者「安裝」的意義。我們發現目前的圖示 (加號) 對使用者來說非常困惑。許多人誤將符號解為「藥」、「急救」和「電池」。

我們還發現,使用者主要相關的圖像,例如箭頭和安裝應用程式的裝置。根據這些結論,我們在 Chrome 中執行 A/B/C 測試,比較現有設計和兩個替代版本。我們看到了向下的箭頭指向顯示器 其中成效明顯優於另外兩個螢幕此外,這個新圖示也讓安裝 UI 的關閉次數減少。

安裝 Material Design 圖示集中的圖示變化版本。
安裝圖像的變化版本,可從 Material Design 圖示集下載。

結果是您目前看到的設計,它的 PWA 安裝率比網站高出一倍。我們也將這個圖示和行動裝置相當於 Material Design 圖示集,讓社群能夠使用我們找到最引人入勝的圖像。

當然,單一圖示不會改變世界,導致我們進入下一個功能。

產品內說明

「產品內說明」是一個藍色泡泡工具提示,提供使用者根據特定條件可能感興趣的新功能。我們決定推出這個設計模式來告知使用者安裝功能,並進一步支援重新設計圖示。

產品內說明泡泡。
產品內說明工具提示泡泡,向使用者說明各項功能。

當使用者定期造訪網站時,Chrome 會使用「網站參與度」服務。這項資訊可提供使用者與網站的互動情形資訊。只要造訪 chrome://site-engagement/,就能查看您經常互動的網站。我們會根據這些分數判斷使用者是否對某個網站感興趣。如果網站是 PWA,而使用者也參與了互動行為,我們會顯示安裝產品內說明 UI。這表示我們只將重點放在參與度高的使用者,而不是可能會每次造訪網站一次的惱人使用者。

在電腦上使用產品內說明後,PWA 安裝量提升超過 100%,展現集中心力提升網頁應用程式的安裝能力。

更豐富的安裝使用者介面

大多數使用者的安裝模式為商店。自 2000 年代中期以來,我們已向使用者說明,他們安裝應用程式時,都會看到說明、螢幕截圖和其他中繼資料,協助他們判斷應用程式是否符合需求。

透過 PWA,使用者決定安裝網頁應用程式後,我們顯示的使用者介面相對較少。因此,該團隊決定嘗試提供更豐富的安裝體驗,為使用者提供網頁應用程式的背景,同時讓開發人員讚揚與原生體驗相媲美的 PWA。

更豐富的安裝 UI。
更豐富的安裝使用者介面,可收合及展開狀態。

我們在今年稍早推出了更豐富安裝功能,這是 Android 版 Chrome 的擴充安裝使用者介面,可讓開發人員在資訊清單中加入螢幕截圖。開發人員也可以新增說明,此為建議項目,但並非必要。由於這種新的 UI 使得部分 PWA 的安裝率上升了一倍,表示當我們提供更多背景資訊和更豐富的體驗時,使用者就能更放心安裝網頁應用程式。我們仍在開發這個 UI 的電腦版介面。

結語

過去兩年來,該團隊持續探索及嘗試各種 Chrome 新功能,這些新功能可以啟用並驅動 PWA 給開發人員,並協助他們瞭解網路體驗的好處。我們仍有許多工作尚待執行,但會共同改善及充實使用者的生活,並進一步支援開放網路。