Example (mockup below):
Think of a simple address including an input field for phone numbers. The phone number could be landline or mobile.

There are certainly more cases (different type of information, more entries to be selected from etc.) Q: I am looking for a pattern that works well and somehow doesn't break the design or even would work with labels on top of the input fields.

6 Answers
6

If you were to implement as per your original mockup, I'd be concerned that some users will be confused by the choice for the field label.

If you think about it, a field label is a piece of text saying: "you need to provide this information here". Using this principle, multiple field labels (in one drop-down) would suggest to some users that they need to provide answers for all options. But that's actually not what you're after.

Building on what @ltumac said, I think you have:

1 field label ("Phone" etc)

2 fields (one for the number, one for the type)

I don't see any problem with having these two fields together.

However, I would caution against using @ltumac's toggle link, because this is not a familiar behaviour when it comes to forms. Toggle links usually do something (e.g. expand and collapse), rather than being an answer to a question. Moreover, the toggle link doesn't show the user what the options are, whereas the drop down does.

Take the example of successful .com's before you! In this particular case, I'd look to Gmail's contact management setup.

For each suggested field in a contact's record, you're given a dropdown of field name variants.

However, you can customize a field name by typing right over the existing name.

Additionally, you're given a Custom option at the bottom of the Add dropdown. Really, this operates exactly like all of the other fields, except that it doesn't provide a dropdown of field names variants.

And here's what a newly added "Custom" field looks like:

I tried to put enough screenshots in here to communicate the effect. But, I'd really recommend getting a Gmail account if you don't have one -- if only to study their UX decisions.

I think the field that just says "home/work/custom" is confusing. It is not clear what goes into the field: a phone number? email? Also the option "Add" is at the bottom of the page; even though the intent of it is to add extra field it looks more like a control to submit a form. Therefore I don't consider the UI as the the best design example.
–
Anna RoubenNov 9 '12 at 19:01

Thanks for the answer. That's basically the example I had. Not sure it would work well with top labels?
–
greenforestNov 9 '12 at 19:11

I'm struggling a little to understand your concern. When you say "top labels" are you referring to static labels that appear at the top of the form? Or potentially dynamic -- but default -- labels that appear at the top? Or something else entirely?
–
svidgenNov 9 '12 at 19:41

@AnnaRouben, bear in mind, when you first arrive at the form the label has a default value, email in this case. After selecting one of the variant labels, the field is still recognized as an email address. And hover effects still refer to it as an Email.
–
svidgenNov 9 '12 at 19:44

@svidgen In your and my mockup the dropdown is the label at the same time, and the label is on the left side of the input fields. What if labels were supposed to sit on top of the input fields? I think the solution doesn't work then..
–
greenforestNov 9 '12 at 21:56

Thanks, works with top labels too. But I'm not sure it works in other cases where you really need to chose one out of n options?
–
greenforestNov 9 '12 at 19:14

It actually depends on the data itself. At least on the number of options: if you have, for example, just two variants it could be done differently (radio buttons or something like), because putting one additional option in a popup doesn't seems to be a good idea.
–
alexeypegovNov 11 '12 at 9:36

And if you have to choose one option out of n and would like to use top labels you may try to restyle a combo so it will look like a label and behaves like a combo (with a down arrow placed near the label itself). So it maybe just a question of styling.
–
alexeypegovNov 11 '12 at 9:56

You could have one input field or two (with the one corresponding to the unselected option(s) disabled).

The big advantage for this is that the user can see all the choices straight away.

This will start to get messy and look bad if you have many choices. Then you might want to consider the drop down/combo box approach, but here the user can't immediately see the choices that are available and may not even realise that the "label" can be changed.

A solution to that latter problem is to have "Please select" (or similar) as the default option. This prompts the user to see what other choices are available: