View source for Quiz Usability portal/Where to go next with Quiz UI? Autumn 2008

'''Return to: [[Quiz_UI_redesign|Quiz UI redesign]] |  [[Quiz_Usability_portal|Quiz Usability portal]]'''

For the related issues, see issues in section [Quiz / general navigation: stay with general web standards!]

To continue from where we are leaving off on [[Quiz_UI_redesign|Quiz UI redesign]], I propose the following UI changes for Quiz navigation.

[[Image:Quiz_Usability_portal_Where_to_go_next_with_Quiz_UI_1.png|thumb|Quiz dashboard. Mockups made with ''[https://addons.mozilla.org/en-US/firefox/addon/8487 Pencil]'' and ''[http://www.gimp.org/The GIMP]''.]]
[[Image:Quiz_Usability_portal_Where_to_go_next_with_Quiz_UI_2.png|thumb|Question bank with the new navigation]]

It became apparent in usability tests that Quiz' navigation is still somewhat confusing, especially for novice users. It is simple in itself, but it works somewhat inconsistently and the user does not always know where s/he has landed. This proposition seeks to address these issues.

I am not sure I understand all the issues here yet, but the following seems to be a key reason they get lost: '''the tabs are seemingly unpredictable''', and t'''here is no “home” to return to in Quiz:''' You start from the edit screen, which is the fourth tab. This is a signal to users that they have been dropped “somewhere” in the application (vs. to a start page where they can evaluate their choices), and they easily feel they can not be aware of all the choices they have since they seem to not have started from the beginning and they do not really know where “beginning” is. 

Note that these propositions have not been usability tested yet, so in theory it is possible that they will introduce new problems that need to be addressed. In practice though, with the exception of the Quick Switch, the ideas are entirely uncontroversial and just steer the UI more towards generally accepted UI conventions. Of course this does not eliminate the need for [http://www.useit.com/alertbox/testing_two_users.html usability testing], the only definitive way to confirm whether something works or not.

The design proposition consists of three separate, though related parts:

== Consistency improvements for tabs ==
'''To keep users oriented to their location in the UI at any time, we really need to make quiz tabs act consistently. Do not artificially force users into doing things wizard-style (sequentially) if they do not request to do so.''' 

The current quiz UI is in a sense mimicking the behaviour of a wizard/assistant, since things happen, to a degree, sequentially: before adding questions to the quiz, there is a restriction – which is not really communicated to the user – that other parts (tabs) of the Quiz UI cannot be used. Currently, if a certain tab opens by default when you open a quiz, that default should not inexplicably change when the status of quiz changes (edit tab vs. info tab). The tab that opens when the user clicks on a link to the Quiz should '''always''' be the first tab in the tab row. It is much more important to keep the UI predictable (since this helps users to orient themselves to the whole of Moodle navigation) than to save users one click.

'''Visual hierarchy of tabs and heading. '''Also related to communication, I have moved the Quiz/Question Bank heading ''above'' the tabs: this gives vertical space to the Quick Switch (see below) but also makes the visual hierarchy clearer, grouping the tabs under a single clear unit. The tab headings should be clear and large enough to serve as headings for the tab contents by themselves (which may not be the case in these mockups yet).

This way, Quiz and Question Bank also conform to the visual layout of the Lesson module, where the modules are under the module heading. On the other hand, in for example in Wiki this visual hierarchy seems to be completely confused, so explicit UI guidelines for Moodle are really called for here, too. (linkki: mitä OS-projektissa pitää olla)

'''Follow user expectations on how tabs should work.''' Do not have inactive tabs without explaining why they are inactive. The dashboard screen, introduced below, can be used to also express the state of the entire quiz: just have “this tab is inactive since you have no questions in your quiz” next to the preview tab's heading, for example (in addition to explaining this in  the tooltip of the tab itself).

This is also related to the '''order of the tabs'''. I am challenging anybody to tell me how the old Moodle 1.9 Quiz order of the tabs serves any use case. In the mockups, I have attempted to organize the tabs so that they are in an approximate order of a quiz' workflow: it is a sequence now, too, but unlike the old UI, now it does not try to mandate users to do things in a predefined order. We aim to support the assumed workflow, but allow the user to do things in whatever order s/he needs to. The settings tab might be best as the last one, though, I am not sure.

== Quiz Dashboard ==
See related issues

'''Extend the the functionality of the Info tab to a real home/dashboard tab.''' Have it demonstrate, at a glance, the entire status and the structure of the Quiz module's functionality (note that the current screenshot is just to give an idea of what this might contain). When lost, especially novice users return to the dashboard to review the different places they might search for functionality they need at a given moment, and to understand the “general status” of their quiz. Also, users who arrive at Quiz the first time, clearly see the structure of the options they have.

The dashboard in my mockup above is still laid out in a rather primitive way, but it is mainly to demonstrate the idea at this point. It probably does not contain all the information that would be useful, and the information is probably laid out in a very nonoptimal way. It might also be named “home” which is probably more ubiquitously understood, I am not sure which naming is optimal.

This is a simplified example of the dashboard design pattern, as mentioned by Nielsen in his newest alertbox, [http://www.useit.com/alertbox/application-design.html 10 Best Application UIs of 2008]. In terms of implementation, putting this together is trivial, but the benefits are immense. In tests, users only ended up in the current “info” tab when searching for something else, and got frustrated. If that screen is meant for previewing the first screen of quiz, it should be included in the preview tab to let teachers really see what the experience for students will be like. [http://dashboardspy.com/dashboards/64/9-steps-to-dashboard-creation http://dashboardspy.com/dashboards/64/9-steps-to-dashboard-creation]

One user actually ran into the issue of not knowing if he is in the starting screen or somewhere in the middle, wondering if s/he is missing some options and going out of the screen he was initially taken to to try to solve the task. I suspect these kinds of situations to appear less than in real life in a usability test setting, since the users often assume the tasks they are given are somehow sensible.

In the Electronic Exam system of the University of Tampere, we have a special course format in use that served a similar purpose. Since this was a specialized fork of Moodle, we also have the chance of giving an ordered list of links to the teachers, telling them the steps they need to take in order to have an electronic exam published. This is the single part of the teachers' UI I hear most praise about, since it really supports the teachers' work flow.

== Quiz/question bank Quick Switch ==
The subtabs of the edit tab, related to managing the question bank, were left out from Quiz since they presented a false conceptual model, implying that the Question bank is subordinate to quizzes. 

But still, managing the question bank is central to some of the use cases of Quiz, and one might say they are key in the most central use cases of Quiz whenever the use is not absolutely basic. Since questions are stored in the question bank, it is in essence impossible to talk about the Quiz module without the Question Bank.

The original plan was just to have a link to the Question bank from the Quiz and vice versa. But this presents a further navigation issue: it is still unclear how the question bank's categories relate to the quiz, and access back and forth between Quiz and Question Bank is not very fluid. This has already been pointed out by a couple of users, demanding the subtabs back, who use the question bank centrally. It is easy for a novice to get disoriented about his/her location in the UI, since when clicking a link “go to question bank”, they may not have an idea that this is a separate module from quiz, and may be confused about the entirely new view that they got into. But even experienced users benefit from a clear navigation to orientate to – freeing them from remembering where they were and allowing them to concentrate on the task itself.

Tabs would be an obvious solution to this issue: just provide a third tab row above Quiz' tabs, to select between the quiz and the question bank. However, this would take valuable vertical space from the page and users are likely to get confused by such a deep tab hierarchy.

Enter what I call the Quick Switch, at the top right of the screenshot. It shares many characteristics of tabs: when you click either side, that side gets clearly active. The element communicates that the two elements are related, but still that they are two separate elements. There is still a clear return route to the previous view, which stays essentially the same across Quiz and Question bank, so users never lose context entirely. The provided return route is also '''unlikely to get missed by users''' since their eyes are already fixed on that area as they have just clicked on it. Also, the element remembers the user's location in either of the elements: if the user is in the Reorder & Paging tab when switching to the question bank, whenever the user decides to again click the quiz side of the Quick Switch, they return right where they were and can continue their work from there without any gap in interaction or unnecessary reorientation.

=== Why a new element? ===
Now, I am usually against novel'' ''solutions in UI design. Though this element is essentially just two links and possibly two menus, and it shares many characteristics with tabs (users are likely to recognize the functionality, and in Mac OS X tabs also look much like Quick Switch), it is a somewhat original idea. So why is anything novel necessary? 

The reason is in the rather interesting relationship between the Question Bank and Quiz. On some level, they are two entirely separate modules. Conceptually, quizzes are one thing and places to store and organize questions is quite another. However, in terms of the interaction, a Question bank is an integral part of the use cases of ''any module that uses questions''. So even though for Quiz, Question bank is at best a closely cooperating fellow module, the ''interaction'' actually defines it as a part of Quiz (which it actually used to be even technically in previous versions of Moodle). So we need to 

* convey the separateness of the two elements to have users not get lost in either of the elements, but 
* at the same time allow effortless access back and forth between the elements, since in many important use cases, both are needed.

At this stage, no more is absolutely necessary than just these two links, visually made to look sort of like a pill. But to add further flexibility, adding drop down menus on both elements may be considered. I am not quite sure yet what those menus should contain, though. If the user clicks on either of the titles of the element, it will still function as described above. However, the left-side drop down will list either 

* all the quizzes available (assuming that Quick Switch is only displayed in Question bank if the user is coming from Question bank) or
* all the modules that have this kind of a relationship with quiz

The right-side dropdown will contain: 

* a list of the top-level categories in the question bank or 
* the question bank tabs (to keep the UI as flexible as the former subtabs were)