Thursday, January 9, 2020

forms - How to display dynamic labels


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




Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...