The Design of Moodle’s Activities and Resources Aren’t Perfect – But They Could Be

One of Moodle’s core elements are the activities and resources that users can add to topic sections for students to complete. These resources can be books, text, interactive lessons and many more (interestingly, there is no option to add a video as a specific Moodle activity or resource). As a graphic designer with a focus on readability, I have never felt comfortable with the alignment or hierarchy of these resources. I don’t think they have been revised in many years and I have finally decided to redesign them! I’m not saying this is a perfect solution, but I’m hoping to visually show what’s possible.

I will let the visual BEFORE and AFTER graphics below speak for themselves, but the basic overview is that these adjustments solve issues I raised in a previous post by:

  1. Increasing the size of the label and decreasing the distance from its own description – this brings in a clear hierarchy of label and description with the viewer clearly reading the label first and then the description. This will also allow users to scan down a list of labels without interference from the descriptions.
  2. Adding a modern icon that begins initially in a grey colour and then once the user has spent a certain amount of time in this resource changes to a green colour to indicate completion – this allows the user to see at a glance what they have completed in their course.
  3. Adding an automatic sub-label and time frame to the resource – this allows the user to get a better feel for what is required at a glance. Many articles on the web now use this method (

I hope that this layout feels a lot more visually comfortable and makes the experience of browsing through tasks much more enjoyable with no readability barriers. The addition of the completed resource/activity indicator and time frame indicators also put the user at ease because they will know what is required at a glance. I would hope that there would be customisable options when creating these resources which would allow even more flexibility, but in its default state, it is neat, orderly and readable.



As well as a complete visual redesign, I have also supplied some basic CSS to improve purely the readability of the Moodle Resources (see screenshot below). So please feel free to use this quick fix. I created these adjustments using the Stylish extension within Chrome, so if you’d like to trial the CSS changes on your own site before you implement them, add the Stylish extension to Chrome and paste the CSS into the extension to see the results on your Moodle page. Below are the results when applied to the basic Moodle Demo site.




3 thoughts on “The Design of Moodle’s Activities and Resources Aren’t Perfect – But They Could Be

  1. A couple of quick comments as I run out the door.

    Moodle already has an activity completion option – use it in my course.

    Estimated time would be useful, could be a little interesting to integrate within Moodle. First guess is that it would require changes to each activity module.

    And of course the “scroll of death” question will get raised given your design appears to take up more vertical space.

    Another question, how much of this could be done without having to touch core Moodle. Changing core Moodle is tough. What about changing USQ moodle? Or simpler yet, changing a single course site?

    It wouldn’t be too difficult to implement and test something like this in my course. I already have jquery scripts modifying the main page. A bit more might be interesting.

    I’d also be interested in seeing how/if each activity could be updated to give indications of how other students are engaging with the activity. i.e. think heatmap block

    • Ah right, I thought there was some sort of tick box for completion, but couldn’t find it on the Moodle Demo site. This subtle colour change of the icon is just a bit more designy and a little be more like completing levels of a game 🙂
      Time estimation would be great, but yes, I imagine quite a technical change. It’s easy for me to throw it into a prototype! Also some issues with PDF readings etc. It is an addition I am just getting so used to on other sites.
      Interestingly, with my CSS changes, there is not as much of a change to the depth when compared to my mockup. I think something could be worked out. Plus, I would argue that the complaints about scroll of depth are rooted more deeply in navigational issues. It is very enjoyable to scroll down through a long and interactive article, what is annoying is when you have to scroll down to where you were last every time you have to leave the page to view something else. Solved by Facebook by bringing you back to the same article or possibly having a floating sidebar that follows you down the page.
      I really didn’t even contemplate changes to this extent from our end. Would really love to have the defaults updated to core Moodle. I don’t think we adjust the activity/resources from our end at all. The simple hierarchy issue solved via simple CSS though would be simple!
      And yes, good idea on the engagement question. I could easily see a subtle activity indicator just like Twitter’s “VIEW TWEET ACTIVITY”.

  2. Just made a quick little mockup where you can click on the activity/resources (except for quiz)… Please note that I haven’t reinvented the wheel here, just implemented some common web practices – View mockup*

    * Depth of activity/resources has been adjusted in this mockup.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s