Hot answers tagged toggle
63
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 ...
17
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 ...
17
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 ...
14
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
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 ...
13
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 ]
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
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 ...
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
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 ...
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
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 ...
7
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 ...
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 ...
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
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 ...
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 ...
4
Admittedly late to the party, but here's my 2c worth ...
You appear to have four available states:
On; user may turn it off.
Off; user may turn it on.
Locked On
Locked Off.
If you show a button on the control (even if disabled), you're implying to the user that they might be able to change the value - in many applications, disabled buttons can be ...
4
You need work out what importance to give your favourite control. Is it as important as the alarm switch? Usually favourite controls are given less importance as they are not as important as the main content. If this is the case with your application you may want to consider moving the favourite control away from the alarm and knocking it back slightly.
I ...
4
I would be inclined to use future tense. If a UI element will change an option, it's not in the past, it's in the future, and it also makes sense from a grammatical perspective.
[x] Enable giant lasers
[x] Enable warp drive
Similar to:
[x] Show galaxies
[x] Show constellations
4
How about changing the stopwatch icon to a pull down menu that displays the current interval?
|| refresh | every 30 sec v ||
|| refresh | every 10 sec ||
| every 30 sec |
| every 60 sec |
| every 120 sec |
| manually |
To show how much time is left, you might consider putting a progress bar in ...
4
I highly recommend doing some A/B testing on simple things like these. That being said, they wont make a significant difference between users unless there is some ambiguity in the interface.
Typically I'd use the double-chevron when the distance of collapse is larger (>50% of interface size), and the single when the distance is smaller (<25%).
You ...
4
I would use the radio buttons on a web based application. Users have high recognition of how these buttons work, and doesn't need to learn a custom button. Use radio buttons to select one of two or more items in a list like this:
download bmml source – Wireframes created with Balsamiq Mockups
Use a header on each question.
Use a separator line ...
4
Try relabeling the radio buttons to something shorted so you can either have the labels only mentioned at the top or even if you want to repeat the labels, they are not so real estate intense.
You can convert them into a dropdown menu. Each dataset has a menu beside it with these 3 options, and you can have the most frequently used option as the default.
Do ...
Only top voted, non community-wiki answers of a minimum length are eligible
