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

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

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

從某個角度來講，我們是在為最終用戶代言。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Data Studio

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

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

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

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

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

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

• PWA

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

• AMP

  https://amp.dev/

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

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

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

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

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

• 使用 Material Design Web 組件

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

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

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

• 通過啟用 Web推送通知促使用戶返回

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

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

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

• 緩存策略

  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)用價值，使得用戶愿將其安裝到桌面

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

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

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