3

I'm currently working on settings for a tool that sits on top of client websites (something similar to Intercom chat). The settings are presented as a list of "cards" similar to the example below.

Active

When making an update, we added an inline save confirmation step since these changes are "live" and publicly facing.

Edit

Some features/settings can be turned off altogether. When a setting is turned off, the background shifts to grey along with the toggle and a label change.

Now is where it gets tricky.

Not Active

Currently, the radio buttons in the setting customizations do not change state when the setting is turned off, I'm worried this introduces confusion as to whether or not the setting is active. I was thinking about making it change to a disabled state.

However, we want to allow the user a chance to update/make changes prior to making the feature/setting "live" again.

Any suggestions for a more optimal solution that solves for both concerns (while also considering best practices around accessibility contrast ratios and disabled buttons)?

  • > we want to allow the user a chance to update/make changes prior to making the feature/setting "live" again: do you still have a 'Save' confirmation for non-live changes? How do you handle the case where the user makes changes in the in-active state but never makes the changes live? Are those changes lost or persisted somehow? – SNag Sep 11 at 14:37
  • @SNag Yes. Currently, the customizations can be edited and saved independently of the Active/Non-Active status. – Franklin-KC Sep 11 at 16:19
2

Toggles communicate, “This change takes place immediately.” It might be struggling against your Save button.

What you could do is use another pattern for the status toggle - could be another radio button set with Active and Inactive labels — and put that with the other controls, maybe right above the Cancel and Save buttons. That way, everything that can be changed would be changed in the Edit mode.

| improve this answer | |
2

Here is the problem: The activation toggle isn't communicated as a setting but as a switch to toggle the panel on or off.

Make it part of the form by placing it as the first setting above the others. Make it more prominent if needed with color, increased size, heavier font-weight, etc. Whatever suits the design. Also, the label should be clear. Something along the line with:

Activate "Setting Y"
By activating "setting y" all customizations below will be activated

Don't grey-out the panel and form controls, they are not disabled, the values just aren't live. To communicate that the values of the form controls are not live you can extend each label with "(not activated)", maybe in red or orange, with or without icon, again whatever suits the design.

| improve this answer | |
  • Thank you for the input. Are you suggesting that it stay as a toggle vs. another radio style button group (like suggested below)? If the former, does the label of "Activate Setting" make it more confusing to the user as to what the current state is? Currently, I have a label that is either "Active" or "Not Active" next to the toggle. – Franklin-KC Sep 9 at 20:24
  • Yes, @StacyH has a good point about the toggle and save button. Instead you can use a checkbox as toggle. Also you can add an extra button "Save and make active" and omit it when the setting is already active. – jazZRo Sep 11 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.