From Chapter 1 of my Book: Make Your Online Courses Rock

Designing Clear Learning Paths

If there is one thing I have learned after standing in front of countless students during countless first days of a new class, it is that they are stressed! The process of learning can be very stressful. In face to face courses just making it to the first day of class consists of meeting more than a few challenges. Surviving the registration process, buying and scanning over daunting textbooks, and navigating one’s way through a maze of hallways to a classroom full of strangers facing an even stranger instructor can be a formidable and stressful process.

Likewise, online courses can be stressful consisting of multiple steps for accessing and logging into a Learning Management System (LMS) for the first time.  Students confronted with your online course must complete a number of decisions in order to navigate to the syllabus, assignments and assessments. Each decision takes a certain degree of mental energy and contributes to something called cognitive load.

 

What is Cognitive Load?

When learning a new concept information is kept in working memory until more permanent connections are made. Since our working memory is limited, reducing the amount of information facilitates learning. In other words, the more decisions we have to make in order to learn something the harder it is to learn. Too many decisions can interfere with learning.

These decisions can include such mental self-talk as: 

“Where do I find the syllabus?”

“Do I click here?”

“Now that I am here how do I get back?”

“What am I supposed to do first?”

“Is this a link?”

“Can I click on this picture?”

The goal for creating a successful learning path is to reduce cognitive load as much as possible.  We do this by following some basic principles of usability.

 

What is Usability?

Usability, as its name implies, has to do with how easy it is to use an interface. It is a science that has grown out of web interfaces such as websites but can be applied to any kind of human interface. In our world this means online courses hosted by a learning management system.  Online courses should be as easy to use as possible. Students should be able to navigate around a course with little effort, locate assessments without confusion and interact with their instructors and peers in a clean, intuitive online environment.  

 

Usability 101—Overall Layout

The first step in making sure your course rocks is to examine the overall layout. When it comes to information our brains love structure. We like to see recognizable patterns that reduce the number of decisions needed to understand something. In other words, information needs to be laid out in a way that facilitates processing rather than impedes it. We do this by organizing information according to a set of guidelines.

 

Designing Within a Learning Management System (LMS)

Online courses are presented via software platforms known as learning management systems. Here is the definition of an LMS from Wikipedia:

“A learning management system (LMS) is a software application for the administration, documentation, tracking, reporting and delivery of electronic educational technology (also called elearning) education courses or training programs.”

There are hundreds of LMS software programs available with a variety of features. The LMS market is now over a billion dollars annually and is projected to continue to grow. According to Capterra (2015) at the time of this writing the top 10 LMS’s are:

Moodle
Edmoto
Blackboard
Skillsoft
Schoology
Cornerstone
Collaborize Classroom
SuccessFactors
Instructure
Desire2Learn

Most systems have similar functions but there are also variations in how they are presented. According to Insight on Education (2014) the key features of learning management systems include:

Mastery Learning – ability to create content, track student progress, grade assessments, and analyze data.

Discussion forum –ability to communicate with instructors and other students.

Learning community – ability to learn best practices.

Social learning tools – forums, wikis, chat, etc.

Mobile learning – mobile apps are available for different platforms and offer the same experience as the computer version

Integration - with existing district programs, like student information systems or Google Apps

Security - teacher and student data needs to be secure

Scalability - must be able to grow with the needs of the school/district

The LMS structure presents some constrains with regard to course presentation and layout but there are still some things we can do to make our courses easier to follow. Many systems allow flexibility for individual instructors to design pages, arrange learning plans, and tweak navigation in order to customize the interface for their particular needs. Here are some general guidelines for laying out a course.

 

Using WYSIWYG Editors

Many systems include the ability to edit pages by using What You See Is What You Get (WYSISWG) editors. These editors present a visual interface for designing an html page. In other words, you can use these editors to design simple html web pages for your course without knowing any html code. These editors allow for a good deal of flexibility since instructors can add text, images, links, and videos to course pages.

WYSISYG editors are usually built into an LMS. Some are more flexible than others. You can also download and use 3rd party editors and web page design programs such as Adobe Dreamweaver to create html code that you can copy and paste into a WYSIWYG editor.

 

 

 

 

 

 

 

Web conventions. The logo should be in the upper left corner with main navigation across the top of the page and secondary navigation down the left side. 

Users scan web pages in an “F” shaped pattern. 

Online Course Design/Usability

We need to design according to the way expect to see things on the web. In order to do this, we use conventions. Conventions are standards we automatically follow. Spending time on the web trains us to follow certain guidelines with regard to web interfaces. For example, we identify clickable content when we move our cursors over objects because they signal us with visual clues such as underlining, changing color, or becoming highlighted. We know that clicking on the large arrow in the center of a video will cause it to play or a shopping cart means we can buy something. The web is full of conventions, so why not use them as much as possible?

Bottom line is to use the programming that is already present in our minds from visiting countless webpages. Your students will sail through your courses with ease and you will be happier with less confusion and emails.  

Some Important Conventions

One important convention has to do with the placement of company logos. Logos must occupy the prime upper left corner. Since most of us are designing courses, the school logo should occupy this prime position. We can also apply this concept by using this convention to “frame” blocks of information. For example, in figure 1.3 we see the title of a block of text. The title resides in the upper left corner.

 

