UX設計師運用Google Analytics協助網站改版的網站分析小技巧

本文延續《談UX設計師網站改版三招:利害關係人訪談/數據分析/Prototype》這篇網站改版話題,從數據分析的角度再整理一次網站改版過程中UX設計師們可以運用的實務技巧。

過去十年,我擔任PM與UX設計的職業生涯中,經歷的網站開發專案大約有七成是網站改版案,上一篇討論網站改版的文章我整理了大方向的溝通策略,而這篇文章想記錄的是在接手網站改版案的初期,怎麼對資訊架構進行研究與分析的GA技巧。

網站改版往往要牽動許多被遺忘的舊傷口以及迎接新期待,裡面有太多非理性因素。所以誠懇提醒,網站改版請不要跟著組織變革一起進行,兩個都是高風險的事情,湊在一起只會讓風險炸掉。(軟體專案研發失敗機率從 25% ~ 37% 的說法都有,但需求定義不清永遠是第一名的問題,組織變革更是權力遊戲的鬥爭過程,很難釐清定義。)

回歸正題,文章開始前先介紹一下本文要討論的範圍:

1. 進行網址分析,了解頁面的網址規則
2. 了解怎麼運用GA幫助辨別網站訪客動線

透過 Google Analytics 進行網址分析

UX工作者接手一個網站的時候務必要做的基本功課就是網址分析,以了解目前服務的資訊架構。

透過 GA 來查看網頁層級的方式:行為>內容深入分析

網址分析幫助你判斷內容管理系統(CMS,content management system的縮寫)的前後台運作邏輯,所以務必搭配後台CMS管理的流程一起分析。CMS 的規劃以及運作邏輯本身是一個大題目,有興趣以後續談。

網址結構的規則往往暗示整個網站服務的頁面規則(此時可以偷偷觀察前人的 sense),從最常見的首頁、分類頁、產品單頁(媒體網站就是文章單頁)開始一一分類,最基本會得到下面這樣的結果。

  • 首頁:…/index
  • 分類頁:…/category/…
  • 單頁:…/post/…

常見的電商網站還有包括會員頁、購物車流程等等。一般來說從首頁出發,按照正常流程把網站逛完一輪應該可以蒐集完主要頁面的規則,如果沒辦法完成主要頁面的蒐集,想必舊站的資訊架構出了嚴重的問題。

接著網址分析還要辨別,「同樣網址規則但是功能結構看起來不同」的頁面。常見的狀況是網站追加新需求,為了用最少的資源實現,所以用相同的功能模組兜出變異版本。

舉個例子,端傳媒的網站架構幾乎都是用「…/channel/…」來做分類頁,這個分類頁包括大專題、小分類都攘括在內,前台版型一致,見下圖。

端傳媒的前台分類頁版型

後來新增了「圓桌」會員服務,利用「…/channel/roundtable/」來做圓桌相關文章的入口,因此雖然是分類頁的網址結構,但前台的版型從矩形照片變成了圓形照片。

端傳媒的「圓桌」內容,網址結構一樣,但版型出現變化

更進一步,在「圓桌」底下的內容,分類頁採用了新的「…/tag/…」結構,這開始跳出本來端傳媒網站的分類頁結構。「圓桌」的系列功能看網站說明,是會員討論專用的文章,對於端傳媒網站來說算是發展出新的服務,跟原有新聞文章做出了區別(雖然文章單頁版型很像)。

圓桌系列的文章列表網址規則變成「/tag/」

所以端傳媒網址結構中,圓桌系列階層為「channel >tag>roundtable」。

同樣的文章版型,但網址結構不同,暗示這是不同的服務頁面。

透過上面的案例,應該可以觀察到網站服務發展的過程中,新服務上線時網址規則因此受影響的情境。

因為新功能而導致網站結構變亂通常沒有完美的方案,畢竟後面追加的大功能很難在創站時規劃完善,通常這也會是工程師支持改版的理由,可以讓他們一起償還一些架構上的技術債。

在網頁前台蒐集完網址架構以及頁面的規則變化後,差不多就對於整個網站有哪些頁面了然於心,此時回到 GA ,從「行為>內容深入分析」可以觀察到網頁層級的流量分佈。

