Tag Info

Hot answers tagged

115

In About Face 2.0 (there is a v3 but I haven't got it) Cooper and Reimann (2003, pp. 341-2) treat this subject under the heading "Flip-flop buttons: A selection idiom to avoid". I strongly suggest to consult this book as I will only present an excerpt: Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive ...


97

Short Answer: Quite a late answer, but I'm surprised no one here pointed this out before -- it is possible for a toggle switch to show its current state and the state to which it will change simply by having text outside the button, instead of on it. Long Answer: As dotancohen points out above, The problem is that in English "on" and "off" are both ...


21

I think the major issue is having a single colour for action buttons and nothing explicitly indicating status. Colour is a very strong visual indicator and is more likely to be linked to status than a call to action. The toggle button is definitely ambiguous. You could use an Apple-style slider download bmml source – Wireframes created with ...


19

I think you've got it pretty much right in your question. If the toggle is an action - Play/Pause - then it should show the thing that will happen. So while paused it would show Play and then while playing show Pause. If the toggle is an option - Shuffle/Linear - then it should show the current state. How you indicate that to the user that one button is ...


18

I'm surprised to see no mention of the technique used in iOS (and elsewhere), a combined action/state button, where both options are visible, grouped and the active one is clearly highlighted. Terrible ascii art to demonstrate: [ ON | off ]


16

This has to do with binary numeral systeem. 1 for on, 0 for off. This way it's understandable for everyone around the world, since not everyone understands English (ON/OFF). It's also readable from 2 sides, where ON/OFF is harder to read.


15

I would say that it depends on the case, as ChrisF said, it's important to have a distinction between an action button and a state button. If your button has text, you could change the text to show that clicking it will do something (ex: "Turn shuffle play on"). However, in your case, since it's only an icon, I would go with only a shuffle icon that looks ...


15

The problem with toggle buttons has to do with modes. In user interface design, a mode is a distinct setting within a computer program or any physical machine interface, in which the same user input will produce perceived different results than it would in other settings. The best-known modal interface components are probably the Caps lock and Insert ...


13

The issue with toggle buttons like this comes down to conflating two functions: An affordance to take an action. Displaying current state. Buttons' primary purpose is to take an action, so they should look press-able to lead the user to taking the action by pressing. By also using it to display state, it leads to potential confusion. If the button shows ...


13

I'd stop just short of "don't use them." I'd suggest toggle buttons are acceptable in the case where there is a clear on and off state. This can occur, for instance, when you have a line of grayed buttons that become colored when you click them. This is the reason Play/Pause works in many cases. The play button is not so much a toggle between two states as ...


13

The wording "delete mode" is not so user-friendly, pretty technical, just by reading it without seeing your explanation, I really didn't know what it is. Do you have any other operations other than "delete" that could be applied to one or multiple pictures? If you do, you should have a "select items" button, and it will get into a mode where you select ...


10

Whatever you decide - please don't do what twitter does.


10

Answering your question, yes, it’s absolutely ok. But, with such a short labels, you could use text instead of pictures: [n/a] Yes No n/a [Yes] No n/a Yes [No] Text is easier to understand than icons, and different understanding are less likely for text. For me, green tick and red cross mean if question was answered correct or not, not the answer ...


9

Labelled buttons (toggle buttons) are often confusing or even ambiguous, as you point out. Instead, show the status and the action, like this: Online [Go offline] So we have a label clearly indicating the current status, and a button to carry out an action to change the status. Showing both the current status and the action at the same time is the ...


8

ChrisF's answer is very correct - make sure that the colors are not the only indication! Assuming you're already taking care of that: If the choice is strict between green and red - go for the red. The button is an action, not an indicator. If it were an indicator you might have wanted it green (to show it's "okay" or running), but when dealing with ...


8

The problem is that in English "on" and "off" are both verbs and adjectives. Therefore, find replacement words that are either verbs or adjectives to label the buttons with: Enable / Disable Enabled / Disabled Start / Stop Running / Stopped ‏ Very late edit: See this terrific switch that a coworker of mine designed, which succeeds in keeping the ...


8

Radio buttons. This is the exact situation that they are designed for.


8

Option A won't work. It's a slow response, and users might even think that their command wasn't received at all. Options B and C are actually quite similar. What you're trying to do is give the user an immediate response (as in B), while preserving the rules of physics (option C). In the physical world, slowing down when approaching a target has to do with ...


8

I am not too happy with the use of radio buttons as suggested by others here to answer yes/no/I don't know. It makes it hard to review your answers. For instance, try to find the answers where you said "I don't know" or "N/A" quickly. How about using exclusive buttons? That is like you do already, but I think your design could be clearer. If you give the ...


8

Radio buttons are actually the most accurate (requirements match standard behavior) control for this. Just make larger, custom radio buttons that are easier touch targets. Remember to allow the label to also act as a touch target for the radio button. Toggle buttons are not the right control, because the user does not have the power to use them as ...


8

Suggested solution: How should I visually represent multiple three-state flags? The complication is that each flag has three possible states Means there are only two states "on/off" for the component, but component itself can be disabled or enabled. So it is enough to have two state switch. Having that understanding it is possible to throw ...


7

In many cases it might be useful or possible to avoid such buttons. E.g. in the case of shuffled/regular play: just use a checkbox with a "shuffle" label next to it, and nobody will get confused... And in the case of a play/shuffle button, it's maybe not necessary to change the label on the button either. You could use a "pressed" button to indicate ...


7

Please remember that a significant proportion of your user base will be red/green colour blind, so having a button that changes colour from red to to green won't help them. It would be better to change the icon. I'd use the standard > for start, || for pause and [] (square) for stop if you need that option. This would mean that when stopped the button ...


7

To make it clearer you could add a icon to the button when it's activated. Here's a very rough draft of the idea: Update after Jens comment: I think both Denzos and Allans answers have a valid point (using checkboxes with text instead of buttons / using embossed buttons). But it's hard to say which solution would work best without knowing more about your ...


7

A toggle button usually makes the most sense when you have a number of buttons to choose between. Something like a set of radio buttons in interaction. Otherwise, one toggle button on its own isn't clear in terms of either interaction or affordance, and the other options are better choices.


6

If for some reason there is an error, it might not be seen by someone moving really quickly through the control panel. To solve that, use frames in your website, so that there is a constant parent frame and 'top bar'. That can be a place for a loss-of-communication indicator. AJAX to the server can be made to go via that parent frame. This ...


6

Over the years I've learned that toggle buttons are not for displaying states in lists. This being said, a toggle button works well when it is on its own. Like a play/pause button. A checkbox, however, serves as a great indicator of state in a list of items. It is visually clear and does not use much real estate. The label for a checkbox does not have to ...


6

Don't use bar graph if the value is boolean, use colors on a timeline.


6

It's from physics, I guess. "I" symbol means the current goes through the system (imagine the 'I' being a line, like a circuit connecting [power to the device]) "O" symbol means the current does not go through the system. (the circle is an open circuit, having no power flowing through it)



Only top voted, non community-wiki answers of a minimum length are eligible