ui style Trouble with Switches

[drjdpowell]

I’ve been trying to come up with my own consistent set of custom controls that has a more modern “flat” or “near-flat” style.  Largely this was inspired by reading Google Material Design, and I’ve just added the results as a package in the CR: Flatline Controls.  The latest thing I’ve been toying with are slider switches (here the Material Design guide on switches).  But I’m having a hard time coming up with something that is flat and non-skeumorphic, but also clearly a switch.  Attached is a VI (2011) with multiple switch types.  The most 3D, old-school, looks like a real-world switch (on the left) seems best in terms of being obviously a switch.  My most Google-like switch, on the right, is flat and simple, but not immediately obvious.

My question is: what of the multiple LabVIEW switches do people actually use? 

Trouble with Switches.vi

 

[hooovahh]

I've had issues with switch controls like these in the past with users who aren't exactly sure what the states of the switch are the first time they use it.  I don't want to say it is unintuitive, it is just one of those things you need to some times learn the first time.  Don't get me wrong I like the look of the flat controls you've shared and I can see using them, but I can already hear some of my users when they see the switch the first time, and see the text "OFF" they will ask, "Does clicking this turn it off or is it off right now?"  As soon as you've seen the two states of the button it is quite clear which is ON and which is OFF  As a result I generally try to use system checkboxes, radio buttons (with two states with text for each), or a drop down, like a system enum.

[Tim_S]

I've got to parrot hooovahh's comment, though I think yours look like smartphone/tablet controls that all behave similarly.

I've used the radio buttons with two round LEDs with good success for true/false selection; one LED was darker blue (false) and the other was lighter yellow (true). Back a lifetime ago I worked with a system that had that setup for colorblindness and quick response (use was due to military study leading to a specification). The NI buttons look the same in true/false state when you view them in grayscale; yours appear different, so would be usable by those colorblind.

[ShaunR]

+1 with Hooovahh. Checkboxes and LEDs.

FWIW. I no longer use LabVIEW front panels at at all for commercial user interfaces..

[drjdpowell]

I think is makes a difference if one has one, two, or many switches in view.  Many switches both true and false lets one tell the two states apart, especially with radio buttons where only one is true.  With a two-state radio button there can still be User confusion.  And then there is having a lone switch.  The more elaborate design I made is for a lone switch, while the simpler one is for groups.  

I also have relied on checkboxes in place of true switches.  Though I read somewhere that a checkbox implies an option that don’t immediately take effect (such a as configuration or a form that has to be applied/submitted), while a switch suggests immediate control of something.

[hooovahh]

24 minutes ago, drjdpowell said:

Though I read somewhere that a checkbox implies an option that don’t immediately take effect (such a as configuration or a form that has to be applied/submitted), while a switch suggests immediate control of something.

I did not know that this was a semi-standard, but I think the majority of the time I have used checkboxes it was in this type of UI.

[MarkCG]

3 hours ago, ShaunR said:

+1 with Hooovahh. Checkboxes and LEDs.

FWIW. I no longer use LabVIEW front panels at at all for commercial user interfaces..

What do you use?  

[ShaunR]

1 hour ago, MarkCG said:

What do you use?  

Browsers.

[smithd]

5 hours ago, drjdpowell said:

I think is makes a difference if one has one, two, or many switches in view.  Many switches both true and false lets one tell the two states apart, especially with radio buttons where only one is true.  With a two-state radio button there can still be User confusion.  And then there is having a lone switch.  The more elaborate design I made is for a lone switch, while the simpler one is for groups.  

I also have relied on checkboxes in place of true switches.  Though I read somewhere that a checkbox implies an option that don’t immediately take effect (such a as configuration or a form that has to be applied/submitted), while a switch suggests immediate control of something.

It may be challenging to make, but I think these web elements are nice:

http://getbootstrap.com/components/#btn-groups

You can label each item so you get the benefits of a radio group (in fact you could argue this looks more like a radio button than most radio buttons). Plus its actually a button, so you get the feeling that it takes immediate effect.

Also, note the "Notify me of replies" when you post here on lava after the upgrade. Having the check or the x makes it pretty easy to understand the meaning, but thats because its also labeled well..."Notify me of replies" is an obviously true or false statement.

Quote

Don't get me wrong I like the look of the flat controls you've shared and I can see using them, but I can already hear some of my users when they see the switch the first time, and see the text "OFF" they will ask, "Does clicking this turn it off or is it off right now?"

I think this happens more often if the "ON" or "OFF" is on top of or otherwise seems to be part of the 'moving part' of the switch. Because then it kind of feels like you're pressing a button labeled "ON" rather than indicating the state. If you separate the label from the moving part (like the dr's switches on the right) I think it works.

Edited June 15, 2016 by smithd

[JKSH]

12 hours ago, hooovahh said:

I can already hear some of my users when they see the switch the first time, and see the text "OFF" they will ask, "Does clicking this turn it off or is it off right now?"

To take another page from Google's Material Design, their switches convey state by using colours without "ON"/"OFF" labels at all:

