60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者可能從搜尋、通知或深層連結直接進到系統內頁。
- 頁面確實有可回到的上層資訊架構。
不適合使用
- 把填表的第 1、2、3 步偽裝成路徑。
- 頁面沒有有意義的父層,硬湊出「首頁/功能/目前頁」。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
每一段都有層級意義
「帳號申請」是上層區域,「建立申請」才是目前頁;不要把篩選條件或按鈕名稱混進路徑。
最後一項不必再連回自己
目前頁保持文字並用 aria-current="page" 說明;前面的可返回位置才是 Link。
分隔符只幫助掃讀
斜線或箭頭是視覺提示,不應變成另一個可點目的地。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
深層頁面
完整路徑說明目前頁屬於哪一個上層區域。
目前頁
最後一段有可見位置提示與 aria-current="page"。
窄螢幕
優先保留能辨識層級的短名稱;必要時可省略中間段,但不能讓目前頁消失。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
建立申請的所在位置
先觀察:這一列回答「我現在在系統哪裡」,不是回答流程走到第幾步。
操作:選取「帳號申請」回到上層,再回到目前頁。
預期結果:上層段落是 Link;目前頁只有一個 aria-current="page"。
可操作 Demo
先確認自己在系統哪個上層位置。
目前頁面
建立帳號申請
需要回到「帳號申請」時,使用者可直接從 Breadcrumb 返回上層。告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的「建立帳號申請」頁加入 Breadcrumb:首頁/帳號申請/建立申請。使用有名稱的 nav,前兩項是可回到上層的 Link,最後一項代表目前頁並以 aria-current="page" 標示。不要把 Breadcrumb 當成申請流程步驟,也不要在只有一層的簡單頁面硬塞路徑。驗收清單
不要只確認欄位能不能點。
- 每一段是否都對應真實上層頁面?
- 前段是否可回到上層、末段是否表示目前頁?
- 目前頁是否使用 aria-current="page"?
- 是否沒有拿流程步驟冒充路徑?
- 手機是否仍能辨識目前頁?