I am working on a project where I have to design an UI for creating a template that has an text input area and also the user can add questions to the template. The questions added should be listed along so that user can view the text input and the added questions at the same time.

I am facing an issue regarding how to handle the questions in the same page. I thought of showing all the questions below the text input area in a collapsible accordion model. But I think this can cause UX difficulties when there are a large number of questions.

What would be the best way to approach this scenario?

Please go though the rough UI approach I tried.


download bmml source – Wireframes created with Balsamiq Mockups

  • how much text are they entering, and what are they trying to do? What are these templates used for, and does this need to also be done in mobile?
    – Mike M
    Oct 23 '17 at 7:34
  • This may be used as a part of a Consent form and there can be a lot of textual input. The questions will be used for taking inputs from the user while triggering the form and this creation part would not be required to be done in mobile. Oct 23 '17 at 8:36
  • Do you have any data about the average amount of questions, or expectations if you don't? This really determines whether accordions are bad or not in your case. Oct 23 '17 at 10:02
  • The number of questions can vary from 0 to a maximum of 50.The scenarios with so many questions are making me doubtful regarding the accordion approach @Wanda Oct 23 '17 at 11:03

I had similar kind of requirement for one of the projects I was working on.

Hence we settled for this type of grid system and layout. Hope this helps your query. This is very basic structure so do let me know if I am wrong, I can help you with it all the way.

enter image description here

If you don't have the whole page dedicated to adding questions, then you can try this approach. Adjust the height of the main block, users can access any question from the left side and edit or add new questions from the right side. enter image description here enter image description here

  • Nice solution, but I'd separate the panel with save and cancel more from the rest of the containers. Now it looks like it's a part of question 5 instead of buttons that affect the entire questionary. Oct 23 '17 at 11:21
  • Hey Anupam, I don't have the entire page for handling the questions.The questions come as a part of the template.There should is a text input area which is separate from the questions which actually splits the page to two (from my design). Also, how would you handle when there are many questions( a max of 50) Oct 23 '17 at 11:21
  • 1
    I have added another alternative for the cases you have mentioned. :) Oct 23 '17 at 11:41

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.