進度指標 (Progress indicators)

利用步驟指標告訴使用者，若要達到他們的使用目標，還剩多少步驟尚未完成。

本頁內容：

1. 步驟指標
2. 進度條
3. 摘要選單

1. 標示步驟

告訴使用者目前正在哪個步驟

優點：

• 簡單易懂，簡潔及具有親和力

缺點：

• 沒有提供使用者下一步的資訊或細節

這是我們建議最單純也最簡單的方式，標示出使用者所在的步驟，可以讓他們有立即回饋的感覺，他們的每一步都正在取得進展。

2. 進度條

在頁面頂部顯示所有的步驟，用不同顏色或打亮的方式顯示使用者當前的進度到了哪一個步驟。

優點：

• 提供完整過程的全貌
• 步驟可以作為導引參考

缺點：

• 佔用了大量展示空間，特別是在小螢幕的裝置設備上
• 增加視覺干擾，使用者對重要內容的專注力容易分散

其它建議：

• 不要以為你只需要其中一個步驟標示
• 適用於固定順序、少量步驟
• 為步驟編號，加強順序性
• 不應該完全依賴進度條導引：你仍然需要在各個頁面提供『返回』和『下一步』的按鈕連結

3. 摘要選單

這種模式仍在討論中 (查看討論的 hackpad)

提供連結到每個部分的垂直列表。讓使用者決定以任意順序完成其部分的任務

優點：

• 章節標題可以更長
• 給各選項更多發揮空間
• 使用者可以在訂單中選出最適合他們的選項
• 使用者可以跳過部分他不需要的內容，並在按下完成之前即可預覽

缺點：

• 展開時佔用了大量的空間
• 需要更多力氣來製作設計這種表單
• 仍存在一些易用性問題，例如：如何讓使用者知道他們已經完成了所有的步驟呢？

在 hackpad 討論此頁