2

My team is working on this particular Order Request project that would require a design to support the application form. The fields would be generated based on the database. Here is a static mock up of the application form:

enter image description here

However, in the actual product we'd like to make it a dynamic form meaning that each section will depend on the value provided by the user from the previous section. Say, if you live in another province, you might be asked for something else after Location Information rather than Contact information.

The problem here is that there might be changes to the database and that might screw up the design of how the form is presented to the user. The Contact name might get longer so the user will need a longer text field to enter so where would DSL Number field be placed?

We have considered a number of approaches and one of them is that we'd define fields into groups and each group would has its only partial view. When the application is being filled, the next section is appended to the form based on the value provided by the user.

I'm wondering if it's the right approach for this problem. What's the common approach that can be taken to design this dynamic field. I understand that this problem can be hard to understand and I'm trying my best to explain. But if there's anything unclear, please feel free to ask.

Scenario

A user wants to place an order request and the first thing he's required to do is select the service he wants, which he will be presented with this section:

enter image description here

After making the selection of service from the drop down, the user is presented with the Location Information section to fill out. This Location Information is generated from the database based on which service the user selected. If the user selected another service, he would get another section instead of Location Information. The user completes the Location Information and completes the form.

  • 1
    If I understand correctly, I think this question is too broad to answer adequately. Without knowing what the user can type in, what they can receive as a result, and what their work flow is (and possibly several other items), we can't provide advice. We'd just be guessing. – Evil Closet Monkey Aug 18 '14 at 23:28
  • Updated question helps with the details. Any additional details on work flows and scenarios would help. – Evil Closet Monkey Aug 18 '14 at 23:29
  • @EvilClosetMonkey thanks for the response. Can you elaborate what do you mean by work flows? – TheBokiya Aug 18 '14 at 23:33
  • @EvilClosetMonkey I updated the question with a scenario that shows how the application should work. – TheBokiya Aug 18 '14 at 23:38
1

Setting a max length for the fields would be advisable rather than changing the size depending upon the longest entry in a database. For instance, the "Contact name" field can be set to a maximum size of 200 characters. This would help stabilize the alignment of the form that you set. However, if that is not possible, you can use the, "one field per row" layout. enter image description here

Option 1 - Dynamically increase the text box height based on the input and keep the width constant.

Option 2 - Hide text if it is larger than the text box (This approach would be preferred when "input being larger than the predicted size" is a rare case)

Varying lengths of the fields doesn't hamper the layout here.

  • I do agree that max length is a better approach and much more sensible than re-sizing the input box however, there might be cases that the input might be longer than we expect. And for the one field per row approach is another clean and simple idea but the only problem with this is that it wouldn't be efficient if the input value is only a few characters long. – TheBokiya Aug 19 '14 at 16:08
  • If cases where "the input might be longer than we expect" are rare, hiding the text if it overflows the text area and when the text box is out of focus should help. – Dishita Shah Aug 20 '14 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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