Today’s learners are discerning. They are used to using high-quality websites and consumer apps that provide an excellent user experience. They are used to intuitive navigation, aesthetically pleasing visuals, and little details and touches that make even a task as mundane as online banking a little more human.

Then, they log on to your LMS to take some required training. Does it measure up? Is the experience your digital learning provides in the same conversation as the excellent digital experiences we are all used to these days?

For many organizations, the answer is no.

Better Design = Better User Experiences = Better Outcomes

If you want learners to gain new knowledge and skills or (gasp!) change their behaviors, the user experience of your learning solutions matters a lot. Even if you use sound instructional design and design thinking principles to conceptualize the right solution, you’re still only part of the way there. When the time comes to start building your course, game, app, or learning portal, sound visual and user experience design are critical.

Research supports this conclusion. For example, the research behind the Gestalt Principles of Visual Perception and Design indicate that the graphic design of your learning solution (the proximity of text to images, the negative space, the clean lines) is just another piece of the puzzle when it comes to facilitating proper learning. If you organize your information and images according to these principles, your learning solution will look beautiful and be more effective.

So there you have it: great design matters. To help you improve the user experience design of your learning solutions, I spoke with Jake Huhn and Kathryn Steele, two of the fabulous designers at Bottom-Line Performance. They offered six basic tips that are easy to put into practice. Use these tips as a guide the next time you’re designing digital learning… or use the tips to evaluate your training vendor’s work.

1. Avoid “Graceful Degradation”; Use “Progressive Enhancement”

Graceful degradation has been a commonly used design technique for years. In simple terms, it involves designing the full website/desktop eLearning course first, then creating the mobile experience so that it “degrades gracefully” from desktop to mobile.

This design approach can set you up for problems later on. For example, what if you crammed so much stuff on the screen that there is no good way for it to be reduced for mobile?

The solution is to use the “progressive enhancement” approach. This approach starts with the simplest, most stripped down experience, such as the mobile version of a course, and then uses this as the basis to build the desktop version. Progressive enhancement makes it easier to add complexity later on and provides greater flexibility for future changes.

Case in point:

We were working with a client who needed a course that provided a great experience on desktop and mobile. Their LMS requirements meant that a responsively designed solution was out of the question, so we used Lectora’s mobile authoring capabilities.

To make sure the content was optimized for the phone, we designed the mobile version of the course first, then adjusted it for desktop. Going from the smallest screen to the largest, instead of the opposite, made a huge difference in the learner experience.

A lot of people design for graceful degradation – the process of designing how a large site works for smaller sites first, essentially going from desktop to mobile. A lot of people subconsciously use graceful degradation because that’s what was most common when mobile first started to come out. It wasn’t the most common device. But now mobile is everywhere and it has to be the forefront device. So that mobile-first mindset has to be present the entire time you’re designing.

2. Use paper prototypes

Game designers and app developers are familiar with the importance of this step, but eLearning developers often are not. Before you start building out your design, do it on paper first. Don’t touch Photoshop (or your authoring tool) until you’ve drawn everything out on paper and tested it. Paper prototypes allow you to focus on the entire user experience before you invest precious time building out functionality.

3. Use the illusion of three-dimensional space

Speaking of paper, you also want to incorporate material design in your design process. Material design uses slight shadowing to give the illusion that you’re stacking things on top of each other. (It’s called “material” design because it’s mimicking paper.) In UI and UX, effectively using this pseudo-three-dimensional space, so that your brain can keep track of what layer you’re on, is incredibly effective at allowing a user to know where they are at all times and not get lost in your UI.

Compared to material design, skeuomorphic design tries to mimic the real world. For example, that’s where desktop “folders” come from. This was a big trend for a while. But digital experiences easily bogged down with this level of detail. In response, most designers went the opposite direction towards minimalism, which made everything extremely “flat.” This wasn’t idea, either! Material design allows you to achieve a healthy balance between skeuomorphic and minimalist design.

4. Be conscious of white space

Speaking of minimalism, make sure you use white space and margins. This has been a trend every year for about the past four years now. And it’s a trend again in 2018 and it’s one that won’t go away anytime soon. So you need to be conscious of your white space and margins. The wall of text, for example, can be extremely debilitating.

5. Make sure user can get through entire experience with one hand

No one likes needing to use an app or website with two hands on a phone! Keep this in mind while designing and make sure learners can easily complete your mobile course using only one hand. Use the thumb as your guide; can a learner easily navigate 90% of the learning experience using just their thumb?

6. Use subtle animations

Subtle animations in digital learning can make a big difference.  If you hover over a button, for example, it could wiggle. When a menu opens, it could do so with a “drawer” animation. Again, your learners are used to seeing details like these on most websites they use. Adding them to your learning experience can greatly improve learners’ initial impressions and overall experience.

We’ve included lots of examples of subtle animations all over our BottomlinePerformance.com website. Have a look around to see some examples! You can also view an example of good subtle animations here.

Keep in mind that for eLearning, animations like these may or may not be possible depending on the authoring tool you are using. You’ll want to plan carefully during the design phase if animations are desired.


Want to learn more? Download our Mobile Mindset eBook. It’s not about making everything mobile, but about creating the best possible learner experience while also making the training we create ready for change.