Momenta Learning

A blog on topics related to Elearning, online education, and instructional design.

Wednesday, January 23, 2013

Navigation Menus in Online Courses

In my previous post I talked about my LMS system, the Sakai platform. Like I said, it has advantages and disadvantages. I also mentioned that I design my courses using HTML and Javascript pages that I insert inside a Sakai site. One of the first things you see when you enter the LMS is the left-hand side menu with the tools that instructors, designers and students use. This menu is a list of links arranged in a vertical fashion and the number of links is dictated by the tools the course requires to be active.
Most of the online courses I have seen from other instructional designers use either the vertical menu or the horizontal menu. The obvious advantage of the vertical arrangement is that you can have as many links as you want, and you basically would not run out of webpage space. In contrast, the horizontal menu is limited in the amount of links you can place across the screen, although I have seen monsters with rows of horizontal menus, albeit in regular web pages.
In this case though, vertical menus are out of the question because we would have a “double column menu” (the one from Sakai and the one from my course), this would cause student disorientation and frustration because they might click on the wrong menu, since they would be very close to each other. This leaves us with the horizontal menu. But this limits us to the amount of links we can place on the page. You do not want to place more than seven links on a horizontal menu (this is just an arbitrary number, it has come up from our experience designing courses). In this age of smaller and smaller screens, a horizontal menu with lots of links is just not going to work. Our courses are designed so that they can be viewed on a tablet. A menu with more than seven links would make the font on the links smaller and smaller, making it difficult to read and adding an extra step to having to zoom so that the learner can read the text on the menu link.
If I want to know what works or what doesn’t work, then I would turn to the research in the field. I made an extensive research of the literature in the standard places (Web of Science and Google Scholar). Nothing, nada. Then I started a more thorough research in specialized databases. I found myself looking at computer interface and technology journals, where I was able to find research on navigation menus as recent as 2002 [1]. Then I found two more interesting papers referenced in the first one, but they are as recent as 2000 and 1998 [2, 3]. But curiously enough, not published materials in education journals (more explicitly, those dealing with the use of computers for instruction), if you have a reference that can help me in this area, please share it.
The 2002 study [1] found that the menu with drop-down submenus works best in reducing the amount of time it takes to search for information and it decreases the number of clicks required to reach a deep layer of the website structure. But there is a caveat: this design increases the number of links that a page contains. This is very easy to overcome by expert users, but a problem for novices. Park [2] recommends creating some kind of guide to help the novice user navigate this structure. This we do with our courses by creating a video with text bubbles that explain what each item in the menu works and how to get to all the pages and subpages in the course.
Most of the recommendations on how to add style and coloring to menus have been widely discussed in web design books and articles, but I did not find anything published in peer-reviewed journals. Most of them deal with the addition of colors to links, where to place the menu (top of page, middle, etc.), selecting a background color and an adequate font color and so on, but no concrete empirical studies as to why. I am pretty sure this has been done, but it is probably proprietary material and has not been made available to the general public. Again, if you find something, let me know.
Menus need to be, not only eye-appealing, but functional. We should not sacrifice functionality for beauty when designing our course menu. It should take the student a few amount of mouse clicks to reach an information source. It seems that menus with drop-down submenus are favored, according to web design research or computer-human interface research [1]. Unfortunately, I did not find recent published studies on the effect of menu design for online courses.
Two important characteristics of a navigation menu are,
  1. A menu has to take the learner to the right site in the course. This means the least amount of time to search for information.
  2. It needs to have structure, this means the learner needs to know at every time where he/she is located or they will get confused and disoriented, which leads to a frustrated student that quits the course.
This is a very interesting subject for research that seems to have fallen out of favor because I have not found any recent publication after 2004. If you have something you can share, let me know because I would like to increase my knowledge in this subject.
References
  1. Yu B, Roh S. The Effects of Menu Design on Information-Seeking Performance and User’s Attitude on the World Wide Web. J. of the Ame. Soc. for Inf. Sci. and Tech., 53 (11), pp. 923–933, 2002.
  2. Park J, Kim J. Contextual navigation aids for two World Wide Web systems. Int. J. of Human–Comp. Interaction. 12 (2), pp. 193–217, 2000.
  3. Khan K, Locatis C. Searching through cyberspace: The effects of link display and link density on information retrieval from hypertext on the World Wide Web. J. of the Ame. Soc. for Inf. Sci., 49 (2), pp. 176 –182, 1998.

No comments:

Post a Comment

Slide Show