Quiz UI redesign prototype

Revision as of 08:48, 20 February 2008 by Olli Savolainen (talk | contribs) (Organize Questions)

Jump to: navigation, search

Quiz UI redesign prototype

Any screens that are not defined here are assumed to be similar to what they are in the current Quiz (Moodle 1.8). Note that this is still a prototype, and usability testing is in progress. However, comments are welcomed at http://moodle.org/mod/forum/discuss.php?d=72828 .

Also usability testing for the new GUI is welcome. I have prepared some more material for conducting paper prototype tests of this UI, ask me and I will send it to you. The questions are now available.

Especially, the “with selected” boxes look different from each other for now. As long as a single outlook is chosen, it doesn’t really matter too much how these boxes look like.

The biggest difference: Separated category management and quiz management

Both of the requirements rising from supporting novice usage required this:

  • Showing more of the concrete status of a quiz. In the new quiz content management screen, the contents of any question, including the selection in a random question, are easily available, so it is obvious to the user what a quiz may contain and will not contain. Anything underlined with a dashed line has a tooltip showing the whole contents of the item in question, or more detailed information.
    • Each question type can have a format of their own on the quiz editing page, showing appropriate information about the question in that type (not too much, that is)
  • Communicating to the user more clearly about what he can and what he must do in order to create a quiz. The old quiz management screen had triple functionality: it was used for adding new content, managing the order of the quiz, and for adding content from categories.
    • Category management has been removed and it is in category&questions screens, where it always has been.
    • The two former functionalities are still in quiz management, though the status of the mode for switching to ordering (which was already present in the old quiz) has been made more visible by using tabs. This is the standard way of using tabs, "rapid switching between alternative views of the same information object" (Nielsen, see http://www.useit.com/alertbox/991114.html).

While creating a new questions the user can still add it to a pre-existing category like before, so the new solution isn't in the way of being organized from the start. The new approach is also in general just as quick to use as the old one (in mouse clicks - if not quicker), even when adding a pre-existing question from a category.

However, I am aware that the old two-pane UI may still be wanted; though I added status information of the current quiz to the Categories and Questions views, the question of "what's currently in the quiz and thus what can I and what do I need to add to the quiz from ready-made questions" is still perhaps more obviously answered by the old UI model. For this, there is plenty of room in the Edit Quiz tab row for an "advanced" tab, though this somewhat breaks the the tab metaphor (showing more unrelated information compared to what the other tabs show).


Challenges

A problem in all this is still my lack of understanding about how rights management works: what can who do in which situations. Which questions are visible to whom from which courses/quizes? What is locked when the first student gives a go at a quiz? All of these questions should, at least to some degree, be answered in the user interface to make the behaviour of the application obvious. All in all, as workflow logic increases, this becomes an even bigger issue.

Basic usability concerns and solutions

Adding action buttons next to select boxes is mostly an accessibility question, though also Nielsen has advocated against using selectboxes against their standard behavior.

Had to get rid of the question category icons, (sorry to who made them :). I didn't understand which types most of them referred to, and don't know anyone who did.

Application status

In addition to showing the quiz as bare as possible, the status of the system and feedback about every action, whether successful or not, is essential to help keep the user aware of what's going on at any given situation. One basic means is also to have on every page a heading which corrensponds to the link text the user clicked, usually a menu item.


Navigation menus

I thought the vertical menu in Moodle 1.8 front page is very good, with one caveat: I added graphical boundaries to help scanning for headings and to help finding the currently active item.

This is also related to making the user aware of application status. it may be okay to keep the horizontal menu Quiz has now, but we really need to make it work more logically:

  • the default tab should be the first one, not the last one, and if some tab is not accessible, it should not show or at least it should definitely not be a link that goes nowhere.
  • the active (both top-level and lower) tab needs to be hilighted with a clearly different color than the other tabs, currently many themes make it hard to quickly see what's active. It is good that the tabs are clickable as a whole, not just the link text.
  • also the menu hierarchy needs some general sense: there is no reason to have 'info' as a main-level tab of its own, and actually if one really wants to preview the 'info', it should show in the preview just like it shows to students. also, there is no excuse for the settings to reside outside of the hierarchy completely. it may be a good idea to make preview a top-level item of its own.

Random questions

There are no individual edit screens for random questions (there used to be). Clicking edit for a random question means going to the category in question to edit that. It's simple enough to create another random question if one wants a different category, and it will not be that same random question anyway after changing the category so it's even more logical that the category of a random question can't be changed.

Statistics

"Statistics" are now shown in both Categories and Questions views about the current usage of each category and question in quiz/quizes. Hovering the mouse over the numbers (emphasized with a dutted underline) gives a tooltip with more detailed statistics. Perhaps we could also add the statistics about question usage to the individual question editing page (or question preview), too, though it's not as useful as having it on the question/category pages.

Quiz 'info' page

As the quiz info is really part of the quizes content, it is best taken off the settings page and has now a page of its own.

The prototypes

Though these, images as they are, have fixed width, it is naturally recommended to create fluid layouts which support different screen resolutions.

Edit quiz: no content yet

Prototype image 1: NewQuizUI-Edit-blank.png

Edit quiz: content added

Note that unless a trashcan concept or similar is introduced, deleting a question from a quiz and deleting a question from a random question differ significatly: the former only removes the selected questions(s) from the quiz, whereas it is hard to remove a question from a random question without deleting it from the corresponding category, too.

Prototype image 2: NewQuizUI-Edit.png

Edit quiz: cheatsheet for central concepts

Prototype image 3: NewQuizUI-Edit-cheatsheet.png

Edit quiz: move inside quiz function

If questions being moved to the same random category have equal names, it might be useful to suggest to the user that we add an ordinal to the end of each?

Prototype image 4: NewQuizUI-Edit-whereto.png

Edit quiz: Question order and paging

Prototype image 5: NewQuizUI-Order.png

Organize Questions

Here is the old Question Bank screen, almost unmodified. I added some statistical info so that you can see which question appears in which quiz. Also, there are two new buttons for adding questions to the quiz. After clicking these with items selected, users will be taken to the quiz editing screen where they will see their new questions added to the quiz and feedback "Your questions [question name list] have been added to the quiz." with a green background color.

Note: added buttons to add selected items to quiz.

Prototype image 5: NewQuizUI-Questions.png

Organize Categories

Here is the old Category screen, almost unmodified. I added some statistical info so that you can see which category appears in which quiz. Also, there are two new buttons for adding questions to the quiz. After clicking these with items selected, users will be taken to the quiz editing screen where they will see their new questions added to the quiz and feedback "Your questions [question name list] have been added to the quiz." with a green background color.

Note: added buttons to add selected items to quiz. NewQuizUI-Categories.png


Created by Olli Savolainen 11:23, 31 May 2007 (CDT)