The importance of visual design and aesthetics in e-learning

Full text

Technology & ResouRces
| 028 | OCT 13 | TRAINING & DEVELOPMENT www.aitd.com.au
Every time I undertake a new e-learning project, I explain to my client that a good online
learning experience needs to take into account at least six basic aspects: visual design;
information architecture; web standards and accessibility; principles of multimedia learning;
pedagogical considerations; and of course quality of content. Each of these components is
important to enhancing the learning experience.
Visual design is usually an aspect that is
neglected or implemented at a less than
professional level in online learning.
Why is good visual design and aesthetics
important in online learning? 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. This
article will summarise the principles of
visual design applied in online learning.
The aim is for readers to review and
apply this knowledge to
enhance usability, influence
perception, increase appeal,
and make better design
decisions when designing
online courseware.
Design elements
and principles
To apply visual design
effectively, it is important to
understand the elements and principles of
design which underpin good visual design.
The purpose of this article is not to cover
these concepts in-depth but to remind
e-learning professionals of the importance
and impact of these in the development
of visually appealing courses. Briefly, the
elements of design are: line, colour, shape,
texture, space, and form. Principles of
design are tools that are applied to these
elements bring them together into one
design. How these principles are applied
determines how successful a design is.
Successful application of design elements
and principles is not an easy task, and it
takes time to achieve consistent results.
It is important to remember that the best
designers sometimes disregard the principles
of design. When they do so, however, there
is usually some compensating merit attained
at the cost of the breach. Unless you are
certain of doing so as well, it is best to abide
by the principles.
When developing a visual interface for
e-learning, the golden rule is to play it safe
and use a symmetrical and clean design.
Symmetry is an age-old device of the visual
artist. The word refers to two halves that
perfectly mirror each other. In design,
symmetry is closely tied to balance. A
perfectly symmetrical design achieves balance
and a sense of stability, which is highly
desirable for e-learning. One powerful aspect
of symmetry is its ability to direct the user’s
focus (Figure 1). In contrast, an asymmetrical
design will have an opposite effect and may
distract learners’ attention to other elements
on the page (Figure 2).
When developing prototypes/mock-ups of
online learning, effort should be focused on
achieving visual balance and this will be easily
accomplished using symmetrical design.
Colour scheme
Colour creates moods and the way they
are combined is very important. While
perceptions of colour are somewhat
subjective, there are some colour effects that
have universal meaning. Colours in the red
area of the colour spectrum (red, orange, and
yellow) which are known as warm colours
evoke emotions ranging
from feelings of warmth
and comfort to feelings of
anger and hostility. Studies
have also shown that certain
colours can have an impact
on performance. Exposing
learners to the colour red
prior to an exam has been
shown to have a negative
impact on test performance
(Elliot et al., 2007). More
recently, researchers
discovered that the colour red causes
people to react with greater speed and force,
something that might prove useful during
athletic activities. (Elliot & Aarts, 2011). In
contrast, colours on the blue side of the
spectrum (blue, purple, and green) are known
as cool colours and are often described as
calm, but can also call to mind feelings of
sadness or indifference.
The use of bright background colours
and combinations that “clash” should
be avoided, as it makes it hard to read.
They can even cause dizziness, sore eyes,
headache, and loss of concentration/
The importance of
visual design and
aesthetics in e-learning
Jorge Reyna
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.

