5

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

Improve this question

6 Answers 6

Reset to default
3

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.

Improve this answer
3

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.

Improve this answer
7
  • 1
    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, 2012 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, 2012 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, 2012 at 19:41
  • 1
    @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, 2012 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, 2012 at 21:56
1

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.

Improve this answer
3
  • 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, 2012 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, 2012 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, 2012 at 9:56
1

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

Improve this answer
0

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

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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