LMS Navigation – Less is More

When you land on the first page of most online courses, you are generally greeted with an overwhelming number of options that compete for your attention. You can typically expect to be greeted by various links to other parts of the site, complicated navigation boxes, and options that add customisation to your page. These are not necessarily bad additions, but when these elements distract you from your initial purpose when landing on the page, which was to delve into learning, I would argue that they are more distraction than handy addition. Most of these options could be tucked one click away to provide a distraction free, content focused learning space.

One of my favourite design books, The Universal Principles of Design, flags interference effects as a major factor in understanding and making sense of information on a page (or screen). Taken mainly from research in the field of psychology, it states that interference effects are, ‘A phenomenon in which mental processing is made slower and less accurate by competing mental processes’. It appears that in trying to be helpful to students, by making extra information handy and accessible on the landing page of their course, this may actually be detracting from the learning experience. Similar principles have been taught in design schools around the world, distilled into one simple phrase, ‘Less is More’.

With this in mind, I’ve mocked up a very simple static prototype of an online course that incorporates only the bare essentials (see link and screenshots below), which demonstrates in a visual way how simple and clean a learning space could be. This mockup also includes a very standard left hand navigation system to jump directly into the section of the course that the student would need to go. There would be some extra functionality that could be added by developers to make the experience even more seamless, for example, remembering which week the student had progressed to and changing that page to be the new landing page. The left hand menu could also be developed to always appear to the left as the student scrolls down the page so that it is always accessible at the moment it is needed.

Click here to view basic prototype.



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 (Medium.com)

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.



Moodle usability – Global editing button overwhelms the user when turned on

Moodle UX_1


When the global editing button is in “ON” mode, every editing option for all sections are visible at the same time. In some instances there is more than one option visible in the same row for a user to choose from. The appearance of all these options at the same time also causes some of the interface layout to shift down to accommodate these editing options. This causes an interference effect and the user must constantly re-assess the space they are working in. The user is left feeling overwhelmed with all of the options on display. In addition, this mode does not provide an accurate representation of the completed edits, causing the user to constantly switch between “editing ON” and “PREVIEW” modes to be able to preview how the edits will finally appear.

Usability heuristic/s neglected:

Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

See 10 Heuristics for User Interface Design by Jakob Nielsen.


A solution to this problem could be to constrain the number of options displayed at the same time for a single item. Having all these options displayed at once, actually increases the choices a user is having to make and causes further cognitive overload. Next, eliminate the need to have editing turned on at all, by having settings cog icons (with drop-down menus) that appear at all times on hover, when the user is signed in as administrator (as pictured). A comforting stop-gap for the user might be to keep the “Turn editing ON” button, but make it default to “ON” with the button displaying the word “PREVIEW” to turn it off. This would provide a “the right tool when you need it” approach for the user and also allow the user to continue editing without getting distracted by the interface. (I believe this could end up saving the user hours).

A further solution to the back and forth feeling a user may experience when editing basic text features on this page, would be to allow the user to edit text directly from the main page eliminating the need for a separate editing page (see www.medium.com/p/new-post). Additionally, changing the cursor to the move tool icon when placed over topic headings eliminates the need for this extra option to appear at all.

Usability assessment carried out on the standard “vanilla” version of Moodle. Download the full Moodle UX Evaluation – PDF – 3MB originally posted here. This suggestion will be added to the Moodle Issue Tracker if there are no major objections to this post. Feedback welcome!

Recommended reading – Universal Principles of Design.

Moodle UX Evaluation

Moodle UX Evaluation – PDF – 3MB

It has been about one year since my last blog post where, on my search to find out how a graphic designer could enhance online learning, I realised that the largest barrier was the usability and readability of the online learning management system (LMS), for students and for lecturers.

Unsure of my next move, I have plunged into the world of user experience (UX), reading articles, seeking advice from experts, being hyper-aware of websites I visit, and completing the Human Computer Interaction course on Coursera. I’m not sure that this experience has improved my quality of life necessarily, as I now find myself frustrated when sites break the most basic usability guidelines, however, this has all culminated in an overall usability or UX assessment of the Moodle LMS.

As I see it, Moodle is this fantastic system that has so much to offer and provides genuine solutions to complexities that I still struggle to comprehend. Massively talented developers have poured their time and effort into making this product incredibly powerful and scalable (a task unto itself). So I ask that we give these developers the respect and kudos they deserve. What I am setting out to do, is ask that we help them to improve the usability of this software, so that the user can fully appreciate the amazing tool they have at their fingertips.

I must highlight that one of the first things I did was to explore what other LMSs were on offer “off-the-shelf” and was quite underwhelmed by my findings. Some were more aesthetically pleasing than the outdated version of Moodle that I was using at the time, however, it didn’t matter how many trials I signed up for, or how many features they offered, none met up to my expectations of an “Apple-like” experience (my apologies to the Canvas LMS reps who may have thought I was in a position of more influence, yes, I am still avoiding your phone calls).

In short, I have done a usability assessment on Moodle because that is the software in use within my organisation. My reasons for doing so are (a) because of the students who have to interact with Moodle (b) because of the lecturers who have to battle with Moodle on a daily basis (c) because I have to use it, and (d) because UX is actually kind of fun! As a side note, I would be surprised if, in this start-up culture we are in, no one was developing a rival, so there is a high possibility that a new LMS could be created to overtake them all.

I’ve decided to put this information on this blog to increase it’s discoverability, but my aim is to log these suggestions on the moodle.tracker.org site (an online update suggestion tracker). So if you agree with any of these suggestions or think they could be an improvement, the best and most likely way to affect change would be to support these suggestions on the Moodle Tracker site.

Anyway, let’s get to it! A humble graphic designers usability assessment of the vanilla (unaltered version) of Moodle, and some visual suggestions to improve it.

This will eventually be broken into separate blog posts for quick and direct access, but for the moment, the full UX evaluation in PDF format is at the top of this post.

Comments and feedback are super welcome. As stated, I have only been focused on this for one year and am not an expert by any means. Help and feedback are appreciated and necessary! Please comment on the relevant page. Thanks!