濃縮自 150 多個(gè)移動(dòng)項(xiàng)目的 9 個(gè) UX 心得

作者按: 過(guò)去的兩年中我與 150 多個(gè) Web 開(kāi)發(fā)團(tuán)隊(duì)合作，本文是這段時(shí)間觀察總結(jié)出的經(jīng)驗(yàn)與心得。本文中提到的一些工具在之前發(fā)布的《Google 設(shè)計(jì)師分享: 7 個(gè)您需要收藏的設(shè)計(jì)資源》一文中有提及，您可以交叉閱讀進(jìn)行參考。

我于 2016 年加入的 Google 團(tuán)隊(duì)名為 Mobile Transformation Team (移動(dòng)體驗(yàn)改進(jìn)組)。從名字就能看出來(lái)， 這個(gè)團(tuán)隊(duì)有一個(gè)簡(jiǎn)單但非常雄心勃勃的目標(biāo): 讓每個(gè)人的移動(dòng)網(wǎng)絡(luò)體驗(yàn)變得更好。我們專注于幫助中小型企業(yè)改善其移動(dòng)網(wǎng)絡(luò)體驗(yàn)，更具體地說(shuō)，我們相當(dāng)于是 UX 顧問(wèn)，與企業(yè)的 Web 開(kāi)發(fā)團(tuán)隊(duì)合作，并提供有關(guān)如何更好地優(yōu)化性能、可用性和可訪問(wèn)性的建議。

從某個(gè)角度來(lái)講，我們是在為最終用戶代言。

以下是我們?cè)趨⑴c了數(shù)百個(gè)網(wǎng)站項(xiàng)目后總結(jié)出的經(jīng)驗(yàn)、教訓(xùn)和觀察成果:

移動(dòng)用戶非常注重目標(biāo)，并且不怎么耐心。請(qǐng)避免分散用戶的注意力。簡(jiǎn)化您的首頁(yè)和其他登陸頁(yè)面 (如某個(gè)欄目或?qū)^(qū)的根頁(yè)面)。首屏內(nèi)就要出現(xiàn)明確的操作指引 (call-to-action) 及頁(yè)面功能的展示。用戶應(yīng)該能在一瞥之內(nèi)就知道自己在這個(gè)頁(yè)面能做什么，該做什么，從而決定自己是該走還是該留。

△ 從左至右: Warby Parker, Stash Invest, Drizly。請(qǐng)注意兩點(diǎn): 明確的操作指引和功能展示

我一直提出的首要建議是 "少就是多"。這意味著更少的圖像，更少的表單字段，更少的復(fù)雜導(dǎo)航模式，更少的頁(yè)面插件，更少的第三方監(jiān)測(cè)像素*，更少的文本塊，更少的全屏彈出窗口，更少的彈出與被阻止的彈出，更少的用戶點(diǎn)擊次數(shù)……只要是會(huì)分散用戶注意力的，會(huì)延緩他們達(dá)成目標(biāo)的要素，都要盡可能精簡(jiǎn)。

* 第三方監(jiān)測(cè)像素 (3rd party tracking pixel): 在監(jiān)測(cè)頁(yè)面數(shù)據(jù)時(shí)，第三方監(jiān)測(cè)平臺(tái)的常見(jiàn)做法之一就是在頁(yè)面中插入一個(gè) 1 像素見(jiàn)方的透明圖片，并通過(guò)監(jiān)測(cè)該圖片的訪問(wèn)量來(lái)統(tǒng)計(jì)相關(guān)的數(shù)據(jù)。

更快速流暢的移動(dòng)網(wǎng)站擁有更好的用戶參與度，這毫不奇怪。無(wú)數(shù)的案例研究、可用性測(cè)試，以及用戶個(gè)人的使用經(jīng)歷，都非常清楚地表明: 速度會(huì)推動(dòng)轉(zhuǎn)化率。

我們給出三個(gè)能反映用戶真實(shí)體驗(yàn)的核心性能指標(biāo): 初始內(nèi)容渲染 (First Content Paint, FCP)、速度指數(shù) (Speed Index, SI) 和交互反應(yīng)時(shí)間 (Time to Interactive, TTI)。

