How to improve your elearning UI with better visual communication

Did you know, 90% of information transmitted to the brain is visual. And your brain processes visuals 60,000 times faster than words. Visually-rich training materials keep the eyes busy and therefore, the brain more alert and active to absorb information. In this blog we share tips from our webinar on how to improve learning experiences through better online learning UI design.

As well as making your content look brilliant, great corporate learning UI (user interface) design helps with learning retention. In fact, educational researchers believe that the information is six times more likely to be retained when presented visually.

Many people think of visual communication as the look and feel or graphic design of your learning content – e.g. the colours, images, fonts. Of course, this is important, but it’s much more than that. If you’re producing a design for online learning, you need to be thinking about how your UI supports the whole corporate elearning UX (user experience), including:

• How the content comes together visually as a complete experience
• How intuitive and easy to understand the navigation and interactive elements are… i.e. how do your users know what to do?
• How images are used to support your content in a meaningful way

Great digital elearning UI design will make it as easy as possible for your learners to understand, learn and apply knowledge and skills in their day-to-day lives.

4 ways to improve your corporate elearning UI through better visual communication

1. Make layouts easy to digest

Smart layout choices can make your content more scannable, easy to absorb, and quick to navigate – respecting users’ time and avoiding frustration.

Think about the layout that would work best for your content and make use of page sections, columns and spacers to make it digestible, with a clear flow.

In the storytelling elearning example (pictured above), you can see how a scrolling page has been set up. There are clearly defined sections, grouping content together in a meaningful way.

It is clear at a glance which areas of the screen are presentational and where there is a required action for the user.

Visual imagery is also used in different ways to support the content. On this page background imagery has been used to set the scene and then additional images feed in further down to illustrate key points in the story.

You can learn more web-style learning design here.

Layout tips:

• Use containers to break up your page visually. Think about where you may want to use a background image or color fill to clearly distinguish the different sections of your page.
• Use separators to add space around your content so that your content is easy to digest and not bunched up. This is what people often refer to ‘white space’ (except it doesn’t have to be white!)
• Use columns to create responsive designs that will work perfectly on any device. Think about how you can use images to add more visual interest.

Not sure where to start with building your layouts for your corporate elearning design? We’d recommend wireframing out your page layouts on paper in advance. This can help you quickly come to decisions about where content might go on the page without being too precious. This guide for how to conceptualize your designs will help.

If you’re using Elucidat, you can then use Layout Designer to quickly bring your sketches to life in Elucidat.

2. Create and reuse layout elements for your online learning UI design

Using repeated elements and layouts can help users quickly grasp the type of content they are dealing with. For example, to distinguish which content is presentational and which is interactive. This also helps reduce authoring time as pages and elements can be reused (both within the project and at a larger scale across multiple projects).

To create a consistent visual approach, we’d recommend setting up recognizable and reusable styled elements. These could be whole pages, or sections of pages. You can see this approach in action in the storytelling example.

If you’re using Elucidat, why not create a shared folder with reusable assets and template projects that your whole team can use. This is a big time-saver when your working collaboratively and juggling lots of projects.

3. Simplify the navigation in your online learning UI design

Making your navigation as clear and intuitive as possible will make sure your learners can stay focused on the learning content, rather than being confused about where to go next.

Consider the user journey through the content. Is it clear at each stage how they should move between the content and where they should go next? Create a clear route through your content and personalize the calls to action for the user (no more generic ‘back’ and ‘next’ buttons!).

In the 5C framework diagnostic example (screenshot below), there are no global back and next buttons – instead the navigation has been brought into the page content area, with the interactions driving the forward navigation. It also uses Elucidat’s personalization features to deliver up relevant content based on how someone answers the upfront questions. On this ‘recommendation’ page you can see that additional links have been added within the page content for users who want to find out more, or delve deeper.

Working through your module in preview mode can really help you get a grasp of the user experience and help you pinpoint where you might be able to simplify and improve. Why not invite some colleagues to review for a fresh perspective?

4. Add visual indicators

Repeating visual cues can help embed knowledge and make it easier for users to scan content to find what they are looking for.

Try introducing visual indicators to support your learning points and signpost different content types. This could be color coding or visual icons. Make sure whatever you apply is relevant and used consistently.

You can reuse the assets you create across other materials and supporting resources within a blended learning experience.

If we refer back to our 5C Framework diagnostic example, you can see that we’ve used iconography and color in a very simple way to support each of the stages in the framework. These are repeated throughout the diagnostic (and across other content about the 5C Framework) and act as a visual indicator to support the written content and further embed the stages in the process for the user.

You don’t need to have an experienced in-house graphics team to help you create custom icons or visuals. Simple color coding or bold and clear headings can work in a similar way!

To summarize:

• Make it easy to digest – Use the different layout elements to effectively communicate your learning content
• Create and reuse – Create a consistent visual approach by setting up recognizable and reusable styled elements
• Simplify navigation – Simplify and adjust the navigation for an effective and clear user experience
• Add visual indicators – Introduce visual indicators to support your learning points and signpost different content types

Download the conceptualize guide – turn your project needs into a vision for an effective, engaging piece of digital learning.

Want more detail? Watch our 20-minute video from our webinar on this topic to get tips and insights into how to improve your corporate elearning UI design with Elucidat.

View the slides here: