Interface design for rich, beautiful and engaging Moodle courses

Interface design for rich, beautiful and engaging Moodle courses

by Paolo Oprandi -
Number of replies: 3

I have written up the presentation I gave at Dublin Moodlemoot. It is written to provoke thought and discussion about the future directions of the Moodle interface. Please have a look and consider the ideas brought up.

http://blogs.sussex.ac.uk/elearningteam/2013/02/27/e-learning-team-presentation-at-moodle-moot-dublin-2013/

Thanks, Paolo

Average of ratings: Useful (3)
In reply to Paolo Oprandi

Re: Interface design for rich, beautiful and engaging Moodle courses

by Mauno Korpelainen -

Nice presentation, Paolo!

Have you tried to create a new course format, something like "cms-format" or "article-format"?

If we had such a course format teachers could add articles like pages to course and give them some "meta words" that could be used to categorize and search articles. It would allow multiple learning-paths and you could really connect some resources to those pages (let's say you create a page about thing A, create a quiz about A, glossary about A and a link section connected to main article A...)

Articles could be sorted or listed according to "Meta words", "Category", "Date", "View Count", and "Rating"... in a side block or course menu (toolbar)... and printed like most cms-pages.

A sort of combination of Book-module and Topic-format. wink

Today most of our courses look like link-banks (lists of links to resources).

In reply to Mauno Korpelainen

Re: Interface design for rich, beautiful and engaging Moodle courses

by Paolo Oprandi -

Thanks Mauno. Glad you liked it.

You're right. The main changes required to add calls to action are in the course format folder.

Clearly in the blog-post there are also:

  • Theme changes with links to add a course image and a dashboard,
  • A custom navigation block with a link to add a section, and
  • A dashboard, which is whole new concept for Moodle but something desperately needed.

However, I'd love to release a custom format with clear calls to action for teachers (content providers). In reality though, fulltime employment, parenthood and part-time study mean that, in the short-term at least, my colleagues and I would only be able to advise someone about making one smile.

The most important thing is easy in-line editing of the section content!

Technical note: This is made possible even with the current moodle web text editor (which is only allowed once per page) as we only permit one section to viewable at a time.

Ideally, if labels continue to exist in the new format they would also allow in-line editing. 

In reply to Paolo Oprandi

Re: Interface design for rich, beautiful and engaging Moodle courses

by Doug Loomer -

Paolo...this (as well as the Sussex Moodle Dashboard) is absolutely brilliant, both in terms of user experience and pedagogy. I love Moodle - I've been accused, in fact, of pastoring a First Church of Moodle - but its strength has not really been in content presentation.  I understand that there have been other fish to fry, and I am truly and continually amazed by the work done by Moodle HQ, Moodle developers, and the Moodle community.  However, my experiences with teachers and students over the years I have been doing Moodle administration and facilitation have convinced me that presentation truly matters.  Many potential users (especially people who could be power users) resist adopting Moodle because they don't like the way it looks/flows.  People increasingly expect applciation work flow to arise intuitively from the interface and care as much about that as about "features."

As you have pointed out, providing cues (calls to action) to users makes software easier to use and reduces instructor training needs.  It also creates a more coherant experience for students across courses because the cues work to normalize course construction.  This is not simply about eye candy.  Take a look at how Haiku is using visual cues; one can learn to build excellent courses in very short order. Thank you for raising this interface issue in such a compelling way.

I love the way you place editable space at the center of your topic area layout.  As you so clearly demonstrate by comparing BBC New layout to typical Moodle layout, presentation that provides context is not only more appealing and engaging, it also makes learning easier.  Many of our teachers have been using Moodle labels to create editable spaces in order to present resources and assignments within clarifying contexts rather than in simple list format.  Your site appears to make that happen automatically, and I would love to adapt our site to do so as well.  Tips on how you did it would be very welcome.

Finally, I want to applaud and second your suggestion that allowing resources and assignments to be created within an editable space would improve the user experience and page layout.  It would be great if it were made possible.  In the short term, much the same effect could be created by allowing resources and assignments to have a "hidden by available" state.  That way they could be hidden from student view in their list form, but linked to within the editable spaces.  In fact, once a resource or assignment has been created its link can simply be copy/pasted into any wysiwyg editable space in Moodle - the link is preserved and the pasted link text can be edited into any form one likes.  This feature is currently in DEV backlog status, so I am in the process of putting together a patch to implement it for our Moodle 2.4 site.

Your site is beautiful in appearance and function.  I don't suppose you are thinking about releasing the code for your calls to action and dashboard as a plugin?  I would love to have it.

Keep up the great work!

Doug