超全總結(jié)!「不可用按鈕」完全設(shè)計指南
編者按:Disabled Buttons 通常被稱為「禁用按鈕」或者「不可用按鈕」,但是考慮到「禁用」本身很容易被視作為動詞,為了避免歧義和理解錯誤,會采用「不可用按鈕」來進行表達(dá)。在 UI 和 UX 設(shè)計當(dāng)中,「不可用按鈕」足夠常見但也是體驗問題高發(fā)的控件,而 Saadia Minhas 這篇文章詳細(xì)闡述了問題在哪里,注意事項,替代方案,可以說是極為完善了。以下是正文:
本文介紹了「不可用按鈕」(Disabled Buttons)對整體用戶體驗 (UX) 的影響。與「不可用按鈕」 UX 相關(guān)的可用性問題有哪些?我們?nèi)绾伪苊膺@些問題?
首先,讓我們了解什么是「不可用按鈕」,以及它們?nèi)绾螌?dǎo)致用戶體驗不佳。下一節(jié)將介紹一些實際案例,其中「不可用按鈕」被設(shè)計得很好。最后一節(jié)將通過實際案例展示「不可用按鈕」更好的替代方案。
關(guān)鍵要點
- 每當(dāng)你想在 UI 上添加「不可用按鈕」時,首先問自己是否有更好的替代方案。
- 思考并列出場景,嘗試將其與你的實際情況聯(lián)系起來。然后找到更好的解決方案。
- 如果使用「不可用按鈕」是唯一的方法,請嘗試為用戶提供盡可能方便的體驗,以便他們了解其用途,并通過執(zhí)行所需的操作來啟用它們。
什么是「不可用按鈕」?
「不可用按鈕」是一種非常常用的 UI 元素,通常為按鈕的形態(tài),只是這個按鈕暫時處于非活動狀態(tài),用戶無法與之交互。它在視覺上與活動狀態(tài)的按鈕不同。它通常呈灰色,或以較低的不透明度來呈現(xiàn),以強調(diào)其禁用狀態(tài)。
「不可用按鈕」通常用于 Web 表單和 APP 中,以表示根據(jù)當(dāng)前狀態(tài)或用戶輸入,特定操作或功能當(dāng)前不可用。
可用按鈕與「不可用按鈕」
為什么不可用按鈕會導(dǎo)致糟糕的用戶體驗?
以下是有關(guān)「不可用按鈕」 UX 的一些常見問題。
讓用戶感到困惑
用戶發(fā)現(xiàn)「不可用按鈕」是模棱兩可的,因為用戶可能不明白為什么無法與它們交互。用戶會看著按鈕,思考它的作用、為什么被禁用以及如何啟用它。他們甚至不知道它是最初就已經(jīng)被禁用的,還是在響應(yīng)他們的某個操作后,系統(tǒng)將其狀態(tài)更改為「禁用」。
「不可用按鈕」表示用戶必須執(zhí)行某個操作才能啟用它。但他們需要在 UI 上找到該操作,如果看不到則會讓用戶感到沮喪。
破碎的體驗
在 UI 界面上填寫完表單后,如果發(fā)現(xiàn) UI 上有一個禁用的按鈕,用戶會感到茫然無措。在他們看來,如果他們的輸入的內(nèi)容有問題,他們就無法繼續(xù)。他們從頭開始查看頁面,以查找他們犯的錯誤,或者繼續(xù)尋找他們可能遺漏的任何必填字段。
禁用「提交」按鈕會讓用戶認(rèn)為哪里出了問題,但又沒有告訴他們問題出在哪里。此外,他們也無法確定是他們的輸入有問題,還是系統(tǒng)有問題,或者是網(wǎng)絡(luò)有問題。
在沒有提示的情況下,其實通常很難找到輸入驗證錯誤或缺失的字段,這會讓用戶感到煩惱。這會導(dǎo)致負(fù)面體驗,尤其是當(dāng)用戶感到無緣無故受到限制時。
可達(dá)性差
正如 Vitaly Friedman 在其《關(guān)于「不可用按鈕」 的用戶體驗 》的文章中所提到的,「不可用按鈕」在對比度不足的時候,很難將它們與 UI 上的其他活動按鈕區(qū)分開來。此外,殘障用戶在識別這些按鈕,以及閱讀其上低對比度文本時也會面臨挑戰(zhàn)。
沒有聚焦?fàn)顟B(tài)
正如 Adam Silver 在這篇《有關(guān)「不可用按鈕」 UX 問題》的文章中提到的那樣,「不可用按鈕」天生沒有聚焦?fàn)顟B(tài)。由于用戶無法與它們交互,因此當(dāng)用戶將鼠標(biāo)懸停在「不可用按鈕」上或單擊「不可用按鈕」時,不應(yīng)發(fā)生任何變化。
這種未聚焦?fàn)顟B(tài)會讓用戶感到困惑,因為他們無法找到有關(guān)按鈕為何被禁用以及何時啟用的線索。用戶不希望點擊未聚焦的按鈕,因此在將鼠標(biāo)懸停在「不可用按鈕」上時,提供工具提示并不是一個好主意。
中斷流程
「不可用按鈕」會擾亂用戶流程,因為用戶需要停下來,等待,看看按鈕被禁用的原因以及如何啟用它。用戶需要找到可能導(dǎo)致此問題的錯誤或缺失的字段。
有時,用戶會從頭開始填寫表單,以糾正之前可能犯的錯誤。這會使流程變慢,并浪費用戶的時間。
溝通不暢
設(shè)計即溝通,而「不可用按鈕」無法有效地傳達(dá)其存在的原因。當(dāng)用戶無法找到有關(guān)「不可用按鈕」以及如何與它們交互的明確線索時,他們會感到煩惱。這種設(shè)計天生就缺乏用戶在與 UI 交互時所期望的溝通。
什么時候可以使用「不可用按鈕」?
如果你考慮使用某些 UX 最佳實踐,那么在某些情況下使用「不可用按鈕」是可行的。
- (1) 在 Google Drive 或 SharePoint 等內(nèi)容管理系統(tǒng)中,如果用戶未選擇項目,則「共享」或「下載」按鈕將被禁用。用戶需要選擇一個項目,然后這些選項才會生效。
當(dāng)列表中未選擇任何項目時,SharePoint 會顯示禁用狀態(tài)下的「共享」按鈕。
- (2) 在 Slack 或 Microsoft Teams 等協(xié)作和即時通訊 APP 中,聊天或討論界面中的「發(fā)送」或「發(fā)布」按鈕在用戶輸入消息之前處于不可用狀態(tài)。這鼓勵用戶在嘗試共享/發(fā)送內(nèi)容之前,先撰寫內(nèi)容。
Slack 顯示不可用的「發(fā)送消息」按鈕,直到用戶在輸入框中輸入消息。
- (3)在協(xié)作類 APP 中,會議的「加入」按鈕在會議開始前 15 分鐘之前保持禁用狀態(tài)。用戶可以在那時加入會議。
- (4) 在 Microsoft Word 或 Google Docs 等編輯器中,某些格式或編輯選項保持禁用狀態(tài),直到用戶選擇相關(guān)文本或?qū)ο髞響?yīng)用這些更改。
- (5) 社交媒體平臺(如 Facebook 或 Twitter)會禁用「發(fā)布」按鈕,直到用戶在狀態(tài)更新中輸入的字符數(shù)達(dá)到最低要求。用戶開始輸入內(nèi)容后,該按鈕就會顯示為可點擊狀態(tài)。
除非用戶開始輸入內(nèi)容,否則 Twitter 會顯示一個不可用的「發(fā)布」按鈕。
總而言之, UI 上的「不可用按鈕」意味著用戶應(yīng)該有辦法啟用它。這種方式應(yīng)該讓用戶清楚,這樣他們就不必到處尋找解決方案。在上面的例子中,用戶希望在一段時間后或響應(yīng)某個操作后啟用這一按鈕。
有哪些替代解決方案?
為了確保更好的用戶體驗,可以使用一些替代解決方案來代替 UI 上的不可用按鈕。
隱藏 UI 中的按鈕
你可以完全隱藏按鈕,而不是使用「不可用按鈕」。但是,這個解決方案只在某些情況下有效。
- (1) 在任何情況下,按鈕都不會被當(dāng)前級別的用戶啟用。例如,它可以是基于權(quán)限的「刪除」操作,而當(dāng)前用戶可能無權(quán)執(zhí)行該操作。
- (2) 用戶點擊按鈕后無法執(zhí)行任何有價值的操作。例如,當(dāng)「下一頁」上沒有可顯示的數(shù)據(jù)時,系統(tǒng)會默認(rèn)跳轉(zhuǎn)到當(dāng)前頁。
否則,隱藏 UI 中的按鈕并在用戶操作時再次顯示,是一種負(fù)面的體驗。用戶會對按鈕的顯示狀態(tài)感到困惑。如果用戶需要反復(fù)搜尋來找到按鈕,過程中可能需要刷新頁面、甚至重新啟動瀏覽器,這樣的操作成本就太高了。
借助工具提示說明不可用的原因
借助工具提示,解釋按鈕不可用的原因以及用戶需要如何啟用它,這樣用戶就會知道原因以及啟用按鈕所需的操作。
選擇此選項時需要考慮以下幾種情況:
- (1) 找到合適的位置來顯示工具提示或幫助文本。由于不可用的按鈕沒有聚焦?fàn)顟B(tài),用戶可能不希望將鼠標(biāo)懸停或單擊它們來查看工具提示。你可能需要一個單獨的圖標(biāo),用戶可以將鼠標(biāo)懸停在該圖標(biāo)上并查看詳細(xì)信息。
當(dāng)鼠標(biāo)懸停在不可用按鈕上時,Google 搜索框會顯示一個工具提示。
- (2) 你可以在 UI 上靠近按鈕的位置顯示幫助文本。確保文本在屏幕上看起來不會顯得突兀。
- (3) 如果在填寫完所有字段后按鈕仍處于不可用狀態(tài),并且用戶需要自己查找問題,這可能會讓用戶感到迷惑。你應(yīng)該提供即時的驗證,當(dāng)用戶移動到表單中的下一個字段時,告知用戶當(dāng)前字段有哪些問題。
Instagram 會顯示一個已禁用的「注冊」按鈕,并且沒有任何幫助文字或線索。
使用更好的方式與用戶溝通
不要使用不可用按鈕,而是考慮一些可以以更好的方式傳達(dá)給用戶替代的方法。
- (1) 當(dāng)某件商品無法購買時,你可以提供「添加到愿望清單」或「查看類似商品」按鈕,而不是提供不可用的「缺貨」按鈕。這向用戶傳達(dá)了含義,他們可以表達(dá)對商品的興趣,這將對他們將來有所幫助。
當(dāng)當(dāng)前用戶無法購買所選商品時,亞馬遜會提供一個「查看類似商品」按鈕。
- (2) 當(dāng)用戶打開要購買的商品時,為用戶選擇默認(rèn)的尺寸和顏色選項,而不是禁用「添加到購物車」按鈕。用戶可以點擊后根據(jù)需要更改詳細(xì)信息。
不要使用「不可用按鈕」
始終保持按鈕處于啟用狀態(tài)并讓用戶可以點擊它們。與搜索按鈕禁用的原因相比,允許用戶點擊按鈕,但是讓用戶可以發(fā)現(xiàn)可能的錯誤,是一種高效的體驗。
- (1)在按鈕點擊時執(zhí)行輸入內(nèi)容驗證
- (2)在頁面上突出顯示報錯信息
- (3)將用戶的輸入光標(biāo),移動到頁面上第一個錯誤出現(xiàn)的位置,并顯示錯誤的緣由以及相關(guān)字段。
Google 登錄頁面始終啟用「下一步」按鈕。如果用戶點擊該按鈕時,尚且沒有輸入正確的信息,則會隨控件一起顯示相關(guān)的報錯信息。
Mailchimp 顯示一個活動狀態(tài)的「注冊」按鈕。如果用戶點擊它而不提供必要的信息,它會顯示表單中的所有錯誤。
結(jié)論
上述的詳細(xì)分析可幫助你設(shè)計一整套用戶體驗方案,避免在涉及「不可用按鈕」時出現(xiàn) UX 令人不適的情況,并為你強化設(shè)計的可訪問性,并且具有簡約高效的 UI ,為用戶規(guī)避體驗中的復(fù)雜性。
作者:陳子木
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)