TECHNOLOGY & RESOURCES
www.aitd.com.au TRAINING & DEVELOPMENT | OCT 13 | 029 |
motivation (Reyna, 2009) (Figure 3).
An appropriate colour scheme conveys
professionalism and will help learners to
engage with the material (Figure 4).
Using graphics or patterns as background can
decrease legibility, and it is recommended
to avoid them (Figure 5). Remember the
colour scheme can impact on readability and
become an issue for colourblind people. A
good solution is to download the free plug-in
for Adobe Photoshop called Vischeckwhich
simulates colour blindness and tests projects
before deployment.
What is a good colour scheme for
e-learning? Have you noticed how art
galleries have white walls? They want the
visitors to focus on the artwork exhibited
rather than the walls. The more simple and
plain the colour scheme you use on your
e-learning site, the better it will showcase
your content for your learners. I highly
recommend a neutral colour scheme and
the use of white or soft background colours
(Figure 6). Soft background colour with
dark fonts creates good contrast, stimulates
reading and engages students, enhancing
the learning experience.
Typography
Web-safe fonts used to be ideal when
creating websites. Web-safe fonts are fonts
which are common to all versions of
Windows, Mac, Linux, etc. They guarantee
a proper display across platforms. Custom
fonts are among the most appealing aspects
of CSS3 for designers. With the font-face
rule in CSS3, you can render any font
you have online within your web page
text, regardless of whether the user has
it installed or not. Services like Typekit
by Adobe are changing the way fonts are
used in web design. Typography has been
described extensively for graphic design but
less so for web design. On the other hand,
some fonts are more legible than others
and more accessible. That is the reason why
web safe fonts are still recommended for
e-learning projects.
The following are some general rules on
typography for websites:
• Avoidusingdifferentfonts,differentsizes
and different colours on the same page.
• Forconsistency,thesamefonttype,
size and colour should be used in your
entire e-learning project.
• Avoidunderliningwordsunlessyou
want to create a link from them.
• Avoidusingcapitalisation.
• Useboldfontsdiscreetly,otherwiseyou
may lose the attention you want to attract.
• Italicsshouldonlybeusedforforeign
or Latin words like in situ, ad libitum and
so on (Reyna, 2009).
• Trynottouseredwhenwriting
important announcements online. It
carries a negative connotation in some
cultures, and can be hard to read.
By applying the typography rules listed
above you are more likely to create an
inviting and professional website (Figure 7).
Layout consistency
Have you tried to buy an item online,
found the best deal, but were put off by the
layout of the website? Layout consistency
is crucial in web design and of course
in e-learning: it is about credibility and
conveying a professional message. Layout
is not only defined on how elements such
images, buttons, links are distributed on the
page, but also relates to colour scheme and
information architecture. A consistent site
will have all the pages looking similar with
the same design layout and a design pattern
that is consistent across the entire website.
This makes the site credible and students
will be able to engage with your content
more easily.
Recent studies reported that the aesthetics
of a course, particularly the layout, the
use of graphics, and the ease of use, were
important in motivating learners to engage
and persist in web-based learning (Scribner,
2007; Glore 2010). This emphasises that it
is increasingly important for educators to
consider aesthetic qualities when developing
course materials.
When designing an e-learning website, it
is advisable to use ‘flexible grids’ which
allow the page elements to automatically
rearrange according to the screen size of the
user. This is called ‘responsive design’ and
is covered in an article on the move from
Flash to HTML5, that originally appeared
in Training & Development magazine
(October 2012 Vol 39 No 5)
Fig 1: Symmetrical prototype. Notice the two halves
perfectly mirror each other. This design achieves
balance and stability and directs user focus.
Fig 2: Asymmetrical prototype. The user may get
distracted and click other parts of the interface.
Fig 3: Colour clash examples. This colour scheme
has an energetic, raw, and brash quality. It is used
primarily in advertisement and graphic design
and should be avoided in e-learning.

Technology & ResouRces
| 030 | OCT 13 | TRAINING & DEVELOPMENT www.aitd.com.au
Layout consistency creates a sense of
professionalism on a website, making it
more credible and appealing to users.
Presenting information
effectively
A basic principle of information
architecture for websites is the ‘principle
of disclosure’ which refers to showing
only enough information to help
people understand what they will find
as they read further (Brown, 2010). In
this regard, students can be tricked by
using accordions (JavaScript) with labels
(headings) and by avoiding scrolling
pages as much as possible. When the
information is visually compacted, it
creates an impression that there is not
much to read and prevents users from
feeling overwhelmed. Another principle
that helps to present information
effectively is called ‘focused navigation’
(Lidwell et al., 2010). If you have a page
with online lectures, use only links
rather than a combination of links and
embedded player, and be consistent
to avoid learners’ confusion. When
presenting an activity for learners to watch
a video and comment on a blog, embed
the video inside the blog. Don’t give your
learners the opportunity to walk away by
clicking a link and opening a new window.
Finally, ‘the principle of objects’ points us to
treat content as a living, breathing thing, with
a lifecycle, behaviours, and attributes. For
example, if you are going to post an online
lecture (Slidecast) using multimodal delivery,
you will need to make sure you label the
objects appropriately, such as Interactive
PDF (Size MB), PDF to Print (Size MB),
Audio File MP3 (Size MB). This will let
learners efficiently choose the way they want
to engage with your content, and you will be
catering to various learning styles.
Aesthetics and credibility
Recent research has proposed that aesthetics
play an important role in shaping user
responses to products and websites. Users
also draw on aesthetic impressions to judge
usability and credibility. In online learning,
it is therefore important for training
providers and educational institutions to
consider the educational function of visual
content and the aesthetic judgements that
are being made by learners. Including visual
content and applying aesthetic standards
during online course development can
ultimately improve not only the visual
appearance of course content, but can also
improve how students react to and interact
with those courses.
The digital aspects of aesthetics and design
are not limited to photos or graphics
displayed on a screen, but include methods
of deliberately arranging elements to
appeal to the senses or emotions of the
user, or the act of creating something
that does not exist (Batiha, Al-Slaimeh
& Besoul, 2006). Over 45 percent of
consumers made judgments about the
credibility of websites based on the site
design, including layout, typography, font
size, and colour scheme (Fogg et al., 2003).
Several studies have demonstrated that
aesthetic judgments also affect a system’s
perceived usability (Mbipom & Harper,
2009; Tractinsky, Katz & Ikar, 2000).
These findings should lead e-learning
professionals to consider aesthetics as a
way to enhance learners’ experience.
Visual design and aesthetics have a great
impact on how users perceive information,
learn, judge credibility and usability,
and ultimately assign value to an online
product. It has a role in enhancing and
supporting teaching, but it has often
been neglected or implemented less than
professionally in online learning. The aims
Fig 5: Background pattern example. Background
patterns can add intricacy, complexity and visual
variety, and could make reading difficult when
there is low contrast between background and fonts.
Their use in e-learning should be limited.
Fig 6: A design that uses a neutral colour scheme
and white background with black fonts. It looks
clean, professional and legible.
Fig 7: Poor use of typography. Note that this example is
hard to read and the page appears confusing.
Fig 4: Neutral colour scheme. This colour scheme is
the natural result of neutralizing colours by mixing
them with their respective complementaries.
The more simple and plain the colour scheme
you use on your e-learning site, the better it
will showcase your content for your learners.

