亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)超全總結(jié)!「不可用按鈕」完全設(shè)計指南

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

本文介紹了「不可用按鈕」(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)前不可用。

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

為什么不可用按鈕會導(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)中,如果用戶未選擇項目,則「共享」或「下載」按鈕將被禁用。用戶需要選擇一個項目,然后這些選項才會生效。

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

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

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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)。

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

除非用戶開始輸入內(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ì)信息。

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

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

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

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

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

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

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

當(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)字段。

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

超全總結(jié)!「不可用按鈕」完全設(shè)計指南

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

結(jié)論

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

作者:陳子木

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/20327.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔(dān)任何法律責(zé)任。