Autohide Revisited - Reducing the clutter of "Turn Editing On"

As a Moodle administrator of a Moodle 2.4 site, you might be used to seeing the repetitive editing icons shown when your site is in the "Turn Editing On" mode. It's a common sight for a Moodle administrator and the icons provide sufficient visual cues for a newbie to administer a site.

Well, that's Moodle out of the box. Lots of useful
editing icons. It's just that you usually edit only one thing at a time.
NOW YOU SEE IT (THEM)......

Since March 2012, the generous, helpful and talented Moodle community has been perfecting the Autohide feature of Moodle 2.x (Autohide and that Move icon, 2013). It is now, in my humble opinion, a must-have tool for Moodle 2.3/2.4 administrators. Autohide hides the editing icons until a hover or mouseover is done. This, to me, makes a lot of sense since too many icons leads to information overload. I mean the mouse cursor can appear at only one location at a time. So why show all the editing icons at once?



I would like to share that, as one who has used Moodle 1.9.x lineage for so long, this is one of the reasons why I am using Moodle 2.4 for my new college courses. Notice I didn't say that I am upgrading from Moodle 1.9 to Moodle 2.4 - that would be too much work for me to do. Furthermore, if  Moodle 2.4 can function comfortably on your server without too many performance problems, then the Autohide feature is a good reason to switch over to Moodle 2.4.

....NOW YOU DON'T!
Autohide in action. The editing icons appear on
hover only. So it's more contextual and less overload
on the eye. Works for me, but it may not be to everyone's taste.

If you noticed, the label highlight (that gray coloured horizontal band, a Moodle 2.4 feature) that appears when the mouse cursor is over a resource, is no longer visible. I used Alex Walker's CSS code (Lable (sic) Highlights on Mouse over, 2012):

.course-content ul.section li.activity:hover,
.sitetopic ul.section li.activity:hover {
background: inherit;
}

Credits
The Moodle community individuals who helped me reach this minimalistic state of Autohide were: Mark Ward, who started the whole process with a "What if?" question, Mary Evans, Danny Wahl, Mark Johnson, Damyon Wiese, Alex Walker and many other individuals who contributed their ideas, questions and concerns in this Moodle.org forum.


The autohide.css code
The autohide.css code that I am using can be downloaded from here: http://dl.dropbox.com/u/17797520/moodle/autohide2/autohide.css


Installation on Moodle 2.4 (it may work on Moodle 2.3)
Mark Johnson gave very clear instructions on how to install Autohide.

Currently you'll have to implement it for each theme your site uses. Fortunately it's very simple:
Step 1. Save the CSS in a text file called autohide.css.
Step 2. Place autohide.css in /theme/{themename}/styles/
Step 3. Edit /theme/{themename}/config.php
Step 4. Add 'autohide' to the $THEME->sheets array, it should look like this:

$THEME->sheets = array(
    'core', /** Must come first**/
    'admin',
    'blah',
    'css3', /** Sets up CSS 3 + browser specific styles **/
    'autohide'
);


Some usability issues 
Thanks to Ralf Hilgenstock for asking the question "Can you tell me if this solution is accessible for impaired people?". Also to Mark Pearson for pointing out to me that new users would have much less visual cues to indicate to them that there was a place to add text. From the usability perspective, new users are being made to think "What can I do here?". So basic usability principles are not being implemented. Food for thought.


Usability Testing
Mark Johnson had conducted a mini-usability test on several users (Solving Moodle's edit mode clutter, 2013). The results were mixed. Some caught on quickly, others did not like the "jumping around" and others thought the interface was better.Chris Kenniburg (Solving Moodle's edit mode clutter, 2013) felt that there are two schools of thought - Moodle veterans would be comfortable with the lesser visuals and all that hiding away, whilst Moodle newbies might not know "exactly know how or what they can edit", and would therefore prefer to have all the edit icons available.

Give your Moodle 2.4 site the autohide treatment today, and let me know what you think.

Sources:
Solving Moodle's edit mode clutter (2013). Available at: https://moodle.org/mod/forum/discuss.php?d=197470 ( Accessed: 23 January 2013).

Autohide and that Move icon (2013). Available at: https://moodle.org/mod/forum/discuss.php?d=219999  ( Accessed: 23 January 2013).

Lable (sic) Highlights on Mouse over (2013). Available at: https://moodle.org/mod/forum/discuss.php?d=219635 ( Accessed: 23 January 2013).

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!