#137- 從暗黑走向光明——網站設計技巧介紹

https://nettuesday.tw/events/2023/07/1201

活動簡介：
對非營利組織來說，無論是要傳遞組織宗旨、推廣理念，或想募款、舉辦活動，官方網站都扮演非常關鍵的角色。本月的講座，有幸邀請到悠識數位的用戶體驗策略教練 蔡明哲（Richard Tsai），藉由三個主要面向——網站專案啟動的挑戰、介面設計、使用者中心的工作流程，來分享他多年來觀察到的實務問題的可能對應建議。您將學到在有限的資源之下，怎麼減少網站設計的困擾，提升網站帶來的效益！

Transcript

1. 從暗黑走向光明
   — 網站設計技巧介紹
   蔡明哲 Richard Tsai
   悠識數位 UX Coach
   2023.08.15
   

   View Slide

2. 對非營利組織來說，無論是要傳遞組織宗旨、推廣理念，或想募款、舉辦
   活動，官方網站都扮演非常關鍵的角色。
   本次講座三個面向: 網站專案啟動挑戰、介面設計、使用者中心工作流程
   分享多年來觀察到的實務問題，及可能對應建議。
   資源有限的情況下，如何減少網站設計困擾，提升網站帶來的效益！
   這次講座想傳達什麼?
   

   View Slide

3. 悠識顧問服務以 「用戶體驗」為核心
   願景是「協助創新設計人才的培育，並帶動產業服務體驗的全面提升」
   

   View Slide

4. 悠識為企業服務，也為您服務
   研究
   Research
   規劃
   Plan
   策略
   Strategy
   面向 企業組織
   培訓
   Coach
   原型
   Prototype
   社群
   Community
   面向 從業人員
   

   View Slide

5. 多元產業經驗
   5
   汽車
   Infiniti
   Toyota
   Abc好車網
   電商/零售
   Yahoo 奇摩
   LINE 購物
   博客來
   主婦聯盟合作社
   安麗
   教育與NPO
   多益TOEIC
   雲門舞集
   均一教育平台
   DFC 童心創意
   自行車新文化
   媒體/出版
   天下雜誌
   康健
   親子天下
   聯合報
   康泰納仕
   ELLE
   城邦
   政府法人
   鐵路管理局
   公路總局
   集保所
   運研所
   消防署
   金融
   玉山銀行
   國泰世華
   中國信託
   兆豐銀行
   土地銀行
   將來銀行
   永豐金證券
   康健人壽
   富邦人壽
   國泰人壽
   國泰產險
   全球人壽
   法國巴黎人壽
   互聯網
   Yahoo 奇摩
   遊戲橘子
   Whoscall
   Mobile01
   104人力銀行
   科技
   BenQ
   ASUS
   博錸生技
   電信
   中華電信
   遠傳電信
   凱擘寬頻
   製造外銷
   安口食品機械
   天藝工業
   購物,拍賣,商城 新聞, 股市..
   通路/品牌
   統一超商
   台北101
   TOTO
   IKEA
   迪卡儂
   桂冠食品
   幣託 (虛擬貨幣)
   Cubo AI
   網路新創
   

   View Slide

6. Axure RP 代理
   • 數位產品原型設計工具
   • 適合 UX designer & 產品經理
   • 快速建立可互動介面原型（interactive prototype）
   • 不需撰寫程式碼
   

   View Slide

7. 舉辦 UX 主題國際研討會
   電子商務經驗設計論壇
   創新設計年會
   使用者經驗論壇 (2013)
   (2013 - 2019)
   (2013 - 2015)
   未來金融創新體驗設計論壇 (2014)
   2013 2014 2015 2016 2017 2018 2019
   

   View Slide

8. 8
   悠識數位 UX Coach 暨 創辦人
   HPX 社群創辦人
   蔡明哲 Richard Tsai
   數據分析
   UX Coach
   系統分析
   專案管理
   資訊架構
   用戶研究
   江湖稱號: 理查哥
   

   View Slide

9. DBMS 資料庫管理系統
   UNIX Shell Script
   C 語言
   Data Structure
   SQL
   系統移植
   產品經理
   廣告/行銷
   消費：Coke、KFC...
   電信：泛亞、中華、台哥大、遠傳
   金融：HSBC、富邦
   交通：高鐵、 NISSAN
   法人：工研院、證交所、櫃買中心
   電子：光寶、 NEXCOM
   房仲：信義、永慶
   UX / 創業
   資訊架構
   原型設計
   使用者研究
   軟體代理
   課程培訓
   社群經營
   軟體技術
   技術人 - 行銷人 - 設計人 - 生意人
   9
   

   View Slide

