Why Disabled Buttons Hurt UX (and How to Fix Them)

1. Disabled Button（無法點擊的按鈕）現象

   • 用戶在網站上看到「Join Waitlist」按鈕，但按了沒反應，刷新頁面也沒用，原因是按鈕被禁用。
   • Disabled Button 是暫時無法互動的介面元素，通常以灰色呈現。
   • 許多 UX 設計師對禁用按鈕的使用有所爭議。

2. Disabled Button 與 WCAG（無障礙規範）

   • 禁用按鈕不違反對比度規範，因為不可互動的元件不需符合對比度標準。
   • 但不違規不代表 UX 就做得好。

3. Disabled Button 的四大問題

   • 誤導性：行動呼籲吸引用戶點擊，但什麼事都沒發生，造成負面體驗（Negative Affordance）。
   • 低對比度：文字難以辨識，影響理解介面內容。
   • 缺乏回饋：用戶不知道為什麼不能點、也不知道如何修正。
   • 增加複雜度：需要更完善的即時驗證機制，否則用戶卡住。

4. 什麼時候適合用 Disabled Button

   • 當行動正在處理、或狀態不再可用時，可以用禁用按鈕做微互動，避免重複動作。
   • 例如：申請簡訊驗證碼後，暫時禁用按鈕防止多次請求。

5. 設計建議

   • 只有極有必要時才使用禁用按鈕（如防止重複提交、狀態處理中等）。
   • 設計時要兼顧無障礙（例如可聚焦、可被螢幕閱讀器讀出）。
   • 一定要告訴用戶按鈕為何被禁用、如何解決。
   • 避免讓可用按鈕看起來像禁用，灰色通常被認為是不可用。

心得分析

UX 角度

1. 用戶溝通與回饋非常重要
   禁用按鈕往往讓用戶感到困惑與挫敗。良好的 UX 應該讓用戶明白「為什麼不能點？」以及「需要做什麼才能啟用？」。所以，設計時應提供明確的提示或錯誤訊息，減少用戶猜測。

2. 無障礙設計不能忽略
   讓禁用按鈕能夠被鍵盤聚焦與螢幕閱讀器讀出，是對所有用戶的尊重，也是現代 UX 基礎。禁用按鈕不該成為資訊孤島。

3. 慎用禁用狀態，避免負面體驗
   只有在確定用戶不能進行某個行動、且有明確理由時才使用禁用。否則，應考慮其他互動方式（如顯示錯誤提示、引導用戶填寫必填欄位）。

PM 角度

1. 設計與工程溝通要到位
   禁用按鈕很容易被當作「防呆」手段，但真正的用戶體驗是在於「溝通原因、指引下一步」。PM 應該要求設計和工程在禁用狀態下提供明確回饋（如提示訊息、教學動線）。

2. 權衡防止誤操作與用戶體驗
   防止重複或錯誤操作很重要，但更重要的是不要犧牲用戶流暢度。禁用按鈕是最後手段，優先考慮用戶教育與即時回饋。

3. 評估無障礙、國際標準與商業目標的平衡
   禁用按鈕雖不違反 WCAG 標準，但若因此影響用戶理解或操作，仍可能造成商業損失。PM 應該全盤思考：有沒有更好的替代方案？這樣設計能不能達到產品目標？

總結
禁用按鈕不是萬靈丹。無論 UX 或 PM 角度，都應慎重使用，並且優先考慮用戶的感受、理解與操作路徑，確保設計既好用又易懂，同時兼顧無障礙與產品目標。