Hot answers tagged buttons
14
The following is my solution. Using the regular follow and following button, add an additional icon (doesn't have to be an eye) to distinguish whether the 'follow' is private or public.
A button-like object should not have three states.
Updated
Another solution I thought of was a slider-like function:
When the user has it selected to public or ...
10
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.
...
9
Yes.
Not because I think it's a big problem (I know other think it's bad though),
but because I often pick up my phone and find it unintentionally shaken.
The Google+ app brings up the bug-report form when shaken, and standard iOS behavior is to "undo". When I pick up my phone and find the messages "send bug?" or "really undo?" and I always think: "Oh, ...
6
Multiple modes in UI are bad. So don't strive to place everything in one control. My proposition is on the image. Follow button opens dialog where user could choose an option. You can place some hints and explanations inside so everything will be clear for user.
You should also visualize current following mode. It could be appropriate icon on the Follow ...
5
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.
5
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 ...
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 ...
4
Both examples that you have given are good UX wise, as you have emphasised the active tab and de-emphasised the inactive ones. Good job.
I would however suggest that the arrow border (first one) one is a little better as it is less distracting and lets my attention remain on the content (which is where it should be). When I look at the tabs there is still ...
4
If you have several steps that are logically related, have icons/text for all steps shown in a row, with the current step highlighted. Then you can have generically named "next" and "previous" buttons on each side of this.
You can also allow the user to click directly on the individual steps if you wish (if you don't mind allowing them to break ...
3
How about something like this solution?
download bmml source – Wireframes created with Balsamiq Mockups
The idea is that your simple, single Follow button will change into a segmented button when it you are already in following mode. Clicking on the main part of the button will toggle if you follow at all or not, but in following mode, you can ...
3
I would say that there are some obvious drawbacks of how the layout is set up now, both regarding the edit CTA's and also the search field.
Let me start with the search field. The search field is in a top bar of the app, covering both the list container (left) and the item details container (right). This makes it quite confusing for a user to establish ...
3
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 ...
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
Those who are concerned with usability are going to be "battling" (in a sense) the proponents of "flat" design, which seems to be a very popular trend right now. Many designers don't realize the decreased usability of overly flat designs, some are even making the case that it somehow increases clarity.
These people are wrong. The removal of visual cues ...
2
You should label buttons so that they explain what they do. This is different from the why, which is better explained in longer form elsewhere: there could be any number of reasons to do something.
Your button will show the editor for the source code behind the graphical representation. I.e. it will "show source editor".
In web browsers you can usually ...
2
I would suggest approaching it from a visual design perspective rather than a usability perspective. I only suggest that because the usability conversation has not worked for you. Going beyond the usability problems of highlighting a selected menu item, you could argue that multi-coloured navigation will make the color contrast of the design suffer. If there ...
2
A simple argument of consistency should suffice in an 'ideal' scenario. If the buttons are doing the same function (linking to a page) they should look and feel similar.
Using different colors also leads leads to the problem of highlighting everything. Usually, you choose a common theme for buttons and one for highlighting a 'selected' state. If you are ...
2
Few thoughts
Having more than 4 (5 at the most stretch) elements in a cluster is a bad idea as after 4 elements, your mind needs to burn additional attention to understand "what is going on". Concentrating on icon is easy when they are few but in large numbers they become a cognitive burden. Having 20 icons together is way too far from being a decent user ...
1
I would say unless there is some requirement for the user to be able to view the status of all options simultaneously, or you have only a very small number of options, then the two-level layout (Fig. 3) is preferable. Not only does this provide a simpler interface but it allows for expansion, whereas "all options in one screen" (Fig. 1) would require the ...
1
It seems your experience is to guide a user through a process or encourage them to follow through, so I would go with your second iteration, because in theory, it is moving them 'forward' or to the 'next page'. You are ending the dialog/box with an an action that you want the user to take.
See Nielsen Norman Group article
1
What about adding a tooltip that appears one time after the first instance of a user clicking the "follow" button, advising of how the "three toggle" button works?
For example: "Tip: You can click this button again to keep following but change privacy, then click again to unfollow entirely"
1
Both of the solutions you describe have great potential for confusion. Using a simple push button as a toggle is problematic (I know twitter gets away with it, nevertheless...) but a 3 state toggling push button is extremely confusing. And of course on touch UIs the hover change won't be available.
The most clear and easiest to understand is with 2 groups ...
1
First you should decide on the terminology you think is most useful. I've worked on similar things, and the story we liked was "you're working on a model and there is graphical representation of it and a code representation of it." Alternatively you could use "graphical model" and "code model", but I think "representation" is more accurate than "model" in ...
1
Don't worry about the label. Instead, associate the control geometrically with the action it performs. If the code editor slides in from the right-hand edge, make the button look like a pull-tab and put it on the right-hand edge of the screen. Involve it in the animation you use, by making it slide with the code editor, or rotate to become part of the title ...
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
I recommend Option 3 based on the information you provided. As the user fills out the form and moves down the page, they expect to find the action button following the form fields in-line with the user's actions. At the very least, the action buttons will be located at the user's point of focus as they finish the form.
Option 1 is troublesome in that the ...
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, ...
Only top voted, non community-wiki answers of a minimum length are eligible
