0

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


Video

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.

3
  • 8
    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, 2021 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, 2021 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, 2021 at 7:22

1 Answer 1

0

The complexity of the interface is really determined by how sophisticated the question content is as well as the format of the exam. To your issues/concerns:

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.

The purpose of a Learning Management System (LMS) is to provide ways to help make the process of creating, updating and managing the learning content more efficient. You have to review the content in its entirety and use metadata to improve this process in some way, but it will enhance the information architecture of your design in the long run. Keep in mind that the challenge will only scale in complexity as you add more users and more topics to the system.

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.

I think the concept of a question bank, and an exam template will help you separate the management of the questions with the creation of an exam paper. Right now it seems like these two are linked too closely so you have some limitations here.

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.

It depends on how the topics are defined and if the distribution of questions amongst topics are relatively spread out. I assume that a question can also cover multiple topics, and if so then you do have to create more metadata structure to help the user navigate or find questions more easily.

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.