1

Of the two shown below, which is the preferred style--if any--for a combo control? (that allows you to type in it or click the button or arrow to show a drop-down with choices to select...in this case, in a tree). I have a preference, but want to coordinate with others.

Style 1:

enter image description here

Style 2:

enter image description here

The only difference being the appearance of the button to request the dropdown. Note: when the user hovers the cursor over the arrow in Style 2, it changes to this:

enter image description here

In addition to which style may be UX preferable, there is also the question of what is "more native". These were taken on Windows 7, so I'd like to also know what is native for this sort of control on that platform.


EDIT: I added an additional view of Style 2.

  • When you say 'native', do you mean on a desktop or web application? – Izhaki Jan 5 '15 at 0:34
  • As I mentioned, the platform is Windows 7, so desktop. – Chelonian Jan 5 '15 at 2:56
  • The native system combo box is preferable. – jay_t55 Jan 5 '15 at 8:58
  • @jay_t55 But what is the native combo box in Win 7? I wasn't sure how to know. The font selection combo on Word 2013? How can I know for sure? – Chelonian Jan 8 '15 at 5:43
  • I think the native one in win7 is the third one in your question. I haven't used win7 for ages so I don't remember but the third one definitely reminds me of win7 – jay_t55 Jan 8 '15 at 6:36
1

From a visual design perspective - style 2 is better as it involves less visual noise, yet it gives all the necessary clues (that a popup will show).

Note though, that if this control is a typeahead (a text input field where users can actually enter text), there is a strong argument not to show the arrow at all - in traditional comboboxes it serves to inform the user a select list will show when the control is in focus or clicked on (users can benefit from knowing that there's a list of options and they don't have to enter text); but if the users can actually enter text, this is much more of a text input with suggestions than a combobox... showing the dropdown on focus will tell users some suggestions are available.

  • Interesting. A few mentions that 2 looks better. I don't see it that way. 2 is too small/subtle; I don't see it as visual noise but as a robust visual signal while not being too much. – Chelonian Jan 5 '15 at 6:29
  • I prefer 2 aswell. It's simple, clean... – jay_t55 Jan 5 '15 at 9:00
0

Neither is objectively preferable to the other, there are too many factors at play. For example, the answer to this question would be different if asked six years ago, and it will likely be different six years from now. The answer is also affected by where you're using this control -- is it an embedded control in a spreadsheet? In a desktop application? In a web application? Mobile? Also, who are your target users? Computer-savvy individuals? Children? The general public in a kiosk?

Purely from a UX perspective, both give roughly equal amount of affordances. By now, most computer users know what a combobox is, so a pixel here or there isn't going to convince someone it is or isn't something they can interact with. Though, again, without knowing your intended audience and the platform they are on it's hard to say definitively one way or the other.

So, if there's no objective answer, you're left with a couple of choices. First, pick the one that visually fits in with the rest of your user interface. If you don't like the "pick one" approach, you're left with an A/B test of your actual users in your actual application on your actual platform.

0

It depends on the layout of all controls that you are using in your interface design. Visually, second option looks better, but then you need yo design all of your controls in this style.

0

This would be a good AB test! It boils down to these two things in my opinion :

  1. The first and more native drop down box is most likely more familiar to the user as the drop down arrow is clearly within a call to action box ie. it is framed within a clear clickable area. Therefore this is technically more usable.

  2. However the second option is not only the most visually appealing but it indicates that the user does not have to click on this tiny area where the arrow is located (ie. the more useable framed action outlined in point 1) but instead they can click on the whole text field to force the drop down to drop down. This is surely better for mobile and responsive websites.

Because of this I would option for option 2 unless, when getting down to a small resolution, the arrow in option 1 becomes a larger clickable area.

Note: this is just my opinion although would like to see some research behind this if available

  • Thanks. But, regarding your point 2, no, if you click anywhere in the field other than right around the arrow, you are only setting the cursor in that text field--it does not drop the dropdown. Since you thought it did, this seems like a strike against it. Note: when you hover the cursor over the arrow, the same shape as in 1 appears over it. Also, can you clean up your typos in this otherwise good answer? – Chelonian Jan 5 '15 at 2:55
  • That's what you get when you write an answer late at night! Typos fixed thanks for noticing. – DLM Jan 5 '15 at 7:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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