系統訊息與頁內提示

Callout|重點提示區塊

在相關內容旁保留教學、提醒或最佳實務;它不表示錯誤、也不強迫使用者立刻回應。

常見俗稱:重點提示區塊、教學提示、說明框、Callout、Information Callout

60 秒決策

先確認使用者要完成的事。

適合使用

  • 內容能幫助使用者理解規則、避免常見錯誤或做出較好的選擇,但不需要立刻回應。
  • 提示和附近內容有直接關係,使用者在那個位置閱讀時剛好需要它。

不適合使用

  • 內容其實是剛發生的失敗、成功或緊急狀態,應使用適合的 Alert 或 Status Message。
  • 提示與目前區塊沒有關係,只是想把更多資訊塞進頁面。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

放在做決定之前

權限提示應出現在角色設定旁,而不是送出後才說使用者選錯。

內容像有用的旁註,不像廣告標語

一個清楚標題加上兩三句具體建議即可;不用誇張顏色或大圖示硬搶注意。

語意跟內容而定

Callout 沒有通用的 ARIA role;可用語意化 section 或 aside,別因為有框線就標成 alert。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

正常閱讀

提示持續可讀,不會自動彈出、播音或搶走焦點。

有局部操作

若提供「標示已閱讀」等輕量控制,操作只改變提示本身,不中斷原本任務。

內容不再適用

規則改變或使用者已完成階段後,更新或移除提示,不留下過期建議。

需要正式說明

內容超過短提示時,連到完整說明頁,別把 Callout 堆成小型文件。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 最小權限提醒

    先觀察:Callout 是否提供角色設定前剛好需要的建議,而不是把它標成錯誤或緊急通知。

    操作:點選「標示已閱讀」,確認只更新這塊提示的回饋。

    預期結果:提示保留在角色設定旁;標示已閱讀後有文字回饋,背景設定仍可繼續完成。

Callout Demo

建議留在做決定的地方,不必打斷人
情境:LumenDesk 成員管理

新增成員

選擇初始角色目前預設:檢視者
檢視者只查看已授權內容

Callout 是讀到這裡剛好有用的旁註;它不是錯誤,也不會自行消失。

尚未標示最小權限提示為已閱讀。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的成員角色設定旁加入 Callout,標題為「先從最小權限開始」,說明新成員預設使用檢視者角色,需要時再提高權限。Callout 放在角色說明旁,內容以教學與建議為主,不使用 role="alert",也不要做成會自行消失的 Toast。若提供「標示已閱讀」操作,按下後只更新這個局部提示,不中斷使用者繼續設定。

驗收清單

不要只確認欄位能不能點。

  • 提示是否和附近的決策或內容直接相關?
  • 它是在教學與提醒,而非宣告剛發生的錯誤?
  • 是否用適合內容的語意化元素,而非一律 role="alert"?
  • 文字是否具體到能幫使用者避免一個實際錯誤?
  • 局部操作是否不會打斷主流程?
  • 內容變長時,是否有連到完整說明的出口?