Most user experience designers will be familiar with Jackob Nielsen’s 10 usability heuristics. They are widely cited and a great set of broad rules of thumb to follow when designing user interfaces.

大多數用戶體驗設計師將熟悉Jackob Nielsen的10種可用性啟發式方法 。 在設計用戶界面時，它們被廣泛引用，并遵循大量廣泛的經驗法則。

Heuristic number five is error prevention:

啟發式數字五是錯誤預防：

‘Even better than good error messages is a careful design which prevents a problem from occurring in the first place.’

“比好的錯誤消息更好的是精心設計，它可以從根本上防止問題的發生。”

Sounds sensible right? Well not always, sometimes it is better to let users make errors and give appropriate feedback. Let’s bring the disabled button on forms to the floor.

聽起來很合理吧？ 并非總是如此，有時最好讓用戶犯錯誤并提供適當的反饋。 讓我們將表單上的禁用按鈕放到地板上。

We will start by setting the scene: you are designing a form that has several required fields. You indicate this clearly on the form so hopefully most users will notice. You are striving to create a better user experience. Thinking about error prevention you decide to disable the ‘submit’ button until the user has completed the form preventing them from making an error by submitting an incomplete form. All good? Well no.

我們將從設置場景開始：您正在設計一個具有幾個必填字段的表單。 您在表格上清楚地指出了這一點，希望大多數用戶會注意到。 您正在努力創造更好的用戶體驗。 考慮到錯誤預防，您決定禁用“提交”按鈕，直到用戶填寫完該表單以防止他們通過提交不完整的表單而出錯為止。 都好？ 好吧

禁用按鈕是一種反模式 (Disabling buttons is an anti-pattern)

When we disable a button on a form we are often disabling the call-to-action. Yes, that thing on the page we trying to encourage users to click to proceed with their journey.

當我們禁用表單上的按鈕時，我們通常會禁用號召性用語。 是的，我們試圖鼓勵用戶單擊頁面上的該內容以繼續他們的旅程。

Worse still when a user clicks on the call-to-action hoping to continue through the process nothing happens. They don’t proceed as expected and there is no feedback or error message. They are stuck and it’s frustrating. It might even make them feel stupid or confused.

更糟糕的是，當用戶單擊號召性用語以希望繼續執行該過程時，什么也沒有發生。 它們沒有按預期進行，沒有反饋或錯誤消息。 他們被卡住了，這令人沮喪。 這甚至可能使他們感到愚蠢或困惑。

Disabled buttons also look strange and are often hard to read. Most fail to meet color contrast guidelines. Inexperienced users will not necessarily recognise the button as disabled and think ‘why does this look different?’

禁用的按鈕看起來也很奇怪，通常很難閱讀。 大多數不符合顏色對比準則。 沒有經驗的用戶不一定會將該按鈕識別為已禁用，并會想“為什么這看起來有所不同？”

It is not just frustrating, disabled buttons can exclude people with disabilities or those using mobiles. If a user can only see part of the form they may arrive at the end thinking they have filled in all the required fields only to find they are unable to submit the form because of a disabled button. There is no feedback telling them what is wrong.

不僅令人沮喪，禁用的按鈕還可以排除殘疾人或使用手機的人。 如果用戶只能看到表單的一部分，他們可能會以為他們已經填寫了所有必填字段而到達最后，只是發現他們由于禁用了按鈕而無法提交表單。 沒有反饋告訴他們出了什么問題。

是否有禁用按鈕的情況？ (Is there ever a case for disabling buttons?)

Disabled buttons may have a place in complex web applications. They can be useful to indicate to a user ‘you can’t do this’. But they don’t tell the user why. If it is implicit from the experience why the button is disabled then perhaps they are useful. A more thought-through UI can often remove the need to use disabled buttons.

禁用的按鈕可能在復雜的Web應用程序中占有一席之地。 它們可能有助于向用戶指示“您不能這樣做”。 但是他們沒有告訴用戶原因。 如果從經驗中隱含了為什么禁用按鈕，那么也許它們很有用。 經過深思熟慮的UI通常可以消除使用禁用按鈕的需要。

However, they shouldn’t be used to prevent users from making errors in forms. They often don’t prevent errors. To help users you should provide well written and appropriate feedback. But, you should ask: what value am I adding by having a disabled button vs not showing anything? The same goes for any disabled interaction element.

但是，不應使用它們來防止用戶在表單中出錯。 他們通常不會防止錯誤。 為了幫助用戶，您應該提供書面和適當的反饋。 但是，您應該問：通過禁用按鈕而不顯示任何內容，我可以增加什么價值？ 任何禁用的交互元素也是如此。

In short, disabled buttons have no place as the call to action on forms. Provide helpful error messages instead. It is also important not to blindly follow rules or patterns laid down by others. Jakob Neilson’s key point is that careful design prevents users from making errors. Using disabled buttons is not careful or useful most of the time.

簡而言之，禁用的按鈕在表單上沒有作為號召性用語的位置。 而是提供有用的錯誤消息。 同樣重要的是，不要盲目遵循別人制定的規則或模式。 Jakob Neilson的重點是精心設計可以防止用戶犯錯誤。 在大多數情況下，使用禁用的按鈕并不小心或無用。

更多閱讀 (More reading)

https://axesslab.com/disabled-buttons-suck/

https://axesslab.com/disabled-buttons-suck/

https://uxdesign.cc/why-you-shouldnt-include-disabled-interaction-elements-in-your-design-system-76a2d4307faf

https://uxdesign.cc/why-you-shouldnt-include-disabled-interaction-elements-in-your-design-system-76a2d4307faf