Another convention has to do with navigation. We like to see navigation located across top of site with secondary navigation on left-hand side. So, important items should be listed across the top while subcategories along the left-hand side. See figure 1.6. 

How We View Web Pages

It is important to design pages the way people view pages. When I sit down to read a nice hard cover science fiction novel on a cold winter night, my brain savors each word. I read slowly, forming images in my mind and get lost in the text. It is a very satisfying experience and somewhat reminiscent of the long days I spent at the college library reading textbooks and deeply thinking about what I read.

Now, if I were to open my laptop on the same night with the goal of researching some science topic my brain creates a much different experience. I tend to scan web pages looking for something to click on. In this case I might be deciding whether the site was credible and then looking for a link to information about my topic. I proceed by scanning and clicking, scanning, clicking, more scanning and more clicking until I find something interesting. Then I scan it and decide whether to devote the necessary time to reading it.

This process is much like a child in a candy store. The child enters the store with her dad. Delicious and colorful candy displayed in clear plastic bins lines the shelves. Dad tells the child she can have a small bag of any one type of candy she chooses.

She walks along the rows of shelves scanning the tasty treats and stops by one containing lemon drops. The proprietor asks if she’d like to try one. He reaches in and presents one lemon drop. She pops it into her mouth…too sour…so she moves along the shelves scanning each bin until again stopping by one filled with gummy bears. The proprietor again asks if she wants to try a sample, she does and decides this is the candy she wants.

Like the child, my scanning led to sampling which eventually led to selecting a piece of information I would invest my time in reading. The bottom line is that our brains work differently when it comes to the internet. They scan and scan until finding that tasty morsel to ingest.

This means that we should present information in a way that is conducive to the way we process information online. This also means that students will probably not read much of your meticulously crafted text. In fact, as we will see later, less text is better.

There are consistencies regarding how we scan web pages. We tend to scan web pages in an “F” shaped pattern beginning at the top left and then continuing across the top before moving downward and across and then again downward and across (figure 1.2).

 

So, if you have something important to say, say it in the top left of the screen and within the first two paragraphs. 

Dr. Bruce Forciea

Elearning Designer /Author/Educator/SME

This brings up an interesting point. It seems that our brains like certain structures, especially when it comes to information. Our brains like tidy left-justified rows versus centered text. Take a look at figures 1.4 and 1.5 the text in the bottom picture is easier to read than the text on the top.  

An important convention has to do with identifying what is clickable. We like to click on objects that look like they can be clicked. In other words, buttons should look clickable. A 3D button is better than a 2D button and so on. Figure 1.7 shows us a selection of clickable and not so clickable buttons. Images are not intuitively clickable and should be labeled as such if they are.  Text is preferred over images for links as well.

 

We like to see links presented in a certain way as well. Links should be in a different color than other text and underlined when the cursor hovers over them.

Create visual hierarchies: Information flow and structure should be arranged in an obvious way. Students should be able to recognize which information is most important and what other information it encompasses.

Functions of WYSIWYG editors can vary but many include: 

Text—choosing fonts, text size, colors, underline, bold, italic, subscript and superscript. Many allow copying and pasting from other programs as well as centering, left and right justified text.

Lists—bulleted and numbered lists.

Backgrounds—choosing colors, adding pictures and textures to backgrounds.

Images—adding, sizing, and moving images. Mapping images to create links.

Links—adding links to webpages.

Media—adding video. 

This section may seem like common sense, but I am frequently surprised to see clumsy course design. Examples include assignments displayed in a location to indicate they come before activities, pages containing links for several sections of a course, too many activities and links displayed on pages and so on.

In designing websites all information is not created equal and should be organized according to its degree of importance. The most important information should occupy the prime upper left corner of the site with less important information residing in the first two paragraphs and even less important information below.

We can use this concept for designing pages within an LMS so that important information occupies the prime upper left corner and first two paragraphs and remaining information forming a structure.

Most courses will include the following broad categories of items.

 

Activities

Activities are what students do to learn. Activities include readings, audio, video, interactive learning objects created with Flash, external websites, and so on.

 

Assessments

Assessments are activities students do that count toward a grade. These can be either formative or summative assessments. Formative assessments collect and incorporate feedback for learning and although they may count toward a grade, the stakes are usually low. For example, I use some lab activities as formative assessments. Students attempt the activity and then receive feedback for future attempts. They attempt the activity as many times as needed to complete it without errors. 

Summative assessments also receive feedback, but feedback is given after the attempt. These would include quizzes, exams, papers, projects, and so on. I will cover assessments in a later chapter.

 

Information Structures

Here comes the common-sense part. We need to put ourselves in our students’ shoes as much as possible. Imagine taking your course for the first time. Can you determine how to begin at a glance or do you need to read copious amounts of text and email your instructor to find out. Does the course flow in a sequential way to indicate completing activities before assessments? Can you find your grades, course announcements, and course materials without much effort?

Information should be presented in a sequential manner. In other words when students access your course there should be little confusion as to what is to be completed when. Activities should come before assessments with as little deep linking as possible.

Develop a hierarchical structure for presenting your course information.

Figure 1.8 shows an example of a simple hierarchical structure.