Visual Design for eLearning

Introduction

In eLearning, good visual design is yet another challenge.  As instructors, we want our interactive lessons to look good – but we aren’t trained in layout and graphic design.  In many of my own projects, I’ve relied on graphic designers – but often I’ve had to make do with my own limited skills.  I’ve learned a couple of things over the years and am happy to share what little I know – more as a starting than an ending point.

Let’s begin with the premise that we want our pages to be visually appealing to students.  Of course, more importantly, we want our pages and layouts to support our instructional objectives.  We want things to look good and function well.  At the very least, we don’t want our design to distract the students or confuse them.

Fortunately, visual design is a combination of art and science.   We can draw from a body of knowledge that is evidence-based and not as subjective as we might imagine.

To describe visual design, I can start with the basic concepts of  flow, color, style, reading order, consistency, contrast and structure.

When in doubt, simplify

Whenever I’m in any doubt about visual design, I think about the art gallery.  In most galleries, the walls don’t compete with the art work.  Plain walls.  Open spaces. Strategically lit rooms.  The labels and interpretive text are positioned so the information is easily associated with the art work. The label doesn’t compete and isn’t crammed.  The text is printed in high contrast to the background.  I can move easily from piece to piece all around the room and then onto the next.  The flow is well thought out.

art_gallergtufts

Tufts University Art Gallery

Our interactive lessons can be designed similarly.  Text can be cleanly separated  from imagery – with an adequate margin between text and image.  Margins can provide clean separation of the other page elements. The page background can be selected to not compete or distract from the lesson.  The developer can be intentional about guiding the eye from one thing to the next.

Or not

Or sometimes, for effect, we can do the exact opposite.  Agitate, provoke, move students out of their comfort zones.  But, in either case, visual design requires intentionality.

Visual flow

Screen elements have different visual weights or powers of attraction based on the size, color, and even shape.  Unusual things attract the student’s attention.

Instructors should decide where students should look first.  If one element is larger than the others, students’ eyes might be drawn there.  If all elements are in black and white but there is a splash of color somewhere on the page, the student’s eye will go there.  We’ve known these things for some time, but recently, usability labs have provided us with eye tracking sensors, which produce heat maps. Heat maps graphically display how people look at a software screen, for example, and which elements they look at. Areas that attract the most attention appear in hot red.

From usability studies and from age-old observation, we know that visual designs have an entry point. We need to plan or consider where that entry point might be.

We also know that visual designs can have unintended exit points. As an example, hyperlinks can be hugely counterproductive to visual flow control.  For good reason, we think of hyperlinked information as being highly useful to students (another resource) but they introduce the risk of students losing the flow, being distracted, perhaps never returning to the lesson.

If our visual design is a simple text page, our job is easier.  We can use headings, sub-headings, text wrapped around images as well as size, italics and color to signal very important information.  If a page is a free-form layout, we need to plan visual flow more carefully.  In that planning, we need to note that the eye is attracted to color, strong contrasts, and follows along thick lines or elements that are composed in a way that suggests directionality.

Color

Color can be used to direct the eye and to attract the student’s eye to key information.  Richard Mayer, in his book Multimedia Learning (Cambridge Press, 2001), describes the signaling principle.  The signaling principle states that people learn better when cues that highlight the organization of the essential material are added.  Instructors can use color to provide that cue, but color-blind students will not benefit.  Multiple cues are needed to highlight essential material.  Italics for example.

2_illustration of color

Color used sparingly to draw the eye.  Layout created by Clint Clarkson

I’ve always been cautious of the ‘circus’ effect of too many colors.  One color will clearly signal important information or draw the student’s attention if s/he is not color blind.  Two and three colors can be used effectively.  Introducing more colors leans toward a circus effect, where color ceases to attract attention.  Graphic design sites describe a 60-30-10 rule, which states that:

The dominant color should be used 60% of the time, your secondary color 30% of the time, and an accent color 10% of the time. Typically, the most dominant color should also remain the least saturated color, while your bold or highly saturated accent color should be saved for your most important content.

http://www.eyequant.com/blog/2013/06/27/capturing-user-attention-with-color

 Style

Style may be the most fickle thing to embrace in your visual design approach.