10. 資訊架構學
    網站、App與資訊生態系統規劃
    作者： Louis Rosenfeld, Peter Morville, Jorge Arango
    共同譯者： 陳書儀 Max 老師，蔡明哲 Richard
    Information Architecture, 4th Edition
    

    View Slide

11. 網站這個東西這麼複雜.. 好難 (心累)
    • 根據我做過幾百個網站的經驗:
    世界上不存在 – 又快/又便宜/又有效的網站設計解法
    • 對，很複雜 (事情很複雜，人也是，意見很多)
    • 建議聚焦在: 你要什麼? 組織要什麼? 不要執著在網站功能
    11
    

    View Slide

12. 12
    很快
    便宜 有效
    要快又要有效，
    錢要準備多一點
    要省錢又要有效，
    時間必須多一點
    很快也很便宜的，
    通常效果是有限的
    

    View Slide

13. 做網站跟找工作一樣，想通了就容易接受現實
    13
    收入高
    快速 輕鬆
    不存在
    

    View Slide

14. 網站/App
    相似點: 人造物, 給人用, 放東西, 有內外, 都花錢, 會爛掉…
    差異點: 本質不同, 擴增彈性不同, 花錢不同, 專業不同 ...
    實體空間
    

    View Slide

15. 網站/App
    • 目的(用途)
    • TA (目標使用者)
    • 規劃
    ━ 需求: 功能內容, 架構呈現
    ━ 資源: 預算/技術
    • 建置
    ━ 名稱
    ━ 地址
    ━ 方案
    • 個人, 文章, 社群, 交易, …
    • 給誰看? 給誰用?
    • 規劃
    ━ Sitemap, Wireframe, Flow..
    ━ 1萬 or 100萬, .NET or php..
    • 建置
    ━ X新聞, Y商城, Z平台..
    ━ news.x.com, shop.y.com
    ━ 租用, 自建
    知識框架
    

    View Slide

16. 實體空間
    • 目的(用途)
    • TA (目標使用者)
    • 規劃
    ━ 需求: 功能內容, 架構呈現
    ━ 資源: 預算/技術
    • 建置
    ━ 名稱
    ━ 地址
    ━ 方案
    • 居家, 校園, 百貨公司, …
    • 給誰看? 給誰用?
    • 規劃
    ━ 建築藍圖, 空間圖, 工程結構..
    ━ 1萬 vs 1000萬, 木造 vs 水泥鋼骨
    • 建置
    ━ 建築名, 學校名, 商城名
    ━ 台北市忠孝東路七段
    ━ 租用, 自建
    知識框架
    

    View Slide

17. 非技術者也會的知識框架
    • 目的(用途)
    • TA (目標使用者)
    • 規劃
    ━ 需求: 功能內容, 架構呈現
    ━ 資源: 預算/技術
    • 建置
    ━ 名稱
    ━ 地址
    ━ 方案
    • 居家, 校園, 百貨公司, …
    • 給誰看? 給誰用?
    • 規劃
    ━ 建築藍圖, 空間圖, 工程結構..
    ━ 1萬 vs 1000萬, 木造 vs 水泥鋼骨
    • 建置
    ━ 建築名, 學校名, 商城名
    ━ 台北市忠孝東路七段
    ━ 租用, 自建
    

    View Slide

18. 學習資源 (大補帖)
    英國政府數位服務設計手冊
    18
    GOV.UK GDS design guideline
    https://gds.hpx.tw
    2015年中文翻譯版
    來自 HPX 讀書會志工計畫
    (HPX:非營利且沒登記又鬆散的學習型組織)
    

    View Slide

19. 19
    學習資源 (大補帖)
    英國政府數位服務設計手冊
    • 觀念完整
    • 相較白話
    • 實務應用
    

    View Slide

20. 1.以使用者為中心的 alpha 和 beta 階段：結合設計和研究，打造使用者中心的服務。
    2.GOV.UK 設計原則 ：讓人們更喜歡使用的設計原則
    3.使用者研究方法 ：了解你的使用者和他們需求的方法
    4.GOV.UK elements ：排版，網格，字體，顏色，圖像，圖標，表單，按鈕和數據
    5.設計模式 ：常用的表單與交易頁面設計模式
    6.使用原型 ：在做中學
    7.親和性 ：如何創造讓每個人都能使用的服務
    8.瀏覽器和裝置 ：應選用何者做測試，以及如何給予最佳支援
    9.你的服務看起來應該像什麼 ：引導創造具有一致性的用戶體驗
    10.頁首和頁尾 ：使用GOV.UK頁首的導引
    20
    

    View Slide

21. 21
    11.列印表單 ：設計紙本文件，或將原有紙本文件重新設計
    12.使用者如何閱讀 ：閱讀年齡，線上閱讀，簡單的英語，學習障礙
    13.數據視覺化 ：創造有價值和有意義的圖形，幫助分析數據
    14.卡片分類法： 建立框架或解釋資訊的方法
    15.選擇合適的格式： 合適的內容格式才有助於使用者（避免特殊格式）
    16.服務隱私權保護聲明範本： 製作問答，標示措辭，傳遞給使用者等
    17.使用者需求： 服務設計要專注在使用者身上
    18.共享資源 ：分享您的前端資產，使他們可以很容易地重複使用
    19.SASS 共用模組 ：分享模組化的程式碼與技術
    

    View Slide

22. 我自認為的正規作法
    22
    

    View Slide

23. 05
    04
    03
    02
    01
    策略形成
    Strategy Formation
    範疇定義
    Scope Definition
    資訊架構 / 原型規劃
    IA / Prototype
    視覺 / 互動設計
    Visual / Interactive Design
    系統開發
    System Development
    設計 開發
    研究 規劃
    悠識的服務聚焦在：核心策略、收斂轉化 與 服務架構規劃 銜接客戶 / 第三方夥伴把服務落地
    Client's Own Team
    Design Agency Developer Vendor
    1-2-3 需求與規劃 + 4-5 設計與開發
    

    View Slide

24. 一般企業組織內仍遇到很多困擾 (你不孤單)
    

    View Slide

25. 25
    設計品質
    商業成效
    結果
    Problems
    需求
    資源/專業
    溝通
    預算
    下游溝通
    水平溝通
    時間
    人力
    上游溝通
    利害關係人需求及期待
    用戶需求
    網站專案問題通常歸在這三類
    規劃
    設計
    技術
    

    View Slide

26. 我擅長的數位產品設計 RADO 模式
    26
    ‣ 流程規劃
    ‣ 介面布局
    ‣ 介面細部設計
    ‣ 介面互動設計
    ‣ 內容撰寫編輯
    ‣ 功能互動設計
    ‣ 導覽 Navigation
    ‣ 搜尋 Search
    ‣ 命名 Labeling
    ‣ 組織 Organization
    ‣ 利害關係人地圖
    利害關係人
    使用者研究
    ‣ 質性研究
    ‣ 量化研究
    ‣ 用戶分群
    ‣ 目標用戶
    ‣ JTBD / CJM
    ‣ 經驗法則評估
    ‣ 需求蒐集與盤點
    ‣ 內部計畫與文件
    內部需求
    成效
    Outcome
    Research
    研究
    Information
    Architecture
    資訊架構規劃
    Prototype Design
    原型設計
    1 需求蒐集與研究
    3 做出模擬設計幫助溝通
    2 建立空間/提供方向
    

    View Slide

27. 27
    成效
    Outcome
    Research
    研究
    Information
    Architecture
    資訊架構規劃
    Prototype Design
    原型設計
    需求
    資源/專業
    溝通
    預算
    下游溝通
    水平溝通
    時間
    人力
    上游溝通
    用戶需求
    規劃
    設計
    技術
    Solutions Problems
    

    View Slide

28. 現代能做出網站的工具
    變多了
    28
    

    View Slide

29. 今日網站建置方案多元, 非技術人員也可以自建
    • No code 架站平台：
    ━ Google Site、Wix、Portaly、Cake Resume 、wordpress.com
    • 架站軟體（Content Management Systems，CMS）:
    ━ 首選 WordPress, 下載軟體 from wordpress.org
    • No code 開店: 蝦皮、淘寶、 Shopify…
    • 電商架站軟體: Magento、WooCommerce（WordPress擴充功能）
    還有很多…
    29
    

    View Slide

30. 最輕量的: 建立 Portaly 網站
    Portaly 沒有付我業配喔…
    30
    

    View Slide

31. 從觀察模仿開始
    https://portaly.cc/richardux
    https://portaly.cc/userxper
    

    View Slide

