I'm making a webapp for my local university, which allows teachers to create exams made up of open-ended/multiple-choice questions and JavaScript programming exercises, as well as group them by topic and a whole host of options to randomize the items in the exam, plus other settings.

I am not particularly experienced at making user interfaces,and my main concern is the interface could get cluttered up and become hard to navigate as more and more exercises are added to an exam.

Here are some screenshots of the app, followed by a brief video showing how it's navigated in a browser. I apologize for some parts in which language gets mixed up, that's for unrelated reasons.

Here's the part where you add topics: enter image description here enter image description here

Here's a couple collapsed question editors: enter image description here

Here's one of the most important parts: the fully expanded question editor enter image description here

Here's the coding exercise editor: enter image description here enter image description here

Here's a view of a list of a few topics, some of them with their optional text editor opened: as you can see, it can get cluttered: enter image description here


A few issues I've identified with this interface:

  1. As more and more exercises/questions are added to an exam, the size of the content on the screen grows very quickly, making it harder to navigate from one item to the next one.

  2. Questions are displayed inside the editor in the order they were added, and there is no way to move them around. The reason being, if you turn off the "randomization", the questions will be displayed to students during the exam(s) in the order they were added, so the order they are displayed in the editor is not just cosmetic but also has a function.

  3. To manage topics, you have to jump back to the list of topics, and I don't know if this can be a problem as far as user experience.

A solution I've thought about is to add an index that shows questions/exercises grouped by topic. That would give the teacher a logical view of the items. The index would have links to jump to the specific editor for the clicked item, and it would be always accessible -- think an icon at the bottom right that expands into this menu-like index upon clicking.

Another solution would be to actually allow teachers to move items up/down the list, but that would also cause an effect on functionality, i.e. the order they appear in the exam would change; at that point, I could add an explicit "ordering" number in the editors that would decouple the position they appear inside the editor from the order they are presented in exams. I'm afraid this would have the opposite effect and make the interface more complex and hard to use, though.

I'm looking for feedback regarding the three points I raised, as well as any input for solution I might adopt.

  • 7
    Hello Samuele, you put in a lot of effort into your question, but the problem is that it is basically "review my page for me for free please". But the focus here on UX SE is to ask a specific question that can be answered, so that other users have something from it. So if you can edit it to respect that, you would get useful answers. Otherwise it might get closed. (You also don't see people posting "review my code" on StackOverflow) – Big_Chair Apr 30 at 11:01
  • 1
    Hello Big_Chair and thanks for the feedback to my question. I've edited it in an attempt to make it more specific. Lemme know if it's fine like this or if I need to refine the points a little better. – Samuele B. Apr 30 at 12:12
  • 1
    I'm wondering if having an 'Add question' button available inside every topic helpful? When user are done with one topic, they can just minimize the topic section. So the whole page wouldn't consume a lot of vertical space at one time. – intnnn May 3 at 7:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.