Hot answers tagged buttons
171
Besides the arguments others have listed (Aircraft requirements, power saving) we should not forget about security.
Before the tablet and smartphone era you had a great control over your computer in an emergency: if you pulled the UTP cable, you could guarantee that the computer is isolated from the network. If you pulled the power cord, you could guarantee ...
127
Security
A hardware radio switch has security benefits to it in that when it is off, you know for a fact that nothing is connected to your laptop wirelessly. The radio switch usually turns off all wireless communication, including Bluetooth and 3G.
I have heard that this is a requirement in certain military environments, but I have not seen any evidence ...
97
Here's my 2 cents (just my own assumption).
I'm guessing they viewed the button on the right hand side as the primary action button as it's closer to the users thumb, with the button on the left for secondary/less-used action, as it's slightly further away from the thumb (more of a physical exertion on the user).
They then may have wanted to label them ...
52
Airplanes
These switches allow you to disable wireless transmitters without first turning them on in the middle of a flight, when their use may be prohibited.
There seems to be some consternation regarding this answer. I have reworded it to address some of the concerns that have been voiced. In addition...
I'm not saying that any rules regarding the ...
51
I'm sure we can find a better button label than "Ok". What about telling the user what he or she's accomplishing?
Examples "Save", "Add", etc.
As per Samuel post, keeping the button de-activated until an option is selected would be a good practice too, unless adding a specific criteria is not mandatory.
43
Circular buttons can work well when an icon is all that's needed inside. A good example of this is Path. Their single icon buttons are circular and work well. However, to fit a word in the button, like 'Register', the button would have to be as tall as it is wide, taking up a lot of valuable space and creating a huge button. If using completely circular ...
40
If it's clear, say it in the least number of words possible. If there is no confusion, then there is no problem.
"Import image" - clear.
"Create app" - clear.
"Add description" - clear.
For further reading, I suggest the Android Writing Style.
32
Definately keep the order of the buttons the same on all parts. There is nothing more disturbing than clicking a delete button where on the previous page there was a edit button.
As for the order, I would suggest ordering them by what you want users to click most often. Use UI design to guide the application user.
32
The following screenshot is taken from the speech by Jon Wiley at UXweek 2011 (Original video). He explains the design decisions made by google in the past months.
Look towards the end (after minute 27) of the video to see it by yourself:
red is for "create something"
green is for "share something"
blue is for "do something" (e.g. submit a form)
Keep ...
29
Make disabled button flat and less contrast, compare:
By removing the gradient you will tell the user it couldn't be pressed and by making text less contrast you're telling the user it's off - an analogy with a neon, it's light up so it's on, otherwise it's off like the "no" part on the image below:
26
A button performs an action. E.g. Save, delete, register, submit.
A link connects you to resource. E.g. a URL or a file.
Think of buttons as verbs and links as nouns.
That said, there are also other distinctions. Often a link is used where you would have a button, but where you want to de-emphasise the action. Often for secondary options or high risk ...
25
This kind of UI elements exists and is used in many applications even if differently.
Facebook events
Google calendar
If well designed they are even more affordant than the usual radio buttons.
The thing is, because of this affordance they seem "auto selected" so there is no need of a validation like in your example. Therefore I would say radio ...
23
You are confusing mobile phones with iOS.
The icons should be neither round nor square for the best UX. They should be allowed to have a unique outline to improve scanability and hence make them easier to use.
This is exactly what Android has done, and it is a significant UX improvement over iOS.
Edit: It appears that many people are unable to focus on ...
21
'Split Buttons' or 'Split Button Dropdowns'
From MSDN:
Split buttons
Use a split button to consolidate a set of variations of a command, especially when one of the commands is used most of the time.
Using a split button saves a significant amount of screen space, while also providing powerful choices.
Unlike a menu button, clicking the left portion of ...
20
The answer is largely historical. In early HTML, there were no native circles or even squares with rounded corners, and the only way that you could have them was to use images. And at a time when speed mattered a lot (think 2000+ times slower than a connection today), most websites avoided images as much as possible.
So, if you wanted to make a button, ...
20
A single button should perform an action, and not act as a radio button. If you want buttons to act as radio buttons, you should use a segmented button.
There is established precedent for this in both mobile and web UI, so people are likely to already understand what they do. Additionally the design of segmented buttons shows that the buttons are ...
18
In Emergency Situations
Sometimes you need to turn off your internet connection as fast as possible. For example, you download a software, then double click on it, and then you realize that it is not the genuine .exe file but it is a malicious file. In this situation, you may want to turn of your connection as fast as possible, and it may take a very long ...
17
Grey buttons can still be used, provided you can give enough indication that the button is indeed not disabled. You could have a darker font color, like this:
Even then, this approach is not recommended. Seconding Pasha's thoughts, such an attempt to make grey buttons seem "non-disabled" might still not be convincing to all users. Unless you're bent on ...
15
You should have the buttons at the bottom right because:
The standard for modals is to have the buttons at the bottom, so it is likely where people will look for action buttons
It is a more natural visual flow reading in a Z pattern, and one that has become entrenched.
A button on the right is typical for a submit button as it has the feeling of moving ...
14
It is best to order them logically and group similar actions together. In your case with only three, the order that you have them now is good.
However one thing that you really should do it to move the delete button away so that it is not with other action buttons. I would place it aligned to the right to reduce the likelihood that it is accidentally ...
14
A couple reasons that I use my Wi-Fi switch that other people haven't mentioned:
When I'm in a LAN party, I want to force my computer to use the Ethernet cable networking me with other players to get the most out of my network and prevent some random app from interrupting play.
I don't trust public networks, so when I'm not in a Wi-Fi zone I trust, I turn ...
13
Words are really unnecessary, since arrows are used on a lot of standard image galleries online. You could have the arrows shown all the time or when the user moves the mouse or touches the touch screen. Fading the arrows out after a time-out gives the user enough cues to know there are more images to see.
My daughter Hanna, age 7, using a hammer for the ...
13
Do you have to put 'OK' and 'Cancel' on the buttons?
One of the problems with OK/Cancel in dialogs (and similarly, but worse, Yes/No) is that the user has to refer back to the original question to understand what the buttons will actually do. This is probably more of an issue than whether the OK or Cancel is on the left or the right. For example:
Are ...
13
I would say it depends on the action of the button. When you are dealing with Calls to Action (CTA's) your primary emphasis is on communicating an action to an user as highlighted by this article about writing effective CTA's which has this to say :
The very first piece of advice in the classic book Writing Tools
encourages writers to start sentences ...
13
I would go with Dropbox's approach.
'Choose files' is clear enough to tell you the action it performs and concise enough to fit within two words. 'Select files' also works.
When labeling buttons, try to explain what the button does. Are choosing files and uploading two steps or a single step? Since in dropbox's case, you choose the files and then press ...
12
I believe it is in part because text in all-caps have a clear, regular rectangular shape to them regardless of the word or language, making them easier to position uniformly on any shape. That is, there are no descenders or ascenders to accommodate as there would be with lower-cased words (the position of which might vary depending on the word or language). ...
12
For a definitive answer, I guess you're going to have to track down the original developers of the product.
I would like to make a guess as why this layout was chosen though. I think it is deliberate. I think of the order of the A and B buttons as actions, A being the primary action and the secondary. When holding the controller, you'd want the primary ...
11
Would it be an option to rotate the complete word at small widths?
download bmml source – Wireframes created with Balsamiq Mockups
11
The reason may be the better space usage within the icon badge. Having square, or rounded square, you can place a bigger icon inside, with less waste of space, while keeping the blank space around it:
The dashed line represents the placeholder for an icon and app name within the interface. The badge itself within this space can be bigger if it's ...
11
Do not rely on hover state for affordance. Don't make it a puzzle for me to figure out what I can click on or not, just show me. Also, tablets and other touch centric devices don't have a hover state at all.
Grey buttons next to colored buttons of the same shape tell me that they're disabled and not available at this point. Greying out items that are ...
Only top voted, non community-wiki answers of a minimum length are eligible
