GDS Digital Service Manual 中文翻譯網站 (beta)
by HPX-GOV 英國政府數位服務研究小組 GDS Study Group

進度指標 (Progress indicators)

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

本頁內容:

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

1. 標示步驟

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

這是最推薦的作法

步驟指標的例子

優點:

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

缺點:

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

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


2. 進度條

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

一個進度條的例子

優點:

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

缺點:

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

其它建議:

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

3. 摘要選單

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

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

摘要選單的例子

優點:

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

缺點:

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

在 hackpad 討論此頁

翻譯:陳韻婷
校稿:Richard, Amy Hsu, James Chu
原始出處:https://www.gov.uk/service-manual/user-centred-design/resources/patterns/progress-indicators

請留言

你的email信箱不會被發布出來. Required fields are marked *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料