Mobile Web實務研討: 設計策略與數據分析課程筆記

行動上網是近年來普遍的現象,部份企業早已因應這股潮流,加入行動應用的行列,不過今年4月21日Google調整了行動搜尋引擎演算法,正式將網站在行動裝置上被瀏覽的便利性納入搜尋排名的計算中,讓所有企業主和相關從業人員不得不正視自家數位服務在行動裝置上的表現,但到底該如何思考行動應用產品與服務的布局呢?

6/25、6/26下午參加了悠識數位舉辦的「Mobile Web 實務研討:設計策略與數據分析」課程,本課程是悠識數位首次嘗試結合研討會和課程的形式,在兩個半天裡各邀請三位業界專家與大家分享Mobile Web相關實戰經驗,共有80幾位來自各行各業的公司主管、PM、產品企劃、網站行銷、設計師等業界同好一同參與。

第一天的主題圍繞在Mobile Web的設計策略,講者包括愛評網副執行長葉卉婷(Erica)、鴻海科技資深前端設計師李易輯(Monster)和悠識數位策略規劃總監江典泗(Brian)。

首先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
  • 動態載入因應不同需求的內容

Brian則從自身的學習和設計顧問實務經驗的角度來跟大家說明Mobile Web的設計策略。一開始先談到內容策略,由於有些地區的用戶只有行動裝置,因此Mobile內容不該只是Web內容的輕量版,而且用戶同時使用好幾個裝置已是普遍的現象,愈來愈難掌控用戶會如何使用內容,因此要將內容準備好。

理想狀況是產生一份內容就可發佈到所有裝置上,除了可降低大量的重複工作外,也可避免內容不同步所造成的行銷公關災難,但現實情況是,很多Web內容都用編輯器上稿或者是圖片,不適合在行動裝置上使用,Brian建議企業要盡早規劃content DB新欄位,新內容一定要上新欄位;另外EC網站常見的「次首頁」、「子單元首頁」,在Mobile Web應該要省略,讓用戶快速到達結果頁。

設計行動網路服務時,若已有Web版,即使有分類不佳、命名不精準的問題,但考量到老客戶很習慣Web版原有的體驗,在Mobile Web的設計上要尋求平衡點;若Mobile Web只做了一半,至少要給用戶一些提示,例如利用圖示表達要去一個桌面版網站。

雖然這幾年常聽到Mobile First,不過思考行動應用時最重要的還是要了解用戶的任務目的,再選擇適合的介面,而不是以設備優先,只有手機服務可能會失敗。

Brian也提到Mobile Web介面設計的一些要點,例如Mobile Web慣用漢堡選單,但根據他們的使用者研究結果發現,用戶的注意力都在攤開的內容上,因此建議三項重要內容要攤開放在頁面上;要為行動裝置設計圖表,不要給用戶看Web版的圖表;Infinite scroll很流行,但用戶需要記住位置時,還是要使用頁碼;實測發現很多用戶不知道在Mobile Web上點選電話可直接撥打,建議將電話號碼包成一個按鈕表示,並用圖示提示可以撥打;Mobile Web的重要功能要固定在瀏覽器下方,供用戶隨時取用,且不要忘記Back to Top按鈕。

Mobile Web專案跟任何專案一樣,若要順利進行,事前要跟工程單位、內容編輯、視覺設計師盡早溝通,確認內容來源、技術、資源、時程等問題,Brian建議可利用Prototype清楚地溝通。

最後Brian提供大家讓網站更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搜尋跟Destop搜尋在查詢方式、搜尋結果、顯示方式、點擊行為、內容呈現方式有所不同。查詢方式部份,由於在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的網站,網站正式營運後如何透過數據分析評估成效以不斷優化,獲益不少。


Originally published at www.hpx.tw on July 7, 2015.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.