Helpful Advice for Great eLearning UI Design

There’s a lot to consider as you design and develop your next eLearning course, and just like learners, no two projects are quite the same. From our previous adventures into the topic of UI (User Interface) design, we already know that your UI should be founded on human psychology—your learners are people, afterall. We also know that UI plays a pivotal role in the learning experience, and is just as important to how much your audience learns as the content you present them with. But how do I actually develop a course that considers the learner first, is beautiful, innovative, engaging, effective, and easy to use?

Well, to make the task easier, we asked a couple of our designers, Zach DeYoung and Amy O’Donnell, to come up with some best practices you should consider as you build your next eLearning experience. Although “the UI is really dependant on the content, purpose, and objectives of the course,” says Zach, understanding these guidelines and how to integrate them into your design approach will certainly help you make more informed decisions as you work to develop effective courses. And this is true for every part of the process, from analysis to evaluation, and every step in between.

Set design standards that promote learning

There are two extremes in the spectrum of course design: 1) a repetitive and uninteresting experience that’s a bit of a snooze for learners, and doesn’t allow them to really engage with the course; and 2) an overloaded, unpredictable experience that tries too hard to show off technology, to be flashy, and to impress, but leaves learners lost as to what they’re actually supposed to be learning and how to navigate the course.

A good course falls somewhere between these extremes. But a truly great course design balances them artfully, creating a familiar and predictable environment that’s intuitive and easy to navigate, while also taking a modern approach to design that delights learners and purposefully applies technology to improve the learning experience.

“We’re taking inspiration from digital experiences outside what a learning audience usually sees,” says Zach. “There are modern interactions that have a little more engagement or interest—they take more risks in branded experiences that are online. Because we understand that our audience is human 24 hours per day, and maybe a learner eight hours a day while they’re at their jobs, we know that they have certain expectations around consumer grade design. We want to take inspiration from that design in the world and apply it to learning, which typically doesn’t put as much emphasis on brand and design as we believe it should.”

Achieving this balance—this level of design artistry—isn’t just something that can be learned overnight; even many experienced designers struggle with this in the face of changing trends, new technology, and the limitations set forth by project requirements and statements of work. But no matter what you’re faced with, you want to keep the learning environment as distraction-free as possible. According to our designer, Amy, “[you] shouldn’t have a lot of distractions on screen. [For example,] as we’re updating some of our compliance courses, we are experimenting with large type for headings, minimal text on screen, and use of negative space.” Zach reaffirms this approach, saying that when designing courses, he focuses on “white space, layout, typography, hierarchy, [and creating] intentional patterns for better clarity.”

Related

7 Deadly Sins of eLearning Design and Development

Plan for change, design for the future

When companies or institutions switch from one Learning Management System (LMS) or eLearning development software to another—or move forward with a newer iteration of the same technology—they often leave their old courses on the virtual shelf to gather dust. Yet they still rely on these courses as part of the learning curriculum. As you might suspect, there are a couple problems with this. But not to worry, these problems can be solved with the help of good design.

Implement modern design for modern learners

The first problem we need to deal with as technology changes is pretty obvious—courses built using older tech will begin to look and feel dated very quickly. As learners experience new courses in comparison to older ones, there’s going to be a drastic experience change between the two from a design and UI perspective, especially if it’s been a while since a significant software update. You want your learners to have the best experience possible, and your courses should reflect that. From a design perspective—and also from a budgeting standpoint—make sure you are providing an experience to your learners that’s visually modern and reflects advancements in human-computer interaction. Or, as Zach more succinctly puts it, “keep your style up to date to reflect current trends, technology, and knowledge in the learning sphere.”

Align design between learning experiences

The second problem we face when old tech meets new, or different learning experiences clash with one another, is that of consistency. You want your learners to have a consistent experience throughout the eLearning environment. Consistency allows learners to focus on the subjects at hand rather than trying to navigate inconsistent UIs or dealing with content presented in a format that’s just different enough to be annoying. We touched on this previously in relation to cognitive overload

