Google Mobile UX Marathon 雙週心得（一）
行動裝置網頁（Mobile Web）、提升模型（LIFT Model）、包容性設計（Inclusive Design）
Google Mobile UX Marathon 是什麼？
這陣子 Google 推出了為期六週的 Mobile UX Marathon，論壇內容是關於行動裝置/手機版網頁的最佳應用，包含 UX 設計、轉換率最佳化、Google Analytics、最新的網頁科技和 A/B 測試的技巧等。
每週有場一小時的直播論壇，也有幾部長約二十分鐘的 Youtube 影片當作事前作業。此活動完全免費，沒申請也可以觀看所有的影片，申不申請的差別只在於會不會收到相關消息的信件而已。
在看完事前影片之後可以提交問題，Live 的講者會挑問題回答；直播論壇之後有申請參加的人也會收到問卷可以進行意見回饋。
Mobile Web 簡介
為什麼要投資 Mobile Web（行動裝置網頁）？
單純的手機 App 只能觸及到行動裝置的使用者，而電腦軟體則是只能服務擁有桌電或筆電的使用者；幫網頁加上 Mobile Web 是唯一能夠全面觸及到任何裝置使用者的方式。
Mobile Web 跟響應式網頁不一樣，Mobile Web 是專門為了行動裝置特別再設計、開發一個網頁，而響應式網頁（Responsive Website）則是試圖以單一網頁的變形滿足所有使用者需求。（有興趣了解更多的請往下滑至留言區，感謝 林汶樺｜Askie Lin 的熱心解說）
如何塑造一個優良的行動裝置網頁？
速度
研究顯示，一秒的載頁速度差，就能影響 20% 的轉換率。同時，載頁速度也會影響 Google 有機搜尋結果的排名，亦即速度也是 SEO 的影響因素之一。
講者針對為什麼設計師要在乎載頁速度也給出了很好的解釋 — 她認為載頁時間拖太久的話，使用者老早就受不了而離開頁面，根本不會看到或體驗到你辛辛苦苦做的 UX 設計，這難道不是設計師最深的痛嗎？
UX
會參加這個活動的人應該都懂 UX 的重要性，所以在這裡提供幾個數據來進一步佐證 UX 對於企業經營層面的影響：
- 使用者只需 50ms 就會產生第一印象
- 88% 懷有負面初步印象的使用者會降低回頭使用該產品的可能
- 設計優良的使用者介面能帶來高達 200% 的轉換率
- 重視 UX 設計的企業能有 211% 的股市表現、更高的利潤成長
最快、最簡單的改善項目
- 更快的載頁速度
就像前述所說，速度是讓使用者繼續瀏覽的關鍵之一 - 提供清楚的價值主張（Value Proposition）
讓使用者認同你的價值，請看下述的 LIFT Model - 清楚明顯的行動呼籲（Call-to-action, CTA）
放在折頁上方（above the fold），也就是使用者不需要滑動頁面就可以看到的地方 - 漸進式載頁
那些在折頁下方（below the fold）的 carousel 可以 load 慢一點，等快滑到了再開始 load - 程式碼瘦身
移除無用的、多餘的程式碼，仔細檢查的話會意外發現有很多一路累積的冗 code - 縮小圖片像素
許多設計師（包括我）會為了追求清晰的視覺而不小心放了過大的檔案，反而造成流速過慢
設計流暢的使用者旅程以建立品牌信任度
消費者不一定會在手機上完成購買的程序，但從開始有購物的想法到隨便逛逛，鎖定單一商品之後放入購物車再到真正結帳購買的旅程中，有很大的機會在手機上進行這些動作。
讓使用者輕鬆、無間隙（seamless）地在各種裝置上進行轉移，讓他們自己決定如何、何時完成任務，並且提供全面、從一而終的品牌識別，讓品牌本身產生黏著度。
The LIFT Model
這是由 You Should Test That 的作者 Chris Goward 提出的轉換率最佳化框架，包含六個影響因子：
價值主張
當使用者點擊進入一個網頁時，他們會立刻想要知道你是誰、你是什麼東西、為什麼我要在你的網頁上吸收資訊。價值主張的目的就是說服使用者
訊息明確
網頁提供的文字訊息需要容易找到、使用、比較並提供轉換。講者提供的一份問卷調查顯示使用者認為一個網站最重要的特質除了速度之外，第二名就是多簡單可以找到他們想找的東西，比美觀還要重要許多。
另外，使用者進入網頁時不是在「閱讀」，而是在「掃描」重點句與可行動標的，所以移除冗詞贅字、使用列表以提高易讀率、使用明確的標題等方式都可以協助使用者掃描到有價值的資訊。
稀缺性與迫切
提供動機，推動使用者開始行動。這也是遊戲化實戰全書的八角框架之一，當消費者看到「限量」、「最後一件」、「倒數計時」這些標語時都會不自覺感到一股必須下手的壓力，深怕錯過好康而後悔。
相關性
網頁需要提供給消費者他們真正有興趣的資訊，缺少相關性的話，前述的稀缺性與迫切也不會起作用。就像是麥當勞推出限量的勁辣雞腿堡買一送一，我們會蜂擁而至，可是素食主義者看到這類訊息根本無動於衷。
用字精準也很重要，當使用者在搜尋特定商品時，他們會進入一種「模式匹配心態」，只試圖掃描到自己腦袋裡想的關鍵字，其他資訊對他們而言都是模糊、可忽略的。
減少分心機會
一頁一個明顯的目標與 CTA 為佳，手機用戶普遍缺乏耐心或是在趕時間，專注力有限，選項太多反而會降低行動的機率，如果這一頁的目標是希望他們購買商品，就去除訂閱新聞稿或跳出對話框的設計。
降低焦慮
使用者焦慮時容易造成購物流程中斷，以商業角度來看是最致命的時刻，所以要運用各種技巧緩和使用者焦慮。使用者在購物流程中有三個焦慮巔峰如下：
- 我選到對的產品了嗎？
使用者在瀏覽階段很輕鬆愉快，但一進入「下定決心要買」的狀態就會開始精挑細選，這時候提供商品比較、尺寸量表、顧客評價等資訊讓使用者更容易對自己的決定感到有信心，相信自己是做了「充足的比較」才下的明智抉擇。 - 這是買東西最棒的地方嗎？
除了商品之間的比較之外，使用者也會擔心是不是誤入賊窟。為了避免消費者跳槽到其他競爭者網站，頁面上也能透過不斷強調獨一無二的價值主張，例如免費退換、免運費、安全電商標章等特點讓使用者相信自己身處最好的地方。 - 結帳會很麻煩嗎？
最後的焦慮巔峰就是結帳的前一刻，我自己就很常這樣，逛了幾個小時把商品都放進購物車之後，反而容易因為信用卡離我太遠、記不起來密碼之類的瑣事放棄購買。所以在這個階段的重點就是簡化一切，讓前往最終目標（購買）的路徑清晰明白，動作也應該簡單到接近一鍵購買。
為了所有人而設計
講者提到了好用性設計 （Usability）、包容性設計（Inclusive Design）和可及性設計（Accessibility）。他認為最狹義的是可及性的定義，專注在物理層面的可行度；包容性的目標是跨越種族、文化；而好用性則是囊括最普遍、最大的群集。
這些指標的目的是讓有障礙的人也可以在頁面上吸收、了解、導覽、互動。世界上有 15% 的人有某種程度的障礙，而每個人都可能經歷「有障礙」的時期。以時間性來區別的話，障礙也分成三種：
- 永久性
平常定義的身心障礙，例如：身障、視障、聽障。 - 暫時性
不小心受傷而造成生活上暫時的不便，例如：骨折、扭傷、開刀。 - 特殊狀況
日常生活也意外地容易面臨「不方便」的狀態，例如：滿手雜貨、懷抱嬰兒、開車。
講者提到若是產品具備好用性設計的特性，不只是造福身心障礙者，通常也能為其他使用者帶來更優良的體驗。
例如加上圖片替代文字（alt text of image）原先的目的是讓視障人士能夠透過語音聽到圖片的內容，但同時也幫助了使用低階手機或是處於收訊不佳地區的使用者接收訊息。
截至目前的心得
發文的現在我已經聽到第四週的進度，主要的 use case 都是電子商務，商業目標都是為了賣出商品或讓使用者下訂單，所以如果你是身處電商的設計師的話會非常有幫助，但整體而言比起 UX 設計師，這個論壇或許更適合行銷或 PM。
話雖如此，我也學到很多新東西，以前知道 mobile first 的概念很重要，但一直以為只有 Responsive Web 這個解法，也從來沒有從「以幫助身心障礙者出發的設計可以造福更廣大的受眾」這種概念，能夠了解各種最佳實踐總是有益的。
下篇：Google Mobile UX Marathon 雙週心得（二）
終篇：Google Mobile UX Marathon 雙週心得（三）延伸閱讀：Google 設計師的內心話 — 關於時間管理、團隊合作與自我認同
如果喜歡這篇文章，請幫我拍手 1-10 下。
如果喜歡閱讀關於 UX 設計師學習心得的文章，請幫我拍手 10-30 下。
如果單純喜歡我的文字，希望看到更多的話，請幫我大力拍手 30-50 下。也請記得 Follow 我 Jasmine Lin 或是數位產品設計Medium文章平台 As A Product Designer，讓我們與你分享更多好文章 😊更歡迎你在文章底下留言，我很樂意也很期待跟你討論或聊天！
