For this post, I want to apply what I’m learning about navigation in website design to e-learning courses. I searched the Internet to find some web-based courses that I could assess for their navigation. Most of the courses I found required an account, but I did manage to find a few free sites that anyone can access.
For my assessment, I’m going to look at Vaccine Safety Basics, which is an e-learning course provided by the World Health Organization (WHO).
The homepage for this site has a professional looking design. The primary navigation menu on this page appears on the right hand side with three links: Welcome, Getting Started, and Start Course. The design gives me two clues that I’m on the Welcome page. One is the vertical red bar on the Welcome link. The other clue is the title “Welcome to the WHO Course on Vaccine Safety Basics”, which is in a larger font and in a different colour than the body text. If I scroll down the Welcome page, I can click a button to go to the Getting Started page. Having a second method of getting to another page is a good navigation feature. The site uses two other standard navigation features:
- A Search field in the top right hand corner
- A footer (shown below) which contains the contact information and links to other resources
When I click the Start Course link, it takes me to the Module 1 overview page below.
The navigation for the entire course appears on this page. Here are the navigation features I see:
- A title – MODULE 1: Introduction to vaccine safety. The title lets me know which module I’m in.
- A primary navigation bar – The course navigation menu. This menu contains the six modules and a general assessment that make up the course. I can click on any one of the menu items to go to that part of the course.
- A secondary navigation bar – The module content menu. This menu shows me a list of the topics in the module. The Overview and outcomes topic appears in red on the menu to indicate its the current topic.
- Topic headings – OVERVIEW and MODULE OUTCOMES. The headings are uppercase and in blue to stand out.
- An additional navigation bar – the Case studies and Glossary menu. This menu appears in a different colour and is located away from the course navigation menu. It’s in the same location in all the modules to allow me to access the case studies and glossary at any time.
- Navigation buttons – Next and Back. The page allows me to move forward and backward a topic. So I can use these button to navigate between topics or use the Content menu for the module.
- A return to the homepage – World Health Organization logo. If I click the logo on the top left hand corner of the page, it takes me back to the homepage. This navigation feature is a standard web convention.
What happens if I select any one of the navigation items? For example, what if I select Types of vaccine on the module’s Content menu? The topic changes and the heading Types of vaccine appears in uppercase blue text. Now what happens if I select another module from the course navigation menu, for example Module 3? As expected, the OVERVIEW and MODULE OUTCOMES page appears for the module.
This course has excellent navigation. It’s consistent and it follows both standard web conventions and navigation design principles. I can easily find my way around and see at a glance what the course content is and how to get back to the first page. I can find what I’m looking for using the Search field, which is located where I would expect to find it.
Kudos to the designers of Vaccine Safety Basics.
If you’d like to assess some other e-learning courses, here is a listing of 50 sites where you can take courses for free.
- 10 Principles of Navigation Design and Why Quality Navigation is So Critical
- Design with Web Conventions