Tag Info

Hot answers tagged

101

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 ...


59

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 ...


16

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 ...


12

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 ...


12

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

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

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

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 ...


6

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 ...


6

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 ...


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

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

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)


6

Shamelessly taken from Wikipedia: English words were replaced by the universal numeral symbols 1 and 0 to bypass any possible language barriers I - IEC 5007, the power on (line) symbol, appearing on a button or one end of a toggle switch indicates that the control places the equipment into a fully powered state. It comes from the binary system (1 or | ...


6

It's not a good idea. Many people will find this useful, but few will be annoyed. I guess you're thinking that pressing floor "2" once will light up the button, pressing again will cancel it and turn off the backlit. Here's a problem: Elevators are used by everyone, old people, blind people, kids, conveying the information that the button for a particular ...


5

One option that might work is to make the button colored while the clock is running and neutral when it's not. Instead displaying > and ||, you could make it look like a physical button with an embedded LED that lights up when the clock is running. Bonus points if you can make the button look like it's pressed in when the stopwatch is "on." I was ...


5

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 ...


5

The easiest and clearest way that you will handle this is with a toggle switch, and the standard for toggle switches is to show the current state. The example that you gave isn't using a toggle switch, but rather using a sort of 'button with poor affordance'. It's not clear wether it is an action or a state, and so is just poor UX. I would suggest you ...



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