超全總結！「不可用按鈕」完全設計指南

編者按：Disabled Buttons 通常被稱為「禁用按鈕」或者「不可用按鈕」，但是考慮到「禁用」本身很容易被視作為動詞，為了避免歧義和理解錯誤，會采用「不可用按鈕」來進行表達。在 UI 和 UX 設計當中，「不可用按鈕」足夠常見但也是體驗問題高發的控件，而 Saadia Minhas 這篇文章詳細闡述了問題在哪里，注意事項，替代方案，可以說是極為完善了。以下是正文：

本文介紹了「不可用按鈕」（Disabled Buttons）對整體用戶體驗 (UX) 的影響。與「不可用按鈕」 UX 相關的可用性問題有哪些？我們如何避免這些問題？

首先，讓我們了解什么是「不可用按鈕」，以及它們如何導致用戶體驗不佳。下一節將介紹一些實際案例，其中「不可用按鈕」被設計得很好。最后一節將通過實際案例展示「不可用按鈕」更好的替代方案。

關鍵要點

• 每當你想在 UI 上添加「不可用按鈕」時，首先問自己是否有更好的替代方案。
• 思考并列出場景，嘗試將其與你的實際情況聯系起來。然后找到更好的解決方案。
• 如果使用「不可用按鈕」是唯一的方法，請嘗試為用戶提供盡可能方便的體驗，以便他們了解其用途，并通過執行所需的操作來啟用它們。

什么是「不可用按鈕」？

「不可用按鈕」是一種非常常用的 UI 元素，通常為按鈕的形態，只是這個按鈕暫時處于非活動狀態，用戶無法與之交互。它在視覺上與活動狀態的按鈕不同。它通常呈灰色，或以較低的不透明度來呈現，以強調其禁用狀態。

「不可用按鈕」通常用于 Web 表單和 APP 中，以表示根據當前狀態或用戶輸入，特定操作或功能當前不可用。

可用按鈕與「不可用按鈕」

為什么不可用按鈕會導致糟糕的用戶體驗？

以下是有關「不可用按鈕」 UX 的一些常見問題。

讓用戶感到困惑

用戶發現「不可用按鈕」是模棱兩可的，因為用戶可能不明白為什么無法與它們交互。用戶會看著按鈕，思考它的作用、為什么被禁用以及如何啟用它。他們甚至不知道它是最初就已經被禁用的，還是在響應他們的某個操作后，系統將其狀態更改為「禁用」。

「不可用按鈕」表示用戶必須執行某個操作才能啟用它。但他們需要在 UI 上找到該操作，如果看不到則會讓用戶感到沮喪。

破碎的體驗

在 UI 界面上填寫完表單后，如果發現 UI 上有一個禁用的按鈕，用戶會感到茫然無措。在他們看來，如果他們的輸入的內容有問題，他們就無法繼續。他們從頭開始查看頁面，以查找他們犯的錯誤，或者繼續尋找他們可能遺漏的任何必填字段。

禁用「提交」按鈕會讓用戶認為哪里出了問題，但又沒有告訴他們問題出在哪里。此外，他們也無法確定是他們的輸入有問題，還是系統有問題，或者是網絡有問題。

在沒有提示的情況下，其實通常很難找到輸入驗證錯誤或缺失的字段，這會讓用戶感到煩惱。這會導致負面體驗，尤其是當用戶感到無緣無故受到限制時。

可達性差

正如 Vitaly Friedman 在其《關于「不可用按鈕」 的用戶體驗 》的文章中所提到的，「不可用按鈕」在對比度不足的時候，很難將它們與 UI 上的其他活動按鈕區分開來。此外，殘障用戶在識別這些按鈕，以及閱讀其上低對比度文本時也會面臨挑戰。

沒有聚焦狀態

正如 Adam Silver 在這篇《有關「不可用按鈕」 UX 問題》的文章中提到的那樣，「不可用按鈕」天生沒有聚焦狀態。由于用戶無法與它們交互，因此當用戶將鼠標懸停在「不可用按鈕」上或單擊「不可用按鈕」時，不應發生任何變化。

這種未聚焦狀態會讓用戶感到困惑，因為他們無法找到有關按鈕為何被禁用以及何時啟用的線索。用戶不希望點擊未聚焦的按鈕，因此在將鼠標懸停在「不可用按鈕」上時，提供工具提示并不是一個好主意。

中斷流程

「不可用按鈕」會擾亂用戶流程，因為用戶需要停下來，等待，看看按鈕被禁用的原因以及如何啟用它。用戶需要找到可能導致此問題的錯誤或缺失的字段。

有時，用戶會從頭開始填寫表單，以糾正之前可能犯的錯誤。這會使流程變慢，并浪費用戶的時間。

溝通不暢

設計即溝通，而「不可用按鈕」無法有效地傳達其存在的原因。當用戶無法找到有關「不可用按鈕」以及如何與它們交互的明確線索時，他們會感到煩惱。這種設計天生就缺乏用戶在與 UI 交互時所期望的溝通。

什么時候可以使用「不可用按鈕」？

如果你考慮使用某些 UX 最佳實踐，那么在某些情況下使用「不可用按鈕」是可行的。

• (1) 在 Google Drive 或 SharePoint 等內容管理系統中，如果用戶未選擇項目，則「共享」或「下載」按鈕將被禁用。用戶需要選擇一個項目，然后這些選項才會生效。