TECHNOLOGY & RESOURCES
www.aitd.com.au TRAINING & DEVELOPMENT | OCT 13 | 031 |
of a visual design are to ensure legibility;
simplify the message; increase learner
engagement; focus learner attention on
important points; and provide an alternative
channel of communication.
Visual design principles and aesthetics
are key considerations of every e-learning
project. The aim is to deploy content
that is visually appealing and conveys
a professional and credible message to
learners. This will have a positive outcome
in engagement and retention.
References
Batiha, K, Al-Salaimed, S & Besoul, K 2006, Digital
art and design. In K. Markov & K. Ivanova (Eds),
Proceedings of the Fourth International Conference:
Information Research and Applications, pp. 187-192.
Varna, Bulgaria: i.TECH.
Brown, D 2010, Bulletin of the American Society
for Information Science and Technology – August/
September vol. 36, no. 6.
Elliot, A.J, Maier, M.A, Moller, A,C., Friedman,
R & Meinhardt, J 2007, ‘Color and psychological
functioning: The effect of red on performance
attainment’, Journal of Experimental Psychology: General,
vol. 136 (1), Feb 2007, pp. 154-168.
Elliot, A.J, & Aarts, H 2011, Perception of the color
red enhances the force and velocity of motor output.
Emotion, Vol 11(2), Apr 2011, pp. 445-449.
Fogg, B, Soohoo, C, Danielson, D, Marable, L,
Standord, J, & Tauber, E 2003, How do users
evaluate the credibility of Web sites?: A study with
over 2,500 participants. Proceedings of DUX2003,
Designing for User Experiences Conference. San
Francisco, California.
Glore, P 2010, Identifying motivational strategies
to engage undergraduate learning in web-based
instruction. (Doctoral dissertation, Capella
University).
Lidwell, W, Holden, K, & Butler, J 2010, Universal
principles of design: 125 ways to enhance usability,
influence perception, increase appeal, make better
design decisions, and teach through design. Beverly,
MA: Rockport.
Mbipom, G, & Harper, S 2009, Visual Aesthetics and
Accessibility: Extent and Overlap. Human Centred
Web Lab, School of Computer Science.
Reyna, J 2009, Basic design tips to improve
e-learning sites. University of Western Sydney.
Australia. p.12.
Scribner, D 2007, High school students’ perceptions:
Supporting motivation to engage and persist in
learning. (Doctoral dissertation, Capella University).
Tractinsky, N, Katz, A, & Ikar, D 2000, What is
beautiful is usable. Interacting with Computers,
13(2), pp. 127-145.
Jorge Reyna works as an educational
technology consultant. His background
includes a degree in Animal
Husbandry, Masters of Science in
Veterinary Science, Certificate IV in
Digital Media and Certificate IV in
Small Business. He has been presenting
workshops for academics and students
in the area of eLearning, digital media
authoring tools and Web 2.0 tools.
Contact via jorg.reyna@gmail.com or
visit www.jorge-reyna.com
Advertising in
Training & Development
allows you to market directly
to AITD and NZATD members and a large subscription base of Training,
Learning and HR professionals in Australia and New Zealand.
Training &
Development
readers represent the leading-edge of the profession and
are the key decision-makers with responsibility for L&D spend.
Have you thought about advertising
in the Training & Development
magazine?
Over 86% of
members have either
direct purchasing
authority or specify/
recommend purchases
For more details contact AITD on 1300 138 862 / 02 9211 9414