系統開發與應用

Lesson 5 使用者旅程圖

三種專案規劃常用的地圖工具

圖片來源: https://miro.medium.com/max/700/1*B3SAUSUdy-Cn7ccRuvuESQ.jpeg

使用者旅程地圖五階段

圖片來源

考量每一階段的 行為、接觸點、情緒

使用者旅程地圖五階段

圖片來源

使用者旅程地圖五階段

圖片來源

🧭 步驟一：明確目標與使用者角色（Persona）

• 設定目標：優化網站、改善購物體驗，或設計新功能？
• 建立Persona：根據真實使用者資料或假設角色設定年齡、動機、需求與痛點
  • 例如：小敏，27歲，上班族，常用手機下單，重視快速到貨與優惠活動。

🛤 步驟二：列出使用者旅程的階段，一般可分為：

• 認知（Awareness）
• 考慮（Consideration）
• 購買（Purchase）
• 使用/收貨（Delivery/Usage）
• 售後/回饋（Post-purchase）

使用者旅程地圖五階段

圖片來源

🔍 步驟三：描述每階段的使用者行為

• 使用哪些管道（如Google搜尋、社群廣告）
• 操作流程（如下單、付款、追蹤物流）
• 每一步的決策依據與操作困難（痛點）

❤️ 步驟四：描繪情緒與痛點

• 在每個階段標示出使用者情緒（開心、焦慮、疑惑）
• 記錄遇到的問題（如：網站載入太慢、找不到退貨方式）

🛠 步驟五：找出機會點（Opportunities）

• 根據痛點與情緒波動，提出改善方案（如簡化結帳流程、加入聊天客服）

階段

行為

接觸點

情緒

痛點

改善建議

使用者旅程地圖五階段

一張圖顯示「使用者體驗」的每個環節，讓我們可以快速理解產品需要「改善的課題」

https://miro.medium.com/max/931/1*VBSQtSeaVmODMgL0rAhhNg.png

麥當勞消費時的「使用體驗」（情緒脈動）

正面

負面

中性

之前

之間

之後

https://static.accupass.com/userupload/cfaffddf66cf4c019162e3f57ea3ca9d.jpg

星巴克喝咖啡、工作時可能經歷的步驟以及在每個地方所能感受到的情緒

https://www.mindtheproduct.com/wp-content/uploads/2017/01/1-StarbucksCJmap.jpg

正面

負面

中性

音樂App的「使用體驗」（情緒脈動）

https://img.akanelee.me/20190703-2.jpg

服務接觸點

更多接觸點範例

搭乘機場捷運、同時辦理「預辦登機」與「托運行李」

可能之接觸點

總結觀察與建議(範例)：

• 情緒高點：行李已托運、無需排隊登機 → 減輕壓力、提升旅行體驗。

• 情緒低點：準備階段資訊不足、櫃檯導引不清 → 初次使用者體驗不佳。

• 優化建議：

  • 整合預辦登機航空公司、時段與櫃檯資訊。

  • 提供預約/排隊進度查詢（如預約號碼牌系統）。

  • 將捷運 App 與登機服務整合，推播通知時間提醒與航班動態。

網站可能的接觸點

https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0340-06_example_customer_journey_map.jpg

電子郵件

聯絡我們表單

電話

即時聊天

粉絲專頁評論

使用者旅程圖經常與「人物誌」相結合

正面

負面

中性

接觸點

人物誌目標

https://inside-assets1.inside.com.tw/2019/6/b4jnim8ifzp5zko5kjjqzp2eyo5s0i.png?auto=compress&fit=max&w=730

https://miro.medium.com/max/700/0*senMqoo-gyaQznua.png

1. 使用者訪談做調查

2. 建立簡易人物誌（替代方案: 相關之調查報告）

3. 製作使用者旅程圖

三步驟製作使用者旅行圖

將使用者體驗變成可俯瞰整體的地圖

《WEB 設計職人必修：UX Design 初學者學習手冊》P.131

使用者訪談可能的問題

1. 將地圖劃分為 「步驟」、「接觸點」、「行動」、「思考」、「情感曲線」五個區塊

2. 想像人物誌的人物會如何行動，將跟「行動」有關的便利貼，黏貼於「行動」區塊

3. 想像人物誌的人物會如何思考，將跟「思考」有關的便利貼，黏貼於「思考」區塊

4. 將大致的步驟寫在便利貼上，黏貼於「步驟」區塊

5. 把在「步驟」的人物、店面、網站當作「接觸點」寫在便利貼上，黏貼於「接觸點」區塊

6.試著想像人物的情緒起伏，描繪「情感曲線」

https://miro.medium.com/max/700/1*_VpV6tfQ8Hka4q8cuPD-6Q.png

使用者旅程圖「後製」模板

《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 分鐘）

• 每組簡報數分鐘：說明旅程圖 + 改善點
• 其他人提供回饋與投票
• 彙整共識：下一步行動可行性與測試方向

工作坊步驟

https://km.pmtone.com/wp-content/uploads/sites/5/empathy_map_1-1024x765.png

想法和感覺 (Think & Feel)

聽到了甚麼 (Hear)

看到了甚麼 (See)

說了甚麼 做了甚麼 (Say & Do)

痛苦 (Pain)：痛點

獲得 (Gain)：甜蜜點

了解使用者需求的利器- 同理心地圖

從「人物誌」角色的角度，進而去思考下列6個面向可能的內容

• 他們會如何思考與感受焦慮或期待的事情 ？
• 他們會如何思考與感受焦慮或期待的事情 ？
• 他們可能會藉由誰來得知我們的產品？
• 在他們生活的環境中，他們會如何使用我們的產品？
• 當他們在公眾或私下使用我們的產品時，會說些或做些甚麼？
• 他們使用我們的產品時會遇到甚麼困難或痛苦？
• 他們使用我們的產品時可以得到哪些益處？

同理心思考角度的範例