Friday, December 8, 2017

Mixing flip-flop/toggles and binary state buttons


I'm facing a rather curious predicament. I'm working on a page with two columns. The one column has a list of actions that are essentially just things that run when clicked (so they've been grouped together as they're just one click wonders). That column I'm not worried about.



The other column contains a list of features that can be toggled/set. My question is this: Some of the toggle features have a value attached to them but one isn't necessarily better than the other, so they're not just on or off, but rather, for example "cat" or "dog" (yes it is still binary - but it shouldn't have the negative affect as one being better than the other but instead option one or two). For this reason I have made those buttons/options two state (like the first two rows). So the user can select either option 1 or option 2 by clicking on either button in that row (turning the button to active/indented).


The second buttons (in the last two rows) are toggles as they turn a feature on or off. When on the toggle/flip-flop is coloured and furthermore the button has no value other than turning a feature on or off.


enter image description here


Now is it wise to mix these two types of buttons so closely to each other or does it come across as a bit convoluted and messy when doing so? Additionally, would it perhaps be better to use the first approach for all - so make all of the options a two-button kind of thing and just put on/off in the labels? I feel it isn't wise to make the top two buttons flip-flops as one option inherently seems "better" than the other:


enter image description here


Clearly selecting cat in the picture above has a more positive connotation than dog. However, I did think about using something more neutral like: enter image description here


What are your suggestions? Should I keep the buttons all the same/uniform? Use a combination? Change the flip-flop/toggle button to be more neutral? And Finally is there any better alternative I may have missed?



Answer



I believe this solution gives equal prominence to each option and is seen on many iOS interfaces:


Toggle Button



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...