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

by 網路星期二

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

我自認為的正規作法 22

Slide 23

Slide 23 text

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 設計與開發

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

今日網站建置方案多元, 非技術人員也可以自建 • 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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

參考資料: 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 查看內容

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

介面布局 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. 一致的結構的用來表達的

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

軟體工程師心目中的流程

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

給企業客戶的 UX 系列課程