Lesson 7

Lesson 7 - UX Best Practices for SaaS Copilot Design

用 Security Copilot 的例子整理 SaaS Copilot 的 UI 取捨:版面空間、資料來源、IA、提示手冊與控制項。

例子(先看見 SaaS Copilot 的共通型)

方法(SaaS Copilot 的設計取捨)

下面這張圖把三種型態放在同一個視角。讀圖時先對齊任務範圍,再看版面是否保留父頁資訊的可見性與可操作性。

Three SaaS Copilot layout patterns: side panel, large overlay, and full page.
教學圖:Copilot 佔用螢幕空間的三種型態

把任務範圍對齊到版面空間:側欄適合短回合查詢,大面板適合比較與追問,整頁適合完整工作流程。

接著把資料、模型與 IA 放在一起看,會更容易檢查「可重複的工作路徑」是否真的跑得動。

A system map of a SaaS Copilot showing model, data sources, state, information architecture, and UI controls.
教學圖:SaaS Copilot 的組成地圖

把模型、即時資料來源、狀態與 IA 串成一張產品結構圖,方便檢查每個環節是否能支撐可重複的工作路徑。

下面這張圖用「起手式 → 下一步 → 輸出」把節奏畫出來,你可以用它來檢查每一步是否都有明確的承接點。

A flow showing promptbooks leading to chat, next-step suggestions, autocomplete, and actionable outputs.
教學圖:Promptbooks 讓流程可接續

用 Promptbooks 給出起手式,再用建議與自動完成接住下一步,輸出以卡片與清單把任務推進。

練習(把你的用例做成 Mobile Copilot 草圖)

  1. 選一個 SaaS 工作流程(需要查資料、做判斷、留紀錄)。
  2. 先決定你的 Copilot 佔多少螢幕空間,並用一個「會話 / 歷史清單」當中心樞紐,想清楚要接哪些資料來源與輸出。
  3. 畫一個手機版 Copilot:入口(問句/上傳)→ 回覆 → 建議下一步 → 產出(摘要/清單/卡片),再寫 8 條 Promptbook 讓流程能一路走下去。
Next Lesson

Lesson 8 - Reporting

把會議與工作歷程轉成可用的摘要與後續步驟,並用 UI 模態切換把報告推進成下一段工作。