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.

Not sure 'dynamic labels' is even the best name for it.

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
add comment

6 Answers

up vote 2 down vote accepted

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.

share|improve this answer
add comment

You are almost there. Your label isn't dynamic, the meta information associated with the value is. It's actually a secondary field.

Keep the label patterns as you have them and add the meta info on the right as the drop down or better yet, as a "Toggle Link" ™ :) See attached:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

The option that you provide seems very reasonable.

  1. The purpose of the field is clear
  2. Availability of more options is visible
  3. If you default to the most frequently used option, user doesn't have to click anything
  4. It looks clean visually

I think as long as the dropdown options are self-explanatory this options works well.

share|improve this answer
add comment

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.

Default field behavior

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

Changing the name of an existing field

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.

Adding a custom field

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

enter image description here

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.

share|improve this answer
    
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 Rouben Nov 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? –  greenforest Nov 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? –  svidgen Nov 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. –  svidgen Nov 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.. –  greenforest Nov 9 '12 at 21:56
show 2 more comments

Is the phone number is a mandatory field?

If "yes", then I suggest to label it "Mobile phone" (everybody has it nowadays) and add a link named "Add phone number" which will show a popup with phone number type and place a labeled textfield.

If "no" I suggest to add the link ("Add phone number") only (without any textfields at all).

This solution is also applicable for other cases.

share|improve this answer
    
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? –  greenforest Nov 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. –  alexeypegov Nov 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. –  alexeypegov Nov 11 '12 at 9:56
add comment

I don't think there's one pattern that will fit all cases.

In this simple case a radio button might be more appropriate as there are only two options:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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:

mockup

download bmml source

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.