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

本文介紹了「不可用按鈕」（Disabled Buttons）對整體用戶體驗(yàn) (UX) 的影響。與「不可用按鈕」 UX 相關(guān)的可用性問題有哪些？我們?nèi)绾伪苊膺@些問題？

首先，讓我們了解什么是「不可用按鈕」，以及它們?nèi)绾螌?dǎo)致用戶體驗(yàn)不佳。下一節(jié)將介紹一些實(shí)際案例，其中「不可用按鈕」被設(shè)計(jì)得很好。最后一節(jié)將通過實(shí)際案例展示「不可用按鈕」更好的替代方案。

關(guān)鍵要點(diǎn)

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

什么是「不可用按鈕」？

「不可用按鈕」是一種非常常用的 UI 元素，通常為按鈕的形態(tài)，只是這個(gè)按鈕暫時(shí)處于非活動(dòng)狀態(tài)，用戶無法與之交互。它在視覺上與活動(dòng)狀態(tài)的按鈕不同。它通常呈灰色，或以較低的不透明度來呈現(xiàn)，以強(qiáng)調(diào)其禁用狀態(tài)。

「不可用按鈕」通常用于 Web 表單和 APP 中，以表示根據(jù)當(dāng)前狀態(tài)或用戶輸入，特定操作或功能當(dāng)前不可用。

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

為什么不可用按鈕會導(dǎo)致糟糕的用戶體驗(yàn)？

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

讓用戶感到困惑

用戶發(fā)現(xiàn)「不可用按鈕」是模棱兩可的，因?yàn)橛脩艨赡懿幻靼诪槭裁礋o法與它們交互。用戶會看著按鈕，思考它的作用、為什么被禁用以及如何啟用它。他們甚至不知道它是最初就已經(jīng)被禁用的，還是在響應(yīng)他們的某個(gè)操作后，系統(tǒng)將其狀態(tài)更改為「禁用」。

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

破碎的體驗(yàn)

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

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

在沒有提示的情況下，其實(shí)通常很難找到輸入驗(yàn)證錯(cuò)誤或缺失的字段，這會讓用戶感到煩惱。這會導(dǎo)致負(fù)面體驗(yàn)，尤其是當(dāng)用戶感到無緣無故受到限制時(shí)。

可達(dá)性差

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

沒有聚焦?fàn)顟B(tài)

正如 Adam Silver 在這篇《有關(guān)「不可用按鈕」 UX 問題》的文章中提到的那樣，「不可用按鈕」天生沒有聚焦?fàn)顟B(tài)。由于用戶無法與它們交互，因此當(dāng)用戶將鼠標(biāo)懸停在「不可用按鈕」上或單擊「不可用按鈕」時(shí)，不應(yīng)發(fā)生任何變化。

這種未聚焦?fàn)顟B(tài)會讓用戶感到困惑，因?yàn)樗麄儫o法找到有關(guān)按鈕為何被禁用以及何時(shí)啟用的線索。用戶不希望點(diǎn)擊未聚焦的按鈕，因此在將鼠標(biāo)懸停在「不可用按鈕」上時(shí)，提供工具提示并不是一個(gè)好主意。

中斷流程

「不可用按鈕」會擾亂用戶流程，因?yàn)橛脩粜枰Ｏ聛?，等待，看看按鈕被禁用的原因以及如何啟用它。用戶需要找到可能導(dǎo)致此問題的錯(cuò)誤或缺失的字段。

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

溝通不暢

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

什么時(shí)候可以使用「不可用按鈕」？

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

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

當(dāng)列表中未選擇任何項(xiàng)目時(shí)，SharePoint 會顯示禁用狀態(tài)下的「共享」按鈕。

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

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

