系統開發與應用
Lesson 5 使用者旅程圖
三種專案規劃常用的地圖工具
步驟、心情、痛點、期待
big picture
little picture
產品、功能、規格、需求
使用者旅程地圖五階段
考量每一階段的 行為、接觸點、情緒
使用者旅程地圖五階段
使用者旅程地圖五階段
🧭 步驟一：明確目標與使用者角色（Persona）
- 設定目標：優化網站、改善購物體驗，或設計新功能？
- 建立Persona：根據真實使用者資料或假設角色設定年齡、動機、需求與痛點
- 例如：小敏，27歲，上班族，常用手機下單，重視快速到貨與優惠活動。
🛤 步驟二：列出使用者旅程的階段，一般可分為：
- 認知（Awareness）
- 考慮（Consideration）
- 購買（Purchase）
- 使用/收貨（Delivery/Usage）
- 售後/回饋（Post-purchase）
使用者旅程地圖五階段
🔍 步驟三：描述每階段的使用者行為
- 使用哪些管道（如Google搜尋、社群廣告）
- 操作流程（如下單、付款、追蹤物流）
- 每一步的決策依據與操作困難（痛點）
❤️ 步驟四：描繪情緒與痛點
- 在每個階段標示出使用者情緒（開心、焦慮、疑惑）
- 記錄遇到的問題（如：網站載入太慢、找不到退貨方式）
🛠 步驟五：找出機會點（Opportunities）
- 根據痛點與情緒波動，提出改善方案（如簡化結帳流程、加入聊天客服）
| 認知 | IG 上看到某品牌廣告 | IG、網站廣告 | 😍興奮 | 無 | 增加導購影片 |
| 考慮 | 比較不同網站價格與評價 | 搜尋引擎、PPT、購物網站 | 🤔猶豫 | 無法比較同商品資訊 | 提供比較表 |
| 購買 | 加入購物車，選擇付款 | 手機購物App | 😐焦躁 | 載入速度慢，結帳頁多層 | 精簡流程 |
| 收貨 | 查詢物流進度、收包裹 | App、物流簡訊 | 😄期待 | 無法即時追蹤物流 | 加入即時物流更新 |
| 售後 | 發現商品尺寸不符，申請退貨 | 客服系統 | 😤失望 | 找不到退貨入口、流程繁瑣 | 強化退貨說明，加入LINE客服 |
階段
行為
接觸點
情緒
痛點
改善建議
使用者旅程地圖五階段
一張圖顯示「使用者體驗」的每個環節，讓我們可以快速理解產品需要「改善的課題」
麥當勞消費時的「使用體驗」（情緒脈動）
正面
負面
中性
之前
之間
之後
步驟、服務接觸點
痛點
針對痛點尋求改善！
星巴克喝咖啡、工作時可能經歷的步驟以及在每個地方所能感受到的情緒
正面
負面
中性
音樂App的「使用體驗」（情緒脈動）
服務接觸點
使用者訪談與接觸點相關的正面感受
使用者訪談與接觸點相關的負面感受
更多接觸點範例
搭乘機場捷運、同時辦理「預辦登機」與「托運行李」
買票、預辦登機、行李托運、進入月台、上廁所、休息一下、使用網路 Wi-Fi、確認車次資訊…
可能之接觸點
| 階段 | 接觸點 | 使用者行動 | 情緒 | 痛點 | 機會 |
|---|---|---|---|---|---|
| 1. 準備出發 | 確認航班／車次資訊 | 查捷運時間／航空是否支援預辦登機 | 😐 | 資訊分散不清楚 | 統一整合App或網站即時資訊 |
| 買票 | 使用機器購票或刷卡進站 | 🙂 | 售票機操作複雜 | 優化 UI / 支援語音／行動支付 | |
| 2. 辦理登機與托運 | 預辦登機櫃檯 | 出示護照與機票辦理登機 | 🙂 | 不確定哪些航班支援預辦登機 | 清楚標示航空與時間限制 |
| 行李托運櫃檯 | 遞交行李並貼條碼 | 😊 | 行李限制模糊不清 | 提供重量偵測服務或APP提醒 | |
| 3. 等車與休息 | 上廁所／休息區／Wi-Fi 使用 | 等待列車時如廁、休息、連上 Wi-Fi | 😌 | Wi-Fi 難連／休息區太少 | 優化廁所與充電區設計、Wi-Fi 自動連線 |
| 查詢車次資訊 | 查閱月台或即時資訊看板 | 🙂 | 螢幕資訊更新不即時 | 整合手機推播提示 | |
| 4. 搭乘捷運 | 進入月台 → 乘車 | 找月台 → 安全進站 → 坐車 | 😊 | 搭車時不知剩幾站 | 增設語音與站數顯示／外語導覽 |
| 5. 抵達與登機 | 下車 → 前往安檢 → 找登機門 | 順利進入航廈，前往登機門 | 😎 | 航廈太大、走錯方向 | 手機導航、指標顯示登機門與時間建議 |
總結觀察與建議(範例)：
-
情緒高點：行李已托運、無需排隊登機 → 減輕壓力、提升旅行體驗。
-
情緒低點：準備階段資訊不足、櫃檯導引不清 → 初次使用者體驗不佳。
-
優化建議：
-
整合預辦登機航空公司、時段與櫃檯資訊。
-
提供預約/排隊進度查詢（如預約號碼牌系統）。
-
將捷運 App 與登機服務整合，推播通知時間提醒與航班動態。
-
網站可能的接觸點
電子郵件
聯絡我們表單
電話
即時聊天
粉絲專頁評論
使用者旅程圖經常與「人物誌」相結合
正面
負面
中性
接觸點
人物誌目標
1. 使用者訪談做調查
2. 建立簡易人物誌（替代方案: 相關之調查報告）
3. 製作使用者旅程圖
三步驟製作使用者旅行圖
將使用者體驗變成可俯瞰整體的地圖
《WEB 設計職人必修：UX Design 初學者學習手冊》P.131
使用者訪談可能的問題
1. 將地圖劃分為 「步驟」、「接觸點」、「行動」、「思考」、「情感曲線」五個區塊
2. 想像人物誌的人物會如何行動，將跟「行動」有關的便利貼，黏貼於「行動」區塊
3. 想像人物誌的人物會如何思考，將跟「思考」有關的便利貼，黏貼於「思考」區塊
4. 將大致的步驟寫在便利貼上，黏貼於「步驟」區塊
5. 把在「步驟」的人物、店面、網站當作「接觸點」寫在便利貼上，黏貼於「接觸點」區塊
6.試著想像人物的情緒起伏，描繪「情感曲線」
使用者旅程圖「後製」模板
《WEB 設計職人必修：UX Design 初學者學習手冊》P.141
案例: 客服網站流程改善
《WEB 設計職人必修：UX Design 初學者學習手冊》
使用者旅程圖工作坊
- 約4~8人
- 界定地圖範圍: 10分鐘
- 討論時間: 60分鐘
練習：到餐廳用餐
🍱 餐廳背景資訊：「田町便當 Tamachi Bento」
📍 地點
- 位於淡水捷運站與真理大學之間的學區商圈內，靠近大忠街、文化路
- 步行可達多所大專院校與補習班
🍛 餐廳類型
- 學生族群為主的平價中日式便當店
- 內用、外帶皆可，設有限量內用座位（約 20 席）
- 無訂位服務
🧾 餐點特色
- 主打：日式雞腿飯、照燒豬排、壽喜燒牛肉便當
- 客製化配菜可選（從 8 種配菜中選 3 種）
- 套餐附湯／紅茶，提供簡易自助區（醬料、餐具）
- 價格區間：$85～$130（學區優惠價）
🧑🎓 客群特性
- 真理、淡江等大學生
- 午餐與晚餐尖峰時段（12:00–13:00，17:30–19:00）特別擁擠
- 多數人會用手機查 Google 地圖、評論、菜單照
- 偶爾會有外國觀光客誤入但語言不通
💡 特殊現況（供分析用）
- 只收現金與 LINE Pay
- 無提供 Wi-Fi
- 店面外觀老舊，排隊動線與內用指示不明確
- 常有「找不到座位」、「點餐等太久」、「不知道是否可先坐再點」等混亂
🎯 目標：
- 從顧客視角理解整體用餐體驗
- 找出關鍵接觸點的痛點與機會點
- 發展具潛力的服務改進方向
🧭 步驟流程
- Step 1：界定範圍（10 分鐘）
- Step 2：描繪使用者旅程（20 分鐘）
- Step 3：標記痛點與關鍵接觸點（10 分鐘）
- Step 4：設計解方與創意構想（20 分鐘）
- Step 5：分享與收斂（10 分鐘）
工作坊步驟
Step 1：界定範圍（10 分鐘）
- 問題定義：
- 關心的是哪種用餐情境？（例：家庭聚餐、單人用餐、商業午餐）
- 目標族群：
- 針對誰來設計？（例：上班族、學生、外食族）
- 服務範圍：
- 從「決定去哪吃」到「離開餐廳」為止
- 時間上可從出門前開始，到用餐完畢離開
✏️ 輸出成果：定義主題與目標用戶（寫在便利貼或白板上）
工作坊步驟
Step 2：描繪使用者旅程（20 分鐘）
- 使用大張白紙橫向劃分「階段」（建議 5-7 階段） 例如：
決定去哪吃 / 前往餐廳 / 等候入座 / 點餐與用餐 / 結帳與離開 - 每個階段填上以下欄位：
✅ 使用者目標 /👣 行為（做了什麼）/ 😐 情緒 /⚠️ 痛點 /💡 機會
✏️ 工具建議：便利貼、色筆、顏色分明的卡片標示接觸點
（如：「點餐機」、「收銀台」、「洗手間」）
工作坊步驟
Step 3：標記痛點與關鍵接觸點（10 分鐘）
- 小組討論：哪些接觸點造成情緒落差最大？
- 用紅色標記痛點，用星星標記「轉折點」或「關鍵時刻」 （例：點餐時菜單太複雜、結帳時久候）
工作坊步驟
Step 4：設計解方與創意構想（20 分鐘）
- 根據痛點挑選 2〜3 個最具價值的機會點
- 發想創意解決方案，例如：
- 🌐 點餐前可用 QR Code 線上預覽菜單
- ⏱ 加入預約排隊系統
- 🧾 設計透明化帳單拆解
✏️ 工具建議：草圖、流程卡片、低保真wireframe等
Step 5：分享與收斂（10 分鐘）
- 每組簡報數分鐘：說明旅程圖 + 改善點
- 其他人提供回饋與投票
- 彙整共識：下一步行動可行性與測試方向
工作坊步驟
想法和感覺 (Think & Feel)
聽到了甚麼 (Hear)
看到了甚麼 (See)
說了甚麼 做了甚麼 (Say & Do)
痛苦 (Pain)：痛點
獲得 (Gain)：甜蜜點
了解使用者需求的利器- 同理心地圖
從「人物誌」角色的角度，進而去思考下列6個面向可能的內容
- 他們會如何思考與感受焦慮或期待的事情 ？
- 他們會如何思考與感受焦慮或期待的事情 ？
- 他們可能會藉由誰來得知我們的產品？
- 在他們生活的環境中，他們會如何使用我們的產品？
- 當他們在公眾或私下使用我們的產品時，會說些或做些甚麼？
- 他們使用我們的產品時會遇到甚麼困難或痛苦？
- 他們使用我們的產品時可以得到哪些益處？
同理心思考角度的範例