這邊的觀察就是讓 UX 們明確告訴利害關係人,產品單頁才是 46% 用戶行為主要發生的地點(記得跟GA之中的到達頁面作比對分析),應該花更多心思觀察以及優化,不要因為只關心首頁要有漂亮的版型(以及只看得懂首頁)所以開會只想討論首頁。(希望你的改版會議上不要都是純視覺動物)

良好的頁面層級規劃可以讓網站流量分佈的重點一目了然

運用次要維度與進階篩選器來分析

對於GA不熟的朋友,這邊提供分析網頁動線的基本方法:

1. 用「到達頁面」來看用戶抵達網站的第一頁
2. 用「內容深入分析」來看網頁層級的流量分佈
3. 用「離開網頁」來看用戶離開網站前的最後一頁

延伸:離開率與跳出率有什麼不同? (GA官方說明)

到達網頁就是用戶抵達網站第一頁,網站與APP最大的不同就是只要是公開的網址就有機會成為到達頁(俗稱 Landing page,著陸頁),如果到達頁的情境設計錯誤,用戶會直接離開網站。

因此比較網站首頁以及產品單頁作為到達頁用戶行為有何不同?手機用戶的到達頁是哪裡呢?打開「次要維度」的功能可以同時查看同一頁面不同流量來源。

在到達網頁中使用次要維度功能

同樣的道理,如果你對特定的頁面(例如首頁)感興趣,可以使用進階篩選器更進一步的篩選,去掉其他不想看的網頁,光是靠次要維度與進階編輯器來篩選分析資料足夠你找到很多元的觀點。

同時使用次要維度以及進階篩選器,查看指定網頁的裝置類別流量

練習題

一、如果你想知道:「到達頁為首頁,從FB來的手機流量有多少?」該如何篩選呢?

二、如果你希望分別觀察 iOS 用戶跟 Android 用戶,到達頁為首頁,並且限定是FB來的手機流量,該怎麼調查呢?

結語

工作至今,我在接手網站改版案的時候,還從未遇過有任何人可以交接給我一份關於目前網站資訊架構的文件,如果你還在猶豫是否要投入一個下午的時間看似閒逛整個網站,請務必相信這是前期研究中最物超所值的時間投資。

因為網站改版會議上大多數的人都只會描述自己想要的東西,很少會有人不抱持偏見地用綜觀全局的角度幫你盤點目前網站的近況。當你透徹的了解網站前台的資訊架構後,改版會議上才不會顯得像個新來的菜鳥。

例如當別人侃侃而談想趁亂許願時:「我覺得OO在網站中的地位太不顯眼了!新站應該要OOXX才能改進!」

你可以優雅地淡笑欠身,接過對方的話題:「是的,關於OO,在目前網站前台中是跟XX一起共用規格,所以算是某次功能擴充時的違章建築,導致我們其他前台的機制不能很好的支援OO,這的確是在新站時應該重新檢視OO的重要性,看OO是否需要納入新站的核心規格中,對了,OO的相關頁面目前在全站流量大約佔0.0006%,大多數的網友只停留30秒不到就離開了。」(後面那幾句比較嗆的話請適當的忍住。)

除了在改版會議上用來當吵架的資本外,網址分析的過程同時是UX們攻略工程師的好話題。

拿著你所整理的網址分析記錄跟維護這個網站的工程師請益看不懂的地方,雖然難免會勾起工程師的創傷症候群(例如某些他極力抗拒但最後用很羞愧的方式做出來的成果),但藉著同理這段過去的傷痛(?)是很好深入淺出(藉著羞愧感)打開工程師防衛心的好話題。

務必讓維護這個網站的工程師認為你跟會議上那些講幹話只負責許願的人或許有點不一樣。透過請益建立友善的師徒關係,對陌生的關係而言,這是好的開始。(這也是用戶訪談技巧的活用!)

祝各位順利完成艱困的網站改版工作。
如果這篇文章對您的工作有所幫助,還請多給我幾個鼓掌兒。

查看獸群之心的 UX 文章目錄

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

獸群之心 / Soking

Written by

獸群之心 / Soking 產品設計師,多年新創公司、社群以及媒體經驗,提供數位產品設計的顧問服務以及 UX 教育工作坊。千綺設計工作聯絡:charm.soking@gmail.com

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade