OK for dropdown button to be on the left?

Question

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:

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.

Answer 1

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!

Answer 2

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.

Answer 3

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

Answer 4

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.

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.

Answer 5

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 :)

Answer 6

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.

Answer 7

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

Answer 8

By having the drop down arrow on the left, it's easier to distinguish users that intended to open the drop down, vs enter free text. (think touch screen input)