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

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

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

Transcript

1. 從暗黑走向光明 — 網站設計技巧介紹 蔡明哲 Richard Tsai 悠識數位 UX Coach 2023.08.15
2. 對非營利組織來說，無論是要傳遞組織宗旨、推廣理念，或想募款、舉辦 活動，官方網站都扮演非常關鍵的角色。 本次講座三個面向: 網站專案啟動挑戰、介面設計、使用者中心工作流程 分享多年來觀察到的實務問題，及可能對應建議。 資源有限的情況下，如何減少網站設計困擾，提升網站帶來的效益！ 這次講座想傳達什麼?
3. 悠識顧問服務以 「用戶體驗」為核心 願景是「協助創新設計人才的培育，並帶動產業服務體驗的全面提升」
4. 悠識為企業服務，也為您服務 研究 Research 規劃 Plan 策略 Strategy 面向 企業組織 培訓 Coach 原型 Prototype 社群 Community 面向 從業人員
5. 多元產業經驗 5 汽車 Infiniti Toyota Abc好車網 電商/零售 Yahoo 奇摩 LINE 購物 博客來 主婦聯盟合作社 安麗 教育與NPO 多益TOEIC 雲門舞集 均一教育平台 DFC 童心創意 自行車新文化 媒體/出版 天下雜誌 康健 親子天下 聯合報 康泰納仕 ELLE 城邦 政府法人 鐵路管理局 公路總局 集保所 運研所 消防署 金融 玉山銀行 國泰世華 中國信託 兆豐銀行 土地銀行 將來銀行 永豐金證券 康健人壽 富邦人壽 國泰人壽 國泰產險 全球人壽 法國巴黎人壽 互聯網 Yahoo 奇摩 遊戲橘子 Whoscall Mobile01 104人力銀行 科技 BenQ ASUS 博錸生技 電信 中華電信 遠傳電信 凱擘寬頻 製造外銷 安口食品機械 天藝工業 購物,拍賣,商城 新聞, 股市.. 通路/品牌 統一超商 台北101 TOTO IKEA 迪卡儂 桂冠食品 幣託 (虛擬貨幣) Cubo AI 網路新創
6. Axure RP 代理 • 數位產品原型設計工具 • 適合 UX designer & 產品經理 • 快速建立可互動介面原型（interactive prototype） • 不需撰寫程式碼
7. 舉辦 UX 主題國際研討會 電子商務經驗設計論壇 創新設計年會 使用者經驗論壇 (2013) (2013 - 2019) (2013 - 2015) 未來金融創新體驗設計論壇 (2014) 2013 2014 2015 2016 2017 2018 2019
8. 8 悠識數位 UX Coach 暨 創辦人 HPX 社群創辦人 蔡明哲 Richard Tsai 數據分析 UX Coach 系統分析 專案管理 資訊架構 用戶研究 江湖稱號: 理查哥
9. DBMS 資料庫管理系統 UNIX Shell Script C 語言 Data Structure SQL 系統移植 產品經理 廣告/行銷 消費：Coke、KFC... 電信：泛亞、中華、台哥大、遠傳 金融：HSBC、富邦 交通：高鐵、 NISSAN 法人：工研院、證交所、櫃買中心 電子：光寶、 NEXCOM 房仲：信義、永慶 UX / 創業 資訊架構 原型設計 使用者研究 軟體代理 課程培訓 社群經營 軟體技術 技術人 - 行銷人 - 設計人 - 生意人 9
10. 資訊架構學 網站、App與資訊生態系統規劃 作者： Louis Rosenfeld, Peter Morville, Jorge Arango 共同譯者： 陳書儀 Max 老師，蔡明哲 Richard Information Architecture, 4th Edition
11. 網站這個東西這麼複雜.. 好難 (心累) • 根據我做過幾百個網站的經驗: 世界上不存在 – 又快/又便宜/又有效的網站設計解法 • 對，很複雜 (事情很複雜，人也是，意見很多) • 建議聚焦在: 你要什麼? 組織要什麼? 不要執著在網站功能 11
12. 12 很快 便宜 有效 要快又要有效， 錢要準備多一點 要省錢又要有效， 時間必須多一點 很快也很便宜的， 通常效果是有限的
13. 做網站跟找工作一樣，想通了就容易接受現實 13 收入高 快速 輕鬆 不存在
14. 網站/App 相似點: 人造物, 給人用, 放東西, 有內外, 都花錢, 會爛掉… 差異點: 本質不同, 擴增彈性不同, 花錢不同, 專業不同 ... 實體空間
15. 網站/App • 目的(用途) • TA (目標使用者) • 規劃 ━ 需求: 功能內容, 架構呈現 ━ 資源: 預算/技術 • 建置 ━ 名稱 ━ 地址 ━ 方案 • 個人, 文章, 社群, 交易, … • 給誰看? 給誰用? • 規劃 ━ Sitemap, Wireframe, Flow.. ━ 1萬 or 100萬, .NET or php.. • 建置 ━ X新聞, Y商城, Z平台.. ━ news.x.com, shop.y.com ━ 租用, 自建 知識框架
16. 實體空間 • 目的(用途) • TA (目標使用者) • 規劃 ━ 需求: 功能內容, 架構呈現 ━ 資源: 預算/技術 • 建置 ━ 名稱 ━ 地址 ━ 方案 • 居家, 校園, 百貨公司, … • 給誰看? 給誰用? • 規劃 ━ 建築藍圖, 空間圖, 工程結構.. ━ 1萬 vs 1000萬, 木造 vs 水泥鋼骨 • 建置 ━ 建築名, 學校名, 商城名 ━ 台北市忠孝東路七段 ━ 租用, 自建 知識框架
17. 非技術者也會的知識框架 • 目的(用途) • TA (目標使用者) • 規劃 ━ 需求: 功能內容, 架構呈現 ━ 資源: 預算/技術 • 建置 ━ 名稱 ━ 地址 ━ 方案 • 居家, 校園, 百貨公司, … • 給誰看? 給誰用? • 規劃 ━ 建築藍圖, 空間圖, 工程結構.. ━ 1萬 vs 1000萬, 木造 vs 水泥鋼骨 • 建置 ━ 建築名, 學校名, 商城名 ━ 台北市忠孝東路七段 ━ 租用, 自建
18. 學習資源 (大補帖) 英國政府數位服務設計手冊 18 GOV.UK GDS design guideline https://gds.hpx.tw 2015年中文翻譯版 來自 HPX 讀書會志工計畫 (HPX:非營利且沒登記又鬆散的學習型組織)
19. 19 學習資源 (大補帖) 英國政府數位服務設計手冊 • 觀念完整 • 相較白話 • 實務應用
20. 1.以使用者為中心的 alpha 和 beta 階段：結合設計和研究，打造使用者中心的服務。 2.GOV.UK 設計原則 ：讓人們更喜歡使用的設計原則 3.使用者研究方法 ：了解你的使用者和他們需求的方法 4.GOV.UK elements ：排版，網格，字體，顏色，圖像，圖標，表單，按鈕和數據 5.設計模式 ：常用的表單與交易頁面設計模式 6.使用原型 ：在做中學 7.親和性 ：如何創造讓每個人都能使用的服務 8.瀏覽器和裝置 ：應選用何者做測試，以及如何給予最佳支援 9.你的服務看起來應該像什麼 ：引導創造具有一致性的用戶體驗 10.頁首和頁尾 ：使用GOV.UK頁首的導引 20
21. 21 11.列印表單 ：設計紙本文件，或將原有紙本文件重新設計 12.使用者如何閱讀 ：閱讀年齡，線上閱讀，簡單的英語，學習障礙 13.數據視覺化 ：創造有價值和有意義的圖形，幫助分析數據 14.卡片分類法： 建立框架或解釋資訊的方法 15.選擇合適的格式： 合適的內容格式才有助於使用者（避免特殊格式） 16.服務隱私權保護聲明範本： 製作問答，標示措辭，傳遞給使用者等 17.使用者需求： 服務設計要專注在使用者身上 18.共享資源 ：分享您的前端資產，使他們可以很容易地重複使用 19.SASS 共用模組 ：分享模組化的程式碼與技術
22. 我自認為的正規作法 22
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 設計與開發
24. 一般企業組織內仍遇到很多困擾 (你不孤單)
25. 25 設計品質 商業成效 結果 Problems 需求 資源/專業 溝通 預算 下游溝通 水平溝通 時間 人力 上游溝通 利害關係人需求及期待 用戶需求 網站專案問題通常歸在這三類 規劃 設計 技術
26. 我擅長的數位產品設計 RADO 模式 26 ‣ 流程規劃 ‣ 介面布局 ‣ 介面細部設計 ‣ 介面互動設計 ‣ 內容撰寫編輯 ‣ 功能互動設計 ‣ 導覽 Navigation ‣ 搜尋 Search ‣ 命名 Labeling ‣ 組織 Organization ‣ 利害關係人地圖 利害關係人 使用者研究 ‣ 質性研究 ‣ 量化研究 ‣ 用戶分群 ‣ 目標用戶 ‣ JTBD / CJM ‣ 經驗法則評估 ‣ 需求蒐集與盤點 ‣ 內部計畫與文件 內部需求 成效 Outcome Research 研究 Information Architecture 資訊架構規劃 Prototype Design 原型設計 1 需求蒐集與研究 3 做出模擬設計幫助溝通 2 建立空間/提供方向
27. 27 成效 Outcome Research 研究 Information Architecture 資訊架構規劃 Prototype Design 原型設計 需求 資源/專業 溝通 預算 下游溝通 水平溝通 時間 人力 上游溝通 用戶需求 規劃 設計 技術 Solutions Problems
28. 現代能做出網站的工具 變多了 28
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
30. 最輕量的: 建立 Portaly 網站 Portaly 沒有付我業配喔… 30
31. 從觀察模仿開始 https://portaly.cc/richardux https://portaly.cc/userxper
33. 輕鬆三步驟，就有一個小網站 (手機版好用) 三 步驟: 1. 準備素材: 想好短網址 portaly.cc/______，1張大圖(照片) 2. 建立 portaly 帳號 3. 輸入短網址，上傳大圖，以及其他資訊（三分鐘） 沒有其他了，完成! 33
34. 從域名設定到 wordpress架站 34 Wordpress 也沒有付我業配喔…
35. 域名申請 & WordPress 架站 • 在 wordpress.com 申請免費子域名 • 在 wordpress.com 選用模板安裝 • 透過後臺功能，新增編輯內容及選單 • 還有千百種以上的外掛模組
36. wordpress.com 提供 no code 架站服務 (最終目的是收費, 不付費的網站會出現廣告) 36
37. wordpress.org (wordpress CMS 開放原始碼程式下載) 37
38. 網站專案啟動 38 專案啟動 介面設計 管理專案工作 - 該從哪裡下手？ - 如何找人幫忙？ - 為什麼別人很難幫忙？
39. 請問網站專案一開始要做什麼? 找廠商 找外援 找預算 找人手 學習網站 技術/網站 設計/網路 行銷
40. 不斷做各種評估取捨，要從蒐集資訊開始 • 該從哪裡下手？ • 如何找人幫忙？ • 為什麼別人很難幫忙？ 我們是誰? 組織的目標 對象是誰? 對象的需求 內 外
41. 網站專案先從蒐集需求開始，先 “內” 再 “外” 不是立刻找外援，先從內部開始: 1. 盤點組織目的 / 外部目標對象 (stakeholder) 2. 盤點 內部需求 / 目標對象需求 3. 整理成分類，整理成列表 4. 針對細項標示必要性 5. 內部討論建立共識，找出核心項目 (一定要做，高價值低成本)
42. 找外援 (廠商, 技術開發, 設計師等) 的狀況 他會問: • 你有多少錢? • 時間不確定? • 你們要做什麼? ━ 有文件嗎? ━ 用什麼技術? ━ 是新網站? 還是改版? ━ 資料放在哪裡? 打算怎麼處理? ━ 內容型態是哪些種類? ━ 選單架構是 (sitemap 網站空間地圖)? ━ 有沒有參考案例? 42 你想知道: • 要花多少錢? • 要多久? • 能不能幫忙?
43. 需求單位 營運的人： 管理事務, 業務執行, 營運服務.. %$&^*$ 規劃/開發/設計單位 實現的人： 技術, 資訊, 設計, 開發, 專 案管理
44. 一開始先從組織本身，釐清初衷 What & Why Strategy Scope Style Stakeholder 目標 商業價值 共識成熟度 Is & isn’t 專案範疇 (顆粒大小) Do & don’t 參考案例 權責角色 內部相關單位 外部合作夥伴 目標使用者(顧客) 視覺風格 品牌精神 企業文化 溝通訴求 參考案例
45. 不能只依賴文件/Email，善用手繪紙本的表達方式 文件/Email 溝通互動 提問技巧 方法：會議前 後及會議當下 %$&^*$
46. 以參與式溝通，進行組織內部討論 用 office 文件開會 • 好處很多 • 壞處也很多 • 很少人能寫清楚 • 失去全局觀 • office文件不好改 因為文件本身會產生確認感 • 文件無法創造全員參與 突破溝通慣例 • 卡片排列 card sorting • 樂高積木表達流程互動 • 手繪心智圖 • 白板繪圖 • 拍影片 • 情境劇本 (演戲)
47. 視覺化/圖像化的溝通手法 用戶畫像 (Persona) 顧客旅程地圖 (Customer Journey Map) 利害關係人地圖 利害關係人互動地圖 心智圖 WBS 工作結構分解圖
48. 介面設計 - 表達需求並掌握品質 48 專案啟動 介面設計 管理專案工作 - 裝置差異 : 手機與電腦 - 拆解網站設計的多元要素
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
50. Why Mobile First 行動設計優先? • 好處 - 手機用戶體驗提升 • 具體好處: ━ 停留互動時間較久 ━ 轉換率較高 ━ Google Search 索引加分 (Mobile SEO) 50
51. 行動優先的具體證據 – 網頁設計提案是哪個版本? 51 先看手機版網頁
52. Mobile 設計兩大重點：大拇指法則＋減法設計 Less is More 資訊減量，提升注意力 突顯下一步，降低選擇障礙 去蕪存菁，分辨關鍵內容(不要貪心) 52 手指觸控，確保按鈕連結夠大 不要照抄桌面版的排版設計 大拇指法則 減法設計
53. 你覺得有什麼改善空間? 53
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 查看內容
55. 拆解網站設計的多元專業 - 從 Layout 開始 55 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點 動線導覽 介面布局 內容撰寫編輯 功能互動設計 介面細部設計 介面互動設計 視覺設計 用戶需求 商業目標
56. Layout (版面設計 ) • 決定文本和圖像的整體布局及媒介大小或形狀 • 區域的邊界、字體、字體大小和對齊 • 需要智慧、感知力和創造力 • 受到文化、心理學的影響 • 根據作者/編輯想要傳達及強調的特定主題。 https://zh.wikipedia.org/zh-tw/版面设计
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. 一致的 結構的 用來表達的
58. Knolling - 將相關聯的物品以平行或是垂直排放的組織方式 https://www.gvm.com.tw/article/68734
59. Grid System 網格系統 • 網格 Gris system 是一組指導方針 • 適用於平面排版/網頁排版 • 對頁面上的元素進行對齊和重複 https://www.interaction-design.org/literature/article/the-grid- system-building-a-solid-design-layout
60. 知名的 960 Grid System • 早期螢幕寬度 1024px • 扣除瀏覽器捲軸及邊框，960 是許多數值的最小公倍數
61. 拆解網站設計的多元專業 – 動線導覽 61 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點 動線導覽 介面布局 內容撰寫編輯 功能互動設計 介面細部設計 介面互動設計 視覺設計 用戶需求 商業目標
62. 導覽體系 Navigation System • 全站導覽系統GlobalNav. • 區域導覽系統LocalNav. • 情境式導覽系統ContextNav. • 輔助的導覽系統Utility ━ 索引 ━ 網站地圖 ━ 指南 • 路標Breadcrumb
63. 導覽選單設計是一項考驗想像力的工作 導覽選單設計也是 大型網站的設計痛點
64. 主導覽選單有很多變化，例如 MegaMenu • 容納大量內容 • 讓用戶理解架構 • 突顯重點 • 多樣化 • 加⼊廣告 • 加⼊ActionButton
65. 另類導覽系統：Fat footer 的空間索引
66. https://uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac 漢堡 Hamburger 烤肉串 Kebab 肉丸 Meatballs 便當 Bento
67. 導覽選單設計就是想像力的發揮 哆啦a夢的任意門 : 什麼地方都可以去
68. 小結 - 介面設計 68 1. 以多元服務形成 生態系是理想， 而盤點現況則是 起點 1. 以多元服務形成 生態系是理想， 而盤點現況則是 起點 1. 以多元服務形成 生態系是理想， 而盤點現況則是 起點 大拇指法則 減法設計 整齊就是美 960 grid system 不拘泥形式 它就是任意門 手機優先 整齊排版 導覽選單
69. 工作流程 - 步驟與招式 69 專案啟動 介面設計 工作流程 - 步驟與招式 •有效的設計 - 以使用者為中心 •了解用戶的工具及技巧 - 用戶訪談與行為分析
70. 網站專案的流程，角色不同想法不同
71. 軟體工程師心目中的流程
72. 以網站企劃設計流程為例 72 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點 動線導覽 介面布局 內容撰寫編輯 功能互動設計 介面細部設計 介面互動設計 視覺設計 用戶需求 商業目標
73. 打地基 73 願景使命 目標用戶 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點
74. 組織內容及資訊結構 74 目標用戶需求：服務，資 訊，內容，功能..等項目  同學會-盤後同學會  課程-投資理財  DVD  雜誌  叢書  討論區  團購  搜尋  購物車  紅利查詢  兌換券  會員中心 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點 顆粒大小不同的資訊， 結合而成立體空間構造
75. 影響網站UX的元素 75 Strategy 策略 Goal 目的 Structure 結構 Form 形式 Surface 表面 Touchpoint 觸點 資訊內容規劃 介面布局配置 視覺與文字介面設計。 這是最容易被感知的部份
76. 適合非設計師的網站規劃設計軟體 Axure RP 76 查詢 知乎 上對岸 axure 對產品企劃的重要性 axure.com Axure RP 是悠識代理的產品
77. 適合設計師使用的網站設計軟體 Figma 77 網頁設計是一種設計專業 人人都可以學 但是只有專業設計師才能做得好
78. 在上述流程中，保留一些時間在用戶訪談或測試
79. 用在研究用戶的心力，都可以帶來效益 不管採用哪一種 易用性訪談 (Usability Study) 或 典型易用性測試 (Usability Test) 量化數據分析 或 問卷量表 易用性訪談： 觀察+訪談 數據測量
80. 具備單面鏡的研究室 旁邊觀察
81. 搜尋引擎 推薦連結 … 網站 網頁 Similar Web UberSuggest  Google Analytics  Click Heatmap Pagespeed Insight 資料庫 Excel Tableau Power BI 分析網站流量，由外而內 容易被看到 動線 外部環境
82. 工具 1 ： Google Analytics 基本數據： • 瀏覽量統計與變化 • 用戶區隔 • 重點頁面 • 裝置區隔 https://analytics.google.com/ 點擊圖片可至該工具網站
83. 工具 2 ： Microsoft Clarity 點擊熱圖分析工具 基本數據： • 網頁介面中的互動狀況 • 點擊熱區/非熱區 https://clarity.microsoft.com/ 點擊圖片可至該工具網站
84. 小結 – 不管哪一種角色跟流程，選擇做對的事情 84 Do the right thing Do the things right.
85. 理查哥 服務專線 (顧問/教練/職涯) email: richard@userxper.com fb: fb.me/uxrichard (加臉友請傳訊息) ig: richard_tsai_ux Iine: grichard1121 謝謝聆聽！
86. 給企業客戶的 UX 系列課程