1

I'm having a tricky time deciding between several interaction patterns for disabled settings toggles in a native app.

Background:

This is in a mobile app's settings page. There is a top level settings page with a list of settings groups, each of which has a child page with a list of toggles. There's a persistent contextual tooltip at the top right of each page.

The challenge is:

A lot of these app-level settings toggles can be overridden by OS-level settings (camera permissions, for example). So they need to appear inactive when those OS-level settings are turned off.

I want to communicate to the user that the setting toggle is disabled, why it's disabled, and how the user can enable it before they try to turn the toggle on (i.e. prevent the user error before it happens).

There are a couple possible treatments I've been toying around with and I'm looking for a sanity check (apologies for the whiteboard sketches).

Option 1: Setting appears enabled on the parent page, appears disabled on the child page, and we leave it up to the user to troubleshoot why.

Option 1

Option 2: Toggle appears disabled on the parent page and leave it to the user to troubleshoot.

Option 2

Option 3: Toggle Appears enabled on the parent page and tapping it triggers a modal popup (This is what iOS does for their settings).

Option 3

Option 4: Change the disabled style to include copy explaining why it's disabled and how to fix it.

Option 4

I prefer 4.

What do you think?

Improve this question
1
  • I dont like number 1 and 3. I'd prefer number 2. You can tell the user why he cant do it when he clicks on it. I dont want to click on something so it tells me I'm wrong. I want to go to settings and see all the possebilities I have. Number 4 might create too much visual noise
    – BlueWizard
    Commented Jun 12, 2015 at 19:37

2 Answers 2

Reset to default
1

I prefer 3. The reason is that if you have a couple of greyed out settings, displaying explantory text can become confusing or dazzling to inexperienced users.

It is logical that they will try to tap the greyed out setting, in order to try turning it on. The nessecairy information will apear as needed, without overwhelming them.

If you are concerned that users will not try tapping greyed out functions, you could include a colorful help symbol (colored circle with white question mark) to invite them to click and see what is going on.

Improve this answer
2
  • I am waffling between 3 and 4, to be honest. Good point re: multiple greyed out options. I'm not sure adding a tooltip icon in the disabled setting is a very good option, though, both because of real-estate, and because multiple error icons would compete for attention if multiple features were disabled. Plus, there's a global tooltip for each page.
    – Justin Scherer
    Commented Jun 12, 2015 at 16:54
  • yes, you are right about the extra tooltip icon competing for attention
    – CurleyBraces
    Commented Jun 12, 2015 at 17:02
0

I also prefer 3, and I would make sure to put the notification after the enabled parent page before the disabled child page. That way users know to click on it, but are prevented from trying to click on the disabled one.

Improve this answer

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.