32. View Slide

33. 輕鬆三步驟，就有一個小網站 (手機版好用)
    三 步驟:
    1. 準備素材: 想好短網址 portaly.cc/______，1張大圖(照片)
    2. 建立 portaly 帳號
    3. 輸入短網址，上傳大圖，以及其他資訊（三分鐘）
    沒有其他了，完成!
    33
    

    View Slide

34. 從域名設定到 wordpress架站
    34
    Wordpress 也沒有付我業配喔…
    

    View Slide

35. 域名申請 & WordPress 架站
    • 在 wordpress.com 申請免費子域名
    • 在 wordpress.com 選用模板安裝
    • 透過後臺功能，新增編輯內容及選單
    • 還有千百種以上的外掛模組
    

    View Slide

36. wordpress.com 提供 no code 架站服務
    (最終目的是收費, 不付費的網站會出現廣告)
    36
    

    View Slide

37. wordpress.org
    (wordpress CMS 開放原始碼程式下載)
    37
    

    View Slide

38. 網站專案啟動
    38
    專案啟動 介面設計 管理專案工作
    - 該從哪裡下手？
    - 如何找人幫忙？
    - 為什麼別人很難幫忙？
    

    View Slide

39. 請問網站專案一開始要做什麼?
    找廠商
    找外援
    找預算
    找人手
    學習網站
    技術/網站
    設計/網路
    行銷
    

    View Slide

40. 不斷做各種評估取捨，要從蒐集資訊開始
    • 該從哪裡下手？
    • 如何找人幫忙？
    • 為什麼別人很難幫忙？ 我們是誰?
    組織的目標
    對象是誰?
    對象的需求
    內 外
    

    View Slide

41. 網站專案先從蒐集需求開始，先 “內” 再 “外”
    不是立刻找外援，先從內部開始:
    1. 盤點組織目的 / 外部目標對象 (stakeholder)
    2. 盤點 內部需求 / 目標對象需求
    3. 整理成分類，整理成列表
    4. 針對細項標示必要性
    5. 內部討論建立共識，找出核心項目 (一定要做，高價值低成本)
    

    View Slide

42. 找外援 (廠商, 技術開發, 設計師等) 的狀況
    他會問:
    • 你有多少錢?
    • 時間不確定?
    • 你們要做什麼?
    ━ 有文件嗎?
    ━ 用什麼技術?
    ━ 是新網站? 還是改版?
    ━ 資料放在哪裡? 打算怎麼處理?
    ━ 內容型態是哪些種類?
    ━ 選單架構是 (sitemap 網站空間地圖)?
    ━ 有沒有參考案例?
    42
    你想知道:
    • 要花多少錢?
    • 要多久?
    • 能不能幫忙?
    

    View Slide

43. 需求單位
    營運的人：
    管理事務,
    業務執行,
    營運服務..
    %$&^*$
    規劃/開發/設計單位
    實現的人：
    技術, 資訊, 設計, 開發, 專
    案管理
    

    View Slide

44. 一開始先從組織本身，釐清初衷 What & Why
    Strategy Scope Style
    Stakeholder
    目標
    商業價值
    共識成熟度
    Is & isn’t
    專案範疇
    (顆粒大小)
    Do & don’t
    參考案例
    權責角色
    內部相關單位
    外部合作夥伴
    目標使用者(顧客)
    視覺風格
    品牌精神
    企業文化
    溝通訴求
    參考案例
    

    View Slide

45. 不能只依賴文件/Email，善用手繪紙本的表達方式
    文件/Email
    溝通互動
    提問技巧
    方法：會議前
    後及會議當下
    %$&^*$
    

    View Slide

46. 以參與式溝通，進行組織內部討論
    用 office 文件開會
    • 好處很多
    • 壞處也很多
    • 很少人能寫清楚
    • 失去全局觀
    • office文件不好改
    因為文件本身會產生確認感
    • 文件無法創造全員參與
    突破溝通慣例
    • 卡片排列 card sorting
    • 樂高積木表達流程互動
    • 手繪心智圖
    • 白板繪圖
    • 拍影片
    • 情境劇本 (演戲)
    

    View Slide

47. 視覺化/圖像化的溝通手法
    用戶畫像 (Persona)
    顧客旅程地圖 (Customer Journey Map)
    利害關係人地圖
    利害關係人互動地圖
    心智圖
    WBS 工作結構分解圖
    

    View Slide

