7

Currently I'm working on some software settings screen, and there are a number of features, that could be turned on and off manually, but also kept in kind of 'wait mode'. If a feature is in 'wait mode', the system turns it on and off automatically according to its own needs.

I only managed to come up with two options.

N1. Triple state toggle with icons and maybe tooltip on hover. The weak point is metaphor for 'auto' icon, it seems quite hard to select a convenient one.

enter image description here

N2. Checkbox for automatical turn on/off and standard toggle after it.

enter image description here

As both options are quite weak, I'd appreciate ideas of organizing this information better.

  • 2
    I see no issue with your first one. The eye icon is not what is important, it is the text alongside it that is useful. You could probably use any old icon there and it wouldn't matter - people will look at the text to see what it means and will just treat the icon as an elaborate bullet-point. – JonW Jan 29 '14 at 12:18
  • I like the first one. The only issue I see is if it is set to be controlled automatically but the user wants to override it arbitrarily, e.g. the system switches it on but I want to override it on that one occasion and switch it off. I couldn't press the 'Off' button because I still want to leave it on Auto. I don't know if that's a likely scenario for this product though. – Matt Obee Jan 29 '14 at 12:27
  • The first version looks similar to an iOS segment control and tabs, which are used to switch between different views rather than to apply settings. – Dave Haigh Jan 29 '14 at 15:57
  • 1
    You used the same icons for the on and off, try 1 and 0 instead of the combined (1) icon which is meant for dual purpose (on/off) power buttons. You could try scales to imply judgment based for the auto mode icon. – Danny Varod Jan 29 '14 at 16:01
5

You can have a tri-state button.

Simple and easy to understand.

enter image description here

  • 1
    Placing AUTO between ON and OFF is a good idea, thanks! – Elena Sergievska Jan 30 '14 at 10:33
1

Another possibility is to have a three state toggle button were a click on the box itself just cycle between each toggle.

State - Off

"push"

State - AUTO

"push"

State - ON

In this example you can see "off" is selected (remember, the whole button accept cycle-clicks)

enter image description here

0

Feature 1 indicates three different states in a clear way. It's like flash settings on a digital camera: On, Off, Auto. The similarity of the buttons helps to convey the idea of the states. Also selected state is clear system state indicator. One-click switching is good, too.

Feature 2-3 require more mental load and could be misinterpreted, i.e.
Enabled and disabled: On | Off. Also switching between states is more complex.

0

I think On and Off should be on a single button which just changes its state (text, icon, color,...). That's the whole notion of toggle button. Now you can add another state to this button which says 'Auto'. I am pretty sure I have encountered it somewhere but I cannot recall where. Anyway, it makes sense to me.

I do not like the check-box design, looks like a system for engineers, not users.

I have no recommendation for the Auto icon, sorry.

0

I would use 3 radio buttons to toggle between the selections. This is a simple and recognisable method of selecting mutually exclusive options.

  • On
  • Off
  • Auto

See this other question for additional info Best choice for three-state value?

  • Yeah, I also think that radio buttons are suitable for such choises in general. But radio buttons consume vertical space and in my case i need more horizontal structure. Also, there already is a toggle (ON/OFF) in current version on UI, so i was searching fore something similar to make evolution simpler. Thank you for the link anyway. – Elena Sergievska Jan 30 '14 at 10:40

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.