UX 入 門 - 以 使 用 者 為 中 心 的 設 計 實 務 與 案 例 蔡 明 哲 Richard Tsai 悠 識 數 位 首 席 體 驗 架 構 師 richard@userxper.com 2015-10-31
Part 1 觀 念 篇 1. UX 是 什 麼? 2. 國 內 外 UX 發 展 概 況 3. 應 用 場 域 與 產 業 4. 迷 思 與 亂 象 Part 2 暖 身 篇 Part 3 實 務 篇 5. 為 何 學 習 UX? 6. 從 哪 裡 開 始 學 習 UX? 7. 設 計 流 程 8. 創 新 網 路 服 務 設 計 案 例 9. 遊 覽 車 駕 駛 培 訓 研 究 與 設 計
蔡 明 哲 Richard Tsai 悠 識 首 席 體 驗 架 構 師 HPX 社 群 創 辦 人 交 通 大 學 資 科 系 / 資 科 所 專 業 : 使 用 者 研 究, 網 站 企 劃, 資 訊 架 構, 介 面 設 計, 易 用 性, 專 案 管 理, 網 路 行 銷, 資 料 庫 行 銷, 系 統 分 析 研 究 與 設 計 經 驗 電 商 與 行 動 電 商 Usability Study 媒 體 網 站 眼 動 研 究 電 視 與 第 二 螢 應 用 使 用 者 行 為 研 究 資 訊 系 統 及 網 站 Usability Study (HR, 企 業 流 程, 社 群, 廣 告 平 台,..) 創 新 服 務 需 求 探 索 研 究 ( 線 上 學 習, 交 友 態 度, 親 子 互 動, 都 會 自 行 車,..) 產 業 經 驗 網 路 :Yahoo, 104 媒 體 : 天 下 雜 誌, ELLE 電 信 : 中 華 電 信, 台 哥 大, 遠 傳 金 融 : 玉 山, HSBC, 富 邦 交 通 : 高 鐵, NISSAN 政 府 法 人 : 工 研 院, 證 交 所, 櫃 買 中 心 電 子 製 造 : 光 寶,NEXCOM, Promise 房 仲 : 信 義, 永 慶, 中 信 3
願 景 帶 動 創 新 產 品 ( 服 務 ) 規 劃 設 計 人 才 的 提 昇 服 務 研 究 Research 企 劃 Planning 顧 問 Consulting 培 訓 Training 原 型 工 具 Prototype 研 討 會 Conference 4
Mobile (web/app) Desktop (web) Hardware UI Service 研 究 新 聞 行 動 閱 讀 行 為 行 動 電 子 商 務 行 為 2 nd Screen 導 購 需 求 產 品 簡 報 的 平 板 應 用 需 求 銀 行 個 人 信 貸 流 程 電 商 網 站 導 覽 設 計 探 索 電 信 商 帳 號 流 程 研 究 單 身 女 性 交 友 態 度 研 究 家 庭 數 位 生 活 大 客 車 駕 駛 安 全 代 間 價 值 移 轉 單 車 生 活 型 態 消 費 紅 利 態 度 看 電 視 時 之 互 動 情 境 投 信 業 行 動 版 官 網 銀 行 財 富 管 理 由 單 車 導 客 入 店 企 劃 第 二 螢 導 購 app 媒 體 業 行 動 電 商 網 站 CRM web app 電 子 發 票 後 台 動 物 診 療 系 統 新 聞 媒 體 網 站 保 險 業 響 應 式 官 網 監 理 服 務 網 股 市 資 訊 app 銀 行 財 富 管 理 智 慧 電 視 app 評 測 行 動 電 商 app 新 聞 app 人 力 網 站 搜 尋 介 面 品 牌 業 者 電 商 網 站 照 片 管 理 設 備 入 口 網 站 首 頁 媒 體 業 者 官 網 POS 系 統 前 後 台 流 程 電 子 目 錄 app 政 府 部 門 網 站
Part 1 觀 念 篇 1. UX 是 什 麼?
User experience (UX) involves a person's behaviors, attitudes, and emotions about using a particular product, system or service. - from Wikipedia 7
使 用 者 經 驗 User Experience 使 用 者 對 特 定 的 產 品 ( 服 務 ) 互 動 之 後 的 經 驗 品 質 bad good User Experience 8-8-
9
Donald Norman 認 知 心 理 學 專 家 Apple 先 進 科 技 中 心 副 總 Donald Norman: I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual. -10-
台 灣 : 使 用 者 經 驗 大 陸 : 用 戶 體 驗 英 文 :User Experience ( 縮 寫 UX, UE 都 有 人 用 ) 11-11-
經 驗 能 否 被 設 計? 12
影 響 使 用 者 經 驗 的 產 品 / 服 務 包 括 服 務 流 程 企 業 品 牌 行 銷 宣 傳 實 體 物 品 本 身 網 站 / 軟 體 / 硬 體 / 裝 置 13-13-
與 其 討 論 UX 如 何 被 設 計? 不 如 討 論 甚 麼 才 是 使 用 者 ( 顧 客 ) 需 要 的?
Facets of the User Experience -15-
使 用 者 ( 顧 客 ) 感 受 到 的 價 值 useful 需 求 與 渴 望 usable desirable value findable credible 找 得 到 / 可 以 用 accessible
隨 著 時 間,UX 的 觀 念 延 伸 擴 大 了. User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. - from nngroup 17
使 用 者 經 驗 逐 漸 變 成 商 業 策 略 ( 組 織 策 略 ) UX 策 略 ( 不 只 是 設 計 ) 產 品 UX 服 務 設 計 流 程 改 造 企 業 文 化 一 套 幫 助 企 業 組 織 創 造 產 品 服 務 價 值 的 觀 念 與 方 法 18
Part 1 觀 念 篇 2. 國 內 外 UX 發 展 概 況
UX 應 用 範 疇 逐 漸 擴 大 產 品 服 務 擴 大 地 理 全 球 組 織 人 才 跨 界 產 業 類 型 多 元
User Friendly ixdc UXHK 2013 年 30 多 國 家,100 個 組 織 舉 辦 350 場 活 動,30 場 大 型 研 討 會 資 料 來 源 :Happy UX 全 球 報 導 小 組 21
資 料 來 源 :Happy UX 全 球 報 導 小 組 22
資 料 來 源 :Happy UX 全 球 報 導 小 組 23
網 際 網 路 企 業 全 面 擁 抱 UX 24
台 灣 UX 發 展 的 重 要 推 手 25
台 灣 使 用 者 經 驗 設 計 協 會
IxDA Taiwan (Interaction Design Association, IxDA) 台 灣 互 動 設 計 協 會 不 僅 是 台 灣 設 計 教 育 的 開 拓 者, 也 是 持 續 關 注 台 灣 社 會 發 展 的 發 聲 者, 組 織 發 源 於 美 國, 是 一 個 專 注 於 互 動 設 計 的 國 際 性 非 營 利 組 織 從 2004 年 以 來 聚 集 了 全 球 超 過 20,000 名 的 會 員, 致 力 於 互 動 設 計 的 發 展 以 及 專 業 議 題 的 討 論 IxDA Taiwan 為 國 際 互 動 設 計 協 會 在 台 灣 的 分 支, 從 2010 年 成 立 以 來,IxDA Taiwan 建 立 了 一 個 無 形 但 緊 密 的 平 台, 透 過 每 次 舉 辦 的 互 動 設 計 聚 會, 將 專 業 的 互 動 設 計 方 法 帶 給 參 與 者, 也 讓 所 有 參 與 者 擁 有 難 能 可 貴 的 互 動 體 驗
五 年 來 IxDA Taiwan 從 15 個 人 的 私 人 聚 會, 到 今 天 我 們 已 經 舉 辦 了 31 次 實 體 聚 會, 聚 集 了 上 萬 人 次 的 互 動 設 計 愛 好 者 超 過 500 位 菁 英 在 社 群 網 絡 上 即 時 交 流 超 過 7000 個 Facebook 追 蹤 者 分 散 於 世 界 五 大 洲 的 網 絡, 將 世 界 最 新 的 知 識 帶 回 台 灣
我 們 是 充 滿 熱 情 活 力 的 開 拓 者, 永 遠 在 前 方 為 設 計 開 闢 更 寬 廣 的 道 路!
開 心 的 Happy 工 作 者 P 開 頭 的 職 稱 一 起 交 流 X (Crossing) Product Manager 產 品 經 理 Project Manager 專 案 經 理 Planner 企 劃 人 員 Prototyper (Designer) 設 計 師 Programmer 工 程 師 Professor 老 師 -32-
研 討 會 250~350 人 7 場 網 站 企 劃 Fb 粉 絲 頁 34,000+ fans 大 聚 100 人 76 場 累 計 7700 人 次 講 座 30 人 48 場 校 園 36 人 36 場 北 中 南 70+ 組 讀 書 會 33
HPX 讀 書 小 組 徽 章
Part 1 觀 念 篇 3. 應 用 場 域 與 產 業
跟 人 有 關 的 產 業 較 快 接 納 UX ( 當 然 還 有 更 多 產 業 尚 未 採 用 ) 數 位 產 品 與 服 務 : 網 站,App, 應 用 系 統, 軟 體, 數 位 內 容 實 體 產 品 與 服 務 : 聯 網 裝 置, 穿 戴 產 品, 家 電, 家 具, 金 融, 醫 療 照 護, 運 輸, 汽 車, 通 路 零 售, 教 育, 公 眾 服 務, 政 府 服 務.. 36
中 國 大 陸 跨 產 業 UX 應 用 發 展 硬 體 :Lenovo TCL 海 信 惠 普 軟 體 :IBM SAP Autodesk 金 融 : 平 安 金 融, 中 國 工 商 銀 行, 招 商 銀 行 互 聯 網 : 阿 里 巴 巴 ( 天 貓 / 淘 寶 / 支 付 寶 ) 騰 訊 百 度, 大 眾 點 評 37
台 灣 擁 有 UX 部 門 的 知 名 品 牌 企 業 非 正 式 調 查 硬 體 :HTC Acer ASUS BenQ Garmin 致 伸 Primax 緯 創 仁 寶 鴻 海 晶 睿 通 訊 神 達 電 腦 合 勤 科 技 廣 達 網 路 軟 體 : 趨 勢 科 技 Yahoo 104 TutorABC Yes123 Mozilla Taipei CyberLink 金 融 : 玉 山 銀 行 永 豐 銀 行 聯 合 國 際 行 動 支 付 旅 遊 : 雄 獅 娛 樂 遊 戲 : 遊 戲 橘 子 CatchPlay 電 信 : 遠 傳 台 灣 大 哥 大 中 華 電 信 有 UX 編 制 但 不 見 得 是 部 門 的 :MTK D-Link 永 慶 房 屋 台 達 電 Pixnet KKBOX 38
IBM Design Studios ( 上 海 ) 報 導 出 處 :http://buzzorange.com/techorange/2015/05/19/ibm-shanghai-design-studio/ 39
政 府 服 務 美 國 衛 生 福 利 部 (HHS) Usability.gov
政 府 服 務 英 國 數 位 政 府 計 畫 gov.uk
http://www.wpp.com/ -42-
Kaufman (Global CEO): 行 銷 的 改 變 不 僅 僅 是 轉 向 數 位 領 域, 而 是 從 傳 播 資 訊 轉 變 為 專 注 於 創 造 有 利 於 客 戶 和 顧 客 的 絕 佳 品 牌 體 驗 創 立 Possible Worldwide 的 目 標 是 為 了 因 應 客 戶 同 時 需 要 創 新 和 破 壞 性 商 業 策 略 數 位 引 領 的 行 銷 理 念, 以 及 在 全 球 有 效 執 行 這 些 策 略 和 理 念 所 需 的 資 料 技 術 和 規 模 Woffington (Global President): 我 們 是 一 家 互 動 行 銷 公 司, 而 非 公 關 公 司 我 們 不 僅 僅 是 進 行 廣 告, 而 且 還 致 力 於 借 助 各 種 平 臺 或 管 道, 製 造 種 種 機 會 讓 顧 客 和 品 牌 能 夠 接 觸 -43-
Part 1 觀 念 篇 4. 迷 思 與 亂 象
亂 象 1: UI =UX? 46
47
某 些 團 隊 的 UX 設 計 師, 其 實 是 UI 設 計 師 某 些 團 隊 的 UX 設 計 師, 其 實 是 網 頁 設 計 師 某 些 團 隊 的 UX 設 計 師, 其 實 是 前 端 設 計 師 UX Design 不 等 於 UI Design 48
某 些 團 隊 的 UX 設 計 師, 其 實 是 產 品 企 劃 UX 設 計 師 的 工 作 就 網 站 或 Apps 來 說 : 先 設 計 架 構, 制 定 畫 面 與 畫 面 間 的 動 線 規 劃 設 計, 流 程 圖, 打 造 原 型, 然 後 把 這 些 東 西, 交 給 UI 設 計 師 和 程 式 設 計 師 英 國 奧 美 數 位 UX Designer Jessica Cheng - Happy UX 2013 - UX 全 球 報 導
The "UX is not UI" poster was created by Erik Flowers - http://www.helloerik.com/ux-is-not-ui
51
亂 象 2: 拿 UX 當 仙 丹 52
UX 不 是 特 效 藥 而 是 中 藥 最 難 的 是 讓 開 發 者 或 老 闆 知 道 他 們 自 己 不 是 使 用 者 尤 其 是 在 大 公 司, 更 需 要 透 過 使 用 者 研 究 方 法, 避 免 公 司 各 部 門 以 自 己 當 使 用 者 思 考 時 會 有 的 盲 點 與 侷 限 絕 對 不 只 是 成 立 部 門 替 換 設 計 師 或 產 品 企 劃 的 頭 銜 如 此 簡 單 53 104 人 力 銀 行 使 用 經 驗 設 計 協 理 劉 信 雄 - Happy UX 2013 - UX 全 球 報 導
UX 不 是 萬 靈 丹 它 提 供 一 套 邏 輯 與 方 法, 提 高 成 功 機 率, 但 不 是 絕 對 保 證
亂 象 3: 做 出 個 東 西 都 稱 UX 55
例 如, 這 類 新 聞 : X 電 信 獨 家 推 出 xpass 服 務, 精 選 工 具 影 視 音 樂 遊 戲... 資 源, 推 出 新 穎 且 多 元 化 多 螢 通 用 的 應 用, 創 造 更 優 化 的 使 用 者 經 驗 56
小 結 UX 定 義 是 變 動 的 ( 見 人 說 人 話 ) 經 驗 可 以 被 預 先 設 計 ( 經 驗 塑 造 ) UX 正 在 擴 大 發 展 ( 場 域 不 同, 精 神 與 方 法 類 似 ) UX 不 只 是 UI ( 冰 山 一 角 ) 補 充 : UX Myths http://www.hpx.tw/ux-myths 57
Part 2 暖 身 篇 5. 為 何 學 習 UX?
UX 對 年 輕 人 的 意 義 超 越 前 浪 的 本 錢, 有 投 入 就 有 功 力, 跟 工 作 年 資 關 聯 不 大
使 用 者 經 驗 設 計 與 使 用 者 研 究 可 視 為 水 平 技 能 工 作 技 能 與 工 作 態 度 (Ability & Attitude) 行 業 經 驗 Domain 專 業 知 識 Expertise
UX 具 備 商 業 價 值
創 新 的 可 能 性 之 一
Part 2 暖 身 篇 6. 從 哪 裡 開 始 學 習 UX?
背 景 沒 有 相 關 背 景 或 經 驗 的 話? 設 計 / 資 訊 技 術 / 商 管 / 理 工 / 社 會 人 文. 等 學 科 都 有 機 會 從 事 UX 工 作 任 何 背 景 的 人 都 應 用 UX 思 維 或 方 法 與 目 前 的 工 作 結 合 在 一 起
動 機 是 否 對 某 些 事 物 或 環 境 不 滿 意? 抱 怨 / 謾 罵 之 外, 想 改 變 現 況, 讓 環 境 變 好 嗎? 想 要 學 好 / 做 好 UX : 源 自 於 你 的 動 機 或 使 命 感!
生 活 擴 大 生 活 體 驗 不 限 於 設 計 或 研 究 生 活 體 驗 越 豐 富, 對 學 習 UX 越 有 幫 助
態 度 同 理 心 / 去 除 主 觀 善 於 傾 聽 溝 通 想 要 瞭 解 使 用 者 需 求, 必 須 能 同 理 使 用 者
出 發 檢 視 自 己 是 否 處 於 能 經 常 與 人 接 觸 的 環 境 為 自 己 創 造 與 多 元 人 們 互 動 的 環 境 跟 語 言 一 樣, 把 自 己 丟 到 國 外 去, 學 外 語 自 然 就 快
管 道 UX 學 習 管 道 太 多 了! 建 議 先 不 要 挑 選, 都 去 嘗 試 看 看 找 到 一 種 可 以 持 續 學 習 的 方 式!
社 群 台 灣 使 用 者 經 驗 設 計 協 會 HPX 社 群 與 讀 書 會 台 灣 互 動 設 計 協 會 國 際 服 務 設 計 網 絡 SDN 台 灣 分 會 Global Serivce Jam 5% Design Action
資 源 蔡 志 浩 老 師 的 Taiwan 2.0 部 落 格 ( 啟 迪 ) 中 國 用 戶 體 驗 行 業 大 會 User Friendly Conference ( 見 聞 ) HPX 讀 書 會 ( 環 境 ) http://hpx.tw vide 創 誌 ( 新 知 ) http://vid.tw
國 外 人 物 Jakob Nielsen Don Norman -72-
國 外 人 物 資 訊 架 構 學 Information Architecture for the World Wide Web Peter Morville Louis Rosenfeld -73-
Facets of the User Experience 國 外 人 物 Peter Morville -74-
Jesse James Garrett (jjg.net) 國 外 人 物 Jesse James Garrett AdaptivePath -75-
Part 3 實 務 篇 7. 設 計 流 程
設 計? 設 想 計 畫 假 設 構 想 計 算 規 劃 77
公 視 啊 設 計
設 計 流 程 的 幾 種 版 本 技 術 導 向 行 銷 導 向 用 戶 導 向 79
設 計 流 程 宛 如 在 未 知 大 地 上 尋 找 成 功 機 會 Best design Local Maximum
HOW 如 何 進 行?
Double Diamond Design Process 有 別 於 傳 統 訓 練, 不 強 調 解 題 速 度, 而 先 求 找 出 題 目 價 值, 並 證 明 解 法 有 效
WHAT 找 到 一 個 好 題 目
Double Diamond Design Process 面 對 目 標 市 場 多 找 一 些 點 子 越 多 越 好
WHAT 找 個 有 感 的 題 目 嘗 試 調 整 並 深 入 挖 掘 價 值
Double Diamond Design Process 收 斂 找 出 有 感 題 目 生 活 體 驗 不 足 就 做 田 野 訪 談
HOW 多 樣 低 成 本 快 速 原 型 測 試 探 詢 顧 客 反 應 先 做 幾 道 菜, 找 幾 位 顧 客 試 吃
Double Diamond Design Process 針 對 同 一 個 問 題 發 想 幾 種 不 同 設 計 方 案 快 速 prototype design
HOW 精 鍊 成 品, 優 化 經 驗 鎖 定 關 鍵 主 菜, 設 法 作 成 招 牌 菜 色
Double Diamond Design Process 專 注 於 特 定 設 計 方 案 優 化 介 面 與 互 動 設 計
找 出 關 鍵 問 題 / 價 值 ( 需 求 與 痛 點 ) 構 思 解 決 方 案 並 加 以 驗 證 91
現 實 上, 可 能 是 這 樣 子. 92
或 這 樣 子. 93
94 更 多 是 這 樣 子.
如 何 找 出 關 鍵 問 題 ( 價 值 )? 95
幾 種 常 見 的 設 計 決 策 方 式 老 闆 說 經 驗 判 斷 數 據 決 定 研 究 決 定 技 術 決 定 96
研 究 方 法 很 多
悠 識 慣 用 的 設 計 流 程 Strategy 策 略 規 劃 Strategy planning CONTEXT Scope 需 求 範 疇 Requirement Definition USER CONTENT Structure 架 構 定 義 Skeleton 介 面 設 計 Prototype Design 網 頁 設 計 視 覺 設 計 Visual & Page Design Phase Implementation Phase </> 系 統 開 發
使 用 者 研 究 脈 絡 訪 查, 易 用 性 測 試, 眼 動 觀 察, 卡 片 分 類
Prototype Design 快 速 原 型 設 計 軟 體 Axure RP 校 園 交 授 權 免 費 申 請 http://axure.userxper.com/axure-rp-for-school/ Axure RP 是 全 球 知 名 的 數 位 產 品 原 型 設 計 工 具 能 您 快 速 建 立 一 般 網 站 / 行 動 網 站 / 手 機 或 平 板 應 用 程 式 / 智 慧 電 視 介 面 / 車 用 導 航 等 任 何 裝 置 的 可 互 動 介 面 原 型 (prototype), 且 不 需 撰 寫 任 何 一 行 程 式 碼 快 速 建 構 概 念 原 型 呈 現 擬 真 互 動 效 果 建 構 流 程 圖 與 規 格 文 件 Adaptive views 響 應 式 設 計 Axshare 雲 端 分 享 功 能
使 用 Axure RP 的 企 業 網 路 / 電 信 軟 體 / 科 技 廣 告 / 行 銷 媒 體 / 金 融 亞 洲 ( 中 國 / 香 港 / 新 加 坡 / 澳 門 / 馬 來 西 亞 ) Yahoo 奇 摩 博 客 來 104 人 力 銀 行 Hiiir 台 灣 大 哥 大 遠 傳 電 信 聯 華 電 信 KKBOX 華 義 國 際 森 森 百 貨 MOMO PCHome 樂 天 露 天 市 集 東 京 著 衣 易 遊 網 Gomaji Cacafly 巴 哈 姆 特 智 慧 時 尚 趨 勢 科 技 Cyberlink HTC 聯 發 科 D-Link 神 達 台 達 電 華 寶 通 訊 圓 剛 科 技 致 伸 科 技 華 創 車 電 勤 崴 國 際 凌 網 科 技 晶 睿 通 訊 宏 正 自 動 科 技 三 竹 資 訊 統 一 資 訊 奧 美 達 彼 思 廣 告 李 奧 貝 納 Isobar 安 索 帕 安 捷 達 米 蘭 網 路 基 因 不 來 梅 奇 禾 阿 物 國 際 網 路 行 動 久 大 資 訊 富 爾 特 聯 網 生 命 樹 摩 奇 多 奇 喬 立 達 邊 境 數 位 忠 泰 生 活 開 發 政 府 / 出 版 天 下 雜 誌 UDN 城 邦 時 報 資 訊 學 學 文 化 三 采 文 化 玉 山 銀 行 上 海 商 業 銀 行 國 泰 金 控 永 慶 房 屋 信 義 房 屋 學 學 文 創 工 研 院 資 策 會 NII 台 糖 IBM Microsfot HSBC Ctrip SAP Intel GE ebay BOSCH HoneyWell OOCL SGS SIEMENS Razorfish 法 國 電 信 廈 門 鈴 盛 奇 瑞 量 子 汽 車 盘 古 Panguso 广 汽 本 田 汽 车 富 士 通 软 件 華 為 中 國 平 安 保 險 新 浪 百 度 阿 里 巴 巴 淘 寶 支 付 寶 亞 馬 遜 卓 越 佳 通 輪 胎 上 海 奧 美 愛 德 威 廣 告 香 港 電 信 ASTRI 四 方 继 保 自 動 化 易 方 达 基 金 管 诺 华 生 物 医 学 博 士 视 听 安 吉 星 信 息 友 邦 创 新 资 讯 科 技 中 達 電
Part 3 實 務 篇 8. 新 創 網 路 服 務 研 究 案 例
Part 3 實 務 篇 9. 遊 覽 車 駕 駛 的 研 究 與 設 計
[ 多 金 社 長 小 資 女 ] 中, 給 所 有 科 技 產 業 的 一 席 話 --Next Innovation by 日 向 徹 https://www.youtube.com/watch?v=7_y7fdjfgam
以 人 為 本, 從 心 出 發