$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

網路星期二

September 13, 2023
Tweet

More Decks by 網路星期二

Other Decks in Technology

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. 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: [email protected]
    fb: fb.me/uxrichard (加臉友請傳訊息)
    ig: richard_tsai_ux
    Iine: grichard1121
    謝謝聆聽!

    View Slide

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

    View Slide