[ECX] 從使用者研究發掘出來的網站獲利關鍵設計蔡明哲 / 悠識數位顧問有限公司首席資訊架構師

使用者研究發掘
網站獲利關鍵設計

從

蔡明哲
悠識首席資訊架構師
richard@userxper.com

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.

蔡明哲 Richard Tsai
•  悠識創辦人暨首席資訊架構師
–  Chief Information Architect
–  19年網路行銷經驗及網站企劃與建置經驗
–  熱衷於網站企劃, 網路行銷, 專案管理, 資料庫行銷, 使用者研究

•  HPX社群創辦人
– 

嘗試創造出跨世代交流的環境

– 

培養更多創新產品與服務設計規劃人才


key concepts
•  用戶行為不是我們想像的那樣
•  介面細節造成行為轉折
•  順勢而為，更容易改變行為
•  商品內容/品牌價值/服務品質是基本
•  答案不⼀一定是答案，找答案的方法才是答案
•  使用者研究
= 量化體檢＋質化診斷（望聞問切)

曾經做過的使用者研究
易用性測試 Usability Study
–  人力銀行招募流程系統介面 Usability Test
–  線上學習社群網站 Usability Test
–  電子商務網站購物流程 Usability Test … etc.

認知探索 Cognition Study
–  CRM系統介面使用性及需求研究
–  帳號整合及外部帳號認知研究
–  中小企業人資系統需求研究 … etc.

機會探索 Opportunity Exploration
–  單身女性交友態度研究
–  家庭親子活動安排與資訊來源研究
–  Youbike都市自行車騎乘經驗研究
悠識數位顧問有限公司 UserXper
–  紅利積點消費者經驗及店家POS系統接受度研究 … etc.
Digital Consulting Co., Ltd.

User Research Methodology
•  行為觀察及分析

– 網站流量動線分析
– 點擊熱圖
– 易用性研究 Usability
Test
– 眼動追蹤 Eye tracking
– 日誌法 Dairy Log

•  認知與理解
– 卡片分類 Card sorting
•  機會探索
– 深度訪談 User Interview
– 脈絡訪查 Contextual
Inquiry
– 焦點團體 Focus Group


問題跟現象
1. 
2. 
3. 
4. 
5. 

導覽選單
商品搜尋
會員加入及結帳流程
網頁長度
Tab 及 Lightbox

缺少科學化的評估方法（數據分析）
不懂得觀察使用者行為 (質性研究）

1. 導覽選單 Navigation
•  7加減2 ？
•  多層下拉選單，讓使用者⼀一次點擊到位？


Miller的Magic 7 適用於短期記憶
•  迷思：Miller理論說 - 人們短期記憶能記住7個
左右的項目，變成導覽選單的項目限制？
•  事實：人們在網頁上可直接看到資訊，並不
需要記憶任何東西，因此能輕易處理更多的
選項。


多層選單跟電流急急棒很像！
電流急急棒


多層選單考驗使用者操作穩定度
•  理論請參考 Fitts Law
•  設計請改用 Mega Menu


2. 商品搜尋
•  很少使用者想打字啦！瀏覽比較重要?
•  搜尋有就好了?


不鼓勵顧客搜尋的話，
可以這樣子做


或者這樣子做


想對搜尋商品的顧客好一點，
可以這樣子做


更友善一些的話，可以這樣做

Type Ahead
自動完成 (Auto-complete)


3. 會員加入及結帳流程
•  轉換率最嚴重的斷點


登入及註冊問題
•  這是值得哪⼀一種等級信任的網站？
•  我常用的密碼能不能使用？（長度,編碼)
•  「帳號」是什麼格式？ email 還是自定名稱？
•  能用 / 該用 OpenID 嗎？
•  沒有打算要「發展關係」的時候，寧可不加
入會員


結帳流程
•  遠比⼀一般理解的更長：
– 回想帳號密碼
– 查詢帳號密碼

•  達到免運費了嗎？免運費的門檻是多少？
•  查看購物車（要先登入？）
•  選擇付款及物流方式


4. 網頁長度
•  我們又不是大陸網站
•  網頁太長會 load 很久
•  網頁太長不好用？


瞄準

點擊

滾動


把網頁長度加大的好處
• 搶著上首頁的內容更容易增加
–  邊際效應：幫助部門間的和諧

• 降低 Bounce Rate
• 提高瀏覽量
• 對那些無明確購買目標的「逛網」
者，能更輕易獲得逛街的滿足感

5. Tab 及 Lightbox
Tab


Lightbox


Tab 本來是這樣子用的


Tab 後來變成這樣子用


-28-

