Quiz UI redesign specification
The tested prototype for the Quiz UI for creating and managing quizzes is now available in the above link. Please check out the mockups under the first heading and comment how the UI would work for you. Most importantly, please tell us if something that is critical for you seems to be missing.
The most important difference to the original prototype is that the controls for adding questions, random questions and text/description are at the bottom of each page in the view, and that direct editing of questions in random questions has been moved to the question bank. You can find justifications for many other design solutions I have taken in the usability testing documentation.
The usability tests so far have measured a relatively narrow set of functionality, but I think that the most central functionality has been confirmed to be simple enough to use for beginners, while still supporting the use cases of experienced users, especially the people who use the question bank extensively. Also, the paging/ordering tab, though not covered this spring, was usability tested in the three usability tests in spring 2008 to work seemingly well - for that, I have not yet made a new mockup. Testing will still continue this summer with the actual functional user interface.
The report/executive summary about the scenarios work is also available now. The scenarios work proved somewhat useful and was much help in gaining insight, though the real value of the information gathered will only be possible to gain when going deeper to think about quiz's functionality (i.e. the functional requirements), and as we make progress -- slowly, but surely -- with the discussion about the scenarios.
regarding the screenshot/mockups, I think its a big improvement already. Some personal thoughts in no particular order in the hope that they will be useful :
- The layout was cluttered (for me) so I'm thinking of how to remove anything unnecessary
- 'Create new question' is duplicated in question bank and main screen. This makes it a bit busy and is not needed. Could it be left out of the question bank?
- The category dropdown could be replaced by a small YUI treeview widget, with collapsible nodes. See here and here for examples. This would make it clearer where in the tree you are. Might take up more space though.
- 'Create random question' is a little misleading as it doesn't involve creating a question, just adding a position where one will be placed.
- The four options:
- Create question
- Add question from question bank
- Create descriptio/help text
- Create random question
- Edit and preview icons are also duplicated on main page and question bank.
- Many people I have shown the quiz to have been confused by it and I think that the current approach does not properly separate management of the question bank from building a quiz. Including all of the management tools here not only loses screen real estate, but duplicates functionality and potentially confuses new users I would advocate a simpler pop up for the question bank, which was only relevant to the task in hand e.g. if the user clicks on 'add random question' the edit question icon, add new question to question bank dropdown, the icons to add the individual question to the quiz and the select all/none links should all be hidden.
- This is one area where AJAX progressive enhancement would be a real help. Not sure if its beyond your brief, but if you are able to add a layer that will update the database in the background e.g. everytime a change is made to the points for each question, that would eliminate a lot of 'save' buttons. Same for drag and drop of questions from the question bank to the quiz - could any code from the ajax course editing feature be reused here with minor changes?
- This issue point to the future approach of having the 'update this quiz' button as another tab next to the roles ones. I'm sure Tim has already mentioned this, but the mockup has it as a link under the tabs.
It is interesting that you are mentioning many of the issues that I came across when I started working on this UI. I believe your view can provide some real perspective to this work if you are willing to continue this discussion further.
'Create new question' is duplicated in question bank and main screen. This makes it a bit busy and is not needed. Could it be left out of the question bank?
How would you add questions to a question bank if it were removed? The edit and preview icons are duplicated since they are for different entities: if you edit a question in a quiz, it may not change in the question bank, so the icons are needed to show the differences.
Using the tree widget, how would you avoid the tree blowing the UI out of hand if there were lots of top-level nodes?
Random question is indeed a bit of a troublesome concept, since it is not a concrete question. However, I think here concistency with the old UI is important -- changing the name of such a central concept seems sure to confuse old users. If anyone can find a name to overcome these obstacles, it would be great, of course .
Your suggestion of a vertical list of buttons/controls at the bottom of each page is worth considering. However, it would take more space, and as there are not that many buttons, I doubt it that it would make scanning through the buttons any easier. So why do you think this is a good idea?
Including all of the management tools here not only loses screen real estate, but duplicates functionality and potentially confuses new users I would advocate a simpler pop up for the question bank, which was only relevant to the task in hand e.g. if the user clicks on 'add random question' the edit question icon, add new question to question bank dropdown, the icons to add the individual question to the quiz and the select all/none links should all be hidden.
You are right that there is a lot going on in the UI, still. However, unless a novice user actually uses random questions, the question bank can stay hidden. But I have slowly been convinced here that the random question/category operations are indeed a bit more complex and if their natural complexity is hidden, this may mislead the user to never learn how the conceptual really looks like, and this would seem to lead the user to make wrong conclusions as the result of which they would get frustrated when the UI application does not match their incorrect model.
I am not sure what exactly you are suggesting. What comes to my mind when you talk about hiding certain UI elements in only certain situations, is that easily the UI would start to seem unpredictable to the user, which causes insecurity in the user.
This is one area where AJAX progressive enhancement would be a real help. Not sure if its beyond your brief, but if you are able to add a layer that will update the database in the background e.g. everytime a change is made to the points for each question, that would eliminate a lot of 'save' buttons. Same for drag and drop of questions from the question bank to the quiz - could any code from the ajax course editing feature be reused here with minor changes?
AJAX may indeed be of help, but it can also be a stumbling block. The question bank window hiding does exhibit AJAX-style hiding. However, to keep the save points buttons consistent with the rest of moodle and to give the user clear signals about what they have done, the save button is necessary: if something is saved before the user asks it to be saved, this may easily make the UI seem unpredictable to the user.
Drag and drop between question bank and the quiz contents is a feasible idea. However, I do not see supporting it a top priority since less experienced users do not expect d'n'd to be there and thus often do not find it. The YUI library, as well as Fluid do have facilities for this though, but it will probably not become reality during this summer.
I agree that the quiz settings should be made more obvious, though I have not heard Tim mention it. "Update this quiz" does not really communicate even the fact that it is about settings, but this may not be a really severe issue. Making it a tab is an interesting suggestion worth a thought, indeed.
Thanks for your fruitful comments! Please do keep up the thinking, we are together in this anyway -- there is no such thing as the lonesome UI designer ;).
Currently also waiting for some feedback to development questions at http://docs.moodle.org/en/Development:Quiz_UI_redesign#Development
and another blog post.
The model of paging quiz questions is somewhat different from the old UI. Namely, as it definitely seems it is more natural to think in pages and not in page breaks, it is possible to have empty pages in quizzes. That is, the $order (exploded $quiz->questions) of a quiz may contain two consequent zeros. Are there some less-than-obvious consequences from this?
If there are, I might consider creating a virtual data structure to hold empty pages and only adding them to the actual quiz when they are not empty, but I would really rather not.
Thanks for any replies.
One question about the new interface. When you are creating a quiz with one question per page, is that more work now than it was before?
Consistency in the interface.
Thanks for your comment. However, I don't quite follow. Your screenshot is essentially the same as the quiz part of the current tool. What is the move capability you are referring to, on which home page?
I am wondering if this will answer your wondering:
Just added this to the spec: The reordering tool was tested in a previous iteration (http://docs.moodle.org/en/Image:NewQuizUI-Order.png), but has not been included in the new one yet. It is planned that it will be similar to that , but futher accommodation to this iteration of the UI will follow.
I like the reordering tool sample you have included. My point was to make it easier to move questions around in the quiz. It looks like you have addressed this with the Ajax drag and drop... I'm assuming that is what the hand symbol is demonstrating? Looks good!
In my image, I was just using the up and down arrows used on the front page to demonstrate a friendlier approach to reordering questions. It could have the same Ajax function to reorder questions, but it looks like you have addressed this problem.
I would only suggest making sure the use of icons are consistent from one tool to another. Thanks for all your help with the quiz tool!
I know that you are the UI designer. But I would like to ask if it is possible for us as users to edit the UI design ? As some of the too details information I wish to hide them away from normal users. Some teachers prefer simpler UI designs.
Are you using Moodle 2.0 already?
The principal simplification added to 2.0 is closing the question bank for users who are not prepared to use it, but otherwise, not really. I agree, there is a lot going on in the UI since the uses of the Quiz editing UI are so diverse.
What kinds of editing possibilities are you looking for?