Google Mobile UX Marathon 雙週心得（三）
A/B 測試、Google Optimize、Progressive Web App
Google Mobile UX Marathon 是什麼？
這陣子 Google 推出了為期六週的 Mobile UX Marathon，論壇內容是關於行動裝置/手機版網頁的最佳應用，包含 UX 設計、轉換率最佳化、Google Analytics、最新的網頁科技和 A/B 測試的技巧等。
每週有場一小時的直播論壇，也有幾部長約二十分鐘的 Youtube 影片當作事前作業。此活動完全免費，沒申請也可以觀看所有的影片，申不申請的差別只在於會不會收到相關消息的信件而已。
在看完事前影片之後可以提交問題，Live 的講者會挑問題回答；直播論壇之後有申請參加的人也會收到問卷可以進行意見回饋。
A/B 測試
相信任何數據驅動（data-driven）的企業都對 A/B 測試很熟悉也了解其重要性 — 改建網站的時候若缺少 A/B 測試，有 70% 的機率對利潤不會產生任何影響，甚至造成負面影響。
講者提到他們將 A/B 測試分成三種：
- A/B/n 測試
只更換一個元件（例如比較藍色、紅色、綠色的按鍵） - 分頁測試（Split/Redirect Testing）
整個網頁架構不一樣，不同的 url、不同的使用者經驗，主要可以用來測試品牌活動（campaign） - 多變量測試（Multivariant Testing）
同時測試多個元件，建議是有足夠且穩定的流量再使用這種方法
雖然 A/B 測試的重要性顯而易見，講者認為盲目地執行 A/B 測試沒有意義，一定要事先建立假說，再利用測試去驗證該假說是否正確。那麼，我們有可能更容易猜到結果或是做出更精準的假說嗎？
有！講者提到一個例子，假如要測試一個綠色的頁面，主要按鍵應該是藍色還是橘色比較好，由於在色環上橘色位於主色調的對角，而藍色則位於相近且屬於冷色調的位置，可以將假說預設為橘色將比藍色更搶眼。
講者提供了建立假說的框架：
- If 如果：更動、加入、移除某個元件會產出某個你偏好的成果
- Then 然後：預測成果（例如表單完成率會增加、放入購物車率會增加）
- Due to 因為：將事先做的值化、量化數據拿來支持你所做的預測成果
建立假說的原由可以是使用者資料、Google Analytics 的資料或是個人直覺都可以。
Google Optimize
手把手 Google Optimize 教學
- 創造測試頁面
Google Optimize 中的 Visual Editor 功能讓操作人員自己擔任設計師兼工程師，直接畫出出試驗版頁面之後就可以分享給使用者進行測試。 - 定義指標
操作人員可以直接複製 Google Analytics 中既有的指標，Google Optimize 也有提供專門為最佳化所定的指標，供操作人員選擇。 - 設定發放時間與目標受眾
跟上個步驟一樣，操作人員可以選擇既有的 Google Analytics 標的。在決定目標受眾時有幾個值得納入考慮的因素，例如：行為（新、舊使用者）、地點（城市、地區、國家）、科技（瀏覽器、OS、行動裝置）等。
使用 Google Optimize 的好處
由於行銷、轉換團隊通常比工程團隊跑得更前面，Google Optimize 做測試不需要透過工程團隊去寫各種不同版本的頁面，所以行銷和轉換團隊可以自己做、自己測，快速地得到研究結果去佐證哪個版本表現最好，進而訂定產品的走向。
還有，講者強調他們不需要太多流量就可以進行測量，這牽涉到 Google Optimize 採用的貝式推論統計方式，簡單來說就是利用已經存在的數據（稱為 prior），對新的數據做更精確的假設。
頻率論（Frequentist Inference） vs. 貝式推論（Bayesian inference）
頻率論是目前主流的統計方法，貝式推論則是 Google Optimize 採取的方式。舉例說明兩者的差異 — 如果你的手機不見了，頻率論者會在屋子裡一個一個房間找，而貝式推論者則會從上次掉手機的地方開始找。Google Optimize 運用貝式推論的方式
1. 測量每個變數轉換率的一致性
2. 測量每個變數打敗原樣本的機率
3. 算出任何一個變數成為最佳解的機率
4. 運用這些機率進行預測
Progressive Web App 漸進式網頁應用程式
PWA 是 Google 近幾年推出的技術，可以建造出長得很像原生 app 的 web app，以下是它的幾個特色：
- 加速手機頁面 Accelerated Mobile Pages, AMP
AMP 讓網頁讀取更流暢、迅速，速度變快也就提升了使用者體驗，造就 49% 的搜索轉換率（search-to-conversion rate）增長。同時，因為 AMP 的首要目的就是讓頁面保持簡潔，工程師的負擔也變輕了。 - 結帳 Payment Solution
優良的結帳體驗應該要提供快速結帳功能（例如 Google Pay、Apple Pay），當使用者曾經輸入過信用卡資訊就應該提供自動建議與自動完成（Autocomplete）的選項。 - 可安裝 Installable
能夠將體驗安裝到桌面上。以 PWA 為例，使用者能在網頁上看到「加到桌面」的通知，講者特別提到千萬不要在使用者一點進網站時就跳出許可通知，最好在流程後期再詢問使用者要不要「加到桌面」，並且要強調使用者如果「加到桌面」可以得到什麼好處。 - 通知 Notifications
通知是讓使用者更容易返回體驗的路徑，但一定要給使用者控制權，並永遠提供脈絡。跟上一點一樣，千萬不要在使用者一點進網站時就跳出許可通知，免得造成負面的第一印象，最好等到他們了解網頁的價值後再提。一樣要強調使用者可以從開啟通知得到什麼，這時可以想想產品的價值主張。 - 身份驗證 Authentication
產品最常見使用者離開的原因之一就是忘記密碼，所以產品應該盡量減少登錄的難度，並且利用社群登錄（例如：使用 Facebook 登入、使用 Google 登入）。
PWA 與原生 App 可以並存
所有網頁可以做到的，PWA 也可以，畢竟 PWA 的本質還是網頁，所以 SEO 的操作跟現行的方式是一樣的。
延伸閱讀：如何讓冗長頁面「更好用」 — SEO、SEM 與網頁設計PWA 和原生 app 是可以並存的，對於數據傳輸量不夠的新興市場而言，PWA 可能比原生 app 更容易入門，因為下載 PWA 跟下載一整個 app 相比，所需數據門檻低多了。
PWA 可以是給潛在使用者當試吃品的角色，讓他們體驗一點點這個 app 的核心功能，如果喜歡的話就可以進一步下載整個原生 app 了。
PWA 的 UX 最佳實例
身為設計師，最想知道的當然還是這個新技術可以帶來什麼全新的體驗，以及運用此技術的最佳應用囉！
- 創造更優質的離線體驗
當使用者在離線狀態打開網頁時，通常都是看到小恐龍、什麼都不能做，但 PWA 可以預先存取跟使用者高度相關的資料，例如個人檔案、我的最愛等，讓使用者就算沒有網路也可以完成一些 use case。 - 預先載入下一頁
在搜尋結果出現時，預先讀取前五筆產品資料頁面，因為使用者點入前五筆資料的機率較高，這樣一來使用者點開時就可以看到早已載好的頁面，一點都不用等。 - Don’t make me wait
頁面轉換時不可以讓使用者感到滯留，最佳解法是先把一些可預存的資料顯示出來，次佳的方法是把架構描出來或是加上 spinner，最糟的體驗當然就是全然的空白、毫無回饋。 - 做個好按鍵
可點擊的地方應該要給使用者立即的回饋，例如按下的陰影、顏色轉換。但是當使用者滑動頁面時，手指就算點到按鍵，也不應該有回饋，甚至讓使用者誤入頁面（這真的超惱人）。
講者很可愛地提到 PWA 並不是萬能藥 — 「你也是很有可能創造很糟糕的 PWA 體驗。」
當使用者操作你的 PWA 時，由於 entry point 是使用者手機桌面，你的競爭對手是所有他們用過最好的原生 app 體驗，如果你的 PWA 體驗比不上 Sportify、Airbnb、Google Map 等常見的 app，使用者刪掉 PWA 的機率自然會變高，畢竟誰想留一個不好用的「假 app」在手機裡佔容量。
身為設計師，在建造 PWA 時需要有心態上的轉變（mindset shift），畢竟 PWA 跟一般的網頁或 app 都不太一樣，要注意使用者體驗需求的改變，重新繪製產品使用者旅程，列出 PWA 在旅程中的角色。
結業心得
六週的講座終於結束了！這段時間學到了很多 Google 出品工具的皮毛，他們介紹了 Design Sprint、Google Analytics、Google Optimize、Progressive Web App，簡直是 Google 的產品推銷大會😂
再來是講者舉的例子都跟電商比較相關，所以我的感覺還是跟首篇一樣 — 比起 UX 設計師，這些工具其實更適合 PM 或行銷人去深入瞭解，或許更有收穫。
不過話說回來很巧的是，在 Google Mobile UX Marathon 這一套講座結束之後，我們公司就接到一個大型電商的案子，所以我剛好可以運用這些新學到、熱騰騰的知識，將最佳應用囊括在設計中，提供更周到的互動體驗。
所以說，持續學習真的能讓「機會是留給準備好的人」這句話應驗呢！
首篇：Google Mobile UX Marathon 雙週心得（一）
前篇：Google Mobile UX Marathon 雙週心得（二）延伸閱讀：Google 設計師的內心話 — 關於時間管理、團隊合作與自我認同
如果喜歡這篇文章，請幫我拍手 1-10 下。
如果喜歡閱讀關於 UX 設計師學習心得的文章，請幫我拍手 10-30 下。
如果單純喜歡我的文字，希望看到更多的話，請幫我大力拍手 30-50 下。也請記得 Follow 我 Jasmine Lin 或是數位產品設計Medium文章平台 As A Product Designer，讓我們與你分享更多好文章 😊更歡迎你在文章底下留言，我很樂意也很期待跟你討論或聊天！
