2

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 INTERIOR and EXTERIOR respectively.

I am currently using jQuery UI with the Draggable and 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.

Improve this question
2
  • To me, this sounds as you are squeezing a lot of single tasks into one mask. Also, you are confronting your user with trees. Trees have their own complexity. - Think about the single tasks from the users view: 1) Understanding: "Oh, I can choose and drag left - right", 2) "Oh, here is a tree", 3) "Oh, there is a tree in the gutter menu and also in the resulting form", 4) "Oh, I have some freedom between categories / forms". Without screenshots, it's difficult to give suggestions. However, try to use the information pyramid. Show one central information, and hide details in deeper levels.
    – peter_the_oak
    Commented Mar 17, 2019 at 7:37
  • I agree completely. However unfortunately due to the nature of the way the services are written, I am kind of restricted to this approach :/
    – Barry Chapman
    Commented Mar 18, 2019 at 19:48

1 Answer 1

Reset to default
1

How about seeing the category/subcategory as a kind-of "property" to the question?

Something like this:

enter image description here

I think this would be more intuitive for the users and also easier to implement.

The only drawback is the spatial adjacency of the same-category questions. One idea would be automatically rearranging the question after the category/subcategory is added.

Improve this answer
1
  • 1
    This is how I ended up approaching this task. I simply use a drag and drop object with a container that renders after drop for subcategories!
    – Barry Chapman
    Commented Mar 18, 2019 at 19:49

Your Answer

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

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