當列表中未選擇任何項目時，SharePoint 會顯示禁用狀態下的「共享」按鈕。

• (2) 在 Slack 或 Microsoft Teams 等協作和即時通訊 APP 中，聊天或討論界面中的「發送」或「發布」按鈕在用戶輸入消息之前處于不可用狀態。這鼓勵用戶在嘗試共享/發送內容之前，先撰寫內容。

Slack 顯示不可用的「發送消息」按鈕，直到用戶在輸入框中輸入消息。

• (3）在協作類 APP 中，會議的「加入」按鈕在會議開始前 15 分鐘之前保持禁用狀態。用戶可以在那時加入會議。
• (4) 在 Microsoft Word 或 Google Docs 等編輯器中，某些格式或編輯選項保持禁用狀態，直到用戶選擇相關文本或對象來應用這些更改。
• (5) 社交媒體平臺（如 Facebook 或 Twitter）會禁用「發布」按鈕，直到用戶在狀態更新中輸入的字符數達到最低要求。用戶開始輸入內容后，該按鈕就會顯示為可點擊狀態。

除非用戶開始輸入內容，否則 Twitter 會顯示一個不可用的「發布」按鈕。

總而言之， UI 上的「不可用按鈕」意味著用戶應該有辦法啟用它。這種方式應該讓用戶清楚，這樣他們就不必到處尋找解決方案。在上面的例子中，用戶希望在一段時間后或響應某個操作后啟用這一按鈕。

有哪些替代解決方案？

為了確保更好的用戶體驗，可以使用一些替代解決方案來代替 UI 上的不可用按鈕。

隱藏 UI 中的按鈕

你可以完全隱藏按鈕，而不是使用「不可用按鈕」。但是，這個解決方案只在某些情況下有效。

• (1) 在任何情況下，按鈕都不會被當前級別的用戶啟用。例如，它可以是基于權限的「刪除」操作，而當前用戶可能無權執行該操作。
• (2) 用戶點擊按鈕后無法執行任何有價值的操作。例如，當「下一頁」上沒有可顯示的數據時，系統會默認跳轉到當前頁。

否則，隱藏 UI 中的按鈕并在用戶操作時再次顯示，是一種負面的體驗。用戶會對按鈕的顯示狀態感到困惑。如果用戶需要反復搜尋來找到按鈕，過程中可能需要刷新頁面、甚至重新啟動瀏覽器，這樣的操作成本就太高了。

借助工具提示說明不可用的原因

借助工具提示，解釋按鈕不可用的原因以及用戶需要如何啟用它，這樣用戶就會知道原因以及啟用按鈕所需的操作。

選擇此選項時需要考慮以下幾種情況：

• (1) 找到合適的位置來顯示工具提示或幫助文本。由于不可用的按鈕沒有聚焦狀態，用戶可能不希望將鼠標懸停或單擊它們來查看工具提示。你可能需要一個單獨的圖標，用戶可以將鼠標懸停在該圖標上并查看詳細信息。

當鼠標懸停在不可用按鈕上時，Google 搜索框會顯示一個工具提示。

• (2) 你可以在 UI 上靠近按鈕的位置顯示幫助文本。確保文本在屏幕上看起來不會顯得突兀。
• (3) 如果在填寫完所有字段后按鈕仍處于不可用狀態，并且用戶需要自己查找問題，這可能會讓用戶感到迷惑。你應該提供即時的驗證，當用戶移動到表單中的下一個字段時，告知用戶當前字段有哪些問題。

Instagram 會顯示一個已禁用的「注冊」按鈕，并且沒有任何幫助文字或線索。

使用更好的方式與用戶溝通

不要使用不可用按鈕，而是考慮一些可以以更好的方式傳達給用戶替代的方法。

• (1) 當某件商品無法購買時，你可以提供「添加到愿望清單」或「查看類似商品」按鈕，而不是提供不可用的「缺貨」按鈕。這向用戶傳達了含義，他們可以表達對商品的興趣，這將對他們將來有所幫助。

當當前用戶無法購買所選商品時，亞馬遜會提供一個「查看類似商品」按鈕。

• (2) 當用戶打開要購買的商品時，為用戶選擇默認的尺寸和顏色選項，而不是禁用「添加到購物車」按鈕。用戶可以點擊后根據需要更改詳細信息。

不要使用「不可用按鈕」

始終保持按鈕處于啟用狀態并讓用戶可以點擊它們。與搜索按鈕禁用的原因相比，允許用戶點擊按鈕，但是讓用戶可以發現可能的錯誤，是一種高效的體驗。

• （1）在按鈕點擊時執行輸入內容驗證
• （2）在頁面上突出顯示報錯信息
• （3）將用戶的輸入光標，移動到頁面上第一個錯誤出現的位置，并顯示錯誤的緣由以及相關字段。

Google 登錄頁面始終啟用「下一步」按鈕。如果用戶點擊該按鈕時，尚且沒有輸入正確的信息，則會隨控件一起顯示相關的報錯信息。

Mailchimp 顯示一個活動狀態的「注冊」按鈕。如果用戶點擊它而不提供必要的信息，它會顯示表單中的所有錯誤。

結論

上述的詳細分析可幫助你設計一整套用戶體驗方案，避免在涉及「不可用按鈕」時出現 UX 令人不適的情況，并為你強化設計的可訪問性，并且具有簡約高效的 UI ，為用戶規避體驗中的復雜性。