Here is a screenshot of our implementation.
-Alfonso
Re: Improving editing icons on course page to avoid clutter
by Alfonso Roman -
Number of replies: 10
In reply to Alfonso Roman
Re: Improving editing icons on course page to avoid clutter
by Martin Dougiamas -
I love it! Could you please also post a screenshot with all of these at the same time (as a worst-case scenario)?
- some conditional activities defined and enabled to show their settings on the course page
- some labels between the activities
- some of the activities shifted right
- blocks on both sides, on a screen that is 1024 pixels wide.
In reply to Martin Dougiamas
Re: Improving editing icons on course page to avoid clutter
by Itamar Tzadok -
2. The behavior of labels in editing mode should be revisited. Insofar as one of the most important functions of editing on the course page is moving items around, long labels are practically unmanageable. A possible approach is to display labels in editing mode as activity links with a few characters from the beginning of the label (where applicable). This would allow labels to align with the layout suggested above and better manageability when moved. 
In reply to Itamar Tzadok
Re: Improving editing icons on course page to avoid clutter
by David Scotson -
This should be possible to prototype in CSS. If I get a chance I'll try it and report back.
In reply to Martin Dougiamas
Re: Improving editing icons on course page to avoid clutter
by Rex Lorenzo -
I work with Alfonso at UCLA and here is the requested screenshot taken from a production site.
For some reason, the html editor/file picker is broken for me with now, so I am sharing the image on dropbox.
From the image, you can see:
For some reason, the html editor/file picker is broken for me with now, so I am sharing the image on dropbox.
From the image, you can see:
- Full page view
- Labels between activities
- Some content shifted
- What happens if the activities text gets too long
- Blocks on both sites
- Browser window set to 1024
- Some conditional activites
In reply to Rex Lorenzo
Re: Improving editing icons on course page to avoid clutter
by Séverin Terrier -
Thanks a lot for this. It seems very good for me (and answer my question for long elements)
Just two points : why have'nt you put greyed left arrow (as explained in Alfonso's long post), to have all icons always well aligned ? Nor put moving icons on the left ?
Séverin
In reply to Séverin Terrier
Re: Improving editing icons on course page to avoid clutter
by Rex Lorenzo -
We didn't go completely with Alfonso's original proposal because that requires some core Moodle hacks. We decided to see what we can accomplish with CSS changes alone and that is what you see above.
If Moodle core would adopt this change and can refactor the way the editing icons are arranged we can achieve the original goals of Alfonso's proposal.
In reply to Rex Lorenzo
Re: Improving editing icons on course page to avoid clutter
by Stuart Lamour -
Rex - We managed to get the icon set alfonso's design includes from twitter bootstrap working in moodle using renders in a theme, without changing the core. I think i know a hack with renderers to get them to output as your original design intends. Have a look at https://github.com/stuartlamour/moodle_bootstrap/blob/master/renderers.php
Hugely agreed though - it would be great to get core to change the terrible way icons have to be implimented at the moment if you want to comment on https://moodle.org/mod/forum/discuss.php?d=204278
In reply to Alfonso Roman
Re: Improving editing icons on course page to avoid clutter
by Barbara Ramiro -
Thanks for sharing... very well explained... well thought of... make sense... neatly laid out... pleasing to the eye...
In reply to Alfonso Roman
Re: Improving editing icons on course page to avoid clutter
by Rajesh Taneja -
In reply to Alfonso Roman
Re: Improving editing icons on course page to avoid clutter
by Stuart Lamour -
I really like the design work and information architecture in this. Also nice use of the twitter bootstrap icons.
Just a note on the layout though - If you give someone a tool which suggest they should structure their content as lists of links and documents, they will often create a lists of links and documents.
The past - A file repository
The layout you posted above harks back to something our students used to hate about moodle -
The image above is from a real one of our moodle course in 2009 - its probably familiar to lots of moodle users. Its just a list of stuff without much context. You might as well give tutors google drive or dropbox which do this in a more convenient way than moodle.
From watching our tutors in their offices using moodle we noticed how a standard moodle leads tutors to build this kind of repository.
Rather than using our budget to train tutors in web design, we set about making interface changes to break this pattern.
Today - An engaging learning environment
The interface and workflow in our moodle now seems to encourage tutors to create something more akin to normal web sites.
This is the same course section today -
Inline creation of text, images, videos etc make it simple for tutors to put them directly on the page, rather than as disparate links, and it certainly doesn't look like a file repository. Our changes to the interface alter the tutors workflow which in turn has a direct impact on how they build their sites.
There was a great talk at a moodle moot called From Messy Repository to Quality Interaction and Engagement - which i'm sure is something we all want to aim for with our moodles.
I'd be very cautious of the route you are going down - the table style layout, striping of the list and emphasis of the block layout all contribute to your tutors thinking of and creating that file repository look moodle so often suffers from.
The tool you give people to create with hugely influences what they create.
If you are anything like us - with over 1,500 rather un-web savy staff making courses - you'll want an interface which disuades tutors from the file dump approach, and encourages them to make rich, engaging learning environments.
Hope you take this advice in the spirit it is intended, and not as a critisism.
Cheers
Stuart
p.s. nice responsive design!