Recently, I’ve found myself working with businesses who need to train vulnerable or computer illiterate learners. A common complaint about traditional e-learning designs or learning management systems, particularly for these audiences, is that users find them difficult to navigate, presenting unnecessary roadblocks in the learning experience. Before a learner can learn, they must circumnavigate unintuitive software. This presents an opportunity to design something better.
They say that movie editing is an invisible art and that editing is at its greatest when it’s not noticed. Poorly or over edited movies take you out of the scene and remind you that you’re watching a movie. In the same vein, a difficult-to-use LMS takes you out of the content and interrupts your learning.
Disruptions are particularly problematic today where attention spans are dwindling and often spread across multiple tasks at any given time. Browsing Twitter while watching TV, checking emails while eating lunch, or responding to messages while learning. We don’t want to introduce an unintuitive LMS to an already convoluted mix, providing yet another distraction.
A e-learning design with with a focus on usability and unobstructive learning really allows the content to flourish. When you take the guess work away from an interface, or remove it altogether, the focus becomes the content. And when this is achieved, knowledge retention and real-world application of this knowledge increases, alongside improvements to completion rates (which is important if you don’t have the luxury of your course being a mandatory part of a learner’s training).
It’s impossible to create a one-size-fits-all course interface. Your business objectives, learner requirements and the historical learning reports your business has collected will all impact design decisions. But what I’ve designed is a possible e-learning interface that could be adapted for a multitude of use-cases.
These were my goals:
Before I talk about the specific design decisions, it’s worth seeing the e-learning design as a whole. In this mockup, we see the how a course could be presented.
On the left, we have two layers of navigation. The left-most navy bar allows a user to navigate between different functions of the learning management system, such as lessons or discussions (which might be a forum). The white pane that follows allows users to navigate sections within that parent. If “lessons” is selected, then the white pane will display lessons within that course. And if discussions is selected, then it could show a list of conversations happening on the forum of this particular course.
On the right, we have the main window which would display the actual content of whatever has been chosen in the sidebar – lesson content or the comments within a discussion. Unlike a traditional SCORM course which might look like a 90’s PowerPoint presentation (example), this content would be scrollable. Yes, scrollable!
I tried a few colour variations on our e-learning design. I started with the muted purple tones while I defined the structure, and then moved over to the opposite side of the spectrum, to something a little more opinionated. Although I preferred the teals and golden colours of the second design, I felt the vibrance of those colours distracted from the content which ultimately broke rule 3.
3. The interface must not detract from the content
I finally settled on the blues of the third design with fairly neutral colours that would fit within business and educational environments, without detracting from the content. I needed a couple of additional accent colours; the green to indicate course progression (see the green ticks next to completed lessons) and the gold to bring attention to notifications. I then duplicated the colours with variations of opacity (75 and 50%) for secondary or tertiary information.
For a more definitive visual heroically, rather than relying solely on font-weight and sizing to differentiate between headers and sub-headers and body text, I used opacity variations too. Below you can see the lesson title with full opacity and the topic titles utilising the 75% variation.
I took the same approach on the course content itself, using 100% opacity for the headers and 75% on the body text. As an additional benefit, using this shade of grey for body text as opposed to pure black on white, is known for decreasing eye-strain and improving readability (don’t just take my word for it), which helped to support my fifth goal.
5. The content must be designed for readability
I appreciate that if this design was for an established client with pre-existing branding, I wouldn’t have had the luxury of choosing the colour palette. If I was forced to use the teal and yellow colours above, I might have had a more difficult time incorporating brand colours without drawing attention away from the content. Perhaps colour would be used more sparingly in those instances.
While the sidebar is expanded, it provides useful navigational tools to allow users to move between lessons and topics, and could provide users the ability to seamlessly switch to announcements or discussions related to the course. But sometimes a learner would benefit from fewer distractions. I designed the sidebar to be completely collapsable, allowing the content to fill the screen to meet the demands of rule 2.
2. The interface must keep out of the way when it is not required
Of course, it’s still important to be able to navigate through the topics within a lesson. In my e-learning design, the user can progress through topics using the navigation at the bottom of each topic.
Most of the e-learning clients I’ve worked with have wanted the flexibility to build up their courses using various content formats. And they’ve wanted to populate their course within the system itself rather than using a specialist course authoring tool that some of the more ancient “standards” demand (SCORM, I’m looking at you). Video, images, text and sometimes more interactive experiences (should the budget allow for it) could be incorporated.
As for the readability of these pages, I’ve incorporated plenty of white space. I’ve increased line heights to 1.5x so that the copy doesn’t feel so cramped and I restricted blocks of texts to a maximum width of 800px. Both of these decisions help ensure that users don’t loose their place in a paragraph when bringing their eyes down to the next line (ever read the same line in a book twice?).
The more whitespace around an element, the more it stands out, which is why it’s hard to find important elements on a busy and cramped page (like eBay’s account pages). Images, videos and any interactive elements added to the course content would be provided with plenty of white space to break down the monotonous text patterns.
Sometimes you want to take a look at content that follows the video you’re watching. To ensure no part of the video is missed, the video fixes to the corner of the screen as the user scrolls.
Here I envisaged that the next lesson in the course would seamlessly load as the user scrolls past the end of the current lesson, negating the need for any form of course navigation. On one hand it might increase engagement and coax the user into completing another lesson or two, but on the other hand the learner could lose the satisfaction of clicking “next lesson” (that can feel as good as completing a chapter in a book).
As I said before, this isn’t an e-learning design that would work for every training business. But it could be a good framework to build upon if your users have struggled to use your learning management systems in the past. Designing a course interface that doesn’t hinder the learning experience will finally ensure that the content you’ve created can reach its fullest potential.
I love to chat! If you have any questions, or need some advice regarding e-learning, you can reach me and the team by emailing hello@plume.co.uk.