設(shè)置性能 KPI 并確保團(tuán)隊(duì)對(duì)此負(fù)責(zé)十分重要。當(dāng)您花費(fèi)資源精心設(shè)計(jì)了網(wǎng)站，卻由于忘了壓縮 2MB 的首頁(yè)頭圖而讓進(jìn)來(lái)的用戶流失掉時(shí)，怎一句遺憾了得。更何況您完全可以使用像 Lighthouse 這樣的工具 (如下所示) 來(lái)輕松監(jiān)控這些指標(biāo)。

再次強(qiáng)調(diào)一下我們推薦采用的性能指標(biāo):

• <2s First Content Paint (FCP)

• <3s Speed Index (SI)

• <5s Time to Interactive (TTI)

△ Lighthouse 可以讓您輕松監(jiān)控性能數(shù)據(jù)

在我們看來(lái)，這似乎是不言而喻的。但是，我經(jīng)常會(huì)在詢問(wèn)開(kāi)發(fā)團(tuán)隊(duì) "您上一次與用戶交談是在多久前" 的時(shí)候，遭遇的卻是茫然不知所措的目光。我們作為移動(dòng)用戶體驗(yàn)顧問(wèn)的目標(biāo)不僅僅是提出建議，而是要真正為用戶發(fā)聲。

把自己放在用戶的位置上，試著用用戶的思維在網(wǎng)站上完成任務(wù)，并統(tǒng)計(jì)點(diǎn)擊次數(shù)和完成任務(wù)的耗時(shí)。換位思考能發(fā)現(xiàn)的問(wèn)題會(huì)比您預(yù)想的要多很多。

"數(shù)據(jù)支持設(shè)計(jì)" 并不是什么新鮮事。在確定移動(dòng)項(xiàng)目?jī)?nèi)部的各種優(yōu)先級(jí)后，監(jiān)控移動(dòng)網(wǎng)站的各種 KPI 非常重要，而且 KPI 的設(shè)置往往取決于業(yè)務(wù)本身。

對(duì)于零售商而言，他們需要監(jiān)控平均訂單價(jià)值 (Average Order Value, AOV) 和結(jié)賬跳出率 (結(jié)賬開(kāi)始頁(yè)面的跳出率)。對(duì)于強(qiáng)調(diào)收集銷售線索的公司 (如汽車經(jīng)銷商等)，需要專注監(jiān)控主要的 Call-To-Action 按鈕點(diǎn)擊率，以及成交率 (成功銷售量 / 銷售線索量 * 100%)。如果您擁有的是一個(gè)旅游資訊網(wǎng)站，請(qǐng)關(guān)注回訪會(huì)話 (客戶留存率) 和渠道特定流量 (如: 社交分享數(shù)量是否增加)。

局部的或者輔助的流量也請(qǐng)統(tǒng)計(jì)起來(lái)，例如電子促銷郵件 (eDM) 的打開(kāi) / 轉(zhuǎn)化、文章評(píng)論、用戶評(píng)論 / 評(píng)價(jià)、視頻瀏覽量或社交媒體上的分享量。

我強(qiáng)烈建議您試試 Data Studio，它出自我的一位同事 Damla Cakirca 之手，用于統(tǒng)計(jì)用戶在您網(wǎng)站上的參與度。

• Data Studio

  https://datastudio.google.com/navigation/reporting

與我們合作的大多數(shù)公司的網(wǎng)站速度和 / 或用戶參與度都有顯著提高。然而，在我們離開(kāi)現(xiàn)場(chǎng)后，即顧問(wèn)結(jié)束后的 30-60 天，我們會(huì)看到一些糟糕的執(zhí)行習(xí)慣重新出現(xiàn)，比如頁(yè)面中開(kāi)始出現(xiàn)完全沒(méi)有被調(diào)用過(guò)的 CSS 樣式代碼。如果想要避免這種陷阱，就請(qǐng)?jiān)O(shè)立持續(xù)的性能指標(biāo)。

我建議使用 Chrome Dev 工具，通過(guò) Coverage 選項(xiàng)卡查找未使用的 CSS 和 JS 代碼。當(dāng)您加載或運(yùn)行頁(yè)面時(shí)，該選項(xiàng)卡會(huì)告訴您頁(yè)面實(shí)際使用了多少代碼，以及加載了多少代碼。您只需提供渲染所需的代碼即可縮小頁(yè)面大小。持續(xù)監(jiān)控和優(yōu)化您的移動(dòng)網(wǎng)站至關(guān)重要。

