Category Archives: Navigation

Illustrated Website with Fun Navigation

James Garner

JamesGarner.co.uk is my second favourite website that I’ve discovered recently.  I think this site is genius. The designer makes me feel like I’m in a story book, and he uses some subtle animation just like my first favourite site. There’s very little text on this site, which is fine since James is an illustrator and designer.

Scroll down and check out Bob. You’ll find some amazing sea creatures if you scroll toward the bottom. Watch out for tentacles.

Advertisements

Navigation Design for E-Learning Courses

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

Vaccine Safety Basics_home

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

WHO_footer

When I click the Start Course link, it takes me to the Module 1 overview page below.

WHO_Start Course

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.

Module title

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

course title bar

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

content

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

References: