Year
2024
我的角色
UI/UX 設計師
負責項目
功能流程規劃、操作邏輯優化、視覺設計製作、工程交付說明
專案背景
此為 WEBA 線上表單模組的「回覆資料」管理頁面，用戶需要從表格中篩選資料、批次勾選、下載回覆紀錄。原有介面雖具備基本功能，但操作邏輯不直覺、缺乏即時回饋，容易導致下載結果與預期不符。
舊版使用問題
使用者難以預測下載邏輯
若有勾選資料列 → 顯示「下載勾選項目」，匯出所選資料
若未勾選資料 → 顯示「下載篩選結果」，匯出當前篩選條件下所有資料（含跨頁）
使用者難以判斷按鈕的文字與行為邏輯，需自行推測
表格上方的「全選」實際僅勾選當前頁面，常被誤解為全資料勾選
操作結果與預期不符，缺乏即時提示與掌控感
設計討論與重新思考
我與原 UX 設計師討論後，了解其設計邏輯為：「未勾選代表欲下載所有篩選結果，因此按鈕會根據勾選狀態切換文字」
雖然邏輯上合理，但對使用者來說並不直覺：需自己理解規則，缺乏回饋與控制感
因此我重新設計「選取 → 提示 → 下載」整體流程，提升操作透明度與預測性
舊版表格互動
UX 設計優化
統一邏輯並補充狀態提示
下載按鈕文字統一為「下載」
按鈕旁即時顯示「已選取 X / 全部 Y 筆資料」
Tooltip 說明目前下載對象，消除使用者不確定性
表頭全選加入「確認選取範圍」邏輯
點選表格 header checkbox（全選）時顯示選取範圍提示
提供兩種選擇：
僅選取本頁所有資料（如 20 筆）
選取當前篩選結果下的所有資料（如 108 筆）
顯示已選筆數與「清除選取」操作選項
成效與反饋
降低首次操作錯誤率與誤下載比例
使用者對勾選與下載邏輯的理解明確，操作更有信心
提供工程端清楚的狀態定義與行為邏輯，降低溝通與實作成本
此邏輯可通用至未來其他含表格操作的模組，強化整體一致性與維運效率