How to Use Visual Hierarchy to Improve Learner Engagement

Are we at the mercy of our eyes’ natural tendencies? Does the language of instruction play a part in how we engage learners, on the page and in the digital space? 

Conducting a peer review today got me thinking about the importance of visual hierarchy in the learning path, and how UI and UX interact in this regard. If we can better understand how the learning experience is delivered, we can gain a firmer grasp on learners' overall engagement and, perhaps, retention.

What is visual hierarchy? 

In brief, visual hierarchy is a visual design principle that we can utilise to display the importance of various bits of content through the manipulation of certain elements (Interaction Design Foundation, n.d.). These elements might include size, bolding, alignment and whitespace amongst others. By leveraging appropriate and effective visual cues, we can guide user approach, engagement and knowledge acquisition. 

Strategic layout

When you receive content, be it a long email, a research paper, a content creation guide, or a lesson, how quickly do you react to the UI - in other words, the way in which the content is presented? What we know is that users establish this perception in milliseconds and this initial response can, and does, guide the way they approach and engage with the content itself. Understanding the various elements of visual hierarchy goes a long way in making our content more appealing to users. 

However, at the heart of this lies concepts like the Gestalt Principles and text scanning patterns. Before we can dive into the various characteristics of visual hierarchy, we need to get a more detailed picture of how our users process the information we provide. 

The Gestalt Principles 

The Gestalt Principles can be used as a core element of visual design because they outline our tendency to group patterns and other similar elements in order to make meaning (Interaction Design Foundation, n.d.). Basically, we perceive a number of individual elements as a whole - which might remind you of a saying:

“The whole is greater than the sum of the parts” - Aristotle

Without getting into too much detail about the Gestalt Principles in this article, what we should understand is that users should be able to grasp what they need from the content at a glance. 

Common scanning patterns

Eye-tracking research has identified various scanning patterns, including the F-pattern, Spotted pattern, Z-pattern, Layer-cake pattern and Commitment pattern. Let’s take a moment to investigate the Z- and F-patterns respectively. These are particularly common when our users are English speaking because the natural reading pattern is left-to-right (Interaction Design Foundation, n.d.). 

The Z-pattern is common in content that is light on text, and it sees users scan in a Z-formation across the content. With this in mind, it can be useful for designers to place the most important content along this imagined line to cater for this natural eye movement across a screen. 

In more text-dense content, we are more likely to see F-pattern eye scanning (Pernice, 2019). This means that text that is placed on the top, middle and left sides of a page, enjoys the most focus. Why? Users are inclined to scan, particularly when they are presented with large amounts of text. Users will begin to scan down the left-hand side of a page, looking for keywords of interest, and skimming the first few sentences of a paragraph. When they find something of interest or particular importance, they will read in horizontal lines - hence the F-shape of this pattern (Bank, 2018). 

Takeaways

Of course, we should not be placing heavy emphasis on these principles and patterns to the exclusion of quality content or more basic elements of visual hierarchy. However, these insights can alter the way we think about the arrangement of content across various platforms. If we can more accurately predict where users’ eyes will go, we can prioritise information - which is the starting point of the thinking behind visual hierarchies. When we do this, we improve overall user experience, engagement and, perhaps, retention. 

References

Bank, C. (2018). Understanding Web UI Visual Hierarchy. [5 October 2021]. 

Interaction Design Foundation. (n.d.). Gestalt Principles. [5 October 2021].

Interaction Design Foundation. (n.d.). Visual Hierarchy. [5 October 2021]. 

Pernice, K. (2019). Text Scanning Patterns: Eyetracking Evidence. [5 October 2021].