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]
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
II
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 elearning 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.
III
Table of contents Declaration
II
Abstract
III
Table of contents
IV
Introduction
1
Method
2
1
3 3 4
2
Cognitive processes 1.1 Attention 1.2 Perception and recognition 1.2.1
Gestalt principles
4
1.2.2
Five types of knowledge
5
1.3 Memory
6
Layout and structure 2.1 Visual grouping 2.2 Visual hierarchy
7 7 9
2.2.1
Hierarchy by graphical elements
2.2.2
Hierarchy by placement
10
2.2.3
Hierarchy by knowledge
11
2.3 Consistency 2.4 Simplification in e-learning
11 12
3
Readability in e-learning applications 3.1 Typographic design for display reading 3.2 Typefaces 3.3 Text size
13 13 14 15
4
Color considerations 4.1 Color psychology 4.2 Guiding attention with color 4.3 The importance of contrast
16 16 17 17
5
Instructional images & graphics 5.1 Text-image interplay
19 19
5.1.1
Split-attention effect
5.2 Icons and pictograms
9
19
21
5.2.1
Fast recognition of icons and symbols
22
5.2.2
Labelling icons
22
IV
5.3 Animated and interactive visuals
22
Conclusion
24
References List of Literature Internet references
25 25 27
List of figures
28
List of tables
30
V
Introduction
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).
1
Method
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 SteffenPeter 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.
2
Cognitive processes
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.
3
Cognitive processes
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.
4
Cognitive processes
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 5
Cognitive processes ensure effective cognitive processing. Successfully determining which brain areas should be addressed is an important step in creating educational content. Type of knowledge Visual (sensory) Spatial
Recommended presentation Graphics, icons, pictograms 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 59 (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).
6
Layout and structure
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.
7
Layout and structure 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)
8
Layout and structure
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)
9
Layout and structure
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/) 10
Layout and structure
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). 11
Layout and structure 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 elearning 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 hovermovements. (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.
12
Readability in e-learning applications
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.
13
Readability in e-learning applications
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 xheight, 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.).
14
Readability in e-learning applications
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).
15
Color considerations
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.). 16
Color considerations
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).
17
Color considerations 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-memoryperformance/)
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.
18
Instructional images & graphics
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
19
Instructional images & graphics 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)
20
Instructional images & graphics 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.)
21
Instructional images & graphics
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 22
Instructional images & graphics 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.
23
Conclusion
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 elearning. 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.
24
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.
25
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 HumanComputer 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.
26
Internet references Andrade, M. R. (n.d.). The Gutenberg Diagram in Web Design — User Experience. Retrieved June 25, 2015, from https://medium.com/userexperience-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-buildgood-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-Usingthe-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/instructionaldesign/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-verbalcommunication.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-visualweight/ 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/elearningdesign/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
27
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
28
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
29
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
30