48. 介面設計 - 表達需求並掌握品質
    48
    專案啟動 介面設計 管理專案工作
    - 裝置差異 : 手機與電腦
    - 拆解網站設計的多元要素
    

    View Slide

49. 2023年手機佔全球網站流量 58.33% （不包括平板電腦）
    2017~ 2020 50% 左右
    2020 之後超過50%
    49
    https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/#main-content
    

    View Slide

50. Why Mobile First 行動設計優先?
    • 好處 - 手機用戶體驗提升
    • 具體好處:
    ━ 停留互動時間較久
    ━ 轉換率較高
    ━ Google Search 索引加分 (Mobile SEO)
    50
    

    View Slide

51. 行動優先的具體證據 –
    網頁設計提案是哪個版本?
    51
    先看手機版網頁
    

    View Slide

52. Mobile 設計兩大重點：大拇指法則＋減法設計
    Less is More 資訊減量，提升注意力
    突顯下一步，降低選擇障礙
    去蕪存菁，分辨關鍵內容(不要貪心)
    52
    手指觸控，確保按鈕連結夠大
    不要照抄桌面版的排版設計
    大拇指法則
    減法設計
    

    View Slide

53. 你覺得有什麼改善空間?
    53
    

    View Slide

54. 參考資料: Google Mobile App Design
    • Principles of Mobile App Design:
    Introduction
    • Tutorial
    • Chapter 1: App Navigation and
    Exploration
    • Chapter 2: In-App Search
    • Chapter 3: Commerce and Conversions
    • Chapter 4: Registration
    • Chapter 5: Form Entry
    • Chapter 6: Usability and Comprehension
    • Tools to Take Action
    查看內容
    

    View Slide

55. 拆解網站設計的多元專業 - 從 Layout 開始
    55
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    動線導覽
    介面布局
    內容撰寫編輯
    功能互動設計
    介面細部設計
    介面互動設計
    視覺設計
    用戶需求
    商業目標
    

    View Slide

56. Layout (版面設計 )
    • 決定文本和圖像的整體布局及媒介大小或形狀
    • 區域的邊界、字體、字體大小和對齊
    • 需要智慧、感知力和創造力
    • 受到文化、心理學的影響
    • 根據作者/編輯想要傳達及強調的特定主題。
    https://zh.wikipedia.org/zh-tw/版面设计
    

    View Slide

57. 介面布局 layout
    看看別人的定義:
    • Google Android Material Design:
    Material Design layouts use uniform elements and spacing to encourage
    consistency across platforms, environments, and screen sizes.
    • Siemens MindSphere Design System:
    A layout offers versatile ways of presenting and structuring content to create a
    balanced user experience.
    一致的
    結構的
    用來表達的
    

    View Slide

58. Knolling
    - 將相關聯的物品以平行或是垂直排放的組織方式
    https://www.gvm.com.tw/article/68734
    

    View Slide

59. Grid System 網格系統
    • 網格 Gris system 是一組指導方針
    • 適用於平面排版/網頁排版
    • 對頁面上的元素進行對齊和重複
    https://www.interaction-design.org/literature/article/the-grid-
    system-building-a-solid-design-layout
    

    View Slide

60. 知名的 960 Grid System
    • 早期螢幕寬度 1024px
    • 扣除瀏覽器捲軸及邊框，960
    是許多數值的最小公倍數
    

    View Slide

61. 拆解網站設計的多元專業 – 動線導覽
    61
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    動線導覽
    介面布局
    內容撰寫編輯
    功能互動設計
    介面細部設計
    介面互動設計
    視覺設計
    用戶需求
    商業目標
    

    View Slide

62. 導覽體系 Navigation System
    • 全站導覽系統GlobalNav.
    • 區域導覽系統LocalNav.
    • 情境式導覽系統ContextNav.
    • 輔助的導覽系統Utility
    ━ 索引
    ━ 網站地圖
    ━ 指南
    • 路標Breadcrumb
    

    View Slide

63. 導覽選單設計是一項考驗想像力的工作
    導覽選單設計也是 大型網站的設計痛點
    

    View Slide

64. 主導覽選單有很多變化，例如 MegaMenu
    • 容納大量內容
    • 讓用戶理解架構
    • 突顯重點
    • 多樣化
    • 加⼊廣告
    • 加⼊ActionButton
    

    View Slide

65. 另類導覽系統：Fat footer 的空間索引
    

    View Slide

