3 Simple Design Problems to Avoid in Your eLearning Courses

You don’t need to be a professional graphic designer to know that yellow text on a white background is a no-no, or that the bright neon orange background is not so easy on the eyes.

However, there are some more subtle design faux-pas that not everyone is consciously aware of. Here’s a look at a few of them, and some tips on how to avoid making those mistakes in your own e-learning designs.

Claustrophobic Slides

White space (also known as negative space) is the unmarked or unused space on a slide/screen/layout. White space is a very important design element and it should be balanced with the objects on the slide. In other words, you should aim to have 50% white space on every slide. Claustrophobic slides happen when there isn’t enough white space and the objects on the slide are too close together,  touching each other or  touching the edges of the slides. Here’s an example of a claustrophobic slide:

image12

The elements on the slide are crowded and too close. It just feels a bit too “tight”. The fix: add  some white space! Here is the same slide, with all the same elements but with proper spacing around them.

image13

Ahhh! Now there’s some breathing room. That’s what white space does. It frames all the elements and provides balance.

Whispering Headlines

Why do you want your headlines to stand out? Because they introduce the slide and let the learners know what they are about to look at. Whispering headlines fail to attract attention, and are not easily distinguished from the text that they introduce. Here’s an example:

ex1

Notice that the headline doesn’t really stand out from the text that comes after it. Headlines should be significantly larger than the text that follows. Here is the same example, except this time the headline is bolded and a larger font size:

ex2

That helps a bit, but it’s still not really popping as much as it should. A few other techniques you can use to make your headlines stand out: make the text bolder, change the color or change the font. Here’s our same example once more, but this time the headline has a different font color and typeface. 

ex3

See how much our headline pops now? Your eyes go right to the headline and right away you know what this slide is all about (or at least you would if you spoke Latin!).

Similar Typefaces

When you’re using more than one type of font in your e-learning design choose contrasting fonts. In other words, avoid mixing fonts that have a similar look-and-feel (whether it be in the size or weight of the type). Here’s an e-learning slide that uses similar typefaces:

exA

It feels a little heavy doesn’t it? The fonts used are too similar, too close to the same size, and too chunky and heavy. They compete for attention and don’t balance each other out.  As we looked at in the previous example, your headline should be what grabs attention first. Here’s the same slide, but now I have switched one of the fonts to be a “lighter” style and I’ve adjusted the size of the text.

exB

There’s much more of a balance between the two fonts  in the second example.

These are just a few common design mistakes that you can avoid making in your designs. Some of these “mistakes” are very subtle, and might only be caught by a very detail-oriented eye. That being said, it’s those little details that can make a design that much more pleasing to look at. I’ll follow-up with another post about common design mistakes in a few weeks, so stay tuned!

Advertisements

The Ultimate E-Learning Design and Development Checklist

checklist

I have compiled several e-learning, instructional design, and web design checklists to create the ultimate e-learning design and development checklist. This list is thorough and covers a broad range of items. Keep in mind not every item will apply to every project.

INSTRUCTIONAL DESIGN

  • Training needs analysis is complete
  • Project constraints have been identified
  • Project plan is complete
  • Audience analysis is complete
  • Task analysis is complete
  • Various instructional methods are used
  • Objectives are clearly stated
  • Objectives include measurable criteria
  • Instructional content relates directly to learning objectives
  • Course objectives are met
  • Content is segmented in small chunks
  • Information is grouped logically
  • Major headings are clear and descriptive
  • One-third of the content is presentation
  • Two-thirds of the content is application and feedback
  • There is a summary for every piece of  content
  • Glossary is used to define key concepts  and terms

ASSESSMENTS & TESTS

  • All assessments are relevant and complete
  • Assessments are challenging and realistic
  • Various quiz methods and types are used
  • Assessments are used throughout
  • Final assessment at the end
  • Pass and fail marks are appropriate
  • Feedback is provided for questions   answered
  • Feedback is adequate
  • Feedback presented within reasonable time
  • Post course assessment/evaluation is included
  • New content is not presented in assessments or in assessment feedback

GENERAL DESIGN

  • Total design is uniform in appearance
  • Branding guidelines have been   followed
  • Use of logos is appropriate
  • Colors used are consistent and suitable
  • High visibility and contrast
  • Navigation is consistent throughout
  • There is a generous amount of white space
  • Graphics and icons are used to signify important concepts
  • Patterns and textured backgrounds do not interfere with legibility

FONTS

  • Maximum of three fonts used throughout
  • Decorative fonts are only used for headings
  • Body text uses sans serif fonts
  • Appropriate line spacing is used
  • Paragraph length is appropriate
  • Font sizes are appropriate and easily readable
  • Font colors visible against background color
  • Styles and colors are consistent throughout
  • Emphasis (bold, italics) is used sparingly
  • Body text is left justified

TESTING

  • E-learning has been tested in multiple browsers
  • E-learning has been tested on multiple devices
  • E-learning has been tested in the Learning Management System (LMS)
  • E-learning has been tested in various resolutions
  • All links and buttons have been tested
  • Accessibility features have been tested
  • Course has been tested with a screen reader
  • All audio has been tested
  • All videos have been tested
TECHNICAL

  • Project load time is reasonable
  • Shortcut keys have been defined
  • FAQ document has been created
  • Hardware requirements have been   identified
  • Software requirements have been   identified
  • Dimensions are optimized for target audience
  • Pages can be printed
  • Total time to complete has been timed
  • Contact information available for   questions or problems

ACCESSIBILITY

  • Course can be navigated with keyboard
  • All ALT tags are used
  • Text is provided for non-text   elements
  • Videos have script or dialogue
  • Captions provided for audio
  • No flashes faster than 3 times per second
  • No colors used to convey information
  • Use text with appropriate contrast ratio
  • No fine motor skills required
  • No timed activities
  • No use of hover states to display important information

NAVIGATION

  • Main navigation is easily identifiable
  • All navigation is correct sequence
  • Hyperlinks are clearly identified
  • All hyperlinks work
  • Minimum use of external links
  • Backward links to navigate to previous   screens
  • Number of navigation icons is reasonable
  • Table of contents used to lay out the   content
  • E-learning has guided tour and/or map for   further explanations

VIDEOS & ANIMATION

  • Use of animation and videos is appropriate
  • Files are compressed/optimized
  • Videos and animations are consistent in quality, size and type
  • Videos are legally   owned

AUDIO & NARRATION

  • Narration is not exact text on the screen
  • Narration is clear and concise
  • Audio quality is high (not fuzzy or   scrambled)
  • Narrator sounds confident and knowledgeable
  • Audio synced to the content
  • Audio can be paused
  • Volume can be muted
  • Volume can be controlled by user

TEXT CONTENT

  • Language is clear and concise
  • Spelling has been checked
  • Grammar has been checked
  • Language is culturally appropriate
  • Humor is used with care
  • Tone is consistent and appropriate
  • Text is gender neutral
  • Content is not plagiarized
  • Date formats, measurements, are consistent
  • SME has verified text content
  • Facts, statistics, data are accurate
  • Facts, statistics, data sources are   identified
  • Correct capitalization applies to units and acronyms
  • Correct capitalization is used
  • Punctuation is appropriate
  • Complex sentences are avoided
  • Content has been localized for all required languages

GRAPHICS

  • Images are meaningful and have a purpose
  • Images use appropriate file type
  • Photos are consistent in quality and style
  • Images are legally owned
  • System screen captures are up-to-date
  • Screen captures do not contain personal information

Since you’ve made it all the way to the end of the checklist, maybe you should subscribe to my blog!