The Rapid Elearning Blog

Articulate Rapid E-Learning Blog - visual design for e-learning

In a recent post, I discussed some issues that organizational branding introduces to course design. In today’s post we’ll review a few of the visual design issues I often see in some of the elearning courses I review.

Below is a demo course slide that represents a few common design issues. Look over the interactive slide and we’ll review it below.

Articulate Rapid E-Learning Blog - example course for elearning

Click here to view the interactive example.

Following are a few things that stood out to me and some ideas on how to fix them.

Elements Should Follow a Consistent Design

The first thing you’ll notice about this example is that the course has a flat visual design. However, the buttons I added use the default gradient and shadowing that comes out of the box. Normally, contrast is a great way to draw attention to the onscreen information. Having a contrasting button is good. But in this case, it probably makes sense to go with the flat design of the course rather than the default buttons.

Articulate Rapid E-Learning Blog - buttons should match the course design

My fix would be to drop the default button settings and create a flat button that matches the course design. Also use a matching color scheme. Rounding the button works since it is a button and you do want it to stand out. I’d go with a softer rounded edge rather than the pill shape.

Not All Onscreen Objects Are Equal

You’ll notice that the two buttons are equal in prominence. However, which button do you want the learner to click? My guess is that it’s not the “Instructions” button.

Seems to me that “Getting Started” is key. That’s what I want the person to do. The instruction button is important and exists for a reason, but give it less prominence.

An easy solution is to add the instructions to the top tool bar. That makes them available to the person who needs them, but doesn’t make them prominent.

Articulate Rapid E-Learning Blog - add course instructions to the player bar

Or you can replace the button with a simple text link in the instructions to get started.

Articulate Rapid E-Learning Blog - get rid of less prominent buttons

Either way, you give less prominence to the “Instructions” button and place more focus on the “Get Started” button.

How are You Revealing More Information?

Hover effects are great for elearning courses. They expand the screen’s real estate since the information is not available until the person activates the hover. Thus you don’t need to reserve space for that information on the main screen.

In this demo there are a few issues with the hover effect:

  • Do you need instructions when the instructions are so obvious? If the button says “Get Started” I probably don’t need an additional box that states that the button is for getting started. It’s redundant and seems like a waste of time and effort.
  • Assuming the call outs are necessary, don’t use the defaults. Instead, have them match the course’s visual design.
  • The call outs are different sizes, the tails are different, and the alignment is off. That needs to be fixed. They’ll look better and more polished if the alignment and sizing is consistent.
  • One of the callouts overlaps one of the other buttons. This is probably fine. But as a general rule, I try not to block other interactive objects on the screen if I don’t have to. Just something to consider.

Articulate Rapid E-Learning Blog - create consistent design elements in course design

A simple solution to some of these hover elements is to create a hover dock. This is a place on the slide, where all of the mouseover information is revealed. This way you ensure consistency and don’t have to deal with the box size, colors, or shapes.

In the image above, the space between the buttons could be used as an area to reveal information. Since this is a clean space, you could get rid of the call out boxes altogether. This lightens the design and offers more white space.

Articulate Rapid E-Learning Blog - create white space in e-learning course design

If you did want to have a call out, then do something like the image below were the call out is a bit more subtle, matches the design, and is connected to the button.

Articulate Rapid E-Learning Blog - make callouts more subtle

Here’s a made over demo, where I show a few different ways to modify the slides.

These types of issues are common to many of the courses I review. The good thing is that they’re really simple to fix. The key is that your design is intentional and that by fixing these simple issues you present something more polished and professional. This is really important if you have limited graphic design experience and have to do all that work by yourself.

The other point I’ll make is that a lot of this is subjective. Do what you feel works best, but be consistent in what you do.

How would approach some of these design issues? Please add your comments here.

Events

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for e-learning, instructional design, and training jobs

Participate in the weekly e-learning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool e-learning examples to check out and find inspiration.

Getting Started? This e-learning 101 series and the free e-books will help.



16 responses to “E-Learning Design Series: Visual Design Tidbits”

February 18th, 2014

Hi Tom

I just want to thank you for your interesting blog posts. I´ve been following you since 2011 – and pretty much read all your prior posts as well.

I do not work with e-learning (would like to), but I have learned a lot about PowerPoint from you. And I just LOVE PowerPoint <3

I don´t know if you know about the "Happy Birthday Colin" viral event – a mothers facebookpage to wish her son, who hasn´t any friends, a happy 11th birthday? Well, I made him a video to congrats him – in powerpoint. Thought you would like to see it, since you have been my great teacher 😀

https://www.facebook.com/photo.php?v=10152213361808288&set=vb.791403287&type=2&theater

Keep up the good work!

Best wishes
Dorte

Great article, tips and suggestions! 🙂

February 18th, 2014

Tom, I understand the desire to keep the buttons flat. However, if you use the standard Previous and Next buttons within SL, they are not flat. Kind of ruins the whole effect. Is there any way to change the skeuomorphism of these buttons?

Thanks for the great content week after week! I look forward to you emails. THey generate great design thoughts on my part!

Keep up the excellent work.

@Kimberlee: there are a few options. First, I’d separate the player/wrapper from the screen. So in that sense, it’s not as much of an issue.

With that said, you could not use the player and turn off the navigation buttons and build all navigation on screen which allows more control. Or there’s an SDK where the player could be customized (of course that requires some technical skill).

February 18th, 2014

Forgive the newbie question but how do you create a “hover dock”?

@exiledgoblin: Good question. It’s just a word I made up. 🙂 Basically it’s the place where all of the hovered items appear. In the blog example, it’s in between the buttons. Essentially you reserve a space on screen. This means you don’t need to have extra call outs.

Here’s a quick demo to show the difference. Slide 1 has callouts unique to the character. Slide 2 uses a hover dock where all of the text shows in the same place.

Tom,

I see in your “Upcoming Events” that you will be in Lincoln on June 11 and 12. Is that Lincoln, Nebraska?

Hillary

February 18th, 2014

I burst out laughing when I saw the leading graphic and caption. That’s just too funny. Thanks for gems like these that make me think how I can make everything consistent and more engaging.

@Hillary: yes, Lincoln, Nebraska.

@Beverly: thanks for the kind words and glad the graphic made you laugh.

@exiledgoblin: I think I am going to change hover dock to hover bucket. Makes more sense.

Hi Tom

Thanks for the tips!

One question: How did you create the instructions link in the player’s top bar?

Thanks,
Lucia

@Lucia: In Storyline, you can insert any slide as a lightbox slide on the toolbar. You do that in player settings. If I were using PowerPoint and Studio, then I’d use an Engage interaction and insert as a tab on the toolbar rather than in the slide. Hope that helps.

Thank you. Really enjoy these emails and tips.

February 24th, 2014

I’m with Beverly-hahahahahahah! Don’t know if anyone else here got the reference?

Inserting a hover message on buttons will help the user on how to navigate the course. And also i like the idea about inserting the Instruction on the top. This will be more visible for the users.