66. https://uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac
    漢堡
    Hamburger
    烤肉串
    Kebab
    肉丸
    Meatballs
    便當
    Bento
    

    View Slide

67. 導覽選單設計就是想像力的發揮
    哆啦a夢的任意門 : 什麼地方都可以去
    

    View Slide

68. 小結 - 介面設計
    68
    1. 以多元服務形成
    生態系是理想，
    而盤點現況則是
    起點
    1. 以多元服務形成
    生態系是理想，
    而盤點現況則是
    起點
    1. 以多元服務形成
    生態系是理想，
    而盤點現況則是
    起點
    大拇指法則
    減法設計
    整齊就是美
    960 grid system
    不拘泥形式
    它就是任意門
    手機優先 整齊排版 導覽選單
    

    View Slide

69. 工作流程 - 步驟與招式
    69
    專案啟動 介面設計
    工作流程
    - 步驟與招式
    •有效的設計 - 以使用者為中心
    •了解用戶的工具及技巧 - 用戶訪談與行為分析
    

    View Slide

70. 網站專案的流程，角色不同想法不同
    

    View Slide

71. 軟體工程師心目中的流程
    

    View Slide

72. 以網站企劃設計流程為例
    72
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    動線導覽
    介面布局
    內容撰寫編輯
    功能互動設計
    介面細部設計
    介面互動設計
    視覺設計
    用戶需求
    商業目標
    

    View Slide

73. 打地基
    73
    願景使命
    目標用戶
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    

    View Slide

74. 組織內容及資訊結構
    74
    目標用戶需求：服務，資
    訊，內容，功能..等項目
     同學會-盤後同學會
     課程-投資理財
     DVD
     雜誌
     叢書
     討論區
     團購
     搜尋
     購物車
     紅利查詢
     兌換券
     會員中心
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    顆粒大小不同的資訊，
    結合而成立體空間構造
    

    View Slide

75. 影響網站UX的元素
    75
    Strategy 策略
    Goal 目的
    Structure 結構
    Form 形式
    Surface 表面
    Touchpoint 觸點
    資訊內容規劃
    介面布局配置
    視覺與文字介面設計。
    這是最容易被感知的部份
    

    View Slide

76. 適合非設計師的網站規劃設計軟體 Axure RP
    76
    查詢 知乎 上對岸 axure 對產品企劃的重要性
    axure.com
    Axure RP 是悠識代理的產品
    

    View Slide

77. 適合設計師使用的網站設計軟體 Figma
    77
    網頁設計是一種設計專業
    人人都可以學
    但是只有專業設計師才能做得好
    

    View Slide

78. 在上述流程中，保留一些時間在用戶訪談或測試
    

    View Slide

79. 用在研究用戶的心力，都可以帶來效益
    不管採用哪一種
    易用性訪談 (Usability Study)
    或
    典型易用性測試 (Usability Test)
    量化數據分析
    或
    問卷量表
    易用性訪談：
    觀察+訪談 數據測量
    

    View Slide

80. 具備單面鏡的研究室 旁邊觀察
    

    View Slide

81. 搜尋引擎
    推薦連結
    …
    網站 網頁
    Similar Web
    UberSuggest
     Google Analytics  Click Heatmap
    Pagespeed Insight
    資料庫
    Excel
    Tableau
    Power BI
    分析網站流量，由外而內
    容易被看到
    動線
    外部環境
    

    View Slide

82. 工具 1 ： Google Analytics
    基本數據：
    ● 瀏覽量統計與變化
    ● 用戶區隔
    ● 重點頁面
    ● 裝置區隔
    https://analytics.google.com/
    點擊圖片可至該工具網站
    

    View Slide

83. 工具 2 ： Microsoft Clarity 點擊熱圖分析工具
    基本數據：
    ● 網頁介面中的互動狀況
    ● 點擊熱區/非熱區
    https://clarity.microsoft.com/
    點擊圖片可至該工具網站
    

    View Slide

84. 小結 – 不管哪一種角色跟流程，選擇做對的事情
    84
    Do the right thing Do the things right.
    

    View Slide

85. 理查哥 服務專線 (顧問/教練/職涯)
    email: richard@userxper.com
    fb: fb.me/uxrichard (加臉友請傳訊息)
    ig: richard_tsai_ux
    Iine: grichard1121
    謝謝聆聽！
    

    View Slide

86. 給企業客戶的 UX 系列課程
    

    View Slide