Tag Info

Hot answers tagged

189

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


151

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


79

The important thing is not so much which direction is right, but that you make it visually clear which direction is 'on'. This can be done by lighting up an LED, by an icon on the display, changing colors, etc. It just needs to be very clear what state the machine is and that this button will toggle the state. This is how single direction switches (buttons) ...


66

It appears to be dependent on country or region, as Wikpedia states in the article Light Switch: Up or down The direction which represents "on" also varies by country. In the USA and Canada and Mexico and the rest of North America, it is usual for the "on" position of a toggle switch to be "up", whereas in many other countries such as the UK, ...


56

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


38

This is one of the first designs of a vertically-mounted electric switch: It was presumably designed this way to afford an in-built failsafe: it requires physical effort to close ("turn on") by overcoming gravity, which will otherwise open the circuit. EDIT: At least in the US, electrical codes (see National Electrical Code paragraph 404.6 - 404.7) still ...


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 ]


18

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.


16

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


16

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


15

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


15

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


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


14

Sadly I don't have research material but some real world examples which uses the top/bottom direction. I have found an interesting post and a manual about switches in cockpits of airplanes. Boeing manual F16 switches


14

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


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

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


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

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


9

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


9

If safety is a concern - make sure gravity deactivates the switch. This kind of switch is designed to never be activated by accident.


9

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.


9

The checkbox is not dead To your point, a checkbox is perfectly suited to this purpose. In your example, it's not handled with any finesse but it does get the point across. A good UI designer can help you not only "pretty up" your checkbox, but also reduce the friction of interacting with them. The toggle ain't bad either You have to change your thinking ...


8

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


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

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



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