I have to offer a list of options e.g. Small, Large, XLarge, etc plus the ability to input a dynamic value e.g. a number.

I thought about a split input box where the left side is editable and there is a dropdown button to the right side with the list of options e.g. the font input in Word.

Idea 1

enter image description here

However this example is clear on input type as the list of options is the same type as what you can enter. In my example the lsit of options are strings whereas the manual input is a number.

Idea 2

enter image description here

So I thought about this idea, where there is a dropdown list plus an input box where a figure can be entered, and its obvious what the input type is due to the default value and the stepper to the right.

This also allows other input fields to be added to the chooser with other input types.

Is this idea the right way to go or are there better ideas?

N.b. This is for a Windows desktop application but cross platform solutions are welcome.

  • 1
    I think the control being at the bottom is a bad practice, if there are more standard values, the control may get out of the list and the user will have to scroll to find it or, even worse, miss it. – xpy Dec 15 '15 at 13:42

Straying away from the UI design question for a second, I would suggest making sure that it's clear to your users what the relationship is between the size names and the numbers. If the sizes are supposed to map to numbers, this mapping should probably be explicit, otherwise users (especially inexperienced ones) might be confused by the fact that you're presenting them two disparate sets of options for the same input.

So, consider changing the labels of the sizes to something like "Small (3)" or "3 - Small" or whatever, so the mapping will be totally clear and users can choose confidently.

If the sizes don't really map to numbers, perhaps they should be separate controls, and users should be asked explicitly to decide which type of input to provide. For instance, a normal dropdown could be the default control, with a checkbox nearby that says "provide a number instead," and when that is checked the control is replaced with a number input, signifying that a number will be used instead of the sizes (whatever that means).

On to the control itself. The pattern you're suggesting is very similar to an existing Windows control type: the Combo Box. From MSDN's documentation:

The list presents the options that a user can select, and the selection field displays the current selection. If the selection field is an edit control, the user can enter information not available in the list; otherwise, the user can only select items in the list.

So, if your project is using Microsoft's framework (you mentioned it was a Windows app) the control may already be built-in and ready to go for you. If you're using something else, I'd recommend following the patterns established by Microsoft with this control, since it will probably be familiar to some users. But, to reiterate, I think the biggest potential usability problem with your solution isn't the layout or functionality of the control itself, it's the way you're presenting two different types of information as options for a single input.

| improve this answer | |

The control you show in Idea 2 is the standard used in other areas (html5 input forms) to indicate number entry so that's ok

What i'd do is add the figures that small/large/xlarge represent in brackets after the string i.e. Small (5) or maybe even 5 (Small). This'd give the user the hint that these strings are just equivalents of numeric values and allow them to compare whatever numeric value they're entering to them (or even to judge whether to pick one of those defaults first)

| improve this answer | |
  • good suggestion with the value in brackets. however in this particular scenario those are relative sizes e.g. Large could translate to 18 one time, and 22 another time - it depends on other factors – Dave Haigh Dec 15 '15 at 11:08
  • if you have examples of my idea 2 that would be really helpful – Dave Haigh Dec 15 '15 at 11:08
  • jsfiddle.net/f7r01pvc/2 Bit of a hack of a JQuery ComboBox ^^^ – mgraham Dec 15 '15 at 12:27
  • jsfiddle.net/f7r01pvc/6 Bit of a hack of a JQuery ComboBox example ^^^ You'll notice that selecting one of the drop-down options puts a number in the field. This is a) because I've mapped the text strings to values, and these could be changed dynamically, it's just a matter of programming and b) in html5 here, if you restrict the input to numbers then it won't show any values with strings – mgraham Dec 15 '15 at 12:34
  • nice control but I don't want to convert the selection of Large to a number. I want it to say Large in the control after selecting it – Dave Haigh Dec 15 '15 at 12:40

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.