如果您正在追求現(xiàn)代化的移動(dòng)體驗(yàn)，請(qǐng)構(gòu)建 PWA (Progressive Web App)。如果您希望優(yōu)化付費(fèi)流量表現(xiàn)，請(qǐng)考慮使用 AMP (Accelerated Mobile Page) 作為流量落地頁(yè)。如果您是零售商，請(qǐng)讓用戶的購(gòu)買結(jié)帳流程更加輕松，例如減少字段，使用自動(dòng)填寫或部署 Google Pay。

成功的關(guān)鍵是逐步投入新技術(shù)，同時(shí)重點(diǎn)關(guān)注如何用它們改善用戶體驗(yàn)。一條鐵律: 如果一項(xiàng)技術(shù)無(wú)法為您的用戶帶來(lái)價(jià)值，則不要在該技術(shù)上進(jìn)行投資。

△ 從左至右: American Tin Ceiling (AMP), Rhone (一鍵結(jié)算), SnapDeal (PWA)

• PWA

  https://developers.google.cn/web/progressive-web-apps/

• AMP

  https://amp.dev/

讓整個(gè)團(tuán)隊(duì)的目標(biāo)和步調(diào)一致，是一個(gè)雖然明了但執(zhí)行起來(lái)卻很復(fù)雜的事。改善您的移動(dòng)網(wǎng)絡(luò)體驗(yàn)需要整個(gè)團(tuán)隊(duì)的共同努力: 營(yíng)銷團(tuán)隊(duì)?wèi)?yīng)該關(guān)注第三方數(shù)據(jù)監(jiān)測(cè)及改進(jìn)轉(zhuǎn)化；工程團(tuán)隊(duì)?wèi)?yīng)專注于優(yōu)化關(guān)鍵渲染路徑 (優(yōu)化掉那些會(huì)遲滯頁(yè)面展現(xiàn)的物料和代碼)；UX 團(tuán)隊(duì)?wèi)?yīng)該確保圖像優(yōu)化，并專注于解決可用性方面的痛點(diǎn)。因此在 "優(yōu)化" 這件事情上，您必須設(shè)置跨部門的目標(biāo)，并讓所有團(tuán)隊(duì)負(fù)起責(zé)任來(lái)。

本文的最后這一部分總結(jié)了我在這兩年看到的所有取得了積極成果的最佳用戶體驗(yàn)趨勢(shì)。

• 通過(guò)使用 AMP 實(shí)現(xiàn)即時(shí)響應(yīng)

• 在各種網(wǎng)絡(luò)條件下都可提供可靠的體驗(yàn)，包括離線狀態(tài)

• 通過(guò)更好的緩存策略達(dá)到更佳的可靠性

• 使用 Material Design Web 組件

• 無(wú)論用戶選擇在哪種平臺(tái)上與您的品牌內(nèi)容互動(dòng)，為他們提供一致的體驗(yàn)

• 簡(jiǎn)化登錄 / 身份驗(yàn)證流程 (如接入 Google Sign-In)，實(shí)現(xiàn)應(yīng)用的個(gè)性化

• 通過(guò)優(yōu)化表單簡(jiǎn)化任務(wù)完成過(guò)程

• 通過(guò)啟用 Web推送通知促使用戶返回

• 提高您的 PWA 應(yīng)用價(jià)值，使得用戶愿將其安裝到桌面

• 使用 Lighthouse 來(lái)監(jiān)控性能表現(xiàn)

• 積極嘗試最新的 Web 開(kāi)發(fā)工具和設(shè)計(jì)資源

• 緩存策略

  https://developers.google.cn/web/ilt/pwa/caching-files-with-service-worker

• 推送通知

  https://developers.google.cn/web/ilt/pwa/introduction-to-push-notifications

• 提高您的 PWA 應(yīng)用價(jià)值，使得用戶愿將其安裝到桌面

  https://web.dev/installable/discover-installable

請(qǐng)記住，沒(méi)有任何靈丹妙藥可以解決您的所有 UX 問(wèn)題。改善您的移動(dòng)網(wǎng)站需要耐心、分析和跨職能的投入。請(qǐng)務(wù)必選擇適合您的用戶和業(yè)務(wù)的 Web 技術(shù)。希望這篇文章能讓您在優(yōu)化 UX 的時(shí)候可以減少?zèng)Q策時(shí)的迷茫，并最終打磨出讓用戶喜愛(ài)的體驗(yàn)。

如果您在設(shè)計(jì)與優(yōu)化體驗(yàn)方面有任何疑問(wèn)或者想法，歡迎在評(píng)論區(qū)和我們分享。