Hot answers tagged buttons
39
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.
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 ...
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 ...
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 ...
10
You should limit the label to some action word if possible. This also makes it easier if you want to replace the label with an icon.
Add
Create
Import
And if the context is ambiguous, add a descriptor.
Image
Contact
Description
There are cases where you might want to skip the action and directly use the descriptors. Eg: for login, many sites just ...
9
The guidelines given for the various platforms are all based on the idea that the minimum size should be 9-12mm. The variation between the guidelines is mostly due to differing pixel densities on the devices, and hence different number of pixels needed to reach the 9-12mm figure.
Note, that this isn't an ideal dimension to make the button easier to use, ...
8
Yes, size can be an issue. Touch targets need to be bigger than typical desktop targets because the finger precision is worse than the pointer+mouse precision. With this worst precision the odds to do missed taps is bigger (like not touching a button or touching the incorrect one).
Usually, touch studies use as principal study variable the error rate. The ...
7
Other than the obvious answer: "re-write your app so it supports common user actions better" You could try manipulating the browser history using new development techniques (usually outside the scope of a UX answer). Otherwise, a JavaScript alert will only fire after the users have tried to leave the page for any reason, which might be confusing to them. ...
5
Tables are already very heavy visually so you can add some sort of icon next to the text to indicate that it is a link. i.e.
The advantages of doing this are:
- The user can quickly identify which cells have buttons
- The essence of the table remains
- The visual weight will look balanced
5
The bevel gives the button some affordance and lets people know that they can interact with the object. If you have a completely flat design, you run into the problem of people not being able to tell the difference between a button and a block outside of contextual clues.
This has proven to be a justified concern with Windows Metro having this exact issue.
...
4
Top-left seems to be the ideal position for the "Back" button due to the following reasons:
All traditional and modern PC browsers have it there. There is almost no learning curve.
This would seem much more native on tablets than mobile. But you will have an advantage of efficient scaling up of UI since Back button won't change its position across ...
3
I've battled with people quoting this finding on several projects now. The discrepancy, imho, exists because of the researcher's ability to exist in a controlled environment.
When you have complex pages to deal with, you can't make every tapable action the size of a large man's thumb print. If you did, you'd end up with a cluttered mess of a UI. People are ...
3
Grammar largely depends on the language of the viewer
I have a few websites that I maintain that are read around the world. Rather than paying a company to rewrite all of the copy on the sites, we've been using the Google Translate Widget to allow visitors to convert the text from English into their own language automatically.
One of the things to consider ...
3
Indicating the state of a button is always difficult and you are right : you do not want to be subtle. Subtlety is too close to ambiguity and you do not want ambiguity in your interface.
You also want to give a feedback for any action by the user: in your case something has to happen after the user configures a filter. Maybe the list changes, maybe the ...
3
If the buttons take up the entire cell, you will reduce noise. Granted, they will look less like buttons, but if you apply a gradient and different text alignment, it should be clear enough. You could experiment with different fonts and font sizes too, but I'm not fond of the design results.
Here is a rough mockup of what I'm referring to:
I would ...
2
Typically in this situation applications will present a dialog that looks something like this:
download bmml source – Wireframes created with Balsamiq Mockups
This is in line with your intuition that a warning that "going back" is unsupported behavior is the best UX to provide in this situation.
Note that it may be possible to support the back ...
2
I will acknowledge that you really are designing an app to make the world better by giving really relevant information from the right people to the right people.
You do not want to pollute your content with a floating button. Your readers are probably going to read the whole text before wanting more information, so a button at the end of the article does ...
2
I'd like to add that behavior of the control is prior to the wording.
There is not one true best wording; the wording depends on the behavior and the purpose; and there are many different ways to approach this.
Assuming the user first selects the file, then submits:
Do you want to support selecting several files, before submitting?
Will a user be able to ...
2
In my opinion 'Choose Files' or 'Choose File' (for single file upload) is the best way. as said it's clear. and it isn't large.
My experiences with long labels for upload are that people ain't going to read what's on the label.
So limit your words to like 2 instead of 4 of more. (Choose files to upload) for example.
I hope it helps.
2
Conventions play important role for users to understand quickly what the UI element is, and what to do with it. This means button should look like a button and user should understand, act upon it. There are lot of styles for buttons which understands affordance.
Buttons serve purpose of showing what to act upon. Example, if you have a form to be filled and ...
1
Personally, I don't think your bevel is enough to make much difference at a glance. If you increased the bottom or top bevel (or both) you might have more to lose.
Even when designing in a flat motif, I like to imply some visually notable dimension on buttons. It doesn't have to come in the form of a bevel, though. A border, shadow, extrude, or even a ...
1
The simplest method that covers all use cases is to have a floating header (a header that is always on top of the screen) and have the 'back' button there.
This way it's always available and always in the same place, which means less thinking for users. Additionally, it mimics the interaction of most mobile devices
1
You can put it in both places.
I imagine the hypothetical situation where a user gets to the page, realizes he/she's looking for something else and decides to go back. Top would be better for this scenario. But it could also be that the user reads the information, gets to the bottom and decides to go back. Bottom works better in this case.
Alternatively, ...
1
If you target tech-savvy audience, then "Browse...", IMHO, is the most associated word for "Open up the system file dialog, and let me navigate through the folders of my computer's hard drive to locate a local file". At least that is what I expect from experienced computer users, who see "Browse..." all the time, and know exactly what would happen if they ...
1
If you're going to go with a Select Files... label, Select Files to Upload is a better explanation than Select Files from Computer. Explaining the action in terms of what they're doing or what they need to do, which is a constant, keeps the label relevant in a number of different scenarios.
For example: Some users who have just plugged in a thumb drive, ...
1
Option 1, it seems the title is deletable.
Option 2, quite good but the design does not make it clear whereas it is for deleting everything or just the last parameter (label ?)
Option 3, same idea as opt 2
Option 4, same as opt. 1 (but text is much more clear than icon)
Option 5, maybe the best one but same idea as opt 2
In all options it is confusing ...
1
If you need a back button to navigate around an iOS app, then you clearly need a navbar with a back button.
If however, you have a simple app that doesn't need any navigation, you can leave the back button out, or where it can be navigated entirely by using a tab bar, then a back becomes unnecessary.
Apple do this with many of their default iOS apps. ...
1
I see a clear distinction between where to use button, radio button or dropdown.
Button - is typically used to submit information. If you just want user to select an option without submitting the information you can use Button.
Radio Button - is typically used to provide a selection to user if you have a very few option to select. Anything in the range of ...
1
In most cases buttons don't have to follow the rules of grammar. Notice they rarely have periods even when, like yours, they are complete sentences. Use the choice with the fewest words that is not ambiguous. Apply the rules of usability in preference over grammar rules.
If you want to get grammatical and talk sentence construction rules. . .
...
1
Firstly, the floating button is a bad idea. That is the equivalent of Sony putting a "buy more Sony products" button over some of the film that you are watching. It's poor UX and will annoy users. For the record, if any app did that to me, it would be about 10 seconds before I deleted the app.
If you want people to contact you, first, make an app worth ...
Only top voted, non community-wiki answers of a minimum length are eligible