(From https://material.google.com/components/selection-controls.html#selection-controls-switch)

 

 

1 hour ago, smithd said:

Also, note the "Notify me of replies" when you post here on lava after the upgrade. Having the check or the x makes it pretty easy to understand the meaning, but thats because its also labeled well..."Notify me of replies" is an obviously true or false statement.

I actually experienced the issue that @hooovahh described. It showed "Notify me of replies", with an "X" next to it. I wondered to myself, "Does clicking the 'X' get rid of notifications?" because, from prior experience, clicking 'X' closes windows. Thus, I had to play with it to discover its meaning.

[drjdpowell]

7 hours ago, smithd said:

It may be challenging to make, but I think these web elements are nice:

http://getbootstrap.com/components/#btn-groups

You can label each item so you get the benefits of a radio group (in fact you could argue this looks more like a radio button than most radio buttons). Plus its actually a button, so you get the feeling that it takes immediate effect.

I include a radio group with buttons in the package (calling it "Selection Buttons”).  It also works well if you use icon decals instead of text.  Can’t do the nice borders like in that package, unfortunately. 

7 hours ago, smithd said:

"Notify me of replies"

That’s an example of something that (to me) should be a checkbox, since it is part of a form that must be submitted.  

5 hours ago, JKSH said:

because, from prior experience, clicking 'X' closes windows

Part of the reason I chose not to add the ‘X' is that it makes it more like a checkbox: check for true and nothing for false.  

5 hours ago, JKSH said:

To take another page from Google's Material Design, their switches convey state by using colours without "ON"/"OFF" labels at all:

But that requires the User to learn what the funny circles are, and what “white circle to the left” means.

[drjdpowell]

Here’s a similar set of checkboxes.  All very clear, though my latest ones are resizable, which is an advantage if the system one is too small.  Google icon one is nice but based on PNGs and not resizable.

Trouble with Switches (with checkboxes).vi

 

 

 

Edited June 15, 2016 by drjdpowell

[ShaunR]

How long does it take you to create a scheme for all controls/indicators? Have you automated any of it?

[drjdpowell]

15 minutes ago, ShaunR said:

Have you automated any of it?

Nope.  Painfully tedious manual steps.   Trial and error learning all the weird LabVIEW minutiae.  I aint doing this twice.

[hooovahh]

2 hours ago, drjdpowell said:

Nope.  Painfully tedious manual steps.   Trial and error learning all the weird LabVIEW minutiae.  I aint doing this twice.

Well the community thanks you for your effort.  In the past I could automate replacing button decals with ones from other PNG files.  So I was at one point able to just script out a few hundred system buttons, with glyphs from an open library.  This worked out well enough, but I still ended up having to do some manual manipulation of every control.

[drjdpowell]

6 minutes ago, hooovahh said:

In the past I could automate replacing button decals with ones from other PNG files.

Do you still have that code?  

[hooovahh]

Sure thing, I had to clean it up a bit but here it is.  Attached is some code that I originally found in this thread showing how to read the contents of a control file, and replace a section with a new PNG.  I think one caveat is the PNG that is being replaced needs to be larger (in file size) than the new PNG but in my tests I haven't seen an issue.

https://decibel.ni.com/content/thread/4901

Extract the attached code, and run the Replace Button Decals\Create Multiple Controls From PNGs.vi It should set the control values on first run to paths relative to the running VI to use the example images and controls included.  It will make a control for each PNG in the directory chosen.  This will replace the decal, the VI Icon, change the label, the button text, and VI title so that it can be packaged up with VIPM nicely. I also included a VI to extract images from controls.

Create Multiple Controls From PNGs.zip

[drjdpowell]

I like it, thanks.

[JKSH]

On 6/15/2016 at 4:52 PM, drjdpowell said:

But that requires the User to learn what the funny circles are, and what “white circle to the left” means.

True. All icons/glyphs/symbols need to be learnt from somewhere first.

The key is creating controls that are consistent with what the target audience is already likely to know, and are unambiguous. (e.g. you can safely assume that smartphone-savvy young'ns already know what "white circle on the left" means :D)

Back to answering your original question...

On 6/14/2016 at 8:59 PM, drjdpowell said:

My question is: what of the multiple LabVIEW switches do people actually use? 

For user-facing GUIs, I use the Silver push buttons (the middle column of the gallery in your original post) The leftmost columns are too ugly for my liking, unless the customer specifically asks for the old-school look.

 

On 6/14/2016 at 8:59 PM, drjdpowell said:

I’m having a hard time coming up with something that is flat and non-skeumorphic, but also clearly a switch.

http://ux.stackexchange.com/ is a good place to find enthusiasts + experts who are happy to share their ideas and discuss yours

 

 

[ensegre]

On 15/06/2016 at 3:32 PM, drjdpowell said:

Do you still have that code?  

Is this one relevant (not tried, discovered now)

[hooovahh]

Oh yeah I forgot about that toolkit.  I tried it when it first came out, and realized the core of it was the code I already posted and figured I wouldn't need it.  Sure the toolkit has other neat features that my code posted above, doesn't do, but for the most part I didn't need them.  I remember some kind of quick color selection option where you could have a single image, and then swap selected colors for the other states of the button.  Still not having the source code available makes it quite limiting when you want to automate, or pull pieces apart for your own needs.  I think this used to be be a paid product but now appears free, I also don't remember the internet requirement when I used this before but maybe it was.

[drjdpowell]

Experimenting some more.   I don’t really like either of my switch designs, as they seem too flat to identify as controllable objects.   So I’ve worked on a new one (second from the left, below).  This seems “just enough” non-flatness to aid in identifying it as a switch.