I am building a form design tool for some clients to use when filling out some surveys.
The form can be populated with questions which map to varying form elements (Text, Select, Checkboxes, etc) – and these can optionally be grouped by categories, and subcategories if necessary.
Consider this possibility:
|- Question 1 - Enter your name |- Question 2 - Enter your ID number |--- Category [Car] |---- Question 3 - What year is your car? |----- Category [INTERIOR] |------- Question 4 - What color is the interior |------- Question 5 - Do you have steering wheel controls |----- Category [EXTERIOR] |------- Question 6 - What color is the exterior paint |------- Question 7 - What size are the tires?
So you can see, Questions 1 and 2 are outside of any categories. Question 3 is in
Category CAR, and Question 4,5 and 6,7 are each in subcategories
I am currently using jQuery UI with the
Sortable interactions. So far it works reasonably well, until I got to the part where I have to be able to utilize categories for these things.
I have a side gutter menu which contains the available form elements, and the main panel has a blank area where the elements can be dropped. The items being pulled out of the gutter are cloned, so they can be reused.
My problem is that I cannot figure out a sane way to organize these questions in a logical manner that is not going to confuse the heck out of the admins that will be building these forms.
I did take the step of creating a draggable piece that is called
Category which serves as a divider in the form, but it is still lacking a bit in the whole user centered design space. I also need to figure out the best way to add subcategories also, once a category has been added.
Any thoughts or comments are welcomed! I am truly stumped on this one. I am typically 70% developer, and 30% UI/UX. But this one is making me feel like I should run and hide.