What eLearning Design Can Learn from Web Design LSCon 2018

Presenter Bryan Marcum of the Infinitude Creative Group spoke about how the fields of eLearning and web design are merging. There are more and more similarities every year.

Why the web? Because it’s where people learn. It is Bryan’s opinion that eLearning is going to start looking like web development.

“Interfaces allude to real life.”

Heirarchy is King. There are 3 levels of hierarchy:

In visual design, form follows function because it:

•       Establishes order
•       Honors the content
•       Gives learners a sense of where they are

Good visual design helps learners with retention and acquisition of knowledge.

• View text as weighted shapes. Squint at the text or page and you can still see that there is order and meaning.
• Divide the text with major and minor breaks. This is helpful when switching topics and with micro buckets. Wikipedia is a super-friendly example where you can see what they want you to see first.
• Only use strong colors for actions. (AKA a Call To Action or CTA)
• Increase usability by being consistent and create a rhythm. Makes it easier for the end user.
• Be consistent with types of content.
• Use white (negative) space in your designs. Use yin and yang.

TIP: Having a design system speeds up production time.

Warning: News sites are different. You’re not there to “learn”.

The use of shadows and animation:

Think of content as blocks. They are a way to create meaning or emotion. Use metaphor. Don’t be literal.

User interfaces mimic machine interfaces. These are good if there is a purpose to emulate a machine interface. However, don’t over -do it.

• Indicate what’s interactive. (Don’t make them click around or guess. Make it obvious.)
• Implement transitions between states.

It’s not natural for animations to “snap”. Think about the physics and how it would look in the real world.

“Tell a story about what’s going to happen when you click a button.”

1. When creating animations remember that a half-second is already too long for an animation.

2. Use animations consistently unless it’s a different story.

3. Be careful about positioning and scale. Keep proportions as accurate as possible. (No giant people or things.) Crop images if you need to make them “fit” with the background.

4. Consider “change blindness”. Animations call attention.

“Motion has meaning.”

Today, people have expectations. Don’t do anything that is the opposite of what people expect to see. Don’t create discord.

Don’t reinvent the wheel with icons. Also, be careful where you place them.

Mobile Devices

You must present content somewhat differently. Consider these reasons:

• Orientation (vertical vs. horizontal)
• No Flash (This is now beginning to affect all devices.)
• Screen size
• Users interact differently on mobile. (See the NN Group article “Basic Patterns for Mobile Navigation: A Primer” for more information.

1.  Plan for vertical and scrolling (unlike desktop or laptop screens where you want to try and keep things “above the fold”.)
2. On mobile you CAN allow the user to manually reveal things.
3. All interactions must be tap-able! (There is no hover on mobile.) Size matters! Buttons must be “big” enough to touch.
4. Never go all the way to the edge of the screens. Keep at least 20 pixels away from the sides.

And Karen’s personal advice for any design that she learned
a long time ago in a galaxy far, far away:

“Remember, white space is your friend.”