Lightbox 經常被無意中關掉


如果你不想讓使用者看到，
就請使用Tab View隱藏起來

如果你想讓使用者關閉，
就請使用 Lightbox


答案不⼀一定是答案，
找答案的方法才是答案



http://www.useit.com/alertbox/user-research-methods.html

有的當探照燈，有的作為顯微鏡


http://www.slideshare.net/andrew_null/metrics-driven-design-by-joshua-porter

方向⼀一：數據評估及分析
行為數據分析 (Data-Driven Design)
•  藉由網站/App 分析軟體（例如 Google
Analytics, Flurry) 記錄使用者的行為軌跡
•  從數據中挖掘問題，尋找設計決策方案
– 例如搜尋關鍵字統計，常用網頁統計，流程的中斷
點，異常跳離率…等

•  實測不同設計方案的效果（A/B Test)

觀念很簡單，做起來好像很難

•  GA 這麼強大，還是免費的，不用嗎？還
是不會用？


例：Data-Driven Design (A/B Test)


例：Conversion Tracking
u 

平均點閱率
0.36%

100,000,000
impressions
廣告Cost
100萬

流失 15%
剩餘 85%

v 

360,000
clicks

w 

306,000
visitors

平均回應率 5-15%

x 

30,600
平均成交率 2-10%
leads

y 

1,530 sales

1. 廣告曝光
2. 點閱
3. 進入網站
4. 留下資料
5. 完成交易

媒體投資金額
獲得
單位
$1,000,000 100,000,000 Ad impressions
$1,000,000
360,000 Clicks
$1,000,000
306,000 Visits
$1,000,000
30,600 Leads
$1,000,000
1,530 Sales

轉換率
0.36%
85%
10%
5%

成本衡量單位
CPM
$10
CPC
$3
CPL
CPS


$33
$654

創造業績：要補血，也要止血
讓業績加倍的2種方法：
1.  廣告投放預算加倍 ß 補血
2.  讓有效交易加倍ß 止血


方向二：觀察傾聽使用者行為 (質性研究）
•  有很多問題不是 GA 就能偵測出來的
•  例如：介面設計，命名認知，互動流程


Heuristic Evaluation 啟發式評估
•  或稱為專家評估建議 (Expert Review)
•  由介面設計專家進行介面與流程的檢視
•  依照專家本身的經驗及相關準則進行評估

42


易用性測試 Usability Test
•  直接觀察使用情況
•  從使用者的角度來評
估是否好用？哪些地
方會造成困擾挫折？
或無法完成操作？


Eye Tracking 眼動分析
•  使用者如何閱讀瀏覽網頁？會看哪裡？不看
哪裡？會看多久？會如何看？

-44-


探索使用者對資訊認知與理解
（Card Sorting)
•  使用者如何理解資訊與資訊之間的關係
•  資訊項目的從屬關係，相似性，產生誤解或
難以理解。
•  從使用者角度對資訊項目進行命名


例：eBay改版


eBay改版流程簡述
三階段：探索、瞭解與驗證，微調
1. 探索階段：訪問使用者、管理階層以及設計團隊

得出約三百件工作，分類整理與篩選剩⼀一百件。
2. Open card sorting(第二階段)：邀請28名參與者，
用⼀一百件常見的工作來建立心智模型，得出五個最
上層類別資訊架構。
3. Online closed card sorting (第三驗證與微調階
段)，找1000名使用者，將⼀一百件工作分別擺進五
個最上層類別中。

例：英國政府網站 www.gov.uk
•  2012年7月發佈新版網站，使用率大幅度攀升
•  位居英國網站Alexa排名第 79 位
•  2013年4月擊敗時尚建築等類，獲得年度最佳設計獎

資料來源：Alexa, 2013/10/10

精心設計的
ICON 為何放棄使用？
•  ⼀一開始設計了精美的icon
•  經過user testing發現，問
題出在網頁介面及導覽設
•  也發現 icon不會幫助使用
者更容易記憶。
•  結果：改成更易辨識的字體
及排版。
http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/

以使用者為中心做出設計決策


脈絡訪查 Contextual inquiry
•  進入實際場域，進行使用者行為的觀察，並
透過訪談挖掘行為背後的動機跟影響因素
•  這是⼀一種需求分析的系統性歸納方法。


再⼀一次 key concepts
•  用戶行為不是我們想像的那樣
•  介面細節造成行為轉折
•  順勢而為，更容易改變行為
•  商品內容/品牌價值/服務品質是基本
•  答案不⼀一定是答案，找答案的方法才是答案
•  使用者研究
= 量化體檢＋質化診斷（望聞問切)

[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師