Usability for Online Courses

My daughter is about half-way through one of her online college courses and I finally had a chance to take a look. Unfortunately, this course was not the best example of a course that incorporates usability. The course was in Blackboard (which is a good LMS) but suffered from poor design. For example, when I asked which assignments were due next week, she began a complex explanation of how some of the information was hidden in course pages, while other information was buried in the 15 page syllabus, and still other information had to be obtained by emailing the instructor. 

All of this clicking and searching could have been avoided by incorporating some simple principles of usability. Unfortunately, I have seen many many courses that could use a bit of help in this area. This article is a primer on usability for online course design. 

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

The first step 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.

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 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, 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.

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

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 the following figure we see the title of a block of text. The title resides in the upper left corner. 

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.  

Other conventions include colors of linkable text (should be blue) and using images that look clickable. 

Most important is to create an intuitive flow throughout the course. Using "Begin Here" sections, breadcrumbs, images that guide the learner, videos and other content. This content should be presented in an organized, linear design that makes the sequence of activities and assignments obvious to the learner. 

For example, when students access my courses they see an introductory video that goes over how to navigate the course with examples. I also post a "How to Begin" message in the course forum and provide opening pages in modules that provide step-by-step instructions. 

My point is that many of us spend a lot of time on content while ignoring the extremely important concept of usability in our courses.