Top Tips for Consistent eLearning Design

Imagine that you click into the Facebook application on your phone, only to find out that all of the buttons and search bars have moved position. You try to figure it out for a little while and end up becoming frustrated because you can’t navigate the application. 

Imagine always using an Apple phone and then trying to navigate a Samsung or vica versa.

When you think about the applications/devices/programs that you use on a consistent basis, you will notice that you don’t have to think about how to navigate them, it now comes naturally and is almost a case of muscle memory.

What about when you use something new? How do you figure out the navigation?

You may notice that some websites are easier to navigate over others. As humans we may have expectations of how a website is designed. Your eyes can look in a certain position on the screen to make an action without being told to do so prior.

- When you want to ‘exit’, where would you look on the screen? The top right?
- If you wanted to find a ‘search bar’, where would you look? The top of the screen?
- If you wanted to discover ‘copyright information’ about a website, where would you find this? The bottom of the screen?

We as humans look for patterns and will use past experiences to support us in using unfamiliar systems. Life is easier for us when we can figure out how to use a new application/device/program without having to watch YouTube tutorials or scroll through forums to achieve what we need to.

Online shopping websites are a great example. I use a variety of online shopping websites and the process is quite consistent amongst them. When I find a new website, I therefore expect a similar process. Take a look at the different online shopping websites below. Do you observe any similarities in how they are designed?


Pretty Little Thing Online Shopping Website (Pretty Little Thing, 2018).


Boohoo Online Shopping Website (Boohoo, 2018).


Missguided Online Shopping Website (Missguided, 2018).


ASOS Online Shopping Website (ASOS, 2018).

If an online shopping website looked significantly different from the designs shown in the above examples, I can imagine that I would become quite frustrated and potentially not spend much time on the website (which is probably great for my bank account but not so great for the online shopping business). This is a design that I am familiar with and I understand how to navigate it whether I have been on the site before or not.

These online shopping websites are a great example of the importance of consistency in design. The same goes for eLearning design. We want our users to be able to complete an eLearning experience without finding themselves staring at a screen and not knowing what to do next. If a user must figure out a new way to resolve a similar kind of problem in a design, they will become confused and frustrated at the same time (Minhas, 2018) and that’s the last thing we want for our users.

Here are some tips for how to incorporate consistency into your eLearning projects.

1. Incorporate Consistent Branding

A consistent design across your eLearning courses promotes familiarity and bonding (Soegaard, 2018). If your learner sees a familiar look and feel, their brain can make a connection with the course and have an automatic understanding of where it comes from and how to navigate it.

When you are creating an eLearning course, think about what courses already exist for your company/the client and use these as a guide. If it’s your first eLearning course, use it for future projects.

Make sure that elements are consistent across your eLearning courses. This involves elements such as the language used, fonts, theme colours and the navigation bar. If the navigation bar runs along the bottom of the screen in one course, position the navigation bar in the same position on the next course. This consistency can eliminate unnecessary confusion for your learners (Wong, 2018) and reduces the learning time for a product as a user becomes familiar with the given experience (Minhas, 2018).

A great way to achieve a consistent brand across eLearning projects is by creating a course template. If you use Articulate Storyline, check out this blog on how to create a course template in Articulate Storyline here. 

2. Look at What is Out There

When we are designing our eLearning solutions at Belvista Studios, we put effort into creating a design that is somewhat globally recognisable. By this I mean that we look at how websites, applications and other online learning experiences are designed out in the world.

Have you ever used an app and figured out the navigation easily because it reminded you of another app that you already use? When I first started using the Articulate Storyline eLearning development software, I had an experience of familiarity despite never using the program. The program, to me, was like Microsoft PowerPoint and therefore I found figuring out the navigation quite simple compared to other new programs I had worked with.

When you are designing your next eLearning project, search for ‘modern app layouts’ or ‘modern websites’ and find consistent elements and themes. Once you have collated these consistent elements/themes, incorporate them into the design of your course. Your learner is more likely to have come across a similar type of navigation and therefore be familiar with it. This in turn creates a better user experience and allows your learner to focus their energy on the learning objectives rather than how to navigate the course.


Example of a modern application design/layout (Tubik, 2017).

That’s it for this blog on top tips for consistent eLearning design. I hope that these tips add value to your eLearning projects and have provided you with insight into the importance of creating a consistent design.

To end this blog, I want to leave you with this quote (that I absolutely love).

“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” 
- Jakob Nielsen.

                                                         References

ASOS. (2018). Homepage [Online image]. Retrieved from http://www.asos.com/.

Boohoo. (2018). Homepage [Online image]. Retrieved from https://www.boohoo.com/.

Minhas, S. (2018). Consistency – A Key Design Principle. Retrieved from https://blog.prototypr.io/consistency-a-key-design-principle-5d125469da8e

Missguided. (2018). Homepage [Online image]. Retrieved from https://www.boohoo.com/.

Pretty Little Thing. (2018). Homepage [Online image]. Retrieved from https://www.prettylittlething.com/.

Soegaard, M. (2018). Consistency: MORE than what you think. Retrieved from https://www.interaction-design.org/literature/article/consistency-more-than-what-you-think.

Tubik. (2017). Watering Tracker App [Online image]. Retrieved from https://dribbble.com/shots/3997043-Watering-Tracker-App.

Wong, E. (2018). Principle of Consistency and Standards in User Interface Design. Retrieved from https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design.