Posted by: Inna Fourer
URL: http://www.learningseat.com.au/blog/2015/03/25/a-guide-to-ergonomic-learning-visual-hierarchy/

In the first part of this series, we defined ergonomic learning as a sub-set of user experience that focuses on the human characteristics that should be taken into account when designing online courses. Now, in part two, we look at the role visual hierarchy plays in creating effective e-learning design.

Do you want to hold your learning audience’s attention long enough to get your message across?

Well, you might be surprised to know that, according the National Centre for Biotechnology Information at U.S. Natural Library of Medicine, our attention span has dropped from 12 seconds to eight seconds in 2013.

Blame technology, social media or simply the pace of modern living but the fact is, now, more than ever, it’s important to understand your learners, the time pressures they face, and how to command – and hold – their attention.

When it comes to user experience (UX) in e-learning, one the most important things to consider is visual hierarchy. We’ve all experienced our share of frustration and lack of engagement when an interface doesn’t provide us with a clear indication of where to look first because it’s either too busy or too cluttered.

When applied correctly, visual hierarchy naturally directs the learner to view content in the order it was intended to be read. By thoughtfully considering scale, alignment, space, colour and weighting, skilled e-learning designers can arrange course elements in such a way that removes barriers to orientation, and cognition.

The best visual hierarchies help the learner to quickly and confidently navigate content, and promote optimal understanding.  On the other hand, weak or poor can leave learners frustrated, and more confused about a given topic than before they even opened the course.

Good visual hierarchy can not only help you to grab and hold your learners attention, it also:

  •  Influences the order in which the human eye perceived what it sees
  • Helps readers to absorb information more quickly
  • Makes content easier to understand
  • Ensures a more engaging user experience
  • Makes your learning investment more effective.

To help show you what good visual hierarchy is all about, we’ve put together this little infographic.

Visual hierarchy PDF VERSION

Stay tuned for the next instalment in ‘A guide to ergonomic learning’ when we take a look at how content hierarchy can improve your next e-learning course.


Inna Fourer
Inna Fourer is a digital designer who is passionate about everything UX.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s