Tag Info

Hot answers tagged

132

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


127

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


54

History The Caps lock key origins are in the Shift lock key found on old mechanical typewriters. An early innovation with these typewriters was the introduction of a second character per type bar - the metal stamper hitting against the ink ribbon. The shift key practically shifted the whole type apparatus so it is the second set (capital set for letter ...


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


20

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 ]


17

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


13

Given your list Ctrl + b, Ctrl + u, Ctrl + i, to be consistent, if you want to convert the selected text to Upper / Lower case you should be using the Ctrl key (you also of course have Ctrl + c and Ctrl + x). I've seen this done using the Ctrl key in text editors, e.g. Notepad++ (as there is no underline) it is Ctrl + u for lowercase and Ctrl + shift + u ...


12

This has been discussed in much depth in many other related questions (see right pane on this page). So I'll make it brief. Toggle switches are anti-usability Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for ...


11

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


10

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


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

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.


7

You can do this, but be careful about appearance in a vacuum. It should be pretty safe for radio buttons as there will be several (or at least 2) in a group so the users can see that one choice looks more "selected" than the others. The trouble will come when there is only a single checkbox on a page or if there are several that are all selected. If they ...



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