10 Mistakes in Elearning Design: Is This Interactive?

This is the third post in my series, 10 Mistakes in Elearning Design. The first post focused on Redundant Navigation. The second focused on Inconsistent Navigation. Now, let’s look at frequent problems with the way developers build in interactivity.

Beyond navigation interactions, interactivity refers to what the learner is doing in a learning object. What opportunities are there for the learner to “touch” the screen?

At its most basic definition, interactivity is whatever the user is able to click or tap. Beginning elearning designers tend to build in limited interactivity, simple things like click-to-reveals or hover-to-reveals. These interactions are a great place to start in elearning development!

Designing limited interactivity offers an opportunity to practice good usability. If a designer isn’t getting limited interactivity right, more complex interactions are not going to work well for a learner.

Mistake #3: Is this interactive?

This Original Design features several facts about dogs. There are also two navigation buttons camouflaged among the facts.

What do you think you can click on this screen?

The issue here is that the visual design is identical for every element on this screen: both the facts and the Previous and Next buttons.

Objects that are clickable must have their own unique visual design to differentiate them and to indicate to the user that they are, in fact, clickable. If an object looks identical to something that is clickable, the user will try to click on it and be confused or frustrated if nothing happens.

Let’s take a look at an initial Redesign.

In this Redesign, the dog facts are now differentiated in visual design from the navigation buttons. Also, the Next and Back buttons are placed away from the dog facts at the bottom of the screen.

This Redesign is already much more usable! But the outline of each of the dog facts box may indicate “clickability” to the users as well, so let’s look at one more Redesign that goes a little further.

Here’s another Original Design. It’s slightly clearer what’s clickable here and not. But would you think you can click on the individual dog facts? Or the box that tells you what to do?

Let’s look at the Redesign.

In this Redesign, the navigation buttons are again placed neatly on the bottom of the screen. But the dog facts have been redone as markers. The facts are only revealed when the marker is clicked:

See the marker that is now grayed out? This is a much tidier and usable design! The markers look clickable and the visual design is uncluttered. The more text you can remove from a screen, the better. Hiding text in a click-to-reveal like this is also a more interactive and enjoyable experience for the learner. Again, this is limited interactivity, but done well it contributes to a positive learning experience.

Interactivity Takeaways

You shouldn’t have to tell user where to click! Ideally, anything clickable should look clickable.  Clickable and unclickable should have distinct styles.

Also, remember that plain text never looks clickable (unless underlined). However: Underlined Text looks like it’s a hyperlink.

Next Time

In my next post, we’ll begin our study of simple visual design principles with Mistake #4: Colors Lack Contrast!

See all of the 10 Mistakes now on my YouTube Channel!