[ecx] 從使用者研究發掘出來的網站獲利關鍵設計蔡明哲 /...

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

從使用者研究發掘��

網站獲利關鍵設計

蔡明哲悠識首席資訊架構師

[email protected]


蔡明哲 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都市自行車騎乘經驗研究 �

–  紅利積點消費者經驗及店家POS系統接受度研究 … etc.�

�


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 本來是這樣子用的�


-28-

Tab 後來變成這樣子用


Lightbox 經常被無意中關掉�


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

��如果你想讓使用者關閉，��

就請使用 Lightbox


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

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. � 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)


平均點閱率� 0.36%�

平均回應率 5-15%�

平均成交率 2-10%�

流失 15%� 剩餘 85%�

1,530 sales�

30,600 � leads�

360,000� clicks �

100,000,000� impressions� 306,000�

visitors�

v  � w  � x  �

u  �

廣告Cost 100萬�

媒體投資金額獲得單位轉換率

1. 廣告曝光 $1,000,000 100,000,000 Ad impressions 0.36% CPM $102. 點閱 $1,000,000 360,000 Clicks 85% CPC $33. 進入網站 $1,000,000 306,000 Visits 10%4. 留下資料 $1,000,000 30,600 Leads 5% CPL $335. 完成交易 $1,000,000 1,530 Sales CPS $654

成本衡量單位

y  �

例：Conversion Tracking�


創造業績：要補血，也要止血

讓業績加倍的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] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 /...

Design

[ecx] 從使用者研究發掘出來的網站獲利關鍵設計蔡明哲 /...