Hi all,
There wouldn't be any graphic designers lurking in this forum?
I am Olli, the UI designer of the new Quiz editing UI in Moodle 2.0, and I am worried about the UI's graphical appearance. You can find a demo at http://test.moodle.org/head/.
Even though the new UI is more centered on the users' needs than the old one, it still is really busy. There are some things one could do with just UI design, such as point 9 at 10 Useful Techniques To Improve Your User Interface Designs, but I really feel that this UI would require the gentle touch of someone who is really oriented to graphic design.
I regret that I am moving so late with this. Some recent discussions in the general devel forum recently reminded me of the busyness of the UI.
So any suggestions, preferably as mockups, of how to change the overall look make it less chaotic and to better guide the eye to the most important functionality would be helpful. Thanks.
Julian, talked with you about this briefly in Moodle Moot UK'09.
Just a reminder: Quiz UI for editing quizzes got some rework last year, and it now looks like it is longing for a graphic designer's gentle touch. I invite you all to do some basework for the default theme, for other theme designers to then build on.
A more direct link: http://test.moodle.org/head/mod/quiz/edit.php?cmid=52. (username: teacher ; password: testm00dle) Note also the order and paging tab.
I have a hunch that this work would have to do with making things align to a grid and adding whitespace while at the same time keeping the UI compact. But I know there are people here who really know about these things
.
A sidenote: I understand one of the biggest gripes in the current design is the purple window title of the question bank window in the editing UI. This was made to stand out to support the process of learning to use the UI. In usability testing, the subjects were having problems discovering it. So although it should be more standard with Moodle overall, it needs to still be highlit.
(For inspiration, this might be something along the lines of the following posts (although web site design of course does not 100% apply to web app design):
http://www.alistapart.com/articles/whitespace
http://wefunction.com/2009/04/quality-within-web-design/
I also have been greatly impressed by the work of Lullabot, http://www.lullabot.com/articles/buzzr-demo-video-making-drupal-usable . This shows how intensely web applications are going towards desktop style interaction, and Moodle needs to keep up, but it also is an example of very good-looking, yet usability focused graphic design.)
Just a reminder: Quiz UI for editing quizzes got some rework last year, and it now looks like it is longing for a graphic designer's gentle touch. I invite you all to do some basework for the default theme, for other theme designers to then build on.
A more direct link: http://test.moodle.org/head/mod/quiz/edit.php?cmid=52. (username: teacher ; password: testm00dle) Note also the order and paging tab.
I have a hunch that this work would have to do with making things align to a grid and adding whitespace while at the same time keeping the UI compact. But I know there are people here who really know about these things
A sidenote: I understand one of the biggest gripes in the current design is the purple window title of the question bank window in the editing UI. This was made to stand out to support the process of learning to use the UI. In usability testing, the subjects were having problems discovering it. So although it should be more standard with Moodle overall, it needs to still be highlit.
(For inspiration, this might be something along the lines of the following posts (although web site design of course does not 100% apply to web app design):
http://www.alistapart.com/articles/whitespace
http://wefunction.com/2009/04/quality-within-web-design/
I also have been greatly impressed by the work of Lullabot, http://www.lullabot.com/articles/buzzr-demo-video-making-drupal-usable . This shows how intensely web applications are going towards desktop style interaction, and Moodle needs to keep up, but it also is an example of very good-looking, yet usability focused graphic design.)
I was just in and tried out the quiz UI at test.
If I preview a question there is no EDIT icon (like there used to be). Is that a bug or a feature (in which case I'd like to know why).
When previewing a quiz the EDIT icons are on each question (not sure about the random ones).
I put a question in the Physics category which was references as a random question. It shows in the quiz question list, but not in the preview where it says
"The number of random questions required is more than are still available in the category!"
I understand that one question is not going to give a randomized question, but isn't it better to put in one any how?
---
Now I've put in another question and it STILL won't show in quiz preview. I thought it might be because there were two more random questions, but they point to unrelated categories. That seems definitely buggy.
In the quiz question list it now shows both the possible random questions
plus: "Total of 2 questions in category. Show category contents ►"
What does it do if there are 10 questions in the random category?
I also noticed that the behavior, when taking adaptive quiz, that I'm used to:
If I preview a question there is no EDIT icon (like there used to be). Is that a bug or a feature (in which case I'd like to know why).
When previewing a quiz the EDIT icons are on each question (not sure about the random ones).
I put a question in the Physics category which was references as a random question. It shows in the quiz question list, but not in the preview where it says
"The number of random questions required is more than are still available in the category!"
I understand that one question is not going to give a randomized question, but isn't it better to put in one any how?
---
Now I've put in another question and it STILL won't show in quiz preview. I thought it might be because there were two more random questions, but they point to unrelated categories. That seems definitely buggy.
In the quiz question list it now shows both the possible random questions
plus: "Total of 2 questions in category. Show category contents ►"
What does it do if there are 10 questions in the random category?
I also noticed that the behavior, when taking adaptive quiz, that I'm used to:
- fill answer
- hit ENTER
- get feedback
The fact that previewing random questions is broken is a bug that is on my todo list.
No edit icon in the preview window was a change I made. That preview is in a popup from a page where the question is listed and has an edit icon next to it. Opening the editing form in the little popup window, or in yet another new window, just seems stupid to me.
The enter key should not work at all when entering answers in the quiz (to avoid accidental submission). Well, if keyboard focus is on the submit button, then enter will work, otherwise it should be ignored.
No edit icon in the preview window was a change I made. That preview is in a popup from a page where the question is listed and has an edit icon next to it. Opening the editing form in the little popup window, or in yet another new window, just seems stupid to me.
The enter key should not work at all when entering answers in the quiz (to avoid accidental submission). Well, if keyboard focus is on the submit button, then enter will work, otherwise it should be ignored.
"previewing random questions is broken" does that include the lack of editing icon for random questions? Or are they supposed to only be editable from the category listing?
What is the goal of the list display for random questions? Is it supposed to display 0, 1 2, ... x questions from the category?
I can agree that the multiple windows when editing a question can be confusing.
But at the same time it is a nice feature to have the edit icon there, in a previewed question, when you see something you want to change. It breaks the pattern compared to when previewing the quiz. "Hey I see something that needs to be improved! Where do I go?"
I find myself wondering if the preview should open in the SAME window, and in that case an edit icon would go to an editing form in the same window. That would increase reloading time some, I suppose, but there would be no extra confusing windows and no confusing lack of edit icon. If someone wants the preview in a separate window/tab, they can hold Shift/Ctrl when they click it.
Ok.
I'm a feedback junky rather than a "grader", so I guess for most users stopping unintended submission is probably a higher priority.
What is the goal of the list display for random questions? Is it supposed to display 0, 1 2, ... x questions from the category?
I can agree that the multiple windows when editing a question can be confusing.
But at the same time it is a nice feature to have the edit icon there, in a previewed question, when you see something you want to change. It breaks the pattern compared to when previewing the quiz. "Hey I see something that needs to be improved! Where do I go?"I find myself wondering if the preview should open in the SAME window, and in that case an edit icon would go to an editing form in the same window. That would increase reloading time some, I suppose, but there would be no extra confusing windows and no confusing lack of edit icon. If someone wants the preview in a separate window/tab, they can hold Shift/Ctrl when they click it.
Ok.
I'm a feedback junky rather than a "grader", so I guess for most users stopping unintended submission is probably a higher priority.
Opening preview in the same window is an interesting idea, but since the edit screen has the grading forms, it it tricky if someone writes a grade without saving it, and then clicks preview: depending on browser behaviour, that grade entered may be lost.
In addition, as the behaviour everyone is accustomed to is that there is a popup, people will have change resistance and think it is broken.
Another thought is that perhaps the preview window should be a modal YUI Dialog. Mostly popups are just bad for you. The upside they have though is that they are not modal -- there may well be someone who
In addition, as the behaviour everyone is accustomed to is that there is a popup, people will have change resistance and think it is broken.
Another thought is that perhaps the preview window should be a modal YUI Dialog. Mostly popups are just bad for you. The upside they have though is that they are not modal -- there may well be someone who
- edits a question,
- previews it,
- leaves the preview window open,
- edits the question again, and
- presses F5 on the preview window to see their changes.
There are some places in Moodle where a change is "instantly" saved. Like when assigning roles. But there are many pages where it is possible to loose something entered. I think it would be nice to have a JavaScript warning, if you have entered/changed something on a page without saving that warns you when leaving: "You have made changes on this page which have not been saved.
(o) save, then continue to next page; (_) discard changes and continue to next page; (_)return to the changed page;"
Perhaps the PREVIEW (in same window) link/button should have a tooltip "If you want this in a new window, hold SHIFT." Than the default behaviour would be avoiding confusing multiple windows, but someone that used your usage case could still do that when he wants.
I know that I have "more that twice" wound up with 2 windows editing the same question and had some changes in one and some other changes in the other, so no matter which one I saved I would have to recreate part of the other. Probably I have unknowingly saved one and later seen the editing window "still open" and saved that "to be safe" and "mysteriously lost the changes "saved" before. Maybe teachers that don't use much feedback prabably wouldn't run into this.
(o) save, then continue to next page; (_) discard changes and continue to next page; (_)return to the changed page;"
Perhaps the PREVIEW (in same window) link/button should have a tooltip "If you want this in a new window, hold SHIFT." Than the default behaviour would be avoiding confusing multiple windows, but someone that used your usage case could still do that when he wants.
I know that I have "more that twice" wound up with 2 windows editing the same question and had some changes in one and some other changes in the other, so no matter which one I saved I would have to recreate part of the other. Probably I have unknowingly saved one and later seen the editing window "still open" and saved that "to be safe" and "mysteriously lost the changes "saved" before. Maybe teachers that don't use much feedback prabably wouldn't run into this.