Tag Info

Hot answers tagged

96

As with everything: user test! Thankfully, usability hero Jakob Nielsen jumps to the rescue here in his Alertbox article about OK/Cancel buttons: Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box. Kostya was right on the mark in advising ...


59

The answer is in user interface guidelines for the system you use. For Windows Present the commit buttons in the following order: OK/[Do it]/Yes [Don't do it]/No Cancel Apply (if present) Help (if present) So Cancel is always on the right of OK button. For MacOS A button that initiates an action is furthest to the right. The ...


42

While Microsoft and Apple aren't explicit on this issue, Java Swing Look and Feel Guidelines explicitly state that the label/value should be to the right of the control for languages read left to right. The same applies to radio buttons. The ancient OSF Motif Style also explicitly says that the label is to the right of check boxes and radio buttons ...


31

I think this applies to this question too and answers it: (Spoiler: It doesn't matter.) In cases like this, it often doesn't matter what you do. Either choice has good arguments in its favor, and no choice is likely to cause usability catastrophes. It might save some users 0.1 seconds if you pick the "right" choice for certain circumstances, ...


20

When strictly speaking about alignment, there is no right answer other than to be consistent. However, the alignment of buttons is related to the positioning or logical order of the buttons. There are two general paradigms that can be applied to the positioning of buttons**. Reading Order - The first button encountered in reading order is primary (Ok) ...


20

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" ...


15

If you're going to bother localizing your interface, you might as well do it fully and respect the language or region's common practices. As you mention localization, I assume this means that you will change the placement of the currency symbol based on the locale setting of the user's interface, rather than the locale of the currency symbol used. Take ...


14

In this case, people are commenting about the restaurant rather than responding to comments about the restaurant. So there is no requirement for someone to read the existing comments before adding their own. In fact people would probably find it quite tedious to trawl through all the comments and would thus be less likely to add their own if the comments ...


12

I think this is one of those things where you should do what the user expects. What do they expect? Well that's sometimes the tricky thing to figure out. Eye movement studies have been done in excess to determine the best placement for the most important call-to-action buttons. And users often start in the upper-left hand corner. On the other hand, ...


10

Luke Wroblewski wrote a book about web forms (Web Form Design: Filling in the Blanks) and he also covered some principles like: "Primary & Secondary Actions" ( http:// www.lukew.com/resources/articles/psactions.asp ), "Top, Right or Left Aligned Form Labels" ( http:// www.lukew.com/ff/entry.asp?504 ) or "path to completion", etc. (you can read also ...


10

1. Is the standard for both Windows and OSX. You should go with this. Update: (Note that when clicking at extreme bottom of screen it will automatically display as 4,when at extreme right it will display as 3, and at extreme bottom right it displays as 2.) This seems to make sense, you right click, and are at the top left position of the list of options. ...


10

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 ...


9

If we ignore the possibility of right to left reading order (used in some languages), I believe that the label should always be on the right-hand side of the checkbox. In Windows, it is in fact impossible to put a label to the left of a checkbox, from a technical point of view. In any Windows software development environment a checkbox's label will be on ...


9

Because these instructions are supposed to be read after the user has tried and failed to interpret a field, not read first of all by every user. In the case of the Twitter examples, these texts often don't actually explain how to fill in the field, but rather how to make a decision. That is, they are supposed to be read only if a user struggles with a ...


9

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 ...


7

I'm surprised the article doesn't mention Fitts' Law, which states that the bigger the target is, the easier it is to acquire. (That's only half of the law, but it's the part that interests us here.) A menu bar may be considered infinitely large if it can be activated by clicking anywhere "above" the screen. You should read A Quiz Designed to Give You ...


7

I wouldn't worry about an artificial limit on the number of keyboard shortcuts. Such a limit assumes that a user is expected to learn the shortcuts first, and apply them only afterwards. In reality, users learn shortcuts as they go. And they will learn only the shortcuts that help them accelerate their workflow, while ignoring the ones that they would ...


7

My instant answer is the that checkbox should be on the left of the label, but before answering I wanted to validate the recommendations. Sadly Microsoft's, Sun's and IBM's UI guidelines aren't explicit in this regard (they tend to talk about when to use checkboxes over radio button etc.) but all their examples use the control-then-label convention. So I'd ...


7

If your error message display is dependent on a page submit (rather than in-line), I would very strongly advise against putting it at the bottom. A user's automatic reaction on seeing it next to the "submit" button will be that their errors have not yet been resolved and that there's therefore no point in clicking that button again. The most likely scenario ...


7

The error message should be wherever the user is most likely looking. If your technical design requires that the entire page reload to show the error, then chances are the user will be looking at the top, since that’s where users eyes naturally go as they see the page flash or clear. On the other hand, if you can do partial page refreshes (e.g., with AJAX), ...


7

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 ...


7

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 ...


6

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 ...


6

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 ...


5

Jakob Nielsen says to do what your users expect. If you're designing a Web-based application, the decision is harder, but you should probably go with the platform preferred by most of your users. Your server logs will show you the percentage of Windows vs. Mac users for your specific website or intranet. Of course, Windows generally has ...


5

escape key is your best bet and is very familiar with computer gamers. I've been computer gaming for 20+ years and that will be the first key I'd hit to get to a "main menu". Other rpgs (like world of warcraft) have a main menu bar with icons for all the options at the bottom of the screen near the action hotkey buttons.


5

The basic assumption is that you want to use the most readable option. One important aspect is scannability, how easy it is to get an overview without consciously considering each item in full. For this purpose it is relevant that checkboxes have a constant width. so if you align one side of the checkboxes vertically, the other side will also be aligned ...


5

In the general case, you could argue that the comment box placement should depend on the order comments are displayed in: if the most recent comment is on top, the next comment will be above that one, so put the comment box there; if the most recent comment is on bottom, go bottom. And this goes well with Mongus' answer - if comments are a conversation, ...


5

I get the best results when it: is large is above the fold is very obviously a button is to the right of the product image explains the action well - Add To Cart and not just something like "add" has plenty of room to breathe and stands out When I tried a 3-column layout like Amazon does, I didn't have much success, but there's plenty of other things ...



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