系統開發與應用
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、確認車次資訊…
可能之接觸點
網站可能的接觸點
電子郵件
聯絡我們表單
電話
即時聊天
粉絲專頁評論
使用者旅程圖經常與「人物誌」相結合
正面
負面
中性
接觸點
人物誌目標
使用者旅程圖工作坊
- 約4~8人
- 界定地圖範圍: 15分鐘
- 討論時間: 90分鐘
工作坊步驟
- 界定地圖範圍
- 建立人物誌
- 定義「情境」與「使用者目標」
- 建立一系列「接觸點」
- 考量使用者的期待、感受...
- 繪製情緒線（使用者旅程）
- 考量每一互動階段時，使用者的情緒狀態
- 驗證與修正使用者旅程
練習：到餐廳用餐
想法和感覺 (Think & Feel)
聽到了甚麼 (Hear)
看到了甚麼 (See)
說了甚麼 做了甚麼 (Say & Do)
痛苦 (Pain)：痛點
獲得 (Gain)：甜蜜點
了解使用者需求的利器- 同理心地圖
從「人物誌」角色的角度，進而去思考下列6各面向可能的內容
- 他們會如何思考與感受焦慮或期待的事情 ？
- 他們會如何思考與感受焦慮或期待的事情 ？
- 他們可能會藉由誰來得知我們的產品？
- 在他們生活的環境中，他們會如何使用我們的產品？
- 當他們在公眾或私下使用我們的產品時，會說些或做些甚麼？
- 他們使用我們的產品時會遇到甚麼困難或痛苦？
- 他們使用我們的產品時可以得到哪些益處？
同理心思考角度的範例
使用者旅程圖
1. 使用者訪談做調查
2. 建立簡易人物誌（替代方案: 相關之調查報告）
3. 製作使用者旅程圖
三步驟製作使用者旅行圖
將使用者體驗變成可俯瞰整體的地圖
《WEB 設計職人必修：UX Design 初學者學習手冊》P.131
使用者訪談可能的問題
1. 將地圖劃分為 「步驟」、「接觸點」、「行動」、「思考」、「情感曲線」五個區塊
2. 想像人物誌的人物會如何行動，將跟「行動」有關的便利貼，黏貼於「行動」區塊
3. 想像人物誌的人物會如何思考，將跟「思考」有關的便利貼，黏貼於「思考」區塊
4. 將大致的步驟寫在便利貼上，黏貼於「步驟」區塊
5. 把在「步驟」的人物、店面、網站當作「接觸點」寫在便利貼上，黏貼於「接觸點」區塊
6.試著想像人物的情緒起伏，描繪「情感曲線」
使用者旅程圖「後製」模板（詳見ilms課程說明）
《WEB 設計職人必修：UX Design 初學者學習手冊》P.141
案例: 客服網站流程改善
《WEB 設計職人必修：UX Design 初學者學習手冊》