Each hiding and disabling options could be totally complicated to customers. And for each, we’d like very, superb causes. Let’s take a more in-depth take a look at what we have to take into account in terms of hiding and disabling — and attainable options that assist improve the UX.
This text is a part of our ongoing collection on design patterns. It’s additionally an upcoming a part of the 10h-video library on Sensible Interface Design Patterns 🍣 and the upcoming dwell UX coaching as effectively. Use code BIRDIE to save lots of 15% off.
Present What’s Wanted, Declutter The Relaxation
You’ve in all probability been there earlier than: Must you cover or disable a function? Once we cover a function, we threat hurting discoverability. Once we disable it with none clarification, we threat that customers get annoyed. So, what’s one of the simplest ways to design for these cases when some choices is likely to be irrelevant or unavailable to customers?
As a rule of thumb, disable if you would like the person to know a function exists however is unavailable. Disguise if the worth proven is at the moment irrelevant and may’t be used. However by no means cover buttons or key filters by default as customers count on them to persist.
In contrast to hidden options, disabled options might help customers study the UI, e.g., to perceive the advantages of an improve. So, as a substitute of eradicating unavailable choices or buttons, take into account disabling them and permitting the person to “Disguise all unavailable choices.” You should definitely clarify why a function is disabled and likewise the way to re-enable it.
One other factor to be careful for: Once we permit customers to change between exhibiting and hiding a function, we additionally want to make sure the change doesn’t trigger any format shifts.
For each hiding and disabling, we’d like very thorough concerns of accessible options, e.g., enabled buttons, read-only state, higher empty states, cover/reveal accordions, error messages, and customization. We have to present what’s wanted and de-clutter the remainder.
Every time attainable, I attempt to maintain buttons and options of their default state — enabled, accessible, and legible. When a person interacts with that function, we are able to clarify why they will’t use it, the way to allow it, and the way to maintain it enabled. Potential exceptions are affirmation codes and loading/processing states.
Hiding vs. Disabling Roadmap
As Sam Salomon suggests, if you happen to’re uncertain whether or not hiding or disabling is the most suitable choice to your use case, ask your self the next query: “Will a given person ever have the ability to work together with this aspect?” Relying in your reply, observe the steps beneath.
✅ Sure
→ Disable it (as disabled buttons or read-only state).
↳ For non permanent restrictions or filter incompatibility.
↳ When a worth or standing is related however not editable.
↳ When an motion isn’t out there but (e.g., “Export in progress…”).
🚫 No
→ Disguise it (take away from a toolbar, collapse in accordion).
↳ E.g., resulting from permissions, entry controls, security, and safety.
↳ For inaccessible options: e.g., admin buttons, overrides.
↳ Disguise such controls by default and reveal them as soon as a situation is met.
Key Takeaways
- Hiding vital options hurts their discoverability.
- Disabling options is irritating with out an evidence.
- However some choices is likely to be irrelevant/unavailable to customers.
- Customers would possibly count on a function to exist however received’t discover it.
- We have to present what’s wanted and de-clutter the remainder.
- Keep away from disruptive format shifts as you present and conceal options.
- Don’t take away unavailable choices or buttons mechanically.
- As a substitute, disable them and permit it to “Disguise all unavailable choices.”
- Permit customers to cover sections with quite a lot of disabled performance.
- Clarify why a function is disabled and the way to re-enable it.
Hidden vs. Disabled In Design Techniques
The design methods beneath present helpful real-world examples of how merchandise design their hidden and disabled states.
Helpful Sources
Meet Sensible Interface Design Patterns
In case you are concerned with comparable insights round UX, check out Sensible Interface Design Patterns, our 10h-video course with 100s of sensible examples from real-life initiatives — with a dwell UX coaching later this 12 months. Every part from mega-dropdowns to advanced enterprise tables — with 5 new segments added yearly. Leap to a free preview.
100 design patterns & real-life
examples.
10h-video course + dwell UX coaching. Free preview.
(yk)