visual design of e-learning applications

Visual design of

e-learning applications

Guidelines for improving learning experiences

Research Paper

Bachelor course on Media Technology

at St. Pölten University of Applied Sciences

by:

Ulrike Schwertberger mt131089

Supervising tutor: Teresa Sposato, BA.

[Vienna, 30-06-2015]

II

Declaration

- The attached research paper is my own, original work undertaken in partial

fulfillment of my degree.

- I have made no use of sources, materials or assistance other than those which

habe been openly and fully acknowledged in the text. If any part of another

person’s work has been quoted, this either appears in inverted commas or (if

beyond a few lines) is indented.

- Any direct quotation or source of ideas has been identified in the text by author,

date, and page number(s) immediately after such an item, and full details are

provided in a reference list at the end of the text.

- I understand that any breach of the fair practice regulations may result in a mark

of zero for this research paper and that it could also involve other repercussions.

.................................................. ................................................

Place, Date Signature

III

Abstract

E-learning has been gaining importance as a didactic method in recent years and

is now being used in both offline and online learning as well as mobile learning

applications. Previous research has shown the significant influence interface

design has on user experience, and guidelines on effective practices have

emerged. Several publications have appeared in recent years documenting the

general didactic design of e-learning courses, providing information on how to

structure and implement courses. However, few publications can be found that

specifically discuss the visual presentation of e-learning courses, covering both the

fields of interface and e-learning design. To gain insight, this work draws its

conclusions from works which discuss learning psychology as well as literature on

visual design.

Absorbing information and building knowledge are processes which are not only

determined by a person’s learning ability, but are also greatly dependent on the

presentation of learning material itself. By taking advantage of the learner’s

perception, applications can be designed to optimize information storage and its

subsequent retrieval. Several authors point out the need for consistent visual

design in instructional material, noting that any interruption of the user’s focus may

result in a poorer performance. Furthermore, studies have shown the importance

of simple design which does not interfere with perception.

The findings from the comparison of several works of literature illustrate that e-

learning applications and the learning process can be enhanced by effective

design. While aesthetic considerations should not be disregarded, designers are

advised to keep learning processes in mind. This supports the reduction of

cognitive load, which should be the ultimate goal of visual design in e-learning

applications. It can be concluded that the visual component of e-learning design

should be regarded as equally important as the selection of the presented content,

as it provides great potential to enhance said material.

IV

Table of contents

Declaration II

Abstract III

Table of contents IV

Introduction 1

Method 2

1 Cognitive processes 3

1.1 Attention 3

1.2 Perception and recognition 4

1.2.1 Gestalt principles 4

1.2.2 Five types of knowledge 5

1.3 Memory 6

2 Layout and structure 7

2.1 Visual grouping 7

2.2 Visual hierarchy 9

2.2.1 Hierarchy by graphical elements 9

2.2.2 Hierarchy by placement 10

2.2.3 Hierarchy by knowledge 11

2.3 Consistency 11

2.4 Simplification in e-learning 12

3 Readability in e-learning applications 13

3.1 Typographic design for display reading 13

3.2 Typefaces 14

3.3 Text size 15

4 Color considerations 16

4.1 Color psychology 16

4.2 Guiding attention with color 17

4.3 The importance of contrast 17

5 Instructional images & graphics 19

5.1 Text-image interplay 19

5.1.1 Split-attention effect 19

5.2 Icons and pictograms 21

5.2.1 Fast recognition of icons and symbols 22

5.2.2 Labelling icons 22

V

5.3 Animated and interactive visuals 22

Conclusion 24

References 25

List of Literature 25

Internet references 27

List of figures 28

List of tables 30

Introduction

1

Introduction

This bachelor thesis analyses the visual design of e-learning applications and its

influence on user experience. As well-designed applications may have the power

to attract more users and improve learning experiences and outcomes to a great

extent, developers of e-learning courses have to consider visual perception as a

key component in learning.

The importance of visual design is often overlooked, as great care may be taken

in defining the didactic structure of a course, yet graphical interface design is often

regarded as decoration. Considering the growing relevance of e-learning in recent

years, instructional designers will require an understanding of graphic design, and

interface designers will profit from know-how on cognitive processes and usability.

In light of the close interplay between visual design and cognitive processing, this

thesis examines how visual design may improve the learning experience.

The first chapter describes several theories on cognitive processing and human

knowledge. The following three chapters then go on to outline how layout, fonts,

colors and images can be used in accordance with these principles to improve

learning and which design mistakes should be avoided. A final summary on how

e-learning applications can be improved by effective visual design will be given in

the conclusion of the thesis.

To answer the question of how visual design can be used to maximize

memorialization and attention in e-learning courses (also referred to as “learning

experience”), the chapters also take a look at existing guidelines and practices and

whether they support successful learning. After all, Steve Krug has pointed out that

“as a rule, conventions only become conventions if they work” (2005, p.35).

Method

2

Method

Several scientific works of literature, including books on user interface design and

cognitive science, were the basis for writing this thesis. To name an example, Clark

& Mayer cover seven design principles of e-learning in “e-learning and the Science

of Instruction” (2003), highlighting the importance of consistent course design and

minimal cognitive load. In addition, works such as “Wissensvermittlung” by Steffen-

Peter Ballstaedt (1997) and “Interface design for Learning” by Dorian Peters (2013)

cover the visual design of educational material and the cognitive processing of

information.

Findings from existing research were compared and examined in regards to their

effect on learning processes such as attention and memorialization. Furthermore,

this work highlights several established design guidelines found in literature which

support findings from cognitive science.

