Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Perhaps a minor point, but I thought I'd ask anyway...Normally, the button to drop a dropdown display is to the right of the display area, but I have the option to put it on either side, like so:

enter image description here

Q1: First, the convention is to have these on the right, correct? Why is that?

I thought putting it to the left in my case might make more sense. There will be other controls near the left hand side of this dropdown, and so I thought it would make sense to align the dropdown button there. This will reduce needing to move the cursor further around the display to do common actions. In fact, this applies similarly in another screen of my GUI, in which the left edge is associated most with actions, and so I'd like all dropdowns to have left-aligned buttons.

Q2: So, does this seem reasonable? Or is not breaking the dropdown-button-on-right-right convention more important?

EDIT: I should mention that this dropdown is really a "combo box" that can both drop down a list and also accept user input into the field. For that reason, I cannot have the functionality that the user can click anywhere on the dropdown to drop it, since clicking in the field just sets the cursor there.

share|improve this question
2  
From a usability standpoint: I'd suggest avoiding dropdown menus where possible. They tend to be overused and can often add 2-3 unnecessary clicks/commands in comparison to other control types. They may be appropriate as a fall-back for users with JavaScript disabled in web browsers, but other more nuanced options are available. –  zzzzBov Feb 16 '12 at 4:21
    
Interestingly in the new design of Amazon.com they do use an adaption of this. Although it has far more context to help the user understand the process. –  The Question Feb 16 '12 at 10:50
    
@zzzzBov What other options did you have in mind? If it helps, I'm actually not dropping down a menu as much as a tree of checkable items. –  Chelonian Feb 16 '12 at 19:23
1  
@Chelonian, it's really difficult to give generalized advice. strongly bound autocomplete fields (user types, but must choose one of the available options) can be appropriate for selections with hundreds of options, radio buttons/checkboxes and toggle buttons are useful for 2-5 short options (better yet if they don't look like radio buttons or checkboxes). Sliders can be used for numeric values. There are many many more alternatives. –  zzzzBov Feb 16 '12 at 19:34
    
@Chelonian: You haven't accepted any answers on this issue. Is there any part of your question you feel wasn't addressed in any of our answers? –  Kit Grose Jun 29 '12 at 4:24
show 1 more comment

7 Answers

up vote 19 down vote accepted

Q1: First, the convention is to have these on the right, correct? Why is that?

There are a few reasonable explanations for putting the drop-down arrow on the right (at least in LTR languages):

  1. Readability: Since LTR text naturally starts on the left, this design gives the drop-down arrow some natural whitespace in most cases, and helps make the entire label/combo-box pair more contiguous (since the text, which answers the question posed by the label, is shown in close proximity to the label when the label is shown in the usual position to the left of the form control).
  2. Aesthetics: This also ensures a sense of balance; since the text occupies the box on the left, and the drop-down button occupies it on the right. If you stacked both the button and the text from the left, the box width could look unwieldy or otherwise too long if the content text is relatively short. It will also ensure all text in a given form aligns to a single left edge (whether in a text field or a combo box).
  3. Accessibility: This gives the system the ability (though I'm not sure if it exists in any UI component toolkit I've ever seen) to expand the hit area of the drop-down button slightly in all four dimensions to slightly improve accessibility. It will also make the text insertion point more visible since it will be further away from other controls.

That probably also leads to the last possible explanation; chance, which is simply that it had to be on either the left or right and once it was chosen to be on the right, why unnecessarily change things in subsequent implementations?

I thought putting it to the left in my case might make more sense. There will be other controls near the left hand side of this dropdown, and so I thought it would make sense to align the dropdown button there. This will reduce needing to move the cursor further around the display to do common actions. In fact, this applies similarly in another screen of my GUI, in which the left edge is associated most with actions, and so I'd like all dropdowns to have left-aligned buttons.

Don't forget, many users don't target with the mouse, and when in doubt, the most predictable solution is to leverage the familiarity that using standard controls breeds.

Q2: So, does this seem reasonable? Or is not breaking the dropdown-button-on-right-right convention more important?

Microsoft's UX guidelines for combo boxes don't explicitly mention a side for the button at all.

I can say I've used applications that move the scroll bar to the left side of the content pane and that's taken me an inordinate amount of time to adapt to. For that reason, I'd personally err on the side of the standard control in this situation.

It sounds like your main reason to violate the standard is to collect similar controls together. Intuitively, I think I'd find your proposed alteration uncomfortable as a user, but I think it sounds to me like you'll need to make that call based on the surrounding interface (which naturally only you can see). I'd be particularly interested in how you'll reconcile the readability issue with the control's label!

share|improve this answer
add comment

Standard drop-down behaviour would be to perform the drop-down action if you click anywhere in the drop-down box, not just if you click on the actual arrow icon.

If you retain the defacto standard layout with the icon on the right and also behaviour of dropping-down regardless of where you click, then you solve your cursor-movement problem as well as retaining an intuitive UI.

share|improve this answer
    
Perhaps I need to edit my post to include that these dropdowns are actually "combo boxes", such that the user can also write something into them in addition to selecting something from a dropped-down list. Therefore, clicking in the area just sets the cursor there. And so the method you mention, though a great point, doesn't seem to apply for me. –  Chelonian Feb 15 '12 at 21:34
add comment

I believe the common convention is because people read from left to right and and people expect to see some kind of tip or text which informs about what the action is going going to be executed before they see the button which enables them to perform the action. Further more deviating from custom confuses people as they are so inclined towards right dropdown icons that this would confuse them

share|improve this answer
1  
Not all people do read from left to right. It does seem that you're generally right, though, since in right-to-left (RTL) languages like Arabic, the combobox arrow does move to the left side of the control (taken from codeproject.com/Articles/222389/…). So whether it's for readability as I suggested or the logical ordering reason you suggested, it appears that it's designed to oppose the text in the control. –  Kit Grose Feb 22 '12 at 5:13
1  
Also interesting: when in an RTL language such as Arabic with roman (LTR) text, the button moves back to the right-hand side (image taken from codeproject.com/Articles/24234/…). –  Kit Grose Feb 22 '12 at 5:14
add comment

Just to mention an example: the Firefox search widget (yet little more complex than simple dropdown) use a left drop button to modify search engine.

left dropdown list on search widget

Certainly not the better example of consistency (the magnifying glass is a button that does not look like a button) but illustrates that it could be acceptable in some cases.

share|improve this answer
add comment

You should only deviate from convention in something like this with a really good reason. In the case of the dropdown arrow here, I view it as the user reading the copy then seeing the action. It's not a particular saving to move the mouse that tiny bit extra :)

share|improve this answer
add comment

I suppose it is best not to deviate from what the user is used to. Maintaining user-centric design seems paramount to me. Since most users 'mouse' with the right hand, it seems intuitive to just have the dropdown on the right-hand side, in such a case, where the user does not have to 'mouse across' the widget to be able to get at the widget's control.

share|improve this answer
add comment

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

[Is it] OK for dropdown button to be on the left?

No

I'm writing this purely out of personal experience with no solidified research to back up my answer.

In my memory I have never used a select box that had a dropdown button on the left side. It's always been:

+-----------+---+
| text here |btn|
+-----------+---+

Because of this, adherence to consistency dictates that all select boxes continue to have their buttons on the right side of the text region.

Wanting to use a different style of select box is a strong indicator that a select box is not the appropriate control for the situation.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.