Tip:
Highlight text to annotate it
X
大家好
我是 Maile Ohye
目前在 Google 網站管理員支援小組
擔任開發人員計劃的技術負責人
先前在 Google 網站管理員的 YouTube 頻道上
我們已發佈了許多有關提升網站品質的影片
不過基本上我們所探討的 大多都是電腦版網站的問題
在這部影片中 我們會把重點全部放在行動網站
以及如何改善具有高流量
但是使用者體驗不佳的行動版網頁
以整體的觀點來看
現今的使用者最想從行動版網站得到什麼
Google Mobile Ads 網誌指出 有半數的使用者曾表示
即使他們喜歡某一家公司
若是該公司的網站不適用於行動裝置
連帶會降低他們造訪該公司網站的意願
在網站管理員中心的網誌文章
「智慧型手機搜尋結果的排名變化」一文中
我的同事 Pierre Far 和 Yoshikiyo Kato
已事先預告了網頁的搜尋效能不佳
可能會導致智慧型手機搜尋排名下滑
通常這些不好的使用經驗
都是因為搜尋結果沒有導向對應的行動網頁
反而被重新導向至 404 網頁、首頁
或是進入無限迴圈所致
今天的主講內容 不是如何架設行動版網站
因為各位多已完成這項工作
相反的,我會把重點放在 如何提供更好的使用者體驗
如果想要提升網站的品質 有兩個實用的準備工作
一個是安裝網站分析工具
像我,就會使用 Google Analytics (分析)
另一個,則是使用網站管理員工具
驗證電腦版和行動版網站的擁有權
如果您採用的是回應式網站設計
就只要驗證其中一個網站的擁有權
如果您的電腦版和行動版網頁分屬不同網址
例如 www 和 m. 那麼兩個網站都需要驗證
我們的程序會從識別問題著手
先以行動網站檢查基本問題
再標示出所有顯示為高流量
但是使用者體驗不佳的網頁
在影片的後半部
我們主要會說明 如何修正有問題的網頁
為了說明方便
假設我經營了一間 Google 商店
專門在線上販售 Google 的各種商品
例如 YouTube T 恤 和 Android 公仔
這個電子商務網站的網址 是 www.googlestore.com
我們可以利用這個網站識別問題
首先,我們要做的是
區隔電腦和行動裝置的流量分析資料
想要更進一步的話,甚至可以 把平板電腦的資料獨立分出
在 Google Analytics (分析) 中 選取 [建立新區隔]
當裝置類型含有 [電腦] 時 選取 [技術] 並進行篩選
即可建立電腦流量區隔
如要建立行動裝置流量區隔
則可利用現有的預設值
現在當我查看分析資料
就可以比較行動裝置和電腦訪客
兩者之間的行為差異
尋找網頁層級的問題之前
讓我們先調查一下
會影響整體行動流量的潛在基本問題
在目標對象總覽中
針對電腦和行動流量區隔 把日期範圍設為數個月
即可開始尋找其中的異常之處
對照我的客戶所在國家/地區 各個裝置的平均離開時間來看
可以發現當異常情況出現時 行動裝置流量出現了大幅下滑
受影響程度遠大於電腦流量
我們可以看到網站的 行動訪客數有 155,000 人
大約是網站整體流量的 22%
行動流量佔 22% 是個好現象
因為這表示我的行動版網站
沒有任何太嚴重的問題
以我的訪客來自的國家/地區來看
行動裝置所佔的流量約為 一般電腦流量的 1/5 到 1/3
所以 22% 算是正常值
此外,在目標對象總覽中
我們還可以查看 行動使用者回訪網站的次數
是否大幅低於電腦使用者
據此判斷網站是否有基本問題
這兩個圓餅圖上顯示的
是網站上新訪客和回訪者的比例
兩邊流量各來自行動裝置和電腦
我們的網站看起來相當正常
因為在行動流量中 新訪客和回訪者的比例
與電腦的情況相去不遠
假設行動訪客的回訪率只有 5%
電腦訪客的回訪率卻是 10%
這就表示網站上可能有問題
此外,我們還有另一個檢查方法
可以確認網站上是否有基本問題
就是比較電腦和行動訪客的流量
大部分使用者造訪電腦版網站
初始到達網頁就是我們的首頁
隨後,20% 訪客會轉往 /shop.axd/home 瀏覽主要購物頁面
53% 訪客則選擇離開
行動訪客流量也顯示了類似的比例
只是統計數據稍低了一點
12% 的行動訪客會繼續 瀏覽主要購物頁面
電腦訪客則有 20% 會繼續瀏覽
再看到選擇離開網頁的訪客
他們在行動訪客中佔了 59% 在電腦訪客中則佔了 53%
從網站互動的角度來看
從首頁離開的統計數據是不太樂觀的
這點我們會在另一部影片中深入說明
不過,這並不表示我們的行動版網站
出現了任何重大問題
到這裡為止
我們對於行動版網站做的是基本調查
接下來的動作則是要逐一標記
高流量但使用者體驗不佳的網頁
為此,我們要前往 Google Analytics (分析)
瀏覽其中的 [到達網頁] 部分
到達網頁是訪客造訪網站時 首先進入的網頁
他們進入網站的途徑 可能是透過搜尋引擎
網路上的連結 或是在瀏覽器輸入網址
到達網頁可按照網頁瀏覽量排序
這有助於我們找出高流量問題
您可以先找出行動訪客的平均跳出率
然後比較它和電腦訪客之間的平均差距
在我們的例子中,差距約為 7%
我們需要標記的高流量網頁
是行動訪客的跳出率遠高於平均
或是和電腦訪客跳出率之間的差距
超過平均數字的網頁
結果您可以看到,在我的網站上 第二受行動使用者歡迎的到達網頁
是 YouTube 的類別頁面
網址在 /You+Tube
這個網頁相當熱門 光是這幾個月裡
就吸引了超過 9 千人次的造訪
遺憾的是,行動訪客的平均跳出率也多了一倍
我們先把這個網頁標記起來 之後再來設法改善
在我的到達網頁向下幾行
可以看到 /Accessories/Google+Watch+Set.axd
的行動訪客跳出率是 87% 相當於平均值的四倍
這也是要標記起來 之後再做處理的網頁
還有更糟的,再往下幾行可以看到
/Google+Redesign/Wearables/ Men+s+T+Shirts/page
的行動訪客跳出率 是電腦訪客的三倍高
行動訪客平均跳出率
比電腦訪客高了約 8%
但是這個男性 T 恤類別網頁
跳出率卻是它的三倍
所以這也是要標記的網頁
Google Analytics (分析) 不只有 [到達網頁] 這項資訊
我們還可以使用 [活動] 追蹤行動使用者的行為
比方說,我就用過這個程式碼
測試是否有人在行動版網頁上
點選了完整版網站的連結
若是追蹤到有人點進完整版的網站
就表示該網頁的實用性或功能性
可能無法滿足行動裝置使用者
您可以從 [活動] 中得知
指定網頁上的整體活動頻率
當您對於這些數據更加熟悉之後 便可以開始追蹤各種微轉換活動
例如「與我們聯絡」、「電話」 或「電子郵件」的點擊情況
可能也會有所幫助
到此為止,我們已經找到了幾個高流量
但是使用者體驗不佳的行動版網頁
在影片的後半段
我們討論的重點會放在 各種提升網頁品質的方法
我們討論的重點會放在 各種提升網頁品質的方法
我們會嘗試改善稍早標記的三個網頁
包括 YouTube 類別網頁
Google+Redesign Wearables Men's T-shirts 類別網頁
以及 Accessories Google Watch Set 的獨立產品網頁
說到改善行動網頁
有一個很值得注意的地方
就是網站的執行速度
在 [網站速度網頁操作時間] 部分
我們可以看到網頁的載入速度 與網站的平均載入速度相比
是快還是慢
您可以使用預設選項 依照網頁的瀏覽量來排序
這樣一來,您就可以清楚看到
哪些高流量網頁的速度 慢到讓訪客感到不耐
上週我和我的同事友人 Nick Mihailovski 會面
她主要負責的產品是 Google Analytics (分析)
有件事讓我們都很驚訝
那就是以總體瀏覽量而言 第三熱門的網頁
也就是 YouTube 類別網頁
載入時間竟然要將近 20 秒
和我的網站行動網頁相比 平均載入速度慢了 350%
執行效能不佳
很可能是導致該網頁的 跳出率高於平均值的原因
實在很難想像 行動使用者會有耐心
等上 20 秒
如果要改善這個網頁
很顯然,我們必須把網頁的速度提高
對於 YouTube 類別網頁
[網站速度建議] 列出了九項建議
網頁速度過慢 是造成行動裝置使用者體驗低落的一個常見原因
使用性不佳則是另一個因素
為了明顯感受行動版網頁有哪裡不好用
如果可以的話
請盡量使用和訪客相同的裝置
來瀏覽您的網站 並進行各種互動操作
如果您無法取得和客戶一樣的裝置
那麼最簡單的做法就是 使用 Chrome 開發人員工具
這項工具可讓您大致瞭解 行動使用者瀏覽網站的體驗
您可以在 [設定] 的 [覆寫] 部分
選擇以各種行動使用者代理程式查看網頁
我在這裡輸入了要調查的第二個網頁的網址
/Google+Redesign/Wearables/Men+s+T+shirts
這個類別網頁的跳出率
是電腦和行動訪客之間 平均跳出率差距的三倍
為了找出使用性問題
我會檢查的項目包括 是否有不必要的重新導向
令人厭煩的彈出式視窗
過小的字型或按鈕
以及其他令人感到麻煩的問題
沒多久我們就發現
點擊單獨商品的時候
網頁上會跳出一個大大的彈出式視窗
既難以聚焦,也不好關閉
此外,這個網頁上的字型和按鈕
對於行動裝置而言都太小了
我們可以合理推測
主要是因為類別網頁上的每個項目
都有寬大且難以聚焦關閉的彈出式視窗
才會造成這個行動版網頁出現高跳出率
既然在所有類別網頁上
都有這種使用性不佳的問題
我想要對於整個網站進行修正
目前,我們已完成了速度和使用性的調查
現在就來談談如何改善內容吧
我們標記的最後一個高流量 但使用者體驗不佳的網頁是
/Accessories/Google+Watch+Set.axd
這個產品網頁販售的是 一款簡約的防水手錶
上面還有 Google 的標誌
標記這個網頁的原因
是因為它的跳出率 是行動訪客平均跳出率的四倍
透過行動使用者代理程式查看這個網頁
看不出任何會導致高跳出率的問題
舉例來說,包括這個網頁在內
網站上所有網頁的字型和按鈕都很小
雖然這也是應該改善的問題
但是這個現象太普遍 不太可能是主要原因
網站上也沒有惹人厭的彈出式視窗
所以這也不可能是問題所在
如要進一步瞭解為何 行動訪客跳出率會這麼高
就要試著判斷使用者為何要瀏覽
/Accessories/Google+Watch+Set 網頁
造訪這個網頁的意圖為何
在 [行動裝置] 的流量來源中
我們可以加入次要維度來源
接著,如果按一下圓餅圖檢視
看起來就是 82% 到這個頁面的訪客
是透過手機搜尋的方式前來
因為查詢字詞可以看出使用者的意圖
所以接下來我們要前往
用來驗證行動版網站的 網站管理員工具帳戶
選取 [熱門網頁],然後用行動搜尋進行篩選
如此一來,即可在「熱門網頁」中
看到 /Accessories/Google+Watch+Set 網頁
主要查詢字詞則是 Google 手錶
使用智慧型手機執行這個查詢
我們會發現第一順位的搜尋結果
是關於傳聞中的 Google 智慧型手錶
原來如此
難怪搜尋者點擊進入我們的商品網頁後
會感覺與原本的期望不符
這些搜尋者大多都是想看 傳聞中的 Google 智慧型手錶
不是上面有 Google 標誌的橡膠防水手錶
這時,使用行動裝置瀏覽的訪客
往往會因為感到失望而立即離開網站
而在電腦上瀏覽的訪客
則可能繼續嘗試其他網頁 看看是否有智慧型手錶
為了提供更好的行動使用體驗
我們可以嘗試吸引更適合的流量
做法包括調整標題或中繼說明
盡量在搜尋結果網頁中
呈現更符合產品性質的內容
此外,也可以考慮將產品重新命名
比方改名為 Google 標誌腕表
讓搜尋者可以更容易區別
這樣一來,我們所標記的網頁
就已全部處理完畢
最後,我們在這裡另外提供了一些資源 您可以在架設及改善行動版網站時參考
帶給客戶更輕鬆愉快的使用者體驗
謝謝您的收看