Cognitive processes

3

1 Cognitive processes

The aim of any type of instruction is the presentation of information as well as its

uptake and successful storage and retrieval at a later time by the learner. Preece

et al. list several processes involved in cognition (Preece, Rogers & Sharp, 2002,

p.75).

The cognitive processes most relevant for visual design considerations are:

attention – directing the learners’ focus on relevant presented information

perception and recognition - the transformation of information into

meanings and ideas, i.e. creating knowledge

memory – recalling information

As they are highly dependent upon another, each of these processes has to be

taken into consideration when designing instructional content.

1.1 Attention

In learning situations, it is essential to secure attention. In a learning environment,

the user is not familiar with the presented content in most cases and therefore will

not have an exact idea what to look for. For example, learners often rely on their

own expectations when searching for important information in texts, which makes

human cognition prone to errors (Rakoczi, Bochud, Garbely, Hediger, & Pohl,

2013, p.3).

This underlines the necessity of directing attention to relevant information by visual

means and keeping the background – in the case of e-learning applications, the

interface – plain and easy to use (Preece et al., 2002, p.77) in order to avoid

distractions. Many techniques rely on the “pop-out-effect”, which results in the

“highlighting of the visual target” compared to distracting elements (ibid), for

example by changes in color or contrast.

Cognitive processes

4

Figure 1: The pop-out effect enhances efficient information processing.

(Rakoczi et al., 2013, p.4)

1.2 Perception and recognition

The term “Perception” describes the acquisition of information and its subsequent

transformation into experiences (Preece et al., 2002, p.76). Educational material

can be perceived in different ways depending on how visual elements are arranged

and what the learner associates with the presented information.

1.2.1 Gestalt principles

Several principles of human perception can found in Gestalt psychology, a school

of thought which explores the human mind and behavior. Gestalt theory laws are

closely linked to layout recommendations for instructional material (see chapter 2).

The law of proximity states that elements which are placed close to one

another are perceived to be related.

According to the law of similarity, the more similar elements are to each

other, the more likely we are to mentally group them together (Soegaard,

2014, n.p.).

Gestalt theory states that people perceive grouped elements as a whole.

This is referred to as the law of simplicity, which explains our tendency to

see the screen as a whole as opposed to only its components (Gutierrez,

2014, n.p.).

The law of closure states that the learner is able to fill in missing information

based on past experiences (ibid). This principle is relevant when relying on

conventions in user interface design.

Cognitive processes

5

Figure 2: Visual examples of Gestalt principles

(Gutierrez, 2014, n. p.)

1.2.2 Five types of knowledge

Ballstaedt describes five forms of mental knowledge, each used for different tasks

and situations.

Visual knowledge is a mental image of colors and shapes associated with words

and falls into the category of manner-specific knowledge, which may also be

referred to as sensory knowledge and stems from sensory perception (Ballstaedt,

1997, p.1). Vision is the most dominant sense of perception, which highlights the

importance of presenting information in a clear and easily distinguishable way

(Preece et al., 2002, p.77).

Spatial knowledge is used to describe the localization of objects, regardless of any

visual associations.

Conceptual knowledge, oftentimes considered the most important of the five,

refers to mental links and extensive conceptual networks (Ballstaedt, 1997, p.2).

These mental models are necessary when encountering unfamiliar systems and

dealing with unexpected events (Preece et al., 2002, p.92).

Procedural knowledge is required for the understanding of processes and activities

and the correct order of steps necessary to complete a task. Lastly, mental models

are helpful when constructing inner representations for complex topics, e.g. the

association of physical or chemical pathways with circuit-like figures (Ballstaedt,

1997, p.4).

The above distinction has implications on the visual design of e-learning

applications. The design, like any instructional material itself, should appeal to the

appropriate type of knowledge depending on the presented information in order to

Cognitive processes

6

ensure effective cognitive processing. Successfully determining which brain areas

should be addressed is an important step in creating educational content.

Type of knowledge Recommended presentation

Visual (sensory) Graphics, icons, pictograms

Spatial Maps

Conceptual Text, mindmaps, symbols

Procedural Lists and content chunking (see 1.3), graphics

Mental models Instructional graphics, pictograms, icons

Table 1: Although definite guidelines do not exist (Ballstaedt, 1997, p.1), the following chart gives suggestions on suitable methods of visual representation in learning materials based on the five types of knowledge.

1.3 Memory

Things to which we pay attention to (see 1.1) are passed on from sensory memory

(e.g. visual perception) to short-term memory (also known as working memory)

and in some cases may later be saved in long-term memory. (Dirksen, p.129).

Well-designed e-lessons should ideally guide this transformation of presented

material into knowledge and skills by highlighting important information and linking

existing short-term information with knowledge in the long-term memory (Mayer,

p.39).

The “chunking theory”, as it has been presented by George A. Miller, describes the

limitation of short-term memory. The concept states that humans can only hold 5-

9 (seven plus or minus two) chunks of information in their short-term memory at a

time. Memorization is “simply the formation of chunks, or groups of items which go

together, until there are few enough chunks so that we can recall all the items”

(Miller, 1956, p.95). Short-term memory load should be therefore be reduced in

instructional applications (Shneiderman, 2010, p.93) to help users focus only on

relevant items and maximize information uptake. Successful memorization is also

largely dependent on retrieval. Content will be easier to retrieve if it has been

presented in multiple ways, e.g. text-as well as image-based, and is therefore more

accessible in long-term memory (Dirksen, p.181).

Layout and structure

7

2 Layout and structure

To engage learners and optimize the uptake of information, educational content

