Get that UI out of my face – I am here to learn!

Why designing better user interfaces for learning matters and five steps you can take to facilitate learning with appropriate User Interface design.

While it is often outside of a learning designer’s control and role to fully optimize all levels of the UI design, it is crucial that we understand its impact on learning and what we can do. We will look at an example screen, analyze how its design impacts learner focus and discuss five steps that you can try to implement for designing user interfaces that help learners pay attention to what really matters: the learning itself.

It takes a lot of conscious effort to create intentional digital learning experiences that aid, as opposed to distract learners. Beyond the complexity of the task, learning designers are often constrained by the technical capabilities and design of learning management systems among other factors. So it is not surprising that the inability to facilitate focus is a widespread phenomenon in digital learning experiences, with UI elements visually overpowering crucial learning content being one of the main culprits.

Over the last three years, I have had the chance to try and evaluate various digital learning experiences ranging from informal learning apps, internal corporate training modules and degree programs run fully online.

This screen illustration features a composite of UI designs that I have frequently come across over the years. Take a moment to look at this screen and note which elements draw your attention.

What information did you take in first? Chances are that your gaze gravitated towards the various UI elements and you found it hard to focus on the text.

So what’s wrong and how does it impact learning?

1. UI elements are at the top of the visual hierarchy. Instead of the learning content, it is the top bar, the progress bars, a badge, control buttons and a pop-up text box that are given visual emphasis through strong colours, size and contrasting text.

Visual hierarchy communicates order of importance. When I look at this screen, I subconsciously perceive that the most important pieces of information are how much more of the course I have to get through and what the mechanics of getting through it are. My focus is set on speed and progress measured by the number of screens I hit ‘Next’ on. Within moments, I find myself clicking through and getting excited by completing a new milestone. When interacting with such learning screens on a mobile device, even more of my visual attention is directed towards UI elements, as they take up proportionately much more space than on a desktop screen.

2. The visual relationship between related content and functions is not clear. Control buttons and information that is not directly relevant to the learning content are present at the top and bottom, left and right of the screen. Further, the extended, optional learning content pops up away from the related core text.

My visual focus is scattered across the screen, making it difficult to concentrate on any one area of it for an extended period of time. The two, related pieces of learning content are presented separately, in a different style, making it harder to connect the information in my mind.

It is perfectly possible that my perception of my experience is one of engagement – I want to keep moving forward in the learning experience and completing more and more milestones. If I’m not consciously reflecting on my mental state, I might even erroneously infer that I am also learning a lot – I hear and read such testimonials all the time. However, what’s happening is quite the contrary. I experience cognitive overload and I subconsciously perceive a hierarchy of information that is counterproductive to my learning, causing me to remember close to nothing from the content I was presented with.

How to make learning content the main focus on screen?

1. Minimize the number and size of UI elements fixed to the screen. The appropriate controls and information may vary across different types of learning and their visual design should align with the medium, purpose and type of learning. For example, visually emphasizing rewards and progress may be important for certain mandatory training modules but can easily hinder learning when deep thinking and mental engagement are required for mastering the material. Be ruthlessly critical of every element on screen – remove everything that is unnecessary.

2. Use simple symbols instead of text. Text draws our attention, takes up space and requires the addition of certain signifiers to be perceived as clickable (filled in button shapes or a bright blue, underlined font for example). Don’t waste precious screen real estate and the learner’s attention on writing ‘Next’ on a bright button when a simple arrow or ‘i’ button can do the trick.

3. Opt for softer colors and low contrast for UI elements. Each brand’s color palette tends to include lighter tones. Choose these tones for your UI and save bolder colors for emphasizing crucial learning content. Don’t shy away from simple designs and fewer colors! That said, learning screens can still be vivid and exciting but it should never be at the expense of the learner’s attention.

4. Group menu buttons and progress indicators together. I like to allocate space for this on the right side of the screen as we tend to scan screens from left to right (this would be the opposite for Arabic, Hebrew or other languages that write right to left). This helps to keep the learning content in focus and frees up more blank space to create contrast that draws the eyes to crucial bits of information.

5. Start a conversation with the appropriate people in your organization. In many cases, all of the above can sound like wishful thinking because you are constrained by the architecture of an existing LMS or platform or the client you’re working with is simply adamant to stick to bad design. Even if you don’t have the power or time to make everything perfect, it is worth it to start a conversation with the appropriate people in your organization about the impact of UI design on learning.

In your experience, what companies or products do a particularly good job at UI design for digital learning experiences? Send us a message using the form below and let us know!

References and additional resources:

Text on learning screens: The Pandemic Pushed Universities Online. The Change Was Long Overdue. (hbr.org)

Written by Eszter Mészáros, Learning Designer