• (3）在協(xié)作類 APP 中，會議的「加入」按鈕在會議開始前 15 分鐘之前保持禁用狀態(tài)。用戶可以在那時(shí)加入會議。
• (4) 在 Microsoft Word 或 Google Docs 等編輯器中，某些格式或編輯選項(xiàng)保持禁用狀態(tài)，直到用戶選擇相關(guān)文本或?qū)ο髞響?yīng)用這些更改。
• (5) 社交媒體平臺（如 Facebook 或 Twitter）會禁用「發(fā)布」按鈕，直到用戶在狀態(tài)更新中輸入的字符數(shù)達(dá)到最低要求。用戶開始輸入內(nèi)容后，該按鈕就會顯示為可點(diǎn)擊狀態(tài)。

除非用戶開始輸入內(nèi)容，否則 Twitter 會顯示一個(gè)不可用的「發(fā)布」按鈕。

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

有哪些替代解決方案？

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

隱藏 UI 中的按鈕

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

• (1) 在任何情況下，按鈕都不會被當(dāng)前級別的用戶啟用。例如，它可以是基于權(quán)限的「刪除」操作，而當(dāng)前用戶可能無權(quán)執(zhí)行該操作。
• (2) 用戶點(diǎn)擊按鈕后無法執(zhí)行任何有價(jià)值的操作。例如，當(dāng)「下一頁」上沒有可顯示的數(shù)據(jù)時(shí)，系統(tǒng)會默認(rèn)跳轉(zhuǎn)到當(dāng)前頁。

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

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

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

選擇此選項(xiàng)時(shí)需要考慮以下幾種情況：

• (1) 找到合適的位置來顯示工具提示或幫助文本。由于不可用的按鈕沒有聚焦?fàn)顟B(tài)，用戶可能不希望將鼠標(biāo)懸?；騿螕羲鼈儊聿榭垂ぞ咛崾尽Ｄ憧赡苄枰粋€(gè)單獨(dú)的圖標(biāo)，用戶可以將鼠標(biāo)懸停在該圖標(biāo)上并查看詳細(xì)信息。

當(dāng)鼠標(biāo)懸停在不可用按鈕上時(shí)，Google 搜索框會顯示一個(gè)工具提示。

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

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

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

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

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

當(dāng)當(dāng)前用戶無法購買所選商品時(shí)，亞馬遜會提供一個(gè)「查看類似商品」按鈕。

• (2) 當(dāng)用戶打開要購買的商品時(shí)，為用戶選擇默認(rèn)的尺寸和顏色選項(xiàng)，而不是禁用「添加到購物車」按鈕。用戶可以點(diǎn)擊后根據(jù)需要更改詳細(xì)信息。

不要使用「不可用按鈕」

始終保持按鈕處于啟用狀態(tài)并讓用戶可以點(diǎn)擊它們。與搜索按鈕禁用的原因相比，允許用戶點(diǎn)擊按鈕，但是讓用戶可以發(fā)現(xiàn)可能的錯(cuò)誤，是一種高效的體驗(yàn)。

• （1）在按鈕點(diǎn)擊時(shí)執(zhí)行輸入內(nèi)容驗(yàn)證
• （2）在頁面上突出顯示報(bào)錯(cuò)信息
• （3）將用戶的輸入光標(biāo)，移動(dòng)到頁面上第一個(gè)錯(cuò)誤出現(xiàn)的位置，并顯示錯(cuò)誤的緣由以及相關(guān)字段。

Google 登錄頁面始終啟用「下一步」按鈕。如果用戶點(diǎn)擊該按鈕時(shí)，尚且沒有輸入正確的信息，則會隨控件一起顯示相關(guān)的報(bào)錯(cuò)信息。

Mailchimp 顯示一個(gè)活動(dòng)狀態(tài)的「注冊」按鈕。如果用戶點(diǎn)擊它而不提供必要的信息，它會顯示表單中的所有錯(cuò)誤。

結(jié)論

上述的詳細(xì)分析可幫助你設(shè)計(jì)一整套用戶體驗(yàn)方案，避免在涉及「不可用按鈕」時(shí)出現(xiàn) UX 令人不適的情況，并為你強(qiáng)化設(shè)計(jì)的可訪問性，并且具有簡約高效的 UI ，為用戶規(guī)避體驗(yàn)中的復(fù)雜性。

作者：陳子木