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

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

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

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

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

什么是「不可用按鈕」？

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

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

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

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

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

讓用戶(hù)感到困惑

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

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

破碎的體驗(yàn)

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

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

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

可達(dá)性差

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

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

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

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

中斷流程

「不可用按鈕」會(huì)擾亂用戶(hù)流程，因?yàn)橛脩?hù)需要停下來(lái)，等待，看看按鈕被禁用的原因以及如何啟用它。用戶(hù)需要找到可能導(dǎo)致此問(wèn)題的錯(cuò)誤或缺失的字段。

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

溝通不暢

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

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

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

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

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

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

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

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

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

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

有哪些替代解決方案？

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

隱藏 UI 中的按鈕

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

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

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

借助工具提示說(shuō)明不可用的原因

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

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

• (1) 找到合適的位置來(lái)顯示工具提示或幫助文本。由于不可用的按鈕沒(méi)有聚焦?fàn)顟B(tài)，用戶(hù)可能不希望將鼠標(biāo)懸?；騿螕羲鼈儊?lái)查看工具提示。你可能需要一個(gè)單獨(dú)的圖標(biāo)，用戶(hù)可以將鼠標(biāo)懸停在該圖標(biāo)上并查看詳細(xì)信息。

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

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

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

使用更好的方式與用戶(hù)溝通

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

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

當(dāng)當(dāng)前用戶(hù)無(wú)法購(gòu)買(mǎi)所選商品時(shí)，亞馬遜會(huì)提供一個(gè)「查看類(lèi)似商品」按鈕。

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

不要使用「不可用按鈕」

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

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

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

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

結(jié)論

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