In the early 20th century, graphic designers were influenced by modern art, the Bauhaus school, posters, the De Stijl movement (think Piet Modrian), constructivism, architecture and more.  Today graphic designers are as likely to be influenced by styles on the web.

Just a couple of years ago, instructional screens featured gradients, beveled buttons, drop shadows, textured backgrounds and an attempt to imitate the material world in the digital medium.  Microsoft and Apple, in the redesign of their graphical user interfaces, reflected the sudden change away from material world imitation.  Buttons lost their three-dimensionality and became flat, single-color, texture less features.  The new look became, in a sense, minimalist and, perhaps, more functional.  The rise in mobile computing favored flat designs over both texture and minute detail as well as other features that didn’t translate well to the small screen smart phone.

4-apple

Apple Interface: Shift to a flat design

Flat design is a thing.

“Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional illustrations.”  –Tom May, 2018

But styles change.  So, what is an instructor to do?  My hunch is that we should focus on evidence-based practices and embrace minimalism not for its trendy appeal but for its functionality.    We should probably pay attention to the world around us.  Pay attention to styles on the web.  Pick your favorite website and think about the underlying elements that make it visually appealing and functional.  Visit the website of a college of art and design.  Follow it over time.  But don’t get too hung up on style.  It is a black hole.  Once you pass the event horizon, you’ll never return to creating anything useful for your students.

Reading Order

