49

The button should always be visible on the page somewhere and should always be clickable. It is incredibly frustrating for a user if they can't click on a button and there is no clear indication of why that is the case. You should always allow the user to click submit and then highlight all fields which are causing validation issues so the user can clearly ...


42

It seems like Windows OK/ Cancel convention has done a lot of brain conditioning for users. So usability tests would certainly come out with lots of people looking for an OK button on the left, Cancel on the right. But that doesn't change the most basic instinct of someone who is interacting with the system without any pre-conditioning. My basic instinct ...


42

TL;DR: Top, or both. Nielsen notes that consistency breeds familiarity, so you should comply with conventions to meet user expectations: This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. Consistency breeds familiarity and predictability, which breed usability. This again means that you must ...


26

Why not merge the done and next buttons? This layout still allows a user to continue without being finished with the page, but requires less clicks.


25

Putting navigation on the left is very orthodox and through repetition it has become enshrined in the cannon of UI dogma. However that doesn't necessarily make it true. Jared Spool wrote on this subject: In my opinion, you shouldn’t care what I (or potentially most others on this list) like for navigation. I don’t even think you should care what your users ...


25

Left-aligned buttons below the fields would provide a clear path to completion. Luke Wroblewski discusses clear path to completion in his book "Web Form Design" (PDF that contains some of the images). Here is an example from the book on how alignment can make the path of completion clearer: Similar to the example above, you may consider having "Next" be ...


24

Having the cartographic point of view, in my opionion, clustering can definitely be the way to go in such a case. In the following example, points which are very close to each other: spread out when clicking on them: (screenshot source) You can also combine it with the "traditional" way of clustering. This means, when you reach your maximal zoom level and ...


23

I found Instagram really handy when it came to its map functionality. Maybe you could use something similar to this one since it seems less cluttered it is clear how many items there are when you click, you could show on the right or left part of the screen the list of the places that they are there


17

For picking one or more choices, label to the right. This allows for easy visual scanning and let's the user's mouse/finger flow in a straight line: [ ] option 1 [ ] this is option 2 [ ] #3 If the label were to the left, it'd be a bit of a mess: option 1 [ ] this is option 2 [ ] #3 [ ] Furthermore, you will often have a 'group' label and while ...


16

Horizontal menu's don't readily support more than one level. Nesting or indentation are difficult to achieve, leading to many hard to use solutions widely documented in many articles and here on UX.SE. I'm no big fan of the Windows 8 website for instance, at the third level deep it just becomes weird. Web documents are usually laid out for scrolling ...


16

Ideally from a pure UX perspective there shouldn't be such a checkbox at all. It is an unnecessary extra click. Users should be able to just click next and it is naturally assumed they are done. However, I assume that this is a box that exists for some sort of compliance reason? Its one of those "Yes I have read everything here and fully agree with it thus ...


16

For most decisions about whether to put an interactive element (filter control, comments box, etc.) above or below an element it usually comes down to which you want the user to read and engage first. In this case you likely don't want the user to read each of the fonts before choosing to filter them, so I would put it at top. This allows the user to ...


16

There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility. If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further ...


15

Bottom navigation works well on Apple devices but not recommended for Android because of the system buttons. Dear Google, it is nice but I insist that the bottom navigation does not work well on Android devices because of the system buttons. When I ask about 15 Instagram users on Android devices, they declared that they often click on system buttons ...


13

Android developer docs has a section titled Advertising Without Compromising User Experience Unfortunately, it only highlights the don't do's rather than the do's: When deciding where to place ads within your application, you should carefully consider user-experience. For example, you don’t want to fill the screen with multiple ads that will quite likely ...


12

He's correct. The reason is that typical western style of reading is from Left to Right. You can see point #2 at: http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/ There are also a great number of additional points you might want to look at while there.


12

Think of a logical order and good placement Instead you may use this: UPDATE Based on the comments from the OP (Original Poster): "So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it" Two Scenarios: 1- You are NOT limited on horizontal space: 2- You ...


11

A common problem, where we have the answer at Norman Nielsen Group article OK-Cancel or Cancel-OK?: TL;DR Summary: Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box. The long story We get countless questions about small details in UI design that don't ...


11

Disabled buttons are not good for accessibility reasons. They only provide aesthetic value as some screen readers skip over disabled elements altogether. https://axesslab.com/disabled-buttons-suck/ Having the button fixed at the bottom of screen AND disabled? BAD, colorblind users can't necessarily tell it's disabled. Fixed position could give a false ...


10

Every answer so far is way too far fetched in my opinion. The answer is in fact very simple. In which direction do we turn the big wheel when we want to turn down the volume? And in which direction when we want to turn up the volume? Even when the UI does not have any indication such as on the great piece of hardware pictured above, nobody will have a ...


10

I have no reliable evidence that my version is better, but speaking from my experience (10+ years) and regarding common usability rules, I suggest to make something like it showed below: remove unnecessary texts make the logo smaller and center make the button bigger


10

For business software, design for workflow first, beauty second Design observations: Users tend to process text pages using the F-pattern, where the eye tends to use the left margin to anchor the visual flow down the page. Your workflow is, roughly: Read text Hit Done Hit Next Occasionally, the user may hit Previous instead. Also occasionally, the user ...


10

If a significant majority of users click Next after selecting Done you could design primarily for that workflow. Github does this with a combined button for commenting on a software bug with/without marking the bug as fixed: Without knowing your requirements, just marking a page could still be possible using Archive and next, followed by Previous or ...


8

I think all of these are quite functional, but there are pros and cons for each one: 1st: may need a lot of vertical space. 2nd: does not consume any additional space at all, but will disappear once user enters this field. It's quite popular though, and not a bad practice. 3rd: again, should the example text be longer, it may force you to make the left ...


8

Usability dictates that there should be nothing barring (or slowing) the user down from performing the action you want them to take. In this case, signing up. The 2nd option is the better of the two because it places the sign up form front-and-center, right where users need to see it. The icon is inherent (this is a school website, after all), so keep it out ...


8

This answer is based on these two comments from the original poster... They can see it in a menu to the left where they also can navigate between the pages. It is definately there to help the user remember what he has finished/hasn't finished. It could be an assignment of sorts. Navigating to another step does not mean you have finished the assignment. ...


6

What is the context in which the version number is important? I have only looked for the version number when I'm troubleshooting or updating the software. Under that circumstance, the version number should be incredibly easy to find or it'll compound my effort in trying to complete an inherently frustrating task. Having said that, the version number in ...


6

The conventional placement of a software version number is in the About message box. You reach it through the menu Help > About and have a window that can look very different between applications, but here is one example:


6

I would say make the action left-aligned with the table. Since this is a primary action associated with data beneath it you want to place the action in a space that users will immediately look; top-left. Additionally, you want to create a visual connection between the primary object (i.e. "Account") and the action. This would be further reinforced by ...


6

I would say it belongs in position 2. It is a very prominent spot on the screen, while leaving the top left for branding. A lot of well designed sites do just that. StackExchange's "Ask Question" button: Twitter's Tweet button (the quill pen button on the right) Google sites which include the Google+ share button: ...and many more


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