文／鄭巧玉
行動上網是近年來普遍的現象，部份企業因應早已因應這股潮流，加入行動應用的行列，不過今年4月21日 Google 調整了行動搜尋引擎演算法，正式將網站在行動裝置上被瀏覽的便利性納入搜尋排名的計算中，讓所有企業主和相關從業人員不得不正視自家數位服務在行動裝置上的表現，但到底該如何思考行動應用產品與服務的布局呢？
6/25、6/26下午參加了悠識數位舉辦的「Mobile Web 實務研討：設計策略與數據分析」課程，本課程是悠識數位首次嘗試結合研討會和課程的形式，在兩個半天裡各邀請三位業界專家與大家分享 Mobile Web 相關實戰經驗，共有80幾位來自各行各業的公司主管、PM、產品企劃、網站行銷、設計師等業界同好一同參與。
第一天的主題圍繞在 Mobile Web 的設計策略，講者包括愛評網副執行長葉卉婷（Erica）、鴻海科技資深前端設計師李易輯（Monster）和悠識數位策略規劃總監江典泗（Bryan）。
首先 Erica 帶來愛評網在思考移動時代策略布局的經驗，她提到透過數據，他們觀察到愛評網大部分的流量來自搜尋引擎，而且近年來從行動裝置來的流量大幅成長，因此決定先解決用戶在行動裝置上閱讀內容的體驗。從 Web 流量最高的頻道下手（Shop page→Review→Homepage），由於 Mobile Web 的內容呈現方式和邏輯跟 Web 不同，技術上不採 RWD ，而是用 AWD ；有了 Mobile Web 後，再結合 App ，利用行動裝置的特性（LBS、即時、個人化），讓內容快速散播，例如透過愛評網在 WeChat 的官方帳號，提供國外觀光客在台旅遊時所在附近的美食資訊；跟 HTC 合作，提供 Blinkfeed 上美食推薦的內容。
Erica 認為 Mobile Web 和 App 本質上雖不同但可同時並存、相輔相成，愛評生活通愛吃閃購功能就同時運用到 Native App（列表）和 Mobile Web（購買）；決策時可從幾點思考：目的、要解決的問題（痛點）、移動中的使用情境、內容與軟體和被動與主動。
接著 Monster 從設計師的角度分享 Mobile Web 的介面設計。他提醒大家做設計前要先了解目標用戶和其需求，例如針對女性族群（更大的操作範圍、更吸引人的圖片、更好的循環動線、更感性的文案）和上班族（更快的內容顯示、更清楚的列表、更重點的內容、離線閱讀）的設計會有所不同；並根據自身情況（全新、重新設計、新增 Mobile 版）選擇適合的 Mobile Web 類型（RWD 或 AWD）。不管採用哪種方式，通常會先取捨 Web 版的內容，設計師再透過 Wireframe、Mockup、Prototype 等工具跟其他團隊成員溝通設計，Monster 建議做 Mockup 前先找幾個視覺風格迥異的範例供大家決策參考。
他也介紹了幾個介面模式在 Web 和 Mobile Web 的差異，例如在 Web 上，Menu 通常是展開的，在 Mobile Web 上則常用漢堡圖示；Slide 在 Web 上通常有上一張、下一張的按鈕，在 Mobile Web 上的互動方式則用滑動。
動線與導覽設計方面，Monster 認為 Web 像是 Costco 之類的開放空間，用戶可自行選擇要走哪條路，Mobile Web 則應該像 IKEA ，要幫用戶規劃好一定的動線，設計上有幾個重點：
- 簡化選單
- 固定 Header
- 不要忘記 Top button
- 不要有死路
- 保持上下網頁的風格一致
- 避免開新視窗
- 減少網站層級
- 保持跟 Web 一致的邏輯
另外，受限於行動裝置的特性和使用情境，設計 Mobile Web 的表單時應考慮到效率和避免錯誤發生，Monster 提出幾點建議：
- 運用階梯式的表單填寫，但還是要減少不必要的資料要求。
- 善用非輸入式的表單，例如 Checkbox、Slider。
- 善用第三方登入來提高用戶的意願
- 使用 input type 加快輸入
最後 Monster 分享了幾個 Mobile Web 使用體驗不佳的實例，例如覆蓋式廣告、過長的網頁卻沒有 Top button、希望用戶安裝 App 的覆蓋式訊息等，並告訴大家如何加強用戶體驗和優化效能。
加強用戶體驗部分：
- 按鈕看起來要可點擊，且點擊範圍應大於44*44px。
- 觀察 GA 不斷調整你的 Mobile Web
- 要提供點擊回饋
- 善用手機原生功能，例如撥號、寄信、分享 Line、定位。
- 善用瀏覽器 HTML5 功能，例如 LocalStorage、Manifest。
- 使用原生廣告
- 避免使用 serif 字體
效能優化部分：
- 提供適當的圖片尺寸加速載入，而不是用原圖縮小。
- 減少不必要的圖片
- 採用漸進式的 JPG 圖片
- 採用 CSS3 動畫取代 javascript
- 減少內外部連結 request 次數
- 在 overflow 加上-webkit-overflow-scrolling: touch
- 動態載入因應不同需求的內容
Bryan 則從自身的學習和設計顧問實務經驗的角度來跟大家說明 Mobile Web 的設計策略。一開始先談到內容策略，由於有些地區的用戶只有行動裝置，因此 Mobile 內容不該只是 Web 內容的輕量版，而且用戶同時使用好幾個裝置已是普遍的現象，愈來愈難掌控用戶會如何使用內容，因此要將內容準備好。
理想狀況是產生一份內容就可發佈到所有裝置上，除了可降低大量的重複工作外，也可避免內容不同步所造成的行銷公關災難，但現實情況是，很多 Web 內容都用編輯器上稿或者是圖片，不適合在行動裝置上使用，Bryan 建議企業要盡早規劃 content DB 新欄位，新內容一定要上新欄位；另外 EC 網站常見的「次首頁」、「子單元首頁」，在 Mobile Web 應該要省略，讓用戶快速到達結果頁。
設計行動網路服務時，若已有 Web 版，即使有分類不佳、命名不精準的問題，但考量到老客戶很習慣 Web 版原有的體驗，在 Mobile Web 的設計上要尋求平衡點；若 Mobile Web 只做了一半，至少要給用戶一些提示，例如利用圖示表達要去一個桌面版網站。
雖然這幾年常聽到 Mobile First ，不過思考行動應用時最重要的還是要了解用戶的任務目的，再選擇適合的介面，而不是以設備優先，只有手機服務可能會失敗。
Bryan 也提到 Mobile Web 介面設計的一些要點，例如 Mobile Web 慣用漢堡選單，但根據他們的使用者研究結果發現，用戶的注意力都在攤開的內容上，因此建議三項重要內容要攤開放在頁面上；要為行動裝置設計圖表，不要給用戶看 Web 版的圖表；Infinite scroll 很流行，但用戶需要記住位置時，還是要使用頁碼；實測發現很多用戶不知道在 Mobile Web 上點選電話可直接撥打，建議將電話號碼包成一個按鈕表示，並用圖示提示可以撥打；Mobile Web 的重要功能要固定在瀏覽器下方，供用戶隨時取用，且不要忘記 Back to Top 按鈕。
Mobile Web 專案跟任何專案一樣，若要順利進行，事前要跟工程單位、內容編輯、視覺設計師盡早溝通，確認內容來源、技術、資源、時程等問題，Brian 建議可利用 Prototype 清楚地溝通。
最後 Bryan 提供大家讓網站更 Mobile Friendly 的12項原則：
- 網站在不同設備中是否都具有良好的體驗
- 用戶是否能輕鬆完成常見的任務
- 行動裝置是否突顯出 Call to Action
- 導航選單是否存在複雜交錯的層級
- 能否鬆鬆回到首頁
- 網站是否擁有良好的搜尋功能
- 表單是否有搭配適合的虛擬輸入功能
- 除了產品圖片，其他圖片無縮放功能
- 是否能讓 Google 蜘蛛輕鬆抓取資訊
- 所有內容是否都能在行動裝置上呈現
- 跨裝置檢查連結及重新導向
- 如何處理敏感的隱私內容及流程
第二天的課程重點則在數據分析和搜尋最佳化，講者包括 Isobar 資料分析經理鍾喬后、網路行銷和 SEO 專家連啟佑以及 Ezprice 比價網執行長陳振榮（Aaron）。
喬后首先提到，他們所負責的專案的 GA 數據也反映出行動用戶逐年成長的趨勢，那在數據分析上不同平台（Web、Mobile Web、Mobile App）是否存有差異？她指出一個重要原則，不是平台造成分析差異，而是分析方式會依標的目的而定，譬如 Web 的 KPI 是 awareness，Mobile Web 的 KPI 是訂單轉換率，這樣觀察的項目就會不同。
喬后也跟大家分享幾個 Mobile Web 分析的常見狀況，第一種是 RWD 版和 AWD 版的分析，網站若用 RWD，數據追蹤的規劃只要一版，GA 會透過用戶載具的判斷去區隔；網站若用 AWD，是有兩個網站，規劃要分 Web 和 Mobile Web 兩版，是透過 URL 來區隔。
第二種是長頁面分析，通常網站分析常用的項目有 duration、PV、clicks、bounce rate、action，因為 duration、PV、bounce rate 是以 session 為基礎，因此分析長頁面時不適合用這三個項目。由於長頁面只有一頁，分析上如何了解多少用戶往下捲、用戶到底看到哪、多少用戶看到某資訊、多少用戶點擊某資訊，是經常遇到的問題，如何取得這些數據跟前端開發息息相關，開發前要溝通好，若頁面上有圖片或段落文字，可在各單元的 top line、mid line、bottom line 埋 tracking code，以了解用戶在網站上的瀏覽階段。除了取得數據的方式外，何謂有效瀏覽是另一個需要取得共識的議題，通常應該由資料需求端來判定 KPI。
第三種是 Campaign 的分析，一般 Campaign 會看 visits、duration、Ava. PV 等數據，但喬后提到她95%的時間是在做視覺設計、流程、動線等的優化分析。以一屏一資訊的 Mobile Web 活動網站來說，從首頁到完成送出的每個步驟都可分析，以了解用戶不繼續下去的原因。
第四種是 Web View 的分析，他人開發的 App 開啟的 Web View 是否會影響我的網站流量？譬如在 Facebook App 點了連結後連到其他網站，這段造訪來源若沒有加上額外的 tracking code，會被 GA 視為 direct 造訪，若想要了解有多少流量來自 Facebook，就必須在分享連結上加上額外的 tracking code。
第五種是 Cross device 的分析，網站需要有登入機制、埋有 GA 標準的 tracking code 和 user ID 的 tracking code，才能做跨平台分析，喬后認為電子商務網站比較適合做這一類的分析。
接著啟佑老師來跟大家分享行動網站搜尋最佳化這個主題。先談到 Mobile 搜尋跟 Desktop 搜尋在查詢方式、搜尋結果、顯示方式、點擊行為、內容呈現方式有所不同。查詢方式部份，由於在 Mobile 上輸入較困難、語音輸入的崛起，因此搜尋時建議適當的關鍵字供快速輸入和提供口語化的關鍵字就顯得格外重要。
搜尋結果方面，Mobile 搜尋會發揮行動裝置的特性（位置、個人化），返回較多本地和個人化的搜尋結果；Google 調整行動搜尋引擎演算法後，使用者體驗成為搜尋引擎決定行動裝置搜尋排序時的重要因素，優化網站在 Mobile 上的表現變得刻不容緩。
顯示方式部份，在 Mobile 上圖片和影片的搜尋結果會變少，現在 Google 和 Bing 都會替搜尋結果加上「Mobile Friendly」的標記。
點擊行為部份，排在愈前面的結果點擊率會愈高；內容呈現則會因頻寬和螢幕尺寸而異。
啟佑老師也提到三種 Mobile Web 的做法和針對 SEO 的處理要點。第一種是 RWD，要使用 meta name=”viewport” 標記指示瀏覽器如何調整內容，若使用響應式圖片，要加入 <picture> 元素；第二種是網址相同、HTML 版本不同的動態服務，透過 Vary HTTP 標頭根據用戶代理程式指明變更；第三種是 AWD，分別在 Web 版和 Mobile Web 版個別加入 rel=”alternate” 和 rel=”canonical” 標記。
無論採哪種做法，網頁設定為行動裝置專用格式時，要讓 Google 知道這項設定，且不要使用 robots.txt 禁止搜尋引擎存取網站上有利於轉譯網頁的重要檔案，還有要避免會對用戶造成困擾的7點常見錯誤。
那網站要如何做到 Mobile Friendly？啟佑老師提出三寶：閱讀 Google 的 Guide to Mobile Friendly Sites、使用 Google Mobile-Friendly Test 工具檢查和使用 Google Mobile Usability Report 檢查 Mobile Web 的可用性錯誤。
最後一堂課則由 Aaron 分享電子商務行動網站購物流程對轉換率的影響。跟其他類型的網站比較不同的是，電子商務網站 UX 的主要設計目標在提升訂單的轉換率，Aaron 從他們經營比價網的經驗發現，雖然 Mobile Web 的流量持續成長，不過轉換率一直沒有上升，用戶還是習慣在 PC 上結帳付款。Ezprice 的數據顯示，以比價來說，在 Mobile 上比較的商品單價比在 PC 上高，但就成交單價來說，PC 上成交的平均客單價遠比 Mobile Web 上的高（Mobile Web上的客單價有73%是低於$1000），顯示商品的價格愈高，用戶才會比價，而且在 Mobile Web 上的消費多以衝動性消費為主，購買的商品類別有59%是生活類，因此在用戶挑選非必需商品的過程中營造想要的氛圍、吸引他們購買就很重要。
另外他們也曾調查過台灣15大網購平台的Mobile Web首購和回購流程的順暢度，首購流程平均有28個步驟，回購流程分為「快速結帳」與「一般回購」，分別有10和13個步驟，Aaron 他們發現，雖然流程縮短了，但轉換率也沒有顯著地提升，目前還無法改變用戶的行為，因此建議電商轉換行動應用的定位和目標，Mobile Web 用在開發新用戶，Web針對用戶回購，App 用來經營忠誠會員；加強用戶在小螢幕上瀏覽商品的便利性，讓用戶能儲存瀏覽紀錄，資料能跨屏同步，銜接 PC 的結帳流程，並推廣 App 下載。
兩天下來，不僅了解到 Mobile Web 的策略布局、設計流程和介面設計實務，也了解如何處理 Mobile Web 的 SEO，如何做到 Mobile Friendly 的網站，網站正式營運後如何透過數據分析評估成效以不斷優化，獲益不少。