Focus instead on some simple things – such as reading order.  Highlight important words to ‘signal’ their importance.  Use headings and sub-headings to expose the organizational structure of your page and to help students with visual disabilities who rely on a screen reader.  (Students with screen readers scan pages by moving from heading to heading.  A blind student who used JAWS (popular screen reader) can hit the 1 key to navigate to a level 1 heading  to get a sense of the structure and organization of the document.  He can hit the 2 key to move to a level 2 heading.

Use bulleted lists and numbered lists where appropriate and reduce the amount of writing.   The traditional wisdom was to ‘chunk’ writing by separating it into pages – but mobile devices may be affecting students’ habits.  They are accustomed to endless scrolls.  More research is needed on the effects of cognitive load of endlessly scrolling pages.

Again, when in doubt, simplicity is preferable.

Consistency

Consistency is key. As students navigate the lesson, they shouldn’t burn brain cells on figuring out each page.   Pages that function the same should be styled the same.   For example, imagine that your page summarizes key concepts with a bulleted list.  Summarizing key concepts is an important strategy.  Our  pages may dive deeply into the details – but we want students to emerge with a clear map of the key ideas.  A bulleted list can be set off to the side of the page (left or right) or placed underneath, separated by space, color, and possibly a border.   The placement should be consistent so that students know where to find the summary in each part of the lesson.  They’ll look for it.

Contrast

At all times we need a strong contrast between the text and the background.  Lack of contrast affects readability.   Strong contrast also directs the eye.   I break this rule too often when I style hyperlinks to be colored in something other than the standard, boring blue with no decorative underline.  And I always regret it.  I strive for elegance and create a problem instead.

Some of these key principles relate to work done on perception by the Gestalt psychologists of the early twentieth century.  One of their principles, ‘Figure-Ground’ relates to an object and its surroundings.  Photographers embrace this principle when they want the subject of a photograph to be clearly known – in other words separation of the subject from the background.  Photographers will use a large aperture setting to blur the background (reduced depth of field) and thus create a clear distinction between figure and ground.  All elements in the lesson need to be distinct from the background – and that especially applies to text and the background.

Structure

Structure relates to the organization of elements on the screen.  It is concerned with proportion, symmetry, asymmetry, and balance.  These concepts are expressed in so many ways.  In photography, artists may think in terms of the rule of thirds – whether they are following or breaking the rule.  Two-thirds land; one-third sky.  One-third rocky foreground; two-thirds blurred valley background.   Two-thirds of blank space on the left; one-third of birds on the right.  Halves, in symmetry has quite a different effect and can be a statement in and of itself.  The parliament buildings of London reflected in perfect symmetry in the Thames, for example.

We can make similar decisions with the placement of images on the page.  They can be set with a width of 66%, which means that they will always scale to two-thirds of the page, regardless of page size.  Or the image can be set to 33% with text wrapping the image and taking up the remaining space.  Or they can be wrapped in negative space (e.g. white background) with the ratio of image to negative space a very deliberate choice.  Again, photographers might subdivide the plane in a three by three grid, which gives them 9 spaces in which to organize the structural elements of the photograph.  Traditional layout artists, similarly, had grids that subdivided the page.  Instructors can get a sense of their layout by abstracting the visual elements on the page as shapes.  The paragraph becomes a dark block.  The negative space becomes a white block.  What proportion of the overall space do the blocks occupy?  What is their relationship to one another?  Are they pleasing and pure?  Are they distracting and confusing?

Ratios or proportions reduced to formulas probably doesn’t explain why some layouts are pleasing to the eye and others are not – but it is still interesting to consider the use of math in the pursuit of beauty. The divine proportion or the golden ratio was probably used to plan some of the great pyramids and it is being used evidently today to construct websites.  We know that from, again, abstracting web elements into dark and light shapes. The ratio is defined by a simple equation:

a/b = (a+b)/a = 1.6180339887498948420

So, if our text block was denoted by ‘a’ and our image block was denoted by ‘b’, the ratio of text to image would be the same as the ratio of text plus image to text alone.  So, the secret to all good learning is in the golden ratio?  Not quite.  The only point I am making is that the proportion of things will have an effect.  We should at least be aware of how things are laid out on the screen. Proportion matters.

3-Proportion.png

Layout created by Lauren Franza

Conclusion

The instructor who consciously and conscientiously includes visual design in the planning of his or her eLearning lesson will reap the reward.  Students will benefit from being guided through the lesson, and not being distracted by colors, crammed elements, inconsistency, poor readability, and an off-putting layout.  Visual design is a large study – but the application of a few principles will greatly improve one’s eLearning design.

Advertisements

10 Techniques to Engage Students

The instructor as designer recognizes that the online platform can do more than simply compel students to read, watch, and listen. With carefully designed learning activities, instructors can engage students in explaining, categorizing, inferring, applying, solving problems and more. In short, rather than simply reading content, students can be working and interacting with content in meaningful ways.

Our audience is the instructor as designer. We hold on to the hope that online learning won’t be commercialized to the point of reducing instructors to proctors. We value the instructor as designer because no one understands his or her students’ needs better than the instructor. And, although developing online learning may be time consuming, it’s a lot of fun. Who wants to delegate that entirely to publishers?

Screenshot of the LodeStar eLearning authoring tool

Screenshot of the LodeStar eLearning authoring tool

In recent posts, we’ve been thinking and writing about larger design concepts that help instructors to engage students. This article, in contrast, surveys a range of techniques supported by the LodeStar eLearning authoring tool — sometimes in minute detail — that sharpen the edge of a well-designed activity and make it more effective.

Unless, you follow the development of the LodeStar authoring tool very closely, some of the items below will come as a surprise to you. Again, some of these items are simply techniques that will enhance your online learning projects; other items are larger in scope.

Let’s start with some simple techniques and then work our way up.

Introduction

The LodeStar eLearning authoring tool offers a range of templates that help instructors build online activities. The ‘Swiss Army Knife’ of templates is the ActivityMaker template. If you wish to get a good sense of what ActivityMaker can do, visit our post at https://lodestarlearn.wordpress.com/2015/01/03/12-ways-to-engage-students-with-elearning-authoring-tools/

This article (not the link) dips into some of the settings of the authoring system that can affect student engagement in a significant and meaningful way. Each of the techniques is numbered and listed below.

#1: Link to other pages in a project

Knowledge is an interconnected web of informational, procedural and conceptual relationships. Sometimes, we want our designs to pick a ‘happy path’ through a topic’s complexity. We want students to start with a limited number of simple propositions or declarations and build up to a more complex understanding of the subject matter. Sometimes we want students to infer generalizations from the information that is presented to them in a relational manner.

A LodeStar activity can be a linear progression through content and application or it can be an interconnected website or both. A LodeStar activity can have navigational buttons that step a student through the content or it can turn off navigational buttons. Students can navigate through links, table of contents, or branching (discussed later).

For example, instructors may want to create a menu to give students choice of content. The menu page in the ActivityMaker template is restricted to four menu options and may, therefore, not be satisfactory. What if an instructor wanted five or … ten menu items?

What if an instructor simply wanted to link together pages in a LodeStar activity? Fortunately, the technique is simple in LodeStar 7.2 build 12 or later.

To make this work, be sure to give each of your pages a unique page ID. Once you have given your pages a page id, then select text that you wish to convert to a link. Click on the link button in the editor. The pull- down menu will reveal page id’s to you both in name and numerical format. Select the page that you want linked.

Of course, you are not restricted to pages within LodeStar. You can link to anywhere on the internet.

#2: Link to an overlay

So now that we know how create links to pages within LodeStar, let’s see what more we can do. Typically, links cause the program to jump to the linked page. If designers check ‘Show as Overlay’, the linked page displays as an overlay. In other words, students won’t jump to the page. The linked content gets overlaid on the current page. Students don’t lose their place or the context of the learning.

Note that text pages, with or without graphics, make the best overlays. Other page types are restricted from acting as overlays for technical reasons.

#3: Make Use of the Page Options

Each page type in ActivityMaker comes with various options that will help instructors to enhance the students’ experience.

The speaker icon enables instructors to import an MP3 file. In the audio dialog they can choose to display a player control to pause and play audio.They can also cause the audio to play automatically when the page starts.

Pages with audio look like this:

A small audio icon appears at the top left when audio is available

A small audio icon appears at the top left when audio is available

I’ll review some of the other controls that instructors may see either on a text page or question page or both.

Controls found on the right side of LodeStar pages

Controls found on the right side of LodeStar pages

The Correct Answer and Incorrect Answer branch icons allow instructors to branch or provide feedback based on overall (page level) correct or incorrect responses instead of answer level option branches.

The Table of Contents check box adds the current page to the table of contents. Different options for table of contents are found under Tools > Project Settings.

The Resources check box turns the current page into a resource that can be accessed at any time. Checking the check box causes a button to display at the bottom of the screen (depending on the layout), which will bring up the page as resource at any time.

Again, text pages, with or without graphics, make the best resources.

The ‘Do Not Display Correct Answer’ suspends feedback that informs the student of the correct answer.

The ‘Use Multiple Choice Radio Buttons’ converts the multiple select question type to a multiple choice question type. In playback mode, students will see radio buttons rather than checkboxes next to each answer option.

‘Point Value’, of course, assigns points to the current Question page.

‘Remove from Flow’ prevents the page from being displayed, unless branched to.

#4: Use Page Branching to Differentiate Instruction

The following is self-evident and almost foolish to write, if not for common practice: Student’s don’t all learn in the same manner. They don’t share the same level of prior knowledge, aptitude, experience, motivation, etc. A benefit of online learning, which is largely unrealized today, is that we can differentiate instruction based on student choice and performance.

Here is a recital of the various ways that projects created from the ActivityMaker template can differentiate instruction.

  • Links to different pages (content areas) offer students choice and a sense of control over their own learning. This is particularly important for adult learners.
  • Displaying pages as resources allows a student to summon up page content at any time. The student may be working on a case study and may wish to have quick access to critical information.
  • Branches based on performance either at the answer option level, page level or section level. The branch icon appears in LodeStar in various places. We see it next to answer options on the multiple choice question page. That means that a branch option and/or feedback will display if that answer is picked. There are many branch actions. ‘Jump to Page’ is one example.
  • Page Level branches follow a branch and/or provide feedback based on overall correct or incorrect responses. For example, in multiple select questions it might be difficult to branch based on any one selection. A page level branch can be based on whether or not the student answered correctly overall.
  • Section level branches are accomplished with gates. A ‘Gate’ is an ActivityMaker page type. Gates support all of the branch actions supported by answer level options and more. In other words, gates control program flow. For example, the program can jump to remedial activities or a higher level of challenge.

#5: Use Video to Bring a Project to Life

Even though the well-known educational psychologist Richard E. Mayer observes that we don’t fully understand the role of video in online learning, he acknowledges that it plays an important role.

In our view, short videos can bring an online learning project to life. It can bring experts to the course site; provide students with an audio-visual look at phenomena in, perhaps, a more efficient way than text and graphics; and it may be the preferred mode of learning for many students.

LodeStar supports three important forms of video.

One, the ActivityMaker template video page supports YouTube Video. Rather than fussing with embed codes, instructors can simply paste a YouTube URL into the main field. Although the LodeStar previewer doesn’t display YouTube videos, instructors can preview videos by launching the project in Firefox. The Firefox browser supports the preview of local resources. Other browsers do not.

Two, ActivityMaker enables an instructor to link an MP4 video file that is available by URL over the internet. LodeStar supports merging an MP4 video from an internet source with a WebVtt (.vtt) caption file imported into the project.

Three, ActivityMaker enables an instructor to import an MP4 file into the project.

#6: Use Flashcards to Help Students Remember

When students struggle to remember a term or definition it increases their cognitive load and makes the assimilation of new information more taxing than need be.  Many strategies help students remember information.  The use of Flashcards is but one example.

ActivityMaker supports Flashcards. In other words, Flashcards are part of the Swiss Army knife that ActivityMaker represents. The positive side is that a Flashcard activity can be blended with other pages that engage students in such things as video, text and graphics and checks for understanding. The negative side is that instructors have found it challenging to set up the gates that are needed for incorrectly answered flashcards to be returned to the queue.

LodeStar now offers the Flashcards template. Instructors will find the gates preset correctly. Instructors need only add the instructions, fill in the first card and add more. This template is still based on the ActivityMaker template. That means that instructors can add other page types and benefit from the full functionality of ActivityMaker.

#7: Use Instructional Design Patterns (compound strategies) like WebQuests

In previous articles, we introduced the concept of instructional design patterns. If you missed the articles, start with https://lodestarlearn.wordpress.com/2015/05/04/instructional-design-patterns/

WebQuests are one example of an instructional design pattern. WebQuests are an inquiry-based format, first introduced by Dr, Bernie Dodge at San Diego State.

LodeStar now offers the Webquest template to make it easier for faculty to build them and export them to learning management systems. Webquests are extremely popular in K12, but they show great promise in higher education. In brief, a Webquest sends students out into the internet with a purpose. A Webquest defines a task for students to complete, often in groups, and then spells out a process for completing the task. A Webquest offers a finite set of links as resources that have been vetted by the instructor or ‘an expert’.

For a closer look at Webquests in area of nursing education, view the following quantitative and qualitative study submitted to the International Journal of Nursing:

http://aripd.org/journals/ijn/Vol_1_No_1_June_2014/4.pdf

The LodeStar Webquest template is also based on ActivityMaker. That means that Webquest authors have the full range of ActivityMaker capabilities open to them. At the same time, instructors do not need to complete all of the set up required for a Webquest.  That is all done for them in the Webquest template.

#8: Use eBooks (epub 3)

If you missed our article on Open Textbooks and ePub, you’ll want to visit the following link:

https://lodestarlearn.wordpress.com/2015/07/29/open-textbooks-and-epub/

In short, LodeStar enables instructors to author their own eBooks. Actually, authoring an eBook may seem daunting. The epub3Maker template supports not only eBooks but something much much smaller in scale such as white papers,  pamphlets, lab manuals, course introductions….whatever.

#9: Jazz up your Activities with Themes and Layouts

LodeStar now supports both themes and layouts. Themes enable instructors to choose from a number of color coordinated presets. Theme is mostly about color. Theme controls the colors of the header, footer, content area and HTML background. Instructors can even click on the advanced button in the ThemesManager dialog and create their own header and footer gradients.

Themes have been around in LodeStar for a long long time. Layouts are relatively new.

Layouts enable instructors to choose from a range of presets that affect the position of the header, footer, content body, table of contents and any gadgets that are used in the project.

With the combination of Themes and Layouts, instructors can create a unique look for their projects.

#10: Infographics

Infographics can play a number of roles in eLearning. They can provide data in a pleasing pictorial format through the use of headlines, graphs, symbols and images. They can outline a topic of interest to help students organize material and understand up front what some of the key points will be. They can be used to assess students when instructors invite students to generate their own infographics to communicate their understanding of a key issue or concept.

Here is the typical infographic:

http://elearninginfographics.com/elearning-statistics-2014-infographic/b

Here is one more to look at.

The following infographic was created in LodeStar and combines a Prezi style presentation with an infographic style of presentation. It introduces seven phenomena that we are paying close attention to:

www.lodestarlearning.com/samples/Ten_Trends_Infographic/index.htm

Conclusion

Instructors and students benefit from LodeStar’s rich array of options. Instructors can choose from a variety of templates. The ActivityMaker template offers an array of page types. Page types can offer an array of options. All of this helps the instructor create a rich and engaging experience for students.