Viewing a list of survey questions

Question

I am creating a survey portal. It has two kinds of users - Admin and User. The admin creates the questions. The questions are multiple choice questions, with description, options, author of the question and a few other optional fields.

I need to provide the admin with the option of viewing all the questions created under a topic. How I visualise this is, to list down all the questions (only the description, so that the admin can identify each question uniquely) and on clicking a question description, a new page opens with the full question data.

So for listing the questions, I tried displaying the question descriptions in a table format. But the problem I see is, each description is of different length and the table rows end up being different height. Truncating the description to say 100 / 200 characters is an option, but I am not sure if that would be a good user experience.

I tried Bootstrap collapsible panels. It looks similar to table, each panel showing only a few characters, but upon clicking the panel it opens down and shows the entire description.

I also tried accordion effect, which is similar to collapsible panels.

So in order to have a good UX for the admin, what would be a better approach to display list of questions? And upon selecting a question, what would be a nice way to display the entire question - Opening it in a new page? Or showing it in a Bootstrap modal? So that the admin need not navigate back and forth to view the entire list of questions and a specific question.

Answer 1

In my opinion, the description of each survey (link) should be truncated so the layout can look tidier, in example if you put survey list as the same height cards. Each list will always have distinctive description eventhough only showing e.g. 100 characters (for example, Google search results are quite descriptive with limited descriptions). Or if you don't want to truncate it you should limit the description input (when you make a survey) to 100 characters in the first place.

I think there is no use to make each survey list expandable/collapsible, since you can see the full descriptions after you click it to the survey page itself (or you can put "Show more >" link in the end of each description, eventhough it is not recommended for experienced users and to simplify the layout).

For the modal vs new page, it is not always about the navigation problem. You use modal only if the contents you want to show is short and with limited interactions. The modal contents should be fit to be all shown in a screen without scrolling and doesn't need a whole page. Modal also use to break/interrupt the flow of information. In example, in order to go to a page by clicking a link, a modal shown first for users to log in. That's why in my opinion modal best used for warning, confirmation, or anything that should be prioritized than everything users are doing that time.

You should use page instead of modal since survey usually contains a lot of contents/questions. Additionally for the navigation you can use breadcrumbs on top of the page to make it easy to identify the source/category/anything that survey came from.