Call for comments:
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.
Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Number of replies: 16
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Matt Gibson -
Hi Olli,
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
:
Matt
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
would be better as a vertical list, placed inside a box, with 'Add something to this page' as a title.
- 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.
Matt
In reply to Matt Gibson
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Tim Hunt -
Olli, I hope you are keeping an eye on the pages of the wiki (e.g. using the watching interface, or tracking recent changes). I have added a couple of comments inline in the documents there.
In reply to Tim Hunt
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
I found at least three of them. I hope there were not that many more. I probably have forgotten to watch some of the pages, will make sure I have all of them.
I also replied to the devel comment.
I also replied to the devel comment.
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Tim Hunt -
Three sounds about right.
In reply to Matt Gibson
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Hi Matt,
Thanks for your comments! A tree view of a category might be interesting, but it should not be all-visible in the default view.
I will reply to the rest of your thoughts asap.
Thanks for your comments! A tree view of a category might be interesting, but it should not be all-visible in the default view.
I will reply to the rest of your thoughts asap.
In reply to Matt Gibson
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Hi Matt,
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 ;).
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 ;).
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
"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: ..."
Oops, I meant: How would you add questions to a random question if it were removed?
In reply to Matt Gibson
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
A new screenshot published in the development blog about the current state of things.
Currently also waiting for some feedback to development questions at http://docs.moodle.org/en/Development:Quiz_UI_redesign#Development
and another blog post.
Currently also waiting for some feedback to development questions at http://docs.moodle.org/en/Development:Quiz_UI_redesign#Development
and another blog post.
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Another question arose:
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.
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.
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Tim Hunt -
At the moment it would screw up the attempt.php code to have consecutive page breaks. But actually it would be pretty easy to handle. We would probably just need to change the bit where it sets $attempt->layout from $quiz->questions in quiz_create_attempt in mod/quiz/locallib.php to strip out consecutive 0s. We would also need to review all the other uses of $quiz->questions. Grep finds a couple of dozen, but they mostly look like they would not break.
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?
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?
In reply to Tim Hunt
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Great. Will have to see about that when we get that far.
I don't think it should be any more work. But why don't you see for yourself?
http://moodle.org/mod/forum/discuss.php?d=102062
I don't think it should be any more work. But why don't you see for yourself?
http://moodle.org/mod/forum/discuss.php?d=102062
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Randy Stamm -
I have a comment about ordering and reordering function. Observing some of our faculty interface with this option... it seems apparent they are looking for the same move capability found on the home page. See attached sample image...
Consistency in the interface.
Consistency in the interface.
In reply to Randy Stamm
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Hi Randy,
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.
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.
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Randy Stamm -
Olli,
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 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!
In reply to Olli Savolainen
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by kok hwee foo -
Hi Olli,
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.
Thanks.
Regards
kok hwee
In reply to kok hwee foo
Re: Call for comments: Quiz UI redesign prototype (new iteration now usability tested)
by Olli Savolainen -
Hi kok hwee,
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?
Olli
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?
Olli