Quiz UI redesign - Design specification

Back to Quiz_UI_redesign

The user interface of Quiz for creating and managing quizzes

Question bank closed

Question bank open

I will let the mockups speak for themselves :). They were made with Openoffice.org impress to mimic, in the prototype tests, the behaviour of the actual application.

• Question bank closed
• Question bank open

• Help text: Basic ideas of quiz creating

---

• Some notes about the prototype:
  • When the user hovers over a question, a tooltip-style box shows that describes in more detail all the relevant information about that question.
  • Although this is not visible in the mockup, the random question specifies the question type of its questions on the bottom line "Total of 3 questions" -> "Total of 3 essay questions and 2 multiple choice questions"
  • Selecting the edit icon or the title link of random question opens that random question's category in the question bank window on the right.

Background

In the end, I decided to take rather more of a conservative approach with the presentation of random questions, compared to the original prototype. That is, random questions are not edited in-place in the quiz, but instead a quick link is provided to display the questions in the question bank window.

The main reason for this conclusion was the fact that with in-place editing of even random questions, there was no way of communicating the relationship for multiple random questions from the same category in a quiz. That is, it would not be obvious enough to the user, whether or not when they edited something in a random question, the other random question would also change.

I am not completely satisfied with it yet, and it will most likely develop further during the actual coding. Namely, there is still too much clutter, especially in the question bank window. Nevertheless, I decided that concistency with the old interface is important to the degree that all the old functionality should be preserved. There are two exceptions to this. Deleting questions, as well as moving question to another context or another category, have been removed in the exam view, since these are not directly related to exam editing, but are question bank operations.

This also will mean that in terms of programming/architecture design, the question bank view of the exam editing screen is separated from the independent question bank editing screen. In terms of communicating the information structures of the application to the user, I see this as a positive thing. While we preserve the functionality of the question bank that is needed when editing a quiz, we still use a minimal question bank contents -window that communicates the fact that the question bank is not an equal citizen when editing a quiz but a tool - albeit an important one - used for building the quiz. This is a clear enhancement compared to the old Quiz UI.

The design decision of whether or not to allow more direct, in-place editing of single question right in the quiz was a hard one. However, I did not see direct editing a crucial feature of the user interface, although it would make the interaction more seamless. Since it would introduce another mode in the UI and would potentially make editing of single questions inconsistent with editing random questions, I dropped that plan at this point. It will be however, if seen beneficial enough, straightforward to add it at a later point.

Work based on prototype testing

You can view the discovered issues, based on which UI conclusions were made, here: Quiz_UI_redesign_-_prototype_testing_report

Tabs

The subtabs of the edit tab were dropped. This was seen absolutely necessary since that was the single biggest factor causing users confusion about the conceptual system of quiz. That is: All but the edit quiz tab itself were unrelated to editing quiz. The implication in the old UI is that the question bank is subordinate to the current quiz, and this is in direct contradiction with the actual conceptual system. For example, the "Questions" tab under "Edit" tells the user that the quiz's questions are here - before s/he learns that the tab contains something else than its title communicates, namely the question bank's questions. Links were added above the tabs to the related parts of the question bank.

The order of the tabs was untested, but I have seen people struggle with it. However, it was not changed before some concrete testing results show up, allowing to think about /how/ it should be changed. Facilitating the order of a most-often workflow of a user (create exam -> set order -> info (+ edit info) -> preview -> grade ) probably would not be a bad idea, but so far it is just guesses.

Also related to tabs, one of the test subjects had visible problems recognizing which tab is active, and s/he was frustrated since in the prototype it was impossible to swicth between tabs to find out. This is why in the prototypes, the background colour of the active tab is clear white, like the background of the rest of the page, and the backgrounds of the other tabs have been made significantly darker.

Work based on scenarios

See Quiz_UI_redesign_scenarios_-_conclusions.

Implementation

The dialogs require a greybox-style dialog. This amount of modality is widely accepted as the best way to do modal dialogs on the web, since they do not lock the entire browser window. Without javascript, the same dialog can be used as a new page, which, when submitted, is returned to the page from which the modal dialog was launched.