Logo of UI Challenges
Sign in

Gallery

See what others have created

Enabling & Disabling
C

clearedbyproduct

@clearedbyproduct

EasySaaS

Enabling & Disabling

Design the UI for turning one feature on and off inside an app. Pick a specific setting, permission, or capability and show where it lives in the interface, how it is labeled, and how the user changes it.

Show both states clearly: enabled and disabled. The control should read as tied to one thing, not a generic switch floating in the layout. Include the before/after state change so the user can tell what changed without guessing.

If the feature affects other content on the page, show that impact. Disabled content should look unavailable, not broken. Enabled content should feel active and ready. Any feedback after the toggle should be immediate and specific.

What to deliver

  • Design the enabled and disabled states for a single setting or feature.
  • Show the control used to switch states, with its default, hover, focus, and pressed states.
  • Add the confirmation or feedback state after the change is made.
  • Include the disabled feature’s empty or unavailable state, if it affects the rest of the screen.

When designing enable/disable flows, imagine your user is in a hurry. The clearer and quicker your design enables them to switch states, the better their overall experience!