1

I’m currently working on a marketing preferences screen where a user can control what marketing comms they receive and the channels they receive them on. A business decision was made to keep the channels at a global level, rather than allow the user granular control at the category level.

The preferred approach is to auto save preference changes, rather than a global save button as we want it to feel more like a native experience. We don’t have a dedicated native app, just a native wrapper for the web experience so our solution needs to work for both, although 75% of our users use the native app.

The challenge with these constraints is that it makes preventing the preferences from falling into an invalid state a bit tricky (see table).

Global preference Category Channel Valid?
Off Any selection null No
Off null Any selection No
Off Any selection Any selection No
Off null null Yes
On Any selection Any selection Yes
On null Any selection No
On Any selection null No

Currently, the options we’ve explored are:

  1. Don’t force valid preference state - allow preferences to fall into invalid states and provide feedback to user (see visual)
  2. Once the last category/channel is opted out of, disable the opposing section where options are still enabled
  3. Once the last category/channel is opted out of, automatically toggle any enabled options off in the other opposing section
  4. Once the last category/channel is opted out of, show dialog saying they’re about to opt out of all comms
  5. Change inputs from switches to checkboxes (does auto save behaviour still work here?)
  6. Change whole approach to use a global save button (and checkboxes) rather than auto save - allows for clear inline validation

None of the solutions feel quite right, so my question is, is there a nice way to prevent the preferences from falling into these invalid states in the first place, aside from going with option 6?

Failing that, is there a better way to indicate the preferences are invalid other than the options outlined above?

wireframe of option 1

0

1 Answer 1

0

Does autosave work with check boxes?

Yes, it's the same thing and flow, just different representation. Though check boxes are better for "To do" list contextes, since a switch would feel out of place.

Failing that, is there a better way to indicate the preferences are invalid other than the options outlined above?

You can put the switches in the "what" section in a disabled state if none of the "How's" are enabled. Your backend Devs should be checking for the "how" first to make sure a user can receive any of the "what"s

Another way would be to put the "how" items as check boxes under each "what" section, but something feels off, and given that this is the UX stack exchange and not software engineering section, I can safely lean on that emotion :D

But personally, I think it's best to stick to disabling the entire "what" section when none of the "how" items are enabled. Also please change the colour of your warning. I could barely tell what it was doing at the top. Warnings, errors, should always be emphasised with color. If you are going for a grey scale pallette, use a dark background, light text.

4
  • I see that you added a better warning, but I don't know why it's at the bottom of the screen or why the previous warning is above the section's ("what do you want to receive" section) title Jun 9, 2023 at 10:32
  • 1
    Yeah so your suggestion of disabling the opposing section was option 2 on our list. We're not super keen on disabling inputs, but I think as long as it is clearly labelled as to why they are disabled it might be ok. As to the colour of the warning, these are just wireframes so not the final UI. The alert at the bottom of the screen is a snackbar which appears when toggling switches and is only temporary. This is a new pattern for our product, so we want to make it super clear that something has happened when interacting with the switch.
    – dmcleod
    Jun 11, 2023 at 23:00
  • @dmcleod snackbar? I always knew it as an alert box. But anyways, disabling and greying out the who section is the best visual way I can think of, then a high contrast alert box above the greyed out section. Jun 12, 2023 at 3:01
  • yeah similar components, but used in different contexts
    – dmcleod
    Jun 13, 2023 at 1:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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