5 Visual Design Tips for Gamified E-Learning

Whether you’re trying to spice up your e-learning by adding a dynamic element like a branching scenario, or you’re designing a complex and immersive interaction, good content design is undeniably the foundation for creating a great learning experience. But at the end of the day, having great content that’s well written and structured is only half the battle; you also need strong visual design to connect the dots for your learners. 

This is particularly true for gamifying e-learning. That’s because many of the fundamental game design elements identified by Dr. Karl Kapp—engagement, mastery, autonomy, and progression—are more compelling (and effective) when the visual design of your project rises to the occasion, plunging learners into the experience and supporting them as they achieve the goals of the course.

 So how can you make sure your visual design is enhancing your great content and not distracting from it? Here are five tips to keep in mind:

Tip #1: Look to Your Content to Help You Find a Visual "Hook"

Just like a writer uses words to give their material a “hook”—that little something that entices the reader and pulls them into the story—your content can help you come up with a visual or a motif that draws your audience into the learning experience.

Check out one example of using creative visuals to "hook" your learners in The Bicycle Thief, by Nancy Woinoski.

In Nancy’s interpretation of the detective genre, she uses a colorfully illustrated treatment to grab learners and bring them into her story. Instead of the edgy vintage feel so often associated with detective stories, Nancy's subject matter is a little more playful, with a visual treatment to match. 

Drawing inspiration from your content can help you identify familiar visual hooks and then narrow in on a distinct interpretation of those motifs.

For more pointers on applying game elements and techniques to your e-learning, check out Gamification Techniques: How to Apply Them to E-Learning.

Tip #2: Add More Visual Cohesion with Typography

When it comes to creating a cohesive visual design, don’t stop at graphics! Above and beyond conveying information to the learner, typography plays a huge role in conveying the mood and personality of your design. 

Have a fun, lighthearted subject? Consider using fonts that complement the mood with a whimsical or casual flair. Script or handwriting fonts are great examples of fonts you can use for conveying a more relaxed mood.

Exploring a more serious topic? Stick with fonts that are less decorative and more clean and straightforward in their styling, like Open Sans (a sans-serif font) or Rockwell (a serif font). 

For one example of coordinating font personality with the subject matter, take a look at this gamified grocery-themed drag & drop download. It uses an easy-to-read handwriting font, Patrick Hand, as body text and combines it with a more stylized scripted font, Pacifico, for headings.

These two fonts not only complement the grocery store theme by referencing the trend of grocery store chalkboard art, but they also scale well and are pretty easy to read.

This brings up an important caveat when choosing typefaces: readability always trumps style. The initial typeface I chose for my body text was a little more elaborate and less readable than I wanted, so I ended up replacing it with Patrick Hand. If the typeface you’ve fallen in love with just doesn’t scale or is too hard to read, you may be better off using a less stylized font, or reserving that more stylized choice for accent text. 

Tip #3: Design Consistent and Intuitive Navigation 

With all of the lovely visuals you can use to bring a more game-like feel to your e-learning, it can be easy to lose sight of basics like navigation buttons. But buttons need love, too!

Having clear and intuitive navigation is especially important for gamified e-learning because it’s often nonlinear, which means clicking the “Next” button probably isn’t going to move you through the course. And, added to the increased navigational complexity of gamified e-learning is the visual complexity that a richer design brings. All of that visual input can leave learners feeling overwhelmed or confused about where to click.

So how do you create a visual design with navigation that’s styled to be on-theme, consistent, and intuitive? Try using contrast and repetition.

 Contrast

 Creating contrast in onscreen elements is important because it helps learners distinguish between screen objects. In short, contrast is all about catching the learner’s eye.

You can create contrast in many different ways, including varying the sizes, weights, or styles of text to denote hierarchy and add emphasis. 

You can also create contrast with color or hue to draw attention to specific onscreen objects or text, as I’ve done in the Creative Tabs template example below.

Repetition

Repetition is all about repeating elements so the learner doesn’t have to put a lot of thought into finding or figuring out how to interact with objects like navigation buttons. For instance, style navigation buttons or icons in a way that’s similar to the rest of your graphic elements and then stick with that styling throughout the course. You can also save learners from having to hunt for where to click by placing navigation buttons in the same spot throughout the course. 

For an example of both contrast and repetition of navigation, check out this job interview simulation created by Nicole Legault. 

I love how Nicole chose to use a grayscale background to make her interviewer, Erica, stand out. And using contrast also makes the progress meter at the bottom pop (more on that in a moment ...). She also cleverly placed everything on the left so that within the first few screens, you’ve established a mental rhythm of sorts, instinctively directing your attention to the left for the next piece of feedback or to see more choices.

Using stylized, consistent, and intuitive navigation is one of the easiest things you can do to create a more cohesive and immersive experience for learners. If you’d like to learn more about it, David Anderson wrote a fantastic article, 3 Essential Visual Design Concepts, that walks through all of the basics.

Tip #4: Use Interactive Video

When it comes to pulling learners into a setting or a situation and allowing them some free rein to explore and maybe even experience the consequences of their choices, it’s tough to beat the emotional impact and engagement of interactive video. It’s one of the best visual design tools in your gamification arsenal! That’s because in typical e-learning courses, video is more often used as a way to lecture learners rather than engage them in a conversation or an activity. But with interactive video, you can introduce a cast of characters, set the stage for an activity, or let learners choose their own adventure and learn from their mistakes along the way. The creative possibilities are endless.

Check out three clever ways you can use interactive video in this free download.

Tip #5: Visually Show the Learner's Progress

As I mentioned at the beginning, one of the foundational elements of gamification is progression. A visual indicator of progress helps learners see how they’re doing and how much further they have to go before achieving mastery.

 You can see this concept on display in this delightfully animated example from Steve Andrews. By using game elements like a time limit and a question count to show the learner their progress, this engaging quiz makes identifying your own unconscious bias a fun and motivating experience.

 

What are your e-learning visual design challenges? Share them with us in the comments and we’ll chime in with some community brainpower!

And while you’re at it, follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.