UI/UX PortFolio 黃家禾 Ng Kah Hoe
2016 ～ 2018
Content 使用者經驗研究 教育廣播電台使用者經驗研究 X 互動 MooCs 發想與設計 雲端服務網站評估與驗證流程
企劃·比賽 眼前的黑不是黑 日光水月魚·永續綠生活 VR 鞋子客制化平台服務
黃家禾 NG KAH HOE
About Me 目前為台北科技大學互動設計所之研究生。對於人物誌的發想有 很大興趣。希望可以藉由發現人的需求，透過互動設計改善人類 的生活。也希望可以透過互動設計，把重要的資訊傳達出去。
Education
To see the world, things dangerous to come to, to see behind walls, draw closer, to find each other, and to feel. That is the purpose of life. Life Magazine's Motto
2016 ～ Present 國立台北科技大學
互動設計系
2011 ～ 2016
東海大學
資訊管理學系
2010 ～ 2011
國立台灣師範大學
僑生先修部一類組
2014 ～ 2009
馬來西亞巴生興華中學
Skill Sets
技能
設計軟體
Sketchup
評估軟體
Morae
個人特質
Team player
interpersonal Skills
Language 中文
英文
TOEIC 945
馬來文
教育廣播電台使用者經驗研究 X 互動 MooCs 發想與設計 教育廣播電台數位典藏 / 分眾頻道系統巨量資訊分析加值與使用者體驗優化服務設計 Work
台灣國立教育廣播電台
About 105 年度大學以社機構為基地之數 位人文計畫 - 教育廣播電台數位典 藏 / 分眾頻道系統巨量資訊分析加 值與使用者體驗優化服務設計」， 是一個國立台北科技大學與國立教 育廣播電台之合作計劃。互動設計 系在此計劃中負責的部分主要以使 用者經驗研究之分析及互動 MooCs 系統的發想與設計。
Requirement & Challenges 互動 MooCs 使用情景分析 互動 MooCs 系統互動流程（wireframe） 舊版教育廣播電台網站介面評估 新版教育廣播電台網站介面評估
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者情景分析 Project Framework S.E.T 方法 Society, Economic, Technology
QFD 方法 Quality Function Deployment
What I Did
針對教育廣播電台互動 MooCs 之設 計，透過工作坊中以 SET 及 QFD 的 方法收斂出使用者需要的需求。整理 後篩選出特定族群在互動 MooCs 中 可能之運用情景。
使用者情景分析 互動 MooCs Wireframe
工作坊
使用者情景分析
使用者旅程地圖
本 工 作 坊 透 過 S.E.T (Society, Economic, Technology) 宏 觀 情 景 因 素 分 析 及 QFD (Quality Function Deployment) 質 量 功 能 展 開 方 法， 彙 整 計劃內各成員對於 MooCs 設計的看法， 並且了解技術層面之 可能性。
藉由工作坊中所彙整 出的資料，了解可能 之目標使用者，並將 每一個類型的使用者 的需求列出，爾後透 過歸納篩選，訂定出 符合本計劃的預設目 標族群，以做更加深 入的分析。
透過使用者旅程地圖 的製作，了解預設族群 在不同的情景下的需 求及其痛點，以接觸點 的方式刻畫出整體服 務可以達成的功能。
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者旅程地圖
兒童 這裡預設兒童的聆聽動機為學習 上有想要了解的事物，在聆聽的當 下可以透過互動激發持續聆聽的 動機。與一般學生預設的情景差異 為在於兒童失去興趣後的可行方 案為推薦新節目誘導繼續聆聽。
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者旅程地圖
學生 學生的使用情景設想在為解決課 堂上遇到問題而進行查詢。因此 互 動 MooCs 將 導 入 答 題 互 動 機 制，透過答題加深學生對於知識 的掌握。
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
互動 MooCs Wireframe
1
3.1
與輸入的字眼 有關聯的主題 會呈現於輸入 欄的四周
登錄頁面，提供 與 Facebook 和 Google 帳號 串接
2
3
點擊搜尋按鈕 開始搜尋
透過畫面中央的欄位輸入欲查詢的主題 01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
互動 MooCs Wireframe 3.1a
Wireframe 發想 針對互動 MooCs，整體的功能可以分為兩個部分：互動學 習播放區塊和搜尋區塊。在預設上透過帳號記錄使用者在 學習中的記錄。使用者在登錄系統後，首先會來到搜尋頁 面，以進行相關主題的搜尋。選擇目標主題後才會進入互 動學習的頁面。在互動學習頁面中分為三個區塊：播放列 表、節目資訊及播放區塊。互動學習題目則可以透過按鈕 開啟，並會特定播放片段中彈出供使用者回答，進一步加 深使用者對於知識的掌握。
與輸入的字眼 有關聯的主題 會呈現於輸入 欄的四周
3.2
3.2a
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者經驗研究與評估
Project Framework 使用者研究部分透過操作任務的評估方式，實際讓使 用者透過操作制訂好的任務，並透過使用者操作行 為分析軟體 Morae、眼動儀同步記錄使用者的操作行 為，以進行後續的關聯分析。國立教育廣播電台計劃 將舊有的網站汰換成符合時下瀏覽行為的網站形式。 透過科學性評估流程進一步了解使用者對於現有的網 站的操作行為，以作為接下來改版的參考。 舊版教育廣播電台網站（截至 107 年 4 月）
What I Did 評估操作任務設計 執行評估流程 評估結果分析
教育廣播電台網站改版 Prototype 1
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者經驗研究與評估
操作任務 設計
Morae 使用者操 作行為分析軟體 Morae Recorder Morae Manager
受測者
Tobii 眼動儀 Tobii Pro Glasses 2 Tobii Pro Lab
使用者操作行為 評估
使用者旅程地圖
評估流程主要透過科學性驗證的方式針對使用者使用 網站的行為，並針對這些行為做進一步的改善。操作 任務設計的參考主要與教育廣播電台相關人員討論後 制定。受測者的部分以學生為主。後續以 Morae 及眼 動儀的數據為主找出受測者之間的差異及關聯性。
在進行使用則評估流程，本研究透過 Morae 使用者操 作行為分析軟體蒐集受測者電腦上的操作行為，同 時側錄下使用者的表情及語音。Tobii 眼動儀則專注 於蒐集受測者的眼動軌跡，以了解整體介面設計上 使用者關注點。
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者經驗研究與評估
Morae 評估指標
自然瀏覽
搜尋任務
01 台灣國立教育廣播電台
1. 瀏覽教育廣播電台首頁 30 秒內（含 30 秒） 2. 搜尋彰化分台的頻道。 3. 透過首頁搜尋 Channel+ 平台的入口。 4. 透過首頁找到搜尋的界面 5. 透過首頁搜尋語言學習頻道的入口 6. 透過節目總覽搜尋有關教育之節目 7. 自由瀏覽文教新聞頁面 30 秒內（含 30 秒） 8. 收聽文教新聞內感興趣的一則新聞 9. 搜尋電台參訪的相關新聞 10. 透過首頁搜尋有關於政府公開資訊
滑鼠按鍵次數
眼動評估指標
任務完成時間
凝視熱像圖 任務執行狀態
任務執行狀態
教育廣播電台 MooCs 發想
使用者經驗研究與評估
Prototype 網站
根據受測者執行任務狀態，透過 Distribution of Marker Types 中 探討出不同的執行狀態比例。其中可以透過比較舊版網站和 Prototype 網站所出現的狀態，實際了解受測者的操作狀況。同 時可以透過比較 prototype 網站和舊版網站的任務執行成功率了 解兩者之間是否有顯著的提升。在評估中發現 prototype 網站對 於易用性上有改善。
舊版網站
X 操作錯誤 W 系統問題 T 操作猶豫 S 任務完成 Q 提問 F 未完成任務 E 嘗試錯誤 C 疑惑
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者經驗研究與評估 操作任務 Task 2： 搜尋彰化分台的頻道 在執行任務 2 時，發現三位受測者在 prototype 的網站執行操作任務 2 的時間相較於舊版的網站來的長。因此透過左邊的凝視熱像圖了 解受測者在 prototype 和舊版網站所注視的區塊。發現在 prototype 的 版本中，受測者雖然注視目標區塊的凝視最集中，但並沒有後續動 作。而舊版的網站則把頻道列出來，因此可以發現受測者快速掃過 目標區塊。
Prototype 網站
舊有的 網站 01 台灣國立教育廣播電台
Prototype 網站執行時間
教育廣播電台 MooCs 發想
使用者經驗研究與評估 功能導向 類型
瀏覽導向 類型 資訊導向 類型
教育廣播電台根據評估結果，針對 Prototype 網站進行修改，並再一 次執行使用者經驗評估，以驗證修改是否有效。這次的評估中操作 任務同樣與教育廣播電台同仁一同討論，並制定出想要了解的事項。 任務的部分分成三個類別：【瀏覽導向】【功能導向】【資訊導向】
1. 我要收聽彰化分臺目前線上播出的節目 2. 我要知道現在臺北總臺 FM 播出節目的主持人。 3. 我要查 107 年 4 月臺北總臺 FM 的節目表 4. 我要收聽「微型點子對撞機」所有節目單集 5. 我要收聽 3 月 15 日”人人都是科學人”節目 6. 我要收聽 3 月 10 日秦夢群主持的節目 7. 我要知道花蓮若要收聽教育電臺，收聽頻率是多少？ 8. 我要查主持人賴素燕有主持哪些節目 ? 9. 我要查看有關”美術比賽”的相關新聞。 10. 我要找所有日語相關節目 11. 我要找「快樂學印尼語」目前的教學進度和教學教材 12. 我要到電臺參訪，如何申請？ 13. 我想知道目前所有正在播放的頻道 14. 請滑動主要廣告 banner 並點選進入「金聲獎」專區 15. 請先瀏覽主頁 10 秒（可自由滑動但不需點選），接著找出「網 站導覽」中主要分幾個類別 16. 我想要學習如何講閩南語，是否有這類型的節目可推薦給我。 17. 請把收聽著的節目：《自然有意思》，收藏到播放清單當中。 18. 我找不到節目：《科學生活小達人》，想直接搜尋。
01 台灣國立教育廣播電台
教育廣播電台 MooCs 發想
使用者經驗研究與評估
與第一次評估一樣，透過了解任務及受測者任務成功率分佈圖，了解哪一個 任務中受測者無法輕易完成。與任務執行狀態表進行關聯分析，進一步收斂 出背後可能的願意。搭配眼動數據的分析，可以更有效的了解使用者瀏覽行 為及操作行為之間的關聯。
01 台灣國立教育廣播電台
X 操作錯誤 M 誤解題意 S 系統問題 H 提問 T 嘗試錯誤 C 疑惑
教育廣播電台 MooCs 發想
使用者經驗研究與評估
透過結合眼動儀所收集的數據，生成凝視熱像圖可以得知 受測者在任務中所關注的區塊。結合 AOI 的概念，實際了 解受測者是否有看到預定的指定功能。
在任務三中可以發現大部分的受測者都無法完成任務。因 此透過受測者的眼動數據生成之凝視熱像圖，發現大部分 的受測者其實之注意到列表，並沒有注意到一旁的下載按 鈕，因此無法完成任務。
任務 3：我要查 107 年 4 月臺北總臺 FM 的節目表
01 台灣國立教育廣播電台
雲端服務網站評估與驗證流程 個人碩士論文 Thesis 國立台北科技大學
Project Framework 為了因應雲端服務網站的興起，有鑑於目前對於雲端服務網站的評估依舊採 用傳統的問卷調查或是網頁評估方法，無法有效貼近使用者，因而導致使用 者經驗無法最大優化。因此透過服務設計流程及設計思考的方法規劃一套以 人為本的評估流程，藉此更清楚了解使用者的需求，縮短使用者與服務提供 者之間認知的落差
What I Did 規劃評估流程 執行訪談、收斂 persona 透過 Case Study 驗證流 程可行性
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程
使用者旅程地圖 評估流程主要是針對目前業界及政府 並無一套標準化的作業流程可以評估 雲端服務網站之流程，因此會著重探 討研究者在評估流程中每一個階段之 痛點、需求，並設定相對應接觸點。 透過使用者旅程地圖，了解使用者不 同階段之狀況。在本地圖探討研究者 及受測者可能出現的行動及他們的情 緒起伏。
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程
服務藍圖 服務藍圖主要呈現出在評估流程 各階段可能運用到的技術，及相 關利害關係人。
02 雲端服務評估流程
個人論文題目 人物誌刻畫
雲端服務網站評估與驗證流程
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程 實驗環境設置圖
Morae 使用者操 作行為分析軟體 Morae Recorder Morae Observer Morae Manager
Tobii 眼動儀
Tobii Pro Glasses 2 Tobii Pro Lab
左 1：受測者與實驗電腦距離示意圖 左 2：受測者執行任務操作
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程 結果展現
剛出社會之中南部新鮮人
熟悉台灣環境的外國新鮮人
經濟收入高之精英新鮮人
離鄉背井單身外國上班族
透過人物誌為受測者進行分群，將具有相同特徵的歸納並以人物誌所設定的類群做分類。可 以發現個別類群在相同任務下，會受到其自身喜好及需求，而有不同的資訊搜尋行為。
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程
受測者操作任務的時間，可以發現有受測者整體的完成時間較其他受測者來的更 高，透過 Morae 所標記之使用者操作行為，可以發現有運用排序功能的受測者， 在整體的操作任務執行時間較短。
02 雲端服務評估流程
個人論文題目
雲端服務網站評估與驗證流程
透過服務設計流程結合設計 思考規劃之評估流程，導入 【人本設計】，進一步了解 目標族群的需求。在設計操 作任務中以透過紮根理論收 斂出的結果做參考，可以更 貼切使用者的需求。同時針 對不同需求的受測者，可以 導入不同的任務進行後續評 估與驗證。
02 雲端服務評估流程
眼前的黑不是黑 2017 放視大賞競賽 --- 入圍 Award
跨領域類─數位跨域組
Project Framework 【眼前的黑不是黑】不是一款重現經典畫面的賽車遊戲。它藉由刻畫出與現實相像的 故事情境，角色設計，帶出了現今世人所面臨的其中一個大問題 - 視力衰退的年輕化。 這真是 3C 產品高速發展，世人在享受這些高科技所帶來的便利下所忽略的隱患。
What I Did 企劃撰寫 作品拍攝
03 眼前的黑不是黑
2017 放視大賞競賽
眼前的黑不是黑
創意的源頭來自於對於現實生活中問題的探究。互 動作品的創意發想不論使用零科技（no tech），低科 技（low tech）或是高科技（high tech）都無損一個創 意影響力。在評估了現有的技術及成本的考量下， 我們選擇了以 low tech 的方式來打造我們的作品。
電視機顯示互動內容 腳踏車龍頭控制轉向
電腦運算感測器資訊
作品的發想希望藉由遊戲畫面模擬視力衰退，間接 帶入 3C 產品對於視力的傷害性。作品將有實體的裝 置讓玩家去操控，藉此達到動與靜的結合。讓互動 不限於只有手指和眼睛，而是全身肌肉的運用，同 時也讓遊戲有更多的趣味性。
03 眼前的黑不是黑
個人論文題目
雲端服務網站評估與驗證流程
本互動裝置是跨領域數位體驗教育遊戲，希望透過遊戲內容及最直接的 互動，讓玩家可以運動之外，亦可以潛移默化下認識 3C 產品對於視力的 危害之知識。視力保健必須從小做起，因此除了可以架設於在學校供老 師給予學生體驗外，亦可以在兒童醫院之視力部門擺放，讓小朋友可以 在等待之餘解悶。
學校
03 眼前黑不是黑
兒童 醫院
2017 放視大賞競賽
眼前的黑不是黑
架 設 成 本
本作品的架設簡單，而且硬體要求沒有很高。相較於 AR 及 VR 的硬體支援要求高，本作品由於使用 Web 技術，因此在 資源的原用上比較充裕。成本的降低也可以讓小機構或教育 體系負擔得起這個裝置，並設立多台以便讓更多人體驗。
遊 戲 互 動 模 式
遊戲內容擺脫一貫的傳統操作模式，藉由改裝後的腳踏車作 為控制輸入端，即可以帶來新鮮感，間接的也讓玩家在玩此 遊戲的時候可以動一動身子，達到運動的效果。體系負擔得 起這個裝置，並設立多台以便讓更多人體驗。
設 計 風 格
本互動作品採用了歐美卡通式的設計。此設計風格偏向可愛 中帶點詭異，讓玩家可以維持在警覺和放鬆的中心 . 色彩上的綺麗也可以增添沉浸感，讓嚴肅的故事內容可以被 輕鬆得接納，降低玩家互動時的壓力。
玩家需要騎上裝有感應器的腳踏車，藉由踩踏騎動腳踏車來 控制遊戲內的主角前進。腳踏車的龍頭可以左右擺動來閃避 路上的障礙物。此障礙物是由惡魔所放出來的小跟班，會在 路上阻礙玩家。此小跟班是擬人化的 3C 產品。玩家只要撞上 它會減速，進而讓惡魔追到。被惡魔追到將會直接結束遊戲。
03 眼前的黑不是黑
日光水月魚·永續綠生活 2016 Panasonic 綠色生活創意設計大賽 --- 佳作 Award
綠色生活居家創意組
Project Framework
此作品是 2016 年 Panasonic 綠色生活創意大賽中的發想。這是一項 Group Project, 是一 個與台北科技大學建都所合作之比賽。作品發想借鑒於【魚菜共生】的概念，透過導 入物聯網的概念，將居家提升為綠色居家生活。
What I Did 海報設計 人物誌刻畫 使用者旅程地圖及服務藍圖刻畫
04 日光水月魚·永續綠生活
2016 Panasonic 綠色生活創意設計大賽
日光水月魚·永續綠生活
人物誌刻畫 基於希望可以改造現存房子，同時為提 倡大家對於綠色生活的概念，因此本提 案設定的範圍主要以上班族、還有農家 婦女為主。根據了解他們的生活形態及 目標下去做發想。
04 日光水月魚·永續綠生活
2016 Panasonic 綠色生活創意設計大賽
日光水月魚·永續綠生活
使用者旅程地圖 使用者旅程地圖可以分為四個階段：系統建置中、 系統使用（前、中、後）期。其中在建置中所需要 的技術最多。使用者可能在系統使用前及中期因為 還看不到產值而情緒低落，但在後期培育成功後， 就會慢慢恢復情緒。
服務藍圖 在應用科技上，結合 Panasonic 目前產品線，以求使 用者及業者可以透過現有產品及服務的整合，達到 真正的永續綠生活。
04 日光水月魚·永續綠生活
2016 Panasonic 綠色生活創意設計大賽
日光水月魚·永續綠生活 「日光水葉魚」，是由「日光」、「水」、「葉」、「魚」四大元素組成。 「日光」為太陽能；「水」為雨水回收系統；「葉」、「魚」分別為垂直 綠化與魚菜共生系統。 本計畫的目標，是由「低碳綠能幸福大台南」政策、臺灣農業與都市現況 作為發想與延伸，透過上述四大元素，共同建構低碳綠色生活、營造綠色 景觀、資源永續與自給自足的新生活方式，編織臺灣未來的綠生活想像。
太陽能蓄電系統 雨水回收 電力感測器
物聯網 水質感測器
冷藏冷 凍
溫度感測器
魚 菜 共 生 系 統
設備
04 日光水月魚·永續綠生活
VR 鞋子客制化平台服務
2017 校園創業提案競賽 師生三創 - 創新 x 創業 x 創客競賽 --- 佳作 Award
校園創業提案競賽
Project Framework
希望藉由 VR 技術的成熟， 將鞋子的客制化服務，透過虛擬的客制 化平台以 VR 的方式呈現。讓消費者可以透過此平台宛如現場看到 鞋子的感覺克制化，同時可以藉由平台內的分享功能，看到不同設 計師或是消費者客制化的鞋款，激發出更多的創意。
What I Did 企劃撰寫 人物誌刻畫
05 VR 鞋子客制化平台服務
2017 校園創業提案競賽 師生三創 - 創新 x 創業 x 創客競賽
VR 鞋子客制化平台服務
人物誌刻畫 不同使用者對於客制化的需求亦不一樣。以大部分的消費者， 其需求為可以選定自己想要的顏色、圖案。對於設計師而言， 客制化是一個讓他們可以推銷自己的機制。
05 VR 鞋子客制化平台服務
2017 校園創業提案競賽 師生三創 - 創新 x 創業 x 創客競賽
VR 鞋子客制化平台服務
第一階段
第二階段
第三階段
系統建置
客戶資料蒐集
未來設計
第一階段 - 系統建置。 這個階段將會幫客戶將本系統與其商品的資料庫做一個串接。將客戶原本有的商品資料匯入本系 統內作為參數。 第二階段 - 客戶資料蒐集。 透過本 VR 鞋子客制化平台，消費者在客制化鞋子的同時，廠商可以透過消費者的選擇了解其喜 好。藉由記錄使用者行為及喜好，可以讓廠商更快速的了解目前市場上的趨勢。 第三階段 - 未來設計 蒐集了大量消費者的客制化設計後，可以了解目前市場上潮流的走向，讓廠商更容易設計出目前 市場上所想要的鞋子。同時消費者設計的鞋款因為會在平台上分享，因此有可以了解消費者設計 的鞋款是否會受到其他消費者的青睞，或許可以作為下一個鞋子新的設計雛形。
05 VR 鞋子客制化平台服務
2017 校園創業提案競賽 師生三創 - 創新 x 創業 x 創客競賽
VR 鞋子客制化平台服務 鞋子廠商透建置 VR 鞋子客 制化平台，吸引潛在客戶 進來店內消費。 主要來源： 提供鞋子廠商客制化平台 的建置配套方案。
顧客進來店內體驗 VR 客制 化鞋子，可以定制自己想 要的鞋子，並且有體驗的 話可以獲得特定優惠
05 VR 鞋子客制化平台服務
xxxcain@ Tel: 0
UI/UX PortFolio 黃家禾 Ng Kah Hoe Email：xxxcain@gmail.com Tel: 0928462868