Why is visual design critical for online learning? Let’s look at five design principles and how the Learning Designers from the Business Co-Design team have taken advantage of these principles to produce engaging and effective online learning experiences for business school students.
“Design and aesthetics have a profound impact on how users perceive information and learn, judge credibility and usability, and ultimately assign value to an online experience”.
(Reyna, 2017, p.1)
We visualise with our brains, and therefore the more visual an input, the more likely we recall. Thus, in many ways, vision can be seen as the most effective tool for learning (Medina, 2008). However, there is a delicate balance between overdoing a design and not doing enough.
Here are five user experience design principles that can be found across units in the Business school.
Scale
Using relative size to signify importance on a page. When using scale effectively, the most important elements on a page are bigger in comparison to less critical objects.
In the canvas navigation boxes below, scale is being used to highlight the importance of the three key links while, the smaller boxes are still obvious, but not as critical.
Visual hierarchy
This refers to guiding the learner’s eye in a specific and purposeful order. Hierarchy can be established through scale, colour variations, spacing, and other visual cues. For example, how big is the most important element on the page? What colour is the least important element?
The layout of this canvas home page draws the eye around the page in a specific order, starting at the banner, then moving across to the quick links and ending on the video. This ensures the student’s eyes have progressed over the page before engaging with the video content.
Balance
Balance refers to the distribution of visual elements on the page. Elements arranged asymmetrically are dynamic and engaging, whereas asymmetrical layout is static and composed.
The symmetrical layout in this situation helps to create a structured format. The balance of the visual objects helps establish a connection from the text to the corresponding video.
Contrast
Juxtaposing visually dissimilar objects to differentiate between elements. Contrasting aims to provide the eye with an immediately noticeable difference; this emphasises what you’re trying to highlight.
In the quick links below, the three key themes of the unit are immediately obvious. The strong colour contrast highlights the individual themes while also maintaining the whole cohesive structure.
Gestalt principles
This principle refers to our natural tendency to perceive the whole as opposed to individual objects. Humans naturally simplify and arrange complex elements by subconsciously arranging parts into some sort of system (Gordon, 2020). Items that are physically closer together are often perceived as part of the same group.
The text boxes below are sitting as individual pieces of information; however as they are visually similar and evenly spaced across the page, we can assume they are all connected.
Why go to the effort?
Following visual design principles and sticking to a consistent structure when developing online learning creates consistency and improves learning comprehension. In addition, a strong visual system helps to build trust. By doing this, we can forge a stronger connection to the business school and the University of Sydney.
References
Elearning Industry. (2020). Why visual design is critical in eLearning. Retrieved from https://elearningindustry.com/why-visual-design-is-critical-in-elearning
Nielsen Norman Group. (2020). 5 principles of visual design in UX. Retrieved from https://www.nngroup.com/articles/principles-visual-design/
One thought on “Five design principles for successful e-learning”