UX design for online learning: What learners want

Have you ever used a product where its functionality and navigation made complete sense and was flawless and intuitive for you as a user? If so, then you’ve experienced a user experience design done right! This blog will share some tips and tricks on how to design learning products that implement UX design tools strategically to benefit your target learners. If you’re launching or improving an online or hybrid program, this blog can help you as you configure the online components for your learners and other participants (aka your ‘users’).

For effective online learning design, it’s important to keep the user in mind, and that means understanding their needs in designing a user experience (UX). A product that the learner uses to access the educational content, which can include a website, app, or learning platform is known as the user interface (UI), while the user experience (UX) refers to the navigational experience of using that interface. The direction you choose to go in to host and deliver your course or other form of learning experience, will determine the amount of flexibility you have with the UI and UX – from a 100% customizable UI/UX to the ability to configure the UI/UX within a predetermined set of features, to a product that is more or less on rails offering you the ability to add and edit content but little else.

Here’s an example of an eLearning UI, using the Teachable learning management system. Here are some elements of the UI that we can see in the left-hand column of the image:

• The curriculum is in a progression of learning in the left column. 

• The level of completion is indicated at the top of the curriculum in the form of a percentage. 

• The blue highlight indicates where the learner is currently – which content is currently being displayed.

• Circles beside each learning object indicate whether a topic within the curriculum has been started (half filled circle), not started (empty circle), or completed (check mark).

• Icons indicate the type of learning object that can be found within the curriculum, including horizontal lines which signify text-based content and “play” triangle within a rectangle with rounded edges which signifies a video learning object.

Now watch how this UI comes to life as a user experience (UX).

As we can see in this short video, the curriculum UI allows for easy navigation through the learning content at any point in the learning process. 

When creating eLearning a good rule of thumb is to keep things simple, relevant and in-line with intended learning outcomes. For next steps in your UX design approach, we’ve consulted our P&A experts and other industry standards to compile a list of best practices that you can consider when developing eLearning with your users in mind:

Consider learner-centered design. Create a program with your learner’s needs in mind and ensure to meet their expectations. What kind of course do they intend to take? What format would best suit this type of content? What is their intention for taking this course? Where do they expect it to lead them afterwards? All these questions can help advise your approach in content format, display and user functions when scoping out your own platform or configuring a licensed one. Learn more about key strategies and benefits of learner-centered design here.

Focus on your learners’ experience. Oftentimes in developing an online course we become overly concerned with what and how we should be instructing but if we shift our focus to what the learner will be doing throughout our course, we will design for more active and engaging learning experiences.

Consult your learners. Consider shadowing and talking to your target learners and users. Have them pilot and user test your product and listen to their feedback. Monitor what they do, how they navigate the platform, what is intuitive to them and where they come across issues, confusion or frustration. This feedback will help you improve on your designs, developing better iterations until you reach your most viable and effective learning experience.

Prioritize learning. There are so many elearning options available today, it can be easy to think that the best way to have a course stand out or impress the learner is by providing an innovative UX. A good example of this is the integration of gamification through points and leaderboards where it may not be needed because learner motivation is primarily intrinsic. The result is that unnecessary features add to the cognitive load and alienate the learner/user potentially making learning harder than it needs to be. Be thoughtful about incorporating useful features where possible. Break the tendency of wanting a higher quantity of extravagant and complex features within the system and shift your focus to building features that have learning value and serve a clear purpose. 

Simplify the navigation. Information should be easy to find, such as when choosing between lessons or sections of material within the course. Content should be chunked and make sense in the way they are categorized together across the platform. Ultimately, a learner should not have to question how to do something, such as close a pop up or find the next lesson within the learning program.  

Form follows function. When considering navigation, ensure everything included has a specific purpose first and foremost. How the element looks can come second.

Here are some tips to consider to optimize the functionality of elements in your design:

• Keep a clean interface: no unnecessary buttons, links, forms, etc, have an efficient use of white and negative space, and no cluttering of texts or images.

• Ensure consistency in elements and logical flow: for example use collapsible sidebars for distraction-free reading and group different categories of content together. For example, keep “about the course” information such as the syllabus, navigation information, and support together. 

• Display objectives clearly - does the learner know what their objectives are when they need to? Do they have everything to support their learning? 

• Progress visualization – this feature helps students measure their progress and helps them see what they have completed, how much time they have left to complete a certain lesson, and reference where they are situated within the learning program or course. A sense of progress can encourage continued learning.

• Use prescriptive language – give clear directions and use call-to-action buttons to start or continue the lesson, etc.

• Multimedia – use different media types where possible but only where it makes sense to do so in relation to all other components. Diversity in content and elements can enhance student engagement.

We hope these tips can support you in your next eLearning user experience design. Don’t forget that platform analytics and user feedback can also lend a hand in improving a program’s user experience over time. If you’ve got questions about how you can measure the impact of your program and find out how to improve it, check out our framework Report On Your Learning Impact.