0

We need to design a form where user can dynamically rearrange the fields. From the attached image, The scenarios are, Need to show the grouping of fields, eg., File number, City and Zip are a group and File number is the mandatory in that group.

There is a possibilities to have many group like this and there maybe many mandatory fields. There will also be some non group fields, which may have mandatory and non-mandatory. Can anyone help us how to Visually separate and show it to make the user understand better. Sample form image

closed as off-topic by Devin, Graham Herrli, msp, Mayo, plainclothes Apr 18 '16 at 16:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – Graham Herrli, msp, Mayo
If this question can be reworded to fit the rules in the help center, please edit the question.

  • yes. do not allow user to dynamically rearrange the fields. – Aprillion Apr 17 '16 at 17:59
  • For some reason, We can't restrict the user to rearrange the fields. – Mohammed Hussain Apr 17 '16 at 18:02
  • Um, hmm, when you say "We can't restrict the user to rearrange the fields" what do you mean? Can they rearrange the fields anywhere at all? For example, regardless of what ideas this community offers you, are you saying that an end user could rearrange them so that the Disposition Date appears after File Number and that Fruit could be moved to between Animal(s) and Car Color? And what about the mandatory fields? Can the end user also change these so that they are/are not mandatory? – Monomeeth Apr 18 '16 at 1:36
1

Okay, this answer may be edited in future depending on what answers if any I get to my questions in the comments. But I see a few possible solutions if the worst case scenario is that end users can move things around as they please.

These are as follows:

1. Do nothing (well, sort of)

You could just design the form with the fields exactly where you want them. Ensure that the back end of the form captures the data in this order, regardless of what the end user does. Also ensure that any fields are mandatory that you need to be.

In this way the user can do whatever they want (who cares really?) but you ensure you get the data you want, how you want it.

2. Split the form up

Basically, ensure that each 'group' as you call it, is on its own dedicated page. This ensures that if the user rearranges any of the fields, that they're only rearranged within that group. To move to the next group, the user clicks on NEXT (or something similar).

As with option 1, ensure the back end captures the data in the order you want, regardless of what the end user does. Also ensure that any fields are mandatory that need to be.

3. Use background shading

Use background shading to denote each of your groups. This is the option you would use if you can't go with option 2 above, or if option 1 is not acceptable for some bureaucratic reason.

Below is a mockup of how this could look:

enter image description here

Now, if users know/expect they can rearrange fields, then include a prompt asking them not to move a field outside its colour group.

As with option 1, ensure the back end captures the data in the order you want, regardless of what the end user does. Also ensure that any fields are mandatory that need to be.

4. Use horizontal lines / borders

Use horizontal lines or borders to separate your groups. And, as with option 1, ensure the back end captures the data in the order you want, regardless of what the end user does. Also ensure that any fields are mandatory that need to be. And, once again, if users know/expect they can rearrange fields, then include a prompt asking them not to move a field outside its border.

Regardless of the option you choose, I would just use one 'symbol' to denote a mandatory field (typically the red asterisk) so that there is no room for confusion by the end user. After all, a mandatory field is mandatory, regardless of what group it's in.

Remember, as long as your back end deals with the data as you want, it really won't matter what end users do!

Good luck.

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