Have you heard of Fitts' Law, or at least what the corollaries of that imply for usability?
In Moodle at the moment, to use one of the editing icons, you have to hit a very small target in the middle of the page.
With your proposal, first you have to hit one small target in the middle of the page, only then does the icon you want appear, then you have to accurately move the mouse again to click it. That would be be really, really annoying.
However, editing icons that are grey until you mouse over them might be nice. Or the lack of colour cues might just make it harder to spot the icon you want in the middle of the page.
In Moodle at the moment, to use one of the editing icons, you have to hit a very small target in the middle of the page.
With your proposal, first you have to hit one small target in the middle of the page, only then does the icon you want appear, then you have to accurately move the mouse again to click it. That would be be really, really annoying.
However, editing icons that are grey until you mouse over them might be nice. Or the lack of colour cues might just make it harder to spot the icon you want in the middle of the page.
What I think would be nice is for labels and resource and activity names to be editable in a Flickr style. We'd still need the edit icon for the other editing options, but I think most editing that's done is textual changes and this would speed up and simplify that process.
For those not familiar with how you edit text in Flickr, when you hover over editable text, the background goes yellow and is replaced with a text box when you click. Once you've edited the text you click the Save button and the change is committed to the database and the text on tha page is changed, so no refresh is required.
For those not familiar with how you edit text in Flickr, when you hover over editable text, the background goes yellow and is replaced with a text box when you click. Once you've edited the text you click the Save button and the change is committed to the database and the text on tha page is changed, so no refresh is required.
Yeah +1 for that. I think that every time I use Flickr. 
If we had that AND the editing icons appeared on mouseover then it would be pretty nice IMO.
If we had that AND the editing icons appeared on mouseover then it would be pretty nice IMO.
Nice idea Red!
The only critique is that some parts of the Moodle interface are not obviously editable, such as how you are now able to move topic blocks up and down in Moodle 1.9. I think an editing icon helps.
I like the suggestion about the editable boxes like in Flickr. This is much more like an operating system interface. Would it be possible with all the different types of information that those link/activity/resource names refer to?
I have attached a modified version. I guess it could be a click or rollover state. I like the idea of clicking into something you would like to edit. That's how it works in operating systems. (Note, my grey triangles are probably a little too subtle.)
The only critique is that some parts of the Moodle interface are not obviously editable, such as how you are now able to move topic blocks up and down in Moodle 1.9. I think an editing icon helps.
I like the suggestion about the editable boxes like in Flickr. This is much more like an operating system interface. Would it be possible with all the different types of information that those link/activity/resource names refer to?
I have attached a modified version. I guess it could be a click or rollover state. I like the idea of clicking into something you would like to edit. That's how it works in operating systems. (Note, my grey triangles are probably a little too subtle.)
My +1 for this with the text box to edit the name of the resource/module upon selection of the text.
Since universities and k12s are using Moodle and not necessarily flickr I got to ask how accessible is Flickr and specifically this editing style? Can a screen reader figure out what is going on well enough to inform a blind user how to edit text?
I was just thinking about this regarding MDL-14163. I've always found it quite overwhelming when editing comes on and the page is swamped with small icons. Better, I think to have them all hidden for a particular item until mousover (avoiding the click-to-view annoyance), which would allow for much larger icons as they wouldn't then be cluttering the entire screen.
Another thought I had was whether 'turn editing on' is needed so much any more, given that it's main function is to allow a fast non-editing page load and hide tools that are not needed at the time. With AJAX enabled, the page could load with editing tools enabled always, but added via javascript, not PHP and hidden till mouseover so that it appears substantially the same as it does normally. The javascript libraries would be cached on the client side, so although there would be a small delay as the DOM was prepared, this would be partly offset by the reduced weight of the rest of the page.
Alternatively, it might be good to intercept the 'turn editing on' button so that editing tools are added dynamically via the DOM instead of a huge and mostly redundant page reload. Either way should make for a better experience.
Another thought I had was whether 'turn editing on' is needed so much any more, given that it's main function is to allow a fast non-editing page load and hide tools that are not needed at the time. With AJAX enabled, the page could load with editing tools enabled always, but added via javascript, not PHP and hidden till mouseover so that it appears substantially the same as it does normally. The javascript libraries would be cached on the client side, so although there would be a small delay as the DOM was prepared, this would be partly offset by the reduced weight of the rest of the page.
Alternatively, it might be good to intercept the 'turn editing on' button so that editing tools are added dynamically via the DOM instead of a huge and mostly redundant page reload. Either way should make for a better experience.
Note, I'm not arguing for anything in particular. I made this post just as a discussion point to see if there is something than could be done as an improvement. Currently the screen erupts with icons and layouts distend.
I find the Wordpress interface very fun, intuitive, and quite usable. Remember, the page doesn't load again when you click to open the editing menu. You are only clicking the thing you want to edit. Once clicked, the menu doesn't disappear until you click elsewhere else (as compared to drop-down menus that disappear if you slide off the hover area, those are like making the mouse travel down a maze).
According to Fitts law it works well because, as I am reading the law, the further the mouse has to travel the larger the target needs to get. When you click the icon, all the editing icons are right close by.
I find the Wordpress interface very fun, intuitive, and quite usable. Remember, the page doesn't load again when you click to open the editing menu. You are only clicking the thing you want to edit. Once clicked, the menu doesn't disappear until you click elsewhere else (as compared to drop-down menus that disappear if you slide off the hover area, those are like making the mouse travel down a maze).
According to Fitts law it works well because, as I am reading the law, the further the mouse has to travel the larger the target needs to get. When you click the icon, all the editing icons are right close by.
a great discussion, people. i agree that, at present, the moodle course page gets 'busy' the moment editing is turned on. this overwhelms some editors!
the 3rd party 'foodle' theme is a neat example of using ajax to simplify the screen whilst editing. with editing on, only those editing icons near the user's mouse pointer display, in the topics/weeks sections. highlighting an editable region - like flickr, would be useful too.
http://moodle.org/mod/data/view.php?d=26&rid=2129
the 3rd party 'foodle' theme is a neat example of using ajax to simplify the screen whilst editing. with editing on, only those editing icons near the user's mouse pointer display, in the topics/weeks sections. highlighting an editable region - like flickr, would be useful too.
http://moodle.org/mod/data/view.php?d=26&rid=2129
Yep, that's my personal favorite method (showing the editing icons on mouseover). It does work great on facebook (though as Ian pointed out above there is a small cognitive gap for new users before they realise you have to mouse over it to get the edit icons).
Perhaps a small edit icon hint there is enough to overcome that too, as per http://moodle.org/mod/forum/discuss.php?d=122300#p536641
Looks like everyone agrees! Anyone want to try some code? A lot of this can be done in CSS, but the title editing will require changes to the course format.
Perhaps a small edit icon hint there is enough to overcome that too, as per http://moodle.org/mod/forum/discuss.php?d=122300#p536641
Looks like everyone agrees! Anyone want to try some code? A lot of this can be done in CSS, but the title editing will require changes to the course format.
Hi Chad,
I've just installed the Fooodle theme on my local moodle 1.9 but I do not see the "hidden icons" feature (see attached). What am I missing?
Joseph
I've just installed the Fooodle theme on my local moodle 1.9 but I do not see the "hidden icons" feature (see attached). What am I missing?
Joseph
@Joseph: it looks as though you have a different (newer?) version of foodle theme. the theme developer recently fixed some IE issues with 'mouse over' editing feature. or else it cld be your browser (settings). works for me as described on firefox & safari.
This is nice because it pairs a written description with an icon. This would probably be more accessible since it could be a hidden unorderd list of links which screen readers could pick-up as they crawl the code with "editing on".
However, I do not know enough about AJAX and accessibility to really answer that question. I have never read anything about it.
However, I do not know enough about AJAX and accessibility to really answer that question. I have never read anything about it.
This is even better. I've gotten more than one request for descriptions with the icons.
I think that could be expanded into a general usability requirement that all tooltips hould have as many as possible of these:
I've edited the local lang files to improve things, but it needs to be done properly by the community. Maybe a wiki page where we can all chip in to make a far bigger lang file?
- A full description of what happens if you click on that thing (e.g. 'Click here to edit the resource details. It's the same form as you filled in when you created the resource.')
- A full description of what the information signifies (e.g. separate groups - 'this means that the students are unable to view the forum posts of those in other groups')
- An explanation of why one would want to use this thing (e.g. 'Indenting can be used to show that items in your courses are hierarchically related to each other')
I've edited the local lang files to improve things, but it needs to be done properly by the community. Maybe a wiki page where we can all chip in to make a far bigger lang file?
@Matt "I think that could be expanded into a general usability requirement that all tooltips should have as many as possible of these:..."
I beg to disagree. I would like the tooltips to have as few description details as possible. Actually, the quantity of help info that should be made available to the end-user is linked to the recurring question of user proficiency. As a proficient user I do not want my screen to be cluttered with info which I do not need. I also suggest that novice users will not read that info anyway. And it is not practical (or feasible) to have, embedded in Moodle a mechanism to detect user proficiency. What comes closest to it is the feature to turn ON/OFF the Advanced features in a number of editing screens.
Another possibility would be to keep the icons with their minimal (a couple of words) tooltip help but add, at the end of the icons line, the familiar question mark icon, which upon being clicked would open the familiar popup window with detailed explanation for each of the icons currently available. See attached.
Joseph
Hmmm. I take your point, but the thing with the question mark help button is that it adds an extra click and then a wait for a pop-up. Users who are technophobic (or at least my users who are technophobic) don't even get as far as trying to click it.
I thought of making an AJAX tooltip widget to retrieve the pop up help data on mouseover and show it in a YUI panel, but didn't get around to it. The advantage would be that it could be set to happen only if the user had $USER->enabletooltiphelp or something enabled, allowing seasoned users to turn it off. This way, we could keep the tooltips simple, but enhance them for newbies who need it. What do you think?
I thought of making an AJAX tooltip widget to retrieve the pop up help data on mouseover and show it in a YUI panel, but didn't get around to it. The advantage would be that it could be set to happen only if the user had $USER->enabletooltiphelp or something enabled, allowing seasoned users to turn it off. This way, we could keep the tooltips simple, but enhance them for newbies who need it. What do you think?
Hi Matt,
When doing some training of my fellow teachers I keep reminding them to click for help on "the little yellow button with the question mark". The advantage of my suggested solution is that it is in keeping with the general use of that Help button. If technophobic users are afraid of clicking a help button I'm afraid that is hopeless.
I am not much in favour of adding yet another setting to the user's profile, such as you suggest. It is all too easy to forget about those settings and then be surprised that your moodle screen displays things differently from others' screen, and then people will call the helpdesk...
Whatever solution is favoured it will have to be a compromise between too much and too little information. And whatever degree of information is provided will never replace training* (either institutional, peer- or self-training).
Joseph
* In French I could use a slogan with a pun (untranslatable in English):
Information + formation = connaissance
information + training = knowledge
Joseph,
I'm interested to hear your take on Ian's example from Dropbox above. Any thoughts?
I'm interested to hear your take on Ian's example from Dropbox above. Any thoughts?
Patrick,
I'm afraid I don't like it very much. Too much mouse movement needed, not user-friendly for technophobes anyway.
Joseph
I'm afraid I don't like it very much. Too much mouse movement needed, not user-friendly for technophobes anyway.
Joseph
Hi Joseph,
Good points, and of course you're right - training is always the best solution, but I think some systems certainly require a lot more training than others and the aim should be to design Moodle so that it needs as little as possible.
You may be right that being afraid to click a help button is a hopeless case, but I'd argue that it's not going to be that uncommon (or if not fear, then at least disinterest) if:
For a good compromise, I'd suggest something like Adobe have done for the PDF reader toolbar (sample PDF to try). If you hover over the icons, you get single sentences telling you exactly what you achieve will by clicking them. I think it's significant that they have a help button as well, so that people can access more detailed instructions if they are motivated to spend time doing so.
How about a standard for Moodle that tooltips should be 2 sentences max and tell people exactly what will happen in the first sentence and if relevant, why they would want to do this?
Good points, and of course you're right - training is always the best solution, but I think some systems certainly require a lot more training than others and the aim should be to design Moodle so that it needs as little as possible.
You may be right that being afraid to click a help button is a hopeless case, but I'd argue that it's not going to be that uncommon (or if not fear, then at least disinterest) if:
- There are dozens of help buttons, each leading to a large volume of text to read (look at the update quiz form - over 20). This massively increases the time and effort it takes to get to whatever you are looking for and it really does put people off.
- The user is motivated only up to the point of spending up to 1 minute trying to work something out before becoming discouraged, not 5. Moodle docs isn't much use for these cases either.
- Previous attempts to find out how things work through the help buttons have not worked or have taken far too long, reducing their motivation to try again
For a good compromise, I'd suggest something like Adobe have done for the PDF reader toolbar (sample PDF to try). If you hover over the icons, you get single sentences telling you exactly what you achieve will by clicking them. I think it's significant that they have a help button as well, so that people can access more detailed instructions if they are motivated to spend time doing so.
How about a standard for Moodle that tooltips should be 2 sentences max and tell people exactly what will happen in the first sentence and if relevant, why they would want to do this?
I'm hardly a technophobe, but my first visit to the editing side of Moodle was somewhat of a "culture shock". I was just trying out learning platforms' ability to import SCORM packages. I went to another LMS that first seemed more intuitive, but it didn't do as good a job as Moodle had done in spite of me not having a notion what 50% of the possible choices could do.
I think the most important thing I can do when introducing people to Moodle is tell them:
Don't worry about all the choices! Moodle usually works fine with the defaults. When you need something special you can dig deeper.
and tell them where to get help:
I think the biggest help in the interface we can give is the "show advanced" option and when not chosen, just show the most common things that people want to do. The AJAX editing thing it nice too, besides being less clutterred it also makes things more compact on the screen.
I think the most important thing I can do when introducing people to Moodle is tell them:
Don't worry about all the choices! Moodle usually works fine with the defaults. When you need something special you can dig deeper.
and tell them where to get help:
- General help for a page from the Docs link at the bottom
- Specific help for a detail from the (?) by it
- (Short Tooltips are great if we can implement them and get them translated)
- Forums when the above don't help
I think the biggest help in the interface we can give is the "show advanced" option and when not chosen, just show the most common things that people want to do. The AJAX editing thing it nice too, besides being less clutterred it also makes things more compact on the screen.
When I read this, I couldn't help but think something was wrong with the current way that things are displayed. For example, if you have to say this:
"Don't worry about all the choices!"
Then, we're probably not displaying our choices in a way that best fits our users.
I think that much more factoring needs to take place to make Moodle more friendly to first-time users while at the same time more friendly to power users, too. Changes like this one suggested by Ian, or further separation of "Advanced" features into clusters that can be hidden away and shown only when selected really need more attention.
"Don't worry about all the choices!"
Then, we're probably not displaying our choices in a way that best fits our users.
I think that much more factoring needs to take place to make Moodle more friendly to first-time users while at the same time more friendly to power users, too. Changes like this one suggested by Ian, or further separation of "Advanced" features into clusters that can be hidden away and shown only when selected really need more attention.
This is a very interesting forum. Have usability studies been done on Moodle? Has focus groups been done with regards on the 'editing mode' on? What feedback have teachers provided on the interface?
A couple of years back, I got to work on a class project where we gathered requirements and feedback on an advising interface from students. I developed an ajax mockup of the interface and got students to use it. I think if an ajax demo mockup is created where teachers can play around and see how some things might behave it would help a lot to polish the needs of teachers.
A couple of years back, I got to work on a class project where we gathered requirements and feedback on an advising interface from students. I developed an ajax mockup of the interface and got students to use it. I think if an ajax demo mockup is created where teachers can play around and see how some things might behave it would help a lot to polish the needs of teachers.