To remedy this, make providing a consistent experience among your best practices, and make changes to improve usability when it aligns with where you see the future of your course design going. Amy spoke about just these kinds of changes that she’s implementing for a client. “We’re updating the navigation in a way that’s still user-friendly, but isn’t the standard ‘next and previous’ buttons in the bottom right-hand corner. For instance, we are implementing a vertical navigation inside of [Articulate] Storyline to closely mirror the mobile experience inside of Articulate Rise [in other courses for the client].”

Leverage branding for increased usability

With a focus on consistency in eLearning experiences, there’s one point which is frequently overlooked—branding. When we design eLearning courses, they’re often for corporate or institutional clients with well-defined brands whose staff use other software programs that have brand experiences incorporated into them. As people use the software, these design elements and interfaces become familiar, making UI navigation second nature. 

Creating an on-brand experience is key to maintaining a familiar environment for your audience, and as such, to designing a quality UI that’s easy to use. Zach confirms the importance of this, saying, “you need to consider the whole brand, not just fonts and colors. Make sure your tone is right, the UI is familiar to the user, and that it utilizes a familiar design language as other on-brand interactions within the organization as inspiration.”

It’s important to note the emphasis that Zach puts on the word “inspiration.” Leveraging your brand doesn’t mean directly pulling design elements and logos out of your brand style guide and slapping them all over an eLearning course to remind people that they’re taking this course because it’s their job. Learners are well aware why they’re taking it and who they work for. It does mean designing a custom eLearning experience that pays as much attention to the voice and style of the brand—its feel—as it does to other design elements. By incorporating the spirit of a brand, along with a familiar layout and navigation elements, you’re promoting consistency and reducing distraction, again allowing learners to focus on the content of the course rather than its delivery method.

Deliver a great experience with a great UI

If you haven’t noticed, one commonality all of these best practices reinforce is maintaining a learner-centric focus throughout the design and development phases of eLearning course creation. In short, make sure that you—or your designers—are actually designing for your audience, and that you’re designing courses in ways that improve clarity in the subject matter. 

  • Focus on your design process—set graphic design standards that promote quality and consistency between eLearning modules. 
  • Keep the on-screen experience clean and simple—ensure learners don’t get lost amid your design. 
  • Analyze your layout—use design as a tool to promote pattern-based learning. 
  • Be intentional with typographical choices—use typography that’s easy to read and on-brand, but also visually pleasing. 
  • Don’t be afraid of negative space—thoughtful use of white space is more impactful and easier to navigate than a screen of cluttered content. 
  • Maintain a logical hierarchy in your design—use headings, subheadings, and other design and content elements that allow learners to clearly relate concepts to one another.
  • Promote consistency between your internal learning experiences—reevaluate and redesign courses when necessary. 
  • Allow yourself to be influenced by your learners—draw inspiration from your audience’s design expectations based on their experiences in the world around them.
  • Leverage the brand experience that you’ve worked so hard to craft—use it to drive engagement and a feeling of seamlessness between the software learners use day-to-day and the learning engagements they may only interact with from time-to-time.

By implementing these best practices, you’ll create more engaging learning experiences. You’ll improve your learners’ understanding of the materials, the amount of information they retain, and the knowledge they’re able to create. You’ll generate excitement in your brand and show your dedication to promoting professional and personal development. And lastly, but certainly not least, you’ll demonstrate to each learner and all of your stakeholders that investing in well-designed custom eLearning experiences helps form knowledge which can be shared long after a learner completes a course.

How can your eLearning have great UI design?

We'll help you design for your audience.

Here's how
The Latest
Projects
  • VetBloom A blockchain-based credentialing platform for veterinary specialties
  • ACIST Medical Systems Lifelike 3D product training to guide service techs on the job
  • Best Western Hotels & Resorts Helping transform brand culture with fresh, energizing ILT