should be presented in a structured way which takes cognitive processing into

consideration. This is even more necessary for multimedia learning applications,

as they provide more room for distracting elements which might interfere with the

users’ attention.

As explained in Ch.1, the learners’ attention needs to be guided to important

content. When viewing an image on-screen, the users’ brain usually splits it up into

“important” and “unimportant” elements while attempting to build structures and

combine elements (Kommer & Mersin, 2002, p.58). Using well-thought-out layout

and structure guidelines may be useful in supporting this process.

2.1 Visual grouping

Defining the relation between foreground and background by visually grouping or

separating elements helps the user in distinguishing on-screen objects (Kommer

& Mersin, 2002, p.60). In educational material, information may be presented in

smaller “chunks” relating to particular sub-topics of an overall subject. To keep

cognitive workload at a minimum and avoid confusion, screen layouts should

visually present existing relations, for example by placing chunks of text next to the

graphic being described (Mayer, p.108). This supports visual grouping, which

allows rapid visual search as well as faster recall of spatial knowledge

(Shneiderman & Plaisant, 2010, p.245).

Designers may use grouping to promote correct understanding of e-learning

content. Placing related elements together is in accordance with the law of

proximity found in Gestalt theory, which explains our tendency to perceive grouped

objects as a whole as opposed to individual parts (see chapter 1).

Several interface design guidelines highlight the importance of grouping related

items. Examples include Robin Williams’ PARC (proximity, alignment, repetition,

contrast) principles (Williams, source?), Mullet and Sano’s six design principles for

visual interfaces (one of them being “organization and visual structure”; Mullet &

Sano, 1994) and Mayer’s contiguity principle (Clark & Mayer, 2011, p.91ff.) which

calls for placing text and corresponding images next to one another.


8

Grouping can be achieved via the use of boxes, space or similar lightness, color

or orientation (Williams, 2000, p.1ff). Enclosures formed by lines or colored areas

can be helpful in establishing a visually separated group of elements. However,

when lines are used as separating elements, they should be visually secondary to

the text, and thick black lines should be avoided as they may provoke negative

mental associations (Kommer & Mersin, 2002, p.70).

As shown in a study including 16 different screen layouts, poor display design can

double the time users require to find information on a page (Parush, Nadir, &

Shtub, 1998). This difference in search time could largely be attributed to the

differences in grouping and alignment of related elements within the layouts

(Shneiderman & Plaisant, 2010, p.498). Steve Krug highlights the importance of

using grids to align elements on a page in order to keep the layout organized and

enable users to scan the contents in a short time (2013, p.58).

Figure 3: Two screen layouts which were shown to the participants in a study by Parush et al. (1998). The left layout, which sepeartes thematic areas of the

interface and includes consistent button and input field sizes, received the best quality rating. The right screen is an example for bad screen design due to

unorganized elements and inconsistent formatting.

(http://vip.cs.utsa.edu/classes/cs4393f2006/lectures/cs4393week7.html)


9

2.2 Visual hierarchy

Establishing a visual hierarchy may help in communicating the relative importance

of individual elements (Malamed, n.d., n.p.) as well as their relationships (Krug,

2013, p.54). Effective layouts should save the user the work of trying to work out

this information for themselves (ibid, p. 55).

2.2.1 Hierarchy by graphical elements

One method to establish a visual hierarchy by using graphical elements is the

usage of tinted areas. These areas may be used to encompass larger screen areas

which are related to each other. However, color-filled areas tend to push into the

foreground and thus appear more prominent (Kommer & Mersin, 2002, p.68).

Colored areas as a visual design element in e-learning material may therefore be

used as a means to highlight information on which the course instructor wishes to

put extra emphasis on.

Other common graphical techniques include text alignment, visual grouping (see

2.1) or typographic variations (see chapter 3).

Figure 4: This example illustrates how the alignment of a heading can completely change the perception the elements’ relationships on a page. The first image

suggests that the elements on the left side are subjections of “Computer Books”, whereas the relationship is better presented if the heading is aligned to the right.

(Krug, 2013, p.54)


10

2.2.2 Hierarchy by placement

Elements on top of the screen are perceived as more important than those in the

lower half, and items positioned on the left side tend to appear more relevant than

on the right side for left-to-right readers (Peters, 2013, p.97). The users’ gaze tends

to linger longer at the upper corners, the middle of the screen and the lower right

corner, which makes these areas well-suited for the placement of important or

recurring elements (Kommer & Mersin, 2002, p.66).

A concept which describes this viewing pattern is the Gutenberg Diagram. It is

used to show western reading behavior and illustrates four quadrants of the

screen. Designers of e-learning applications may take advantage of stronger focal

areas in the diagram to arrange elements in a didactically effective way. For

example, a call to action should ideally be placed in the terminal area to avoid

breaking the user experience at an earlier point (Andrade, n.d., n.p.).

Figure 5: The Gutenberg Diagram, developed by Edmund C. Arnold, illustrates the natural eye movement when viewing a page (Lacey, n.d., n.p.).

(http://www.dirigodev.com/blog/preview/design-rules-as-guide-visual-weight/)

Figure 6: This image shows an e-learning application in which navigational elements and content have been placed in strong areas, whereas decorative

elements are located in the weak lower right corner.

(http://www.essentialskillz.com/rospa/food-safety-level-1/)


11

2.2.3 Hierarchy by knowledge

Additionally, designers should consider the users’ expectations when defining the

hierarchy of text and visual elements on a page (Krug, 2013, p.48). It has become

a convention for logos and titles to be placed in the top-left corner and navigation

at the left side or across the top screen (ibid), and adhering to these conventions

may improve usability in e-learning applications as well.

Designers can also take advantage of the users’ existing knowledge when

presenting visual hierarchies. As explained in chapter 1, the concept of mental

models is a key element in forming knowledge on a topic. Metaphors such as trees,

ladders or mountains can be used in instructional materials because we already

associate an order with these mental models (Peters, 2013, p.109). Thus, a visual

hierarchy is formed very quickly when content is structured using these shapes.

Figure 7: Even without captions, a visual hierarchy is present in the food pyramid because of an established mental top-down association.

(http://www.anders-gestalten.de/portfolio/fit-durch-den-tag/)

2.3 Consistency

As shown in Fig. 3, consistent formatting is useful in improving the user experience.

Consistent interfaces can decrease cognitive load because the amount of new

information, which has to be processed when viewing the screen, is reduced.

(Dirksen, 2013, p.209). Smith and Mosier’s guidelines for data display call, among

other characteristics, for standardized formats and colors as well as minimal

memory load on the user (Smith & Mosier, 1986, p.132ff.). Changing elements

during an e-learning course distracts and disengages the learner (Lozano &

Yacovelli, 2014, p.17), whereas consistent design allows the user to build a specific

mental model of the system (Kommer & Mersin, 2002, p.47).


12

However, Steve Krug notes that “clarity trumps consistency” (2013, p.54),

emphasizing that even though navigational elements should ideally be placed at

the same positions, in some cases slight inconsistencies are acceptable if they

allow information to be presented in a clearer way. Too much consistency may

also possibly result in the users ignoring recurring elements such as info-boxes

(Dirksen, 2013, p.209). It may therefore be useful to incorporate techniques which

take advantage of pop-out detection (see chapter 1) into the visual design of e-

learning applications. This can be achieved by changes in size or color or marking

elements such as arrows; however, these highlighting techniques should be used

carefully to avoid visually overwhelming the user (Shneiderman & Plaisant, 2010,

p.64).

2.4 Simplification in e-learning

Another technique to minimize cognitive overload is the overall visual reduction of

e-learning interfaces, which supports the Gestalt principle of simplicity (see chapter

1). On displays with a minimalistic, reduced design, users are less likely to oversee

on-screen changes (Rakoczi et al., 2013, p.6). A learner may also feel intimidated

by too much information on a single page, and inserting white space to draw the

focus to a smaller number of relevant elements can have a calming effect

(Gutierrez, n.d., n.p.).

To keep the display as simple and free of clutter as possible, Dorian Peters

recommends the use of inline contextual actions, which respond to hover-

movements. (Peters, 2013, p.90). Designers may even take on a “presumed guilty

until proven innocent” approach (Krug, 2013, p.58), removing all elements which

do not directly contribute to the current task.

Not only is white space a useful tool to visually improve a screen layout, it is also

necessary around buttons and navigational elements to help avoid clicking

mistakes (Peters, 2013, p.216). This is especially relevant when designing for

mobile devices, on which these slips are more likely to occur.

Readability in e-learning applications

13

3 Readability in e-learning applications

When confronted with texts, users tend to scan information rather than read

(Kommer & Mersin, 2002, p.104). Good readability in an e-learning course can

help readers recognize letter patterns (Peters, 2013, p. 94) and structure content,

therefore text should be formatted to support sucessful scanning (Krug, 2013,

p.47).

3.1 Typographic design for display reading

It has been established that we read on-screen text 20-30 % slower than printed

words (Ballstaedt, 1997, p.87), hence, special considerations need to be kept in

mind concerning the design of display texts in comparison to traditional print media.

To avoid overwhelming the learner with large amounts of information, it is

recommended to keep line length between 60 (ibid, p.89) and 80 (Racozki et al.,

2013, p.6) letters maximum. Wider text blocks require more lateral eye movements

and increase the difficulty of following lines, which increases fatigue (Kommer &

Mersin, 2002, p.173). Line spacing should increase with line length (ibid, p.175)

and allow easy scanning without any distracting eye movements (Ballstaedt, 1997,

p.89). The recommended line spacing for displays is 120-140 percent of the font

size (Kommer & Mersin, 2002, p.175).

Furthermore, large blocks of running text should be avoided (Ballstaedt, 1997,

p.89) to keep pages easy to scan. Current research also advises against using

excessive scrolling in e-learning courses as it tends to be strenuous for most users

(Racozki et al., 2013, p.6) and may potentially split attention (see chapter 2).

Headings can help learners decide which parts of a text are most important (Krug,

2013, p.54ff.) and improve memorialization (Clark & Mayer, 2011, p.329).

Headings with introductory information on the lesson in a sub-heading can highlight

the important contents of an e-learning course because of their signalling function

(ibid). To ensure easy recognition, correct formatting with a clear distinction of

heading levels is essential.


14

Figure 8: Comparison between two heading styles. The left style provides no clear visual hierarchy, whereas the order of importance is represented more

clearly in the right example.

(Krug, 2013, p.60)

3.2 Typefaces

In a study by Song et.al, participants perceived tasks which were presented in an

easy-to-read font as easier to perform, whereas those who read the instructions in

a handwritten font evaluated the task as being more difficult (Song, Uchida, &

Liwicki, 2011).

While Rakoczi et al. argue that using serif or sans-serif fonts has no significant

influence on readability (Rakoczi et al., 2013, p.6), Shneiderman & Plaisant and

Ballstaedt recommend sans-serif fonts in longer body texts for better display

reading (Shneiderman & Plaisant, 2010, p.205; Ballstaedt, 1997, p.92). If

designers choose to include serif fonts in longer text blocks, typefaces such as

Rockwell or Georgia are preferable due to their pronounced strokes and larger x-

height, which support readability (Kommer & Mersin, 2002, p.122). Contrasting

heavy vertical serifs and hairlines make the Cambria typeface especially suitable

for reading on smaller displays (Monotype, n.d., n.p.).


15

Rockwell

Georgia

Cambria Figure 9: Simple slab serif font families such as Rockwell can be used in body

text. Microsoft has commissioned the Georgia and Cambria typefaces specifically for display and body text use. Kommer & Mersin recommend Georgia as the

best-suited serif font for low display resolutions (2002, p.158).

Up to three different fonts may be used to attract the user’s attention (Shneiderman

& Plaisant, 2010, p.64), however, ideally only two fonts from different font families

should be included in a screen design (Ballstaedt, 1997, p.92). Text formatting

should ideally remain unchanged throughout an e-learning lesson so as to avoid

compromising consistency (see chapter 2).

3.3 Text size

Different recommendations regarding minimum font size can be found in literature,

ranging from 10pt (Nielsen, 2002, n.p.) to 12pt (Ballstaedt, 1997, p.92; Kommer &

Mersin, 2002, p.119). Ultimately, the reading environment and user devices should

be kept in mind when choosing a font size for an e-learning course (Rakocz et al.,

2013, p.6). An increased font size can improve readability (Peters, 2013, p.94),

which is the main criteria for typographic design (Kommer & Mersin, 2002, p.116).

Color considerations

16

4 Color considerations

Color can provide many functions as a design element, including highlighting

important content, establishing contrast or a specific mood. Before content, users

perceive colors within seconds when viewing a page and quickly form an opinion

on the presented work (Kommer & Mersin, 2002, p.207), which makes color a key

element in the visual design of e-learning courses.

4.1 Color psychology

Different hues evoke certain emotions, which in turn can influence cognitive

reactions (Ballstaedt, 1997, p.242ff). However, designers should bear in mind that

the meaning of a color can differ between cultures (Peters, 2013, p.82) and the

following guidelines may not apply to a broad international base of users.

Color Temperature effect Psychological mood

Blue cold calming

Green very cold/neutral very calming

Red warm very provocative

Orange very warm stimulating

Yellow very warm stimulating

Brown neutral stimulating

Violet cold aggressive, unsettling

Table 2. Emotions which are evoked by colors are influenced by the associated color temperature and mood (adapted from Ballstaedt, 1997, p.243).

Research has shown that the color red has positive effects on detail-oriented tasks

and recollection, but may impair creativity and imagination, which is enhanced by

blue color (Mehta & Zhu, 2009). It is recommended to use warm colors such as

red and yellow for pointing out key elements and warnings, whereas cool colors

should be used for courses which require the user to calm down or in which a

difficult subject is presented (Reddy, 2014, n.p.).


17

4.2 Guiding attention with color

Colors are an excellent tool for grouping information, as same-colored text or areas

are perceived as being related in accordance with the law of similarity found in

Gestalt theory (see chapter 1). Color-coding describes the assignment of

distinctive colors to different lesson materials and is an effective way of improving

memorialization as it supports cognitive functions such as searching, recognition

and grouping (Ballstaedt, 1997, p.246).

Dorian Peters names distinctiveness and consistency as the two key elements in

color-coding (2013, p.106), noting that the number of colors in a palette should be

limited to avoid including two colors which look too similar to each other (ibid).

Similarly, Shneiderman & Plaisant suggest limiting color palettes to seven colors

to avoid confusion (2010, p.511) and call for consistent color-coding throughout a

system (ibid, p.513). This recommendation is supported by the findings of a 2006

study in which changes in text color were found to attract the users’ attention more

than any other visual change within a GUI (Kempter & Ritter, 2006, p.54).

4.3 The importance of contrast

The interplay between colors and the contrast between visual elements is closely

linked to readability (see chapter 3). Studies have shown that significant contrast

enhances readability experience in text materials (Rakoczi et al., 2013, p.6).

Similar hues should not be used in a text-background combination (ibid) and a

clear contrast between text and background should be maintained (Krug, p.?) to

ensure readability.

Contrast is frequently used to induce a pop-out effect (see chapter 1), which

increases the efficiency of information uptake (Ballstaedt, 1997, p.247). As color is

an element users recognize unconsciously, cognitive workload can be decreased

significantly by highlighting important elements with distinctive colors (Peters,

2013, p.100).


18

Analogous color schemes with varying saturation can establish visual hierarchies

and procedural steps. Greater saturation implies greater quantity (Peters, 2013,

p.97) and final steps in procedural graphics (Jan, 2014, n.p.).

Figure 10: The decrease in saturation is analogous to the displayed values and supports the data hierarchy

(Peters, 2013, p.97)

Figure 11: Procedural steps can be presented with varying hues of a color.

(https://blog.edynco.com/instructional-design/how-colors-can-enhance-memory-

performance/)

On a final note, designers of e-learning applications should always keep

accessibility in mind when using color-coding in a screen design (Shneiderman &

Plaisant, 2010, p.26). Users with impaired eye-sight or related disabilities may not

be able to take advantage of colored visual cues, therefore literature recommends

the use of varying color intensities (Ballstaedt, 1997, p.244) or distinctive shapes

(Peters, 2013, p.107) in addition to color-coding.

Instructional images & graphics

19

5 Instructional images & graphics

As shown in a study by Paechter et al., a varied presentation of the subject matter

is one of the main motivational aspects for students using e-learning applications

(2006, p.121). Such a presentation oftentimes includes instructional images, the

functions of which mostly involve visual and spatial knowledge (Ballstaedt, 1997,

p.200) and the construction of mental models via the visualization of processes

(ibid, p.202). These facts suggest that visuals may have a beneficial effect on both

motivation as well as memorization of users who study via e-learning courses and

are therefore well-suited to support text in educational material. Visual elements

as part of the user interface (e.g. icons and navigational elements) which are

pleasing to the eye of the user can improve their evaluation of the system as a

whole (Preece et al., p.144).

5.1 Text-image interplay

While more experienced users may be able to create mental images based on text

alone, novices are more likely to require a graphic representation relating to words

(Clark & Mayer, 2011, p.83). It has been proven that the general content of simple,

distinct images, such as those suited for digital media, is recognizable in one

hundredth of a second because they are easier to process than text (Kommer &

Mersin, 2002, p.257). However, the interplay between text and images is crucial to

the learning process as well. Busch and Mayer have shown that images and

graphics which are unrelated to presented facts and function merely as motivation

tend to impair memory retention (2002, p.141ff.). Research involving decorative

graphics has come to similar conclusions (Dirksen, 2011, p.150).

5.1.1 Split-attention effect

In the visual design of e-learning courses, particular attention has to be paid to the

correct placement of relevant graphics near corresponding text. Mayer et al.

conducted a study in which two groups of learners were either shown a text which

was placed near the described illustration, or separated from it. The learners who

looked at the integrated presentation performed significantly better in subsequent

problem-solving tests (Clark & Mayer, 2011, p.107). This decrease in cognitive

performance due to the separation of related visual sources such as text and


20

images is referred to as “split attention effect” (Kalyuga, Chandler, & Sweller,

1999).

Figure 12: The left image splits the viewer’s attention because it requires extra time to establish a link between the numbers and the corresponding description.

(http://www.elearning-psychologie.de/text_bild_integration_i.html)

In e-learning applications, corresponding text and graphics may become separated

by scrolling (Clark & Mayer, 2011, p.96). Possible practices to avoid the

interruption of grouping by scrolling include the use of fixed screen displays or

mouse-hover activated pop-up boxes.

Figure 13: Informational text and corresponding graphic which have become separated in a scrolling area

(Clark & Mayer, 2011, p.96)


21

Ballstaedt supports the argument for placing related text and images together;

stressing that cognitive load increases if corresponding visuals are placed on

different pages or require long eye movements (Ballstaedt, 1997, p.250).

If a text and the corresponding image are aligned horizontally, the image should

be placed on the left side (ibid, p.251) in accordance with western reading patterns

(see chapter 2). As vertical eye movement is more strenuous than horizontal

movement (Ballstaedt, 1997, p.250), the latter may be didactically more efficient.

5.2 Icons and pictograms

Although the terms “icons” and “pictograms” are often used interchangeably, they

actually describe two different types of non-verbal communication elements. While

pictograms are used for guidance and instruction (Knapp, 2012, n.p.), icons are

not limited to instructional use and may also serve as interactive GUI elements in

multimedia applications (Ballstaedt, 1997, p.284).

Icons and pictograms are well-suited for conveying general ideas and instructions

(Kommer & Mersin, 2002, p.265). Designers of e-learning courses can take

advantage of the users’ existing mental models, which are oftentimes shared

among cultures. In situations in which explaining the content via language would

be difficult or obstructed by language barriers, pictographic elements can provide

a way to quickly activate cognitive processes (Ballstaedt, 1997, p.271) regardless

of the users’ cultural background.

Ballstaedt describes three types of pictograms (Ballstaedt, 1997, p.272ff.):

Iconic pictograms are visual depictions of the represented concepts.

Symbolic pictograms provide a meaning which has been defined by

conventions and has been learned at some point in time.

Hybrid pictograms are combinations of the above.

Figure 14: From left to right: Iconic pictogram, symbolic pictogram, hybrid pictogram

(adapted from Ballstaedt, 1997, p.273ff.)


22

5.2.1 Fast recognition of icons and symbols

The visual design of icons as GUI elements calls for reduced graphics on a

relatively small space, which still have to be quickly and easily understood

(Kommer & Mersin, 2002, p.290). As the goal of any e-learning application is to

convey information on a subject rather than on the function of specific GUI icons,

designers should rely on conventional icons, such as the floppy disk as a symbol

for “save” (ibid, p.291), to keep additional cognitive load at a minimum. To ensure

rapid visual recognition in addition to quick understanding, it is recommended to

use typical examples which appeal to the mental models of a broad audience, such

as apples for the iconic representation of fruits (Peters, 2013, p.103).

Symbolic pictograms require more previous knowledge, whereas iconic

pictograms are self-explanatory (Ballstaedt, 1997, p.275). In general, the user

should be able to recognize pictographic meanings with as little effort as possible.

Therefore, the size of the symbol should allow an interpretation which does not

require any additional eye movement (ibid).

5.2.2 Labelling icons

There is some debate over whether icons and pictograms should be labelled.

Ballstaedt recommends additional labels for cases in which no distinct symbol

exists for a pictogram and the label may function as an introduction to the icon

(1997, p.283). On the other hand, users who are unfamiliar with computer

conventions may require textual labels for icons as simple as “print” and “save”

(Kommer & Mersin, 2002, p.293). Along similar lines, Ben Shneiderman & Plaisant

suggests adapting the implementation of labels to the users’ knowledge

(Shneiderman & Plaisant, 2010, p.490).

5.3 Animated and interactive visuals

Interactive and animated visuals are an essential advantage e-learning provides

over traditional learning methods. It has been shown that learning was more

successful for people who watched animations than for those who looked at static

frames explaining the same content (Mayer et al., 2005).

Video sequences and animations can be useful in illustrating scientific simulations

or technical processes which would be difficult to describe in words (Weidenmann,

p.119). Watching instructional videos activates brain areas associated with actually

performing tasks (Peters, 2013, p.177), and is therefore more helpful than


23

explaining manual tasks with illustrations and text (Clark & Mayer, 2011, p.86).

Explanatory text which is directly embedded into videos and animations may

potentially split attention (see 5.1.1); it is therefore recommended to use audio

narration in videos or present text beforehand (Peters, 2013, p.234).

A major drawback is the fact that these “active” media may inhibit active learning

because they do not encourage mental animation from the users themselves and

additionally may overwork the learner’s memory (Clark & Mayer, 2011, p.84).

Motion should therefore generally be used sparingly in e-learning applications to

avoid blindness by habituation (Johnson, 2013, p.5), meaning users may come to

ignore overly eye-catching elements such as animations on a page.

Conclusion

24

Conclusion

As the thesis shows, visual design and cognitive uptake of information are closely

linked. Although it happens on a subconscious level, attention and perception can

be enhanced using specific design techniques such as the pop-out effect and

chunking.

Several studies have shown that a reduction of cognitive load via the use of visual

design is possible and results in improved learning outcomes. If the method for

presenting information is adapted to target individual brain areas, the formation of

knowledge can be improved. In practice, specific design techniques involving

components such as layout and text formatting can be chosen so as to optimize

information uptake.

The importance of continuity and consistency in visual design has been highlighted

in several works of literature and thus can be regarded as a key element in

enhancing learning experience. Findings suggest that sudden changes within a

system tend to confuse users, which may interfere with learning. Furthermore, an

overall reduction of the visual design in e-learning applications may be helpful in

preserving learning capacity, as it keeps distractions at a minimum. In general,

established design guidelines apply to e-learning applications as well, although

designers may be advised to consider clarity and simplicity a priority in comparison

to aesthetic considerations.

The findings of this thesis can be used in the design of any e-learning application

and they are especially relevant in light of the growing importance of mobile e-

learning. As a greater variety of possible learning environments requires more

focus to ensure memorialization of the content, the necessity for visual design

which supports rather than distracts increases even more. This outlook suggests

that further research on optimal design guidelines for mobile learning applications

would be of interest.

25

References

List of Literature

Ballstaedt, S.-P. (1997). Wissensvermittlung (1st edition). Weinheim: BeltzPVU.

Busch, F., & Mayer, T. B. (2002). Der Online-Coach: Wie Trainer virtuelles Lernen optimal fördern können (1st ed.). Weinheim: Beltz.

Clark, R. C., & Mayer, R. E. (2011). e-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning (3 edition). San Francisco, Calif: Pfeiffer.

Dirksen, J. (2011). Design For How People Learn (1st edition). Berkeley, CA: New Riders.

Johnson, J. (2013). Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines. Elsevier.

Kalyuga, S., Chandler, P., & Sweller, J. (1999). Managing split-attention and redundancy in multimedia instruction. Applied Cognitive Psychology - APPL COGNITIVE PSYCHOL, 13(4), 351–371. http://doi.org/10.1002/(SICI)1099-0720(199908)13:43.0.CO;2-6

Kempter, G., & Ritter, W. (2006). Zunahme von Gedächtnis- und Aufmerksamsleistung durch Änderung von GUI-Elementen. In Usability im eLearning und eLearning Strategien. FH Vorarlberg: Forum Neue Medien.

Kommer, I., & Mersin, T. (2002). Typographie und Layout für digitale Medien. München: Hanser Fachbuch.

Krug, S. (2009). Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd ed.). New Riders.

Krug, S. (2013). Don’t Make Me Think: A Common Sense Approach to Web Usability (3rd revised edition.). Berkeley, Calif.: New Riders.

Lozano, J.-C., & Yacovelli, S. (2014). 61 Tips for Making Learning Memorable with Graphics and Visual Design. The eLearning Guild.

Mehta, R., & Zhu, R. (Juliet). (2009). Blue or Red? Exploring the Effect of Color on Cognitive Task Performances. Science, 323(5918), 1226–1229. http://doi.org/10.1126/science.1169144

Miller, G. A. (1956). The magical number seven, plus or minus two: some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. http://doi.org/10.1037/h0043158

Mullet, K., & Sano, D. (1994). Designing Visual Interfaces: Communication Oriented Techniques (1st ed.). Englewood Cliffs, NJ: Prentice Hall.

26

Peters, D. (2013). Interface Design for Learning: Design Strategies for Learning Experiences (1st ed.). Berkeley, Calif: New Riders.

Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction Design: Beyond Human-Computer Interaction (1st ed.). New York, NY: John Wiley & Sons.

Rakoczi, G., Bochud, Y. E., Garbely, M., Hediger, A., & Pohl, M. (2013). Sieht gut aus - Visuelle Gestaltung auf wahrnehmungspsychologischen Grundlagen. In L3T - Lehrbuch für Lernen und Lehren mit Technologien (2nd ed.).

Shneiderman, B., & Plaisant, C. (2010). Designing the User Interface - Strategies for effective human-computer interaction (5th edition). Pearson.

Smith, S. L., & Mosier, J. N. (1986). Guidelines for Designing User Interface Software. MITRE Corporation Bedford.

Song, W., Uchida, S., & Liwicki, M. (2011). Comparative Study of Part-Based Handwritten Character Recognition Methods. In 2011 International Conference on Document Analysis and Recognition (ICDAR) (pp. 814–818). http://doi.org/10.1109/ICDAR.2011.167

Williams, R. (2008). The Non-Designer’s Design Book (3 edition). Berkeley, Calif: Peachpit Press.

Williams, T. R. (2000). Guidelines for Designing and Evaluating the Display of Information on the Web. Technical Communication, 47(3), 383–396.

27

Internet references

Andrade, M. R. (n.d.). The Gutenberg Diagram in Web Design — User Experience. Retrieved June 25, 2015, from https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627

Food Safety Level 1 course. (n.d.). Retrieved June 25, 2015, from http://www.essentialskillz.com/rospa/food-safety-level-1/

Gutierrez, K. (n.d.-a). Graphic Design Essentials to Build Good Lookin’ eLearning. Retrieved June 25, 2015, from http://info.shiftelearning.com/blog/graphic-design-essentials-to-build-good-lookin-elearning

Gutierrez, K. (n.d.-b). Understanding and Using the Laws of Perception in eLearning Design. Retrieved June 25, 2015, from http://info.shiftelearning.com/blog/bid/348019/Understanding-and-Using-the-Laws-of-Perception-in-eLearning-Design

Jan, J. (2014). How colors can enhance memory performance? – The Edynco blog. Retrieved June 25, 2015, from https://blog.edynco.com/instructional-design/how-colors-can-enhance-memory-performance/

Knapp, T. (2012). Non-Verbal Communication. Retrieved June 20, 2015, from http://thomasknappdesign.blogspot.co.at/2012/03/non-verbal-communication.html

Lacey, J. (n.d.). Using design rules as a guide, not a law, with regards to visual weight. Retrieved June 25, 2015, from http://www.dirigodev.com/blog/preview/design-rules-as-guide-visual-weight/

Malamed, C. (n.d.). Chunking Information for Instructional Design. Retrieved June 19, 2015, from http://theelearningcoach.com/elearning_design/chunking-information/

Monotype. (n.d.). Font Designer Jelle Bosma - Monotype. Retrieved June 25, 2015, from http://www.monotype.com/studio/jelle-bosma

Nielsen, J. (2002). Let Users Control Font Size. Retrieved June 25, 2015, from http://www.nngroup.com/articles/let-users-control-font-size/

Reddy, M. (2014). What is the Importance of Colors in E-learning? Retrieved June 19, 2015, from http://blog.commlabindia.com/elearning-design/colors-in-elearning-courses

Rey, G. D. (n.d.). E-Learning - Theorien, Gestaltungsempfehlungen und Forschung - Split-Attention I. Retrieved June 25, 2015, from http://www.elearning-psychologie.de/text_bild_integration_i.html

Soegaard, M. (n.d.). Gestalt principles of form perception. Retrieved June 25, 2015, from /encyclopedia/gestalt_principles_of_form_perception.html

28

List of figures

Figure 1: The pop-out effect enhances efficient information processing. .............. 4

Figure 2: Visual examples of Gestalt principles .................................................... 5

Figure 3: Two screen layouts which were shown to the participants in a study by

Parush et al. (1998). The left layout, which sepeartes thematic areas of the

interface and includes consistent button and input field sizes, received the best

quality rating. The right screen is an example for bad screen design due to

unorganized elements and inconsistent formatting. ...................................... 8

Figure 4: This example illustrates how the alignment of a heading can completely

change the perception the elements’ relationships on a page. The first image

suggests that the elements on the left side are subjections of “Computer

Books”, whereas the relationship is better presented if the heading is aligned

to the right. ................................................................................................... 9

Figure 5: The Gutenberg Diagram, developed by Edmund C. Arnold, illustrates the

natural eye movement when viewing a page (Lacey, n.d., n.p.). ................. 10

Figure 6: This image shows an e-learning application in which navigational

elements and content have been placed in strong areas, whereas decorative

elements are located in the weak lower right corner. .................................. 10

Figure 7: Even without captions, a visual hierarchy is present in the food pyramid

because of an established mental top-down association............................. 11

Figure 8: Comparison between two heading styles. The left style provides no clear

visual hierarchy, whereas the order of importance is represented more clearly

in the right example. ................................................................................... 14

Figure 9: Simple slab serif font families such as Rockwell can be used in body text.

Microsoft has commissioned the Georgia and Cambria typefaces specifically

for display and body text use. Kommer & Mersin recommend Georgia as the

best-suited serif font for low display resolutions (2002, p.158). ................... 15

Figure 10: The decrease in saturation is analogous to the displayed values and

supports the data hierarchy ........................................................................ 18

Figure 11: Procedural steps can be presented with varying hues of a color. ...... 18

Figure 12: The left image splits the viewer’s attention because it requires extra time

to establish a link between the numbers and the corresponding description.

................................................................................................................... 20

29

Figure 13: Informational text and corresponding graphic which have been

separated in a scrolling area ....................................................................... 20

Figure 14: From left to right: Iconic pictogram, symbolic pictogram, hybrid

pictogram .................................................................................................... 21

30

List of tables

Table 1: Although definite guidelines do not exist (Ballstaedt, 1997, p.1), the

following chart gives suggestions on suitable methods of visual representation

in learning materials based on the five types of knowledge. .......................... 6

Table 2. Emotions which are evoked by colors are influenced by associated color

temperature and mood (adapted from Ballstaedt, 1997, p.243). ................. 16

visual design of e-learning applications

Documents