Designing for learning is different to designing for other digital mediums, but that doesn’t mean we should ignore tried and tested design principles. In fact, designers could do with reaffirming some of these foundations to avoid the kind of experience that feels clunky or “over-designed”.
However, design for learning does differ from other forms of digital design. Learning design shouldn’t grab the user’s attention, but rather create an environment where the user can focus more on the content. And in learning scenarios, user will usually have a longer seat time than on the average website, so balancing user engagement without distracting them from the content can be quite a challenge.
So here is an in-depth look at the ten most important ones to help you navigate it– the ten design commandments!
1) Create a learner persona
You can start by asking yourself some simple questions:
- Who is my target audience?
- How comfortable are they with technology?
- How familiar are they with the content?
- Is it the first time they’re being introduced to these concepts?
- What is their job role?
Answering them can help begin to build an idea of who your user really is, and this can drastically impact the style of design.
By creating a learner persona, you can easily avoid missing your target audience. For example, if the learning is aimed at recent graduates, they won’t relate to you talking about things in the world of work. They’ll instantly feel like the content isn’t appropriate and you’ll have lost them before they’ve even learnt anything.
Building a persona before starting design can dramatically change how the design should function. If the target audience consists of stockbrokers, for example, you can incorporate things from their everyday work life to deliver content to them.
Scrolling information across the top of their screen like a stock ticker draws a smile and makes the user feel more comfortable in their environment, enhancing their ability to learn. It also makes the learning feel tailored to them, increasing engagement.
2) Know your audience
Intrinsically linked to the first point, knowing your audience allows you to accurately identify the visual tone of voice. If your learner works in the legal department of a bank, for instance, using elaborate animations probably doesn’t reflect their everyday work life. Although this doesn’t mean your design has to be boring and grey!
On the flip side, if you’re designing a course aimed at 20 year olds in the general public, using a vibrant colour pallet with snappy animations and giving the course game-like qualities will engage them.
This is all a part of speaking the same language as your learner, communicating in a way that they’ll understand and allowing them to relate to their environment.
3) Consistency builds confidence
Within traditional user experience design, one of the key tenets is making interactions and movements feel similar. This encourages the learner to explore how things work, and it’s also one of the most important learning design principles. After seeing how something works a couple of times, they become familiar and inquisitive about the learning point.
Being consistent with design means limiting the number of ways you present the learner with actions. This means that they don’t have to think about how to make a selection can focus on what to select – hopefully the correct option!
Users often come into a learning experience with the expectations of how something should work. This is why following learning design principles and creating learner personas is so vital – you need to match those expectations. For example, if you’re creating a mobile-first solution for a user base who spend a lot of time using Twitter, it would be beneficial to use a similar layout. Think useful navigation that’s easy to access from the bottom of the device and a menu in the top right corner to mimic Twitter.
4) Break the system
The previous point was all about building consistency in designs and allowing the user to feel comfortable in their environment. So how is breaking that system going to help!?
Well, sometimes it can be an essential tool in your arsenal to communicate that this content is in some way different without having to actually say anything (classic Ronan). It gets the learner to sit up and take notice.
If they’ve been presented with content being delivered in a particular way throughout the course and then suddenly they receive feedback or instructional text that’s visually different, that acts as a sign that this content is important.
Another advantage for having feedback delivered in a different visual style can help break up the content to let the learner catch their breath. This can prevent cognitive overload and promote assimilation of the prior learning points.
5) Whitespace is your friend
Far too often, screens are overloaded with content to reduce interactions. You need to strike a balance, as too much content can have an equally negative effect on the learner.
A risk you run when using every bit of space on a screen is that when the learner arrives on the page they’re greeted with a wall of text. That makes the content far less appealing and harder for the learner to digest.
The solution to this problem is allowing the page to have whitespace, defined as ‘the area between design elements’ by the Interaction Design Foundation.
Whitespace is something that good websites use to create a premium feel to the experience. By allowing the content to breathe, the user is can focus on the message.
As well as decreasing distractions and acting as a barrier for overloading screens, whitespace can also be used to highlight key pieces of information. Instead of just making a button bigger or text flashier, by increasing the whitespace the eye is naturally drawn to the element in the centre.
6) Reduce clicks
This is another thing that websites do well, but learning often doesn’t. Learning design principles are still catching up! Letting the user navigate through content with as little resistance as possible makes the experience feel well planned. This can be translated into design for learning quite simply.
Say, for example, you’re designing a testing interaction using a multiple-choice question that requires a single response. It’s not necessary for the learner to select an option and then confirm. You can just remove the confirmation click and automatically submit the answer once learner selects the option.
This is where keeping interactions consistent is key. By using this same method throughout all previous interactions, the learner will know that as soon as they click the button the response will submit.
This kind of simple click-saving can be applied throughout interactions in a variety of ways to drastically reduce the amount of clicks a learner will make over the duration of the course. Let them focus on the things that matter – the learning.
7) Understand the content
It’s all too easy as a designer to ignore the content that is going to populate a screen and just craft a sleek looking piece of digital design. However, a learner’s experience can be greatly improved by being aware of the type of content that is going to be delivered.
For example, if you know learners are being introduced to a concept for the first time, having a busy screen with lots of layered assets is just going to distract them. In this case, it would be far more beneficial if the screen contained a subtle background with a minimal feel where the elements aren’t trying to grab the user’s attention.
8) Give the learner a break
We’ve talked a lot so far about all the different ways we can get the learner’s absolute focus. But even though we’re trying to impart as much information as possible, sometimes they just need a break!
Giving a learner a change of pace keeps them on their toes. Providing fresh interactions that deliver content in a new way enables the learner to take in more information. An effective way this technique can be applied is through video or animation. This lets the designer to take control of the pace of the learning and gives the learner a break from having to read content. They’ll love you for it.
9) Use sound to immerse the user
Sound is such an underrated tool and one you don’t hear about enough. It makes up a large part of really selling the experience through immersion. Audio cues such as listening to a voicemail left by a colleague who is running late into work are great. But think about the small details that take it to the next level. How about adding the background noise of a train station to add further realism to the scenario?
Strong sound design takes pressure off your visuals and your learner. Any boost to immersion lets them act more like they would in real life, supporting true behavioural change.
10) Allow the learner to take control
Where possible, give the learner a choice to make and a sense of agency. Optional content that provides deeper knowledge on a topic does this. Or even making every unit or chapter available from the offset can work particularly well in longer learning interventions.
Taking the example of a course with a 60 minute seat time, a learner may not have time to sit down and go through the whole curriculum in one go. Indeed, it’s often detrimental to learning; splitting into manageable chunks helps with knowledge retention. By enabling the learner to craft their own learning path it encourages learners to consider their own strengths and weaknesses and gives them ownership.
It also lets learners pace themselves. If they know they’ve only got 5-10 minutes, tackling a unit they’re unfamiliar with is probably unwise. But taking a unit on a topic they’re used to will act as a recap or top up on knowledge.
Learning design principles – a summary
Overall, when designing for learning it’s important not to ignore the principles of design that would be applied to any other form of digital design. However, you’ve also got to focus on what makes learning different and use these differences to your advantage. That’s why following these learning design principles is so important.
This all starts with understanding your learners needs and the kind of digital experience they’re used to as this can uncover elements from their daily working lives that can make the experience feel more natural or comfortable, and by understanding this you can speak to them in a language that they’ll understand. Don’t be afraid of whitespace, it’s your friend and will stop you overloading the screen with content and greeting your learner with a wall of text. Encourage exploration by being consistent with functionality to give learners confidence. Break this occasionally as a device to introduce important content in a way that stands out to users. Provide the learners with a variety of pace throughout the learning and deliver content in a number of digestible ways. Finally, give the learner the freedom to carve their own path making them feel like they’re in charge of their own development.
Combine all of these and learning outcomes will rocket – as if by design!
