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.

My users need to input a number. For this, I would like a control that is a textbox for the numerical input and a section on the end of the textbox that indicates a default unit of measure, similar to Bootstrap's appended inputs. Also, the user can click the addon section to change the unit of measure.

Is this a good idea? Is there a control out there that does this already?

Update: I did a quick mockup in jsBin that shows what I'm thinking. http://jsbin.com/ivafag/1

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

download bmml source

share|improve this question
add comment

3 Answers

I'm pretty sure a lot of us run into a similar pattern on a daily basis.

Here's an example I see at least a couple of times a day; Photoshop:

Photoshop related fields

And this is what Google does:

Google related fields

Or maybe you're on Github a lot:

Github related fields

My point is, there are many different ways of doing this, and they all work just fine. The question to ask yourself is rather "what implementation of this pattern fits in best with the rest of my ui?"

Whatever you pick, be very clear about the following in the final design:

  • There are two input fields
  • They are different types
  • They work in unison
share|improve this answer
add comment

You definitely see it around the web in many forms (see below). I'm not sure it has an official name, but I would probably call it a Unified Input.

Make sure there is an arrow or something next to the dropdown text to make it clear to the user that it IS in fact a dropdown. You'll notice all the examples below follow this pattern. I think the arrow is part of what differentiates it from a traditional "Prepended or appended input".

mockup

download bmml source – Wireframes created with Balsamiq Mockups


Examples from around the web:


Twitter Bootstrap's Button Dropdowns as Field Add-ons


Google Search Conversions


GitHub Search


Facebook Status Update

share|improve this answer
add comment

Yes, this type of split control is used extensively in Microsoft Office 2013. I don't think it is used as commonly in websites because in general you want to keep these types of applications as simple as possible (both from functional and design perspective). However, I think many people can see the benefit of employing this type of user interface element to provide a richer interaction. Unless it is designed in the Microsoft 'flat' style, you don't need to provide very heavy design cues for the user since they will understand a combination of standard user interface controls.

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.