You’re designing an e-learning course and you’re wondering how you should set up your course navigation… the good news is there are more options available to you than just the standard left-hand menu and your typical next/back buttons. This isn’t to say that there’s anything wrong with using the left-hand menu and the next/back buttons — there isn’t. In fact, I think it’s usually a good idea to stick with what people are used to because it means your learners won’t have to guess about how to navigate or where to click. People have certain expectations about how they should be able to navigate an e-learning module (influenced greatly, I believe, by how they navigate websites) and if you deviate too much from the norm, it could lead to confusion!
Here is a list of 6 navigation styles you can use in your e-learning projects with some tips and info about each one. I’ve also included a published course that I developed featuring an example of each nav style, to help you get inspired.
- Commonly used navigation style in web design.
- Drawback to using horizontal nav is that you can only display a limited number of links horizontally (probably 5-8, depending on text size and number of characters), so this might not be the best option for complex courses with a lot of information.
- A drop-down sub-menu can be used to link to additional information.
- This is the menu style that is most often used in e-learning courses. Adobe Captivate, Articulate Presenter and Storyline, Lectora and Oracle UPK are all authoring tools that display a menu/table of contents on the left-hand side by default.
- As with the horizontal navigation, a drop-down sub-menu can be used to link to additional information.
- Limit the number of links you use in your vertical menu or it can become overwhelming for users.
- Interesting fact: according to usability study on navigation patterns vertical navigation bars on the left performs better than vertical navigation bars on the right.
- Tabs are popular in web design and are usually used horizontally.
- Tabs can also be used vertically, but be careful because this might make it difficult to read the text.
- They make navigation intuitive because people are used to seeing tabs to navigate (in filing systems, notebooks, binders, etc.).
- Next and Back buttons are standard in e-learning courses. Even when you want to avoid boring, linear, “click-next” style courses… you sometimes still need to use a next and back button!
- These buttons are often used in conjunction with another type of navigation (vertical menu, horizontal nav, etc.).
- Arrow icons are often used to add a visual cue of going forward and backward.
- Breadcrumbs are used as a secondary form of navigation and not as the primary nav.
- They are used to show a learner where they are in an e-learning course; they orient learners when there are multiple layers of navigation.
- Interesting fact: breadcrumb navigation gets its name from the fairy tale Hansel and Gretel, where they leave breadcrumbs along their journey, so they can find their way home.
Grid Style Navigation
- Usually created with images, although it could be shapes and text as well.
- Good option for a main course menu and for courses that have visually rich content.
I hope this post has given you some ideas for how you want to set up the navigation in your next e-learning project. Here are a few links to some great resources that helped me write this post: