Focusing learning with User Interface design

Think of the worst user interface you’ve ever seen. We’ve all come across them. They often feature things like:

• Every button/banner is animated
• Each text section is a new colour/bold/italic combination
• There’s a complex background which clashes with the page content
• All possible options and content are given to you at once

Bad User Interface (UI) design is quite commonplace and the core problem often comes down to one thing:

A lack of focus.

What is the learner meant to focus on, on that screen, at that time? User attention is so valuable that every inch of page real estate usually aims to grab it and hold it. Whether it’s video, animation, images, buttons, menus, ads, navigation, branding or a myriad of other things found on a page, all of it disperses visual impact and divides our attention. One of the key challenges in UI design is how to channel the user’s focus to where it needs to go, at the time it is relevant. Once this key goal is understood, the rest is simply the what and the how. Below we’ll look at some of the key elements of UI design and how these can be used in learning projects.

User focus

Creating a visually balanced UI design is all about providing enough visual input to engage the learner and aid the learning content without overloading the eye and mind. It’s often tempting to add extra visuals such as great photos to a page to make it ‘look nicer’ but unless the image helps the learner better understand the content, it’s simply distracting. Decorative visuals take the focus away from content and increase the cognitive load on the learner.

“In simple terms, the more of the brain the user has to allocate to the interface, the less is available for learning. You want the user to devote as much attention as possible to learning.”

Dorian Peters, (2014). Interface Design for Learning. USA: New Riders

Visual consistency

A common saying in visual design is a good design is invisible and no-where does this apply more than UI. People become familiar with a user interface very quickly; after one screen they will know what the buttons look like, what the navigation style is and what featured content looks like. If the pattern is broken (i.e. buttons in a different spot, different background for each screen, new fonts each section) the learner will start to notice them and break concentration with the learning content. This is why deciding on consistent branding, a tight colour palette and limited fonts at the beginning of a project is so important.

Conformity

Last week I came across these two buttons during an online check-out process. Guess which one I clicked to continue? Yes, the one on the right. Even though the Next button is clearly the striking, colourful one, ‘Continue’ buttons are almost always placed to the right-hand side of ‘Back’ buttons. Interaction conformity is a crucial part of UI design. Users expect certain behaviour and appearance from specific UI objects and when the pattern is broken, it’s confusing and can result in mistakes.

Another great example of this kind of implied behaviour is underlined text. In the days of pen-and-paper, underlining text simply meant emphasis. Now it almost always indicates a hyperlink and will be clicked on. Conforming to this expected behaviour allows the learner to use the interface without having to think too much about it and lets them focus on the content instead.

Progressive disclosure

How much content you first present to the learner influences the UI decisions for each screen. While segmenting or ‘chunking’ your learning content is more of an interaction design decision, it has significant consequences for the visual look and feel of your work. If your learner is clicking through dozens of screens with single learning objectives or activities on them, the UI and next/back arrows will need to be minimal and discreet so as not to wear out the eye. If on the other hand, your user is scrolling through large amounts of content, it becomes crucial for navigation/wayfinding elements to stand out and be clear when that scrolling behaviour needs to change.

Summary

UI is the first thing a user will notice about your learning design and if it’s implemented well, it will allow the learner to focus on your content without being distracted or hindered by the interface. It’s important to take the time to understand how your user interface affects your learner.

Done well, UI design can aid the level of interaction making the user experience smoother and more focused.

Iona Dierich