When I was a child I dreaded reading books without images. If concepts were too complex the only technique I could use to understand it was to draw it down as a cartoon strip on a piece of paper. It was my way of breaking complex concepts into manageable part-by-part chunks. As you can imagine it took hours to complete and I remember wishing I could “press pause” on the teachers so I could complete my drawings. I also wished I was able to see the words the teacher was saying when the kids in the back row got noisy or even not be in a classroom after all. How about studying under a palm tree in Hawaii or after a fun day snowboarding in the mountains.
Today, thanks to the Internet, you can educate yourself from anywhere and whenever it suits you the most. My childhood dream has come true. It is even possible to "pause the person" teaching in the video with the pause button, either it is on Youtube, Vimeo, or the numerous sites offering electronic learning (E-learning). To my delight some let you see the spoken text in in the form of subtitles or a transcript. Moreover, visual explanations of complex concepts are freely available too.
Massive Open Online Courses (MOOC) are a form of the e-learning course, usually for free, and are open to anyone with internet access to complete. MOOC sites give the learner lots of freedom and have come far in placeholding by creating “the classroom” experience online, but they still have some pitfalls when it comes to navigation and delivery.
Massive Open Online Courses (MOOC) are a form of the e-learning course, usually for free, and are open to anyone with internet access to complete. MOOC sites give the learner lots of freedom and have come far in placeholding by creating “the classroom” experience online, but they still have some pitfalls when it comes to navigation and delivery.
I have completed several e-learning courses including MOOCs since 2012 and want to show you some examples that hopefully can help your learners easily maneuver around the course and hopefully enjoy it and stick to it.
Base structure on exciting mental models
How you navigate from one page to the next should build on the learners existing mental model, a relatable process quick to understand. The information in the course itself is organized with a chronological scheme, just like taking a course in school or reading a historical book. - It is introduced in steps. It's divided into an introduction, chapters, subchapters, and pages, pretty much like a textbook. The time it takes to complete the entire e-learning course is often visually described as moving chronologically on horizontal or vertical straight path, and gives a sense of travel and progress. (Fig.1)
Fig.1. Different web courses, by Stiftelsen Sor (top)and Interaction Design Foundation (bottom), both using a horizontal and vertical straight path to give a sense of travel and progress.
The textbook, a timeline and also a classroom, are common metaphors widely used in many e-learning courses. Using existing mental models is a good idea and increase the chances for the users to intuitively understand how to maneuver through the course.
Fig.1. Different web courses, by Stiftelsen Sor (top)and Interaction Design Foundation (bottom), both using a horizontal and vertical straight path to give a sense of travel and progress.
The textbook, a timeline and also a classroom, are common metaphors widely used in many e-learning courses. Using existing mental models is a good idea and increase the chances for the users to intuitively understand how to maneuver through the course.
The building
Rosenfeld, Morville, and Arango (2015, p.53-75) use a rich analogy of a building to understand a website. Let's try this and imagine sitting and taking part in a school lesson inside a classroom. What makes you know you are in a classroom in a school are hidden all the clues around you. The clock on the wall, a map hanging over the blackboard and chairs pointing towards the teacher are called semantic clues subconsciously to know where you are. (Nielsen, 2010) E-learning sites and other online environments work pretty much the same way and navigating through a website is much like moving through a building. The foundations of the building can be compared with the global navigation system. They should stand there solidly. You know where you are because of the semantic clues, but also because you saw a sign on your way in letting you know which kind of building you just entered. On a website, the logo and the name of the page function as that sign and should always be present in the header of the global navigation system. (Rosenfeld et al.2015, p.184)
The rooms
Just like the different rooms in the school building can vary from each other the local navigation menu change within each category, (Kalbach, 2008 chapter 4) but still has the same typology as the rest of the rooms. It is only what happens inside the classroom that changes. The content of a learning experience aims to provide what the learner needs so they can be able to do a task, therefore it is the course content that should grab the attention. In the school students want to study and feel focused and the surroundings should support this. Leaving lots of clutter and advertising in the rooms will not support this, and the same is for the e-learning environment. E-earning is also typically done remotely far away from an actual classroom to show up to, and no teacher is there in person teaching the lectures in a numerical order. It is, therefore, easier to get lost, so creators should prevent leaners from quitting in frustration of not finding what they need.
Give me clues
Colour, Numbers and Actionable verbs
There are several ways to help the user navigate in addition to taking the learner back to where they last left when they return to the site. Using heading labels as actionable verbs together with numbers can be used to show sequence in an e-learning course. Color helps to show where you are and numbered lists communicate progression. (Rosenfeld et al.2015, p.146-147) According to Rosenfeld, Morville, and Arrango a label is a form of representation (Rosenfeld et al.2015, p.133) and can be used for different purposes, a heading being one of them. When utilizing verbs that helps tie together the sequence of steps in the course the label heading becomes actionable. (Rosenfeld et al.2015, p.147) This helps tie together the sequence of steps. In the example below (Fig.2) Codeacademy does this successfully by using words such as “Getting started”, "Saving data", and "Associations" together with numbers.
Fig. 2. Codeacademy use actionable headings as labels together with numbers
In the example below (Fig. 3) The Interaction Design Foundations e-learning course ironically use the word "Lesson" with a number after. This show how uninspiring a course can seem without actionable verbs.
Icons, symbols, and indexes
Question: A symbol of a star is used in the Courseras course below (Fig. 4), but can you guess what it signifies?
Fig. 2. Codeacademy use actionable headings as labels together with numbers
In the example below (Fig. 3) The Interaction Design Foundations e-learning course ironically use the word "Lesson" with a number after. This show how uninspiring a course can seem without actionable verbs.
Fig. 3. Example of e-learning course without actionable verbs
Icons, symbols, and indexes
Question: A symbol of a star is used in the Courseras course below (Fig. 4), but can you guess what it signifies?
The brain reads the pictures faster than reading text so icons, indexes, and symbols can be used as navigation system labels when for example space is limited. (Rosenfeld et al.2015, p.152)
Fig. 4. Screenshot of a timeline in the Coursera course "Learning how to learn."
Correct answer: The signified a quiz. It is hard to know what it signifies and is not very efficient because the symbol of a star doesn’t signify a test. You might think it's no big deal in this case since the number of icons is few, and the star is used consistently so it might be possible to learn what it means over time during the course. It is however not advisable to add symbols and icons if they create confusion. (Bradley, 2016) If used right all these small clues can help the learner a long way in reaching their goal.
Blindfolded
Even if you blindfolded me and put me in any classroom, or any room inside the building should always know where I am, which lesson I am learning about within which subject. I should even know were to exit the room, and the same hold for websites. Khan Academy is doing this successfully showing only one title within the chapter at once in the local navigation menu and breadcrumb trail, and a logo (above the red circle in figure 5 below) as an easy way to exit.
Fig. 5. Khan Academy using a breadcrumb trail, color, and logo to navigate the cite.
When user testing the quality of the navigation of a web course, or any webpage for the sake of it, is not exactly common to blindfold someone. Instead, a random page is shown, typically deep within a course, or a less used entry to the site. The test-persons task is to understand where they are, what course they are taking and how to exit. This approach is called “bottom-up” and can be used to evaluate for instance the navigation of a web course if entered from a different place than the front-page, the top-down approach. (Rosenfeld et al.2015, p.181)
Width, depth, and chunks
Website hierarchies are usually divided into width and depth, and a successful e-learning site has deep elements (the course) but also balanced width ect.) (Rosenfeld et al.2015, p.121) A successful site balances the two. Width means how many levels the entire website expands horizontally. Figure 6 below shows how the organizational structure of an e-learning course is typically deep and narrow. This means there are many levels of pages to pass vertically to get to the bottom.
Fig. 6. Organisational structure of an e-learning course is typically deep.
Too deep can sometimes suffer from clicking too many times to get to the end of the course and give up. (Rosenfeld et al.2015, p.112)
Even though the typical organizational structure is deep there are plenty of ways of helping the learner to keep the spirit up. Quizzes help to keep learners alert, whilst heavily long informative texts should be divided into subchapters and pages. Difficult terms or key terms should be dealt with first, also called pre-training. (Peters 2012) Moreover, complex terms and visuals should be broken into bite-size chunks or part-by part sequences.
As mentioned in the beginning timelines and sequential flows with a “you are here” mark gives a good overview of knowing where you are, and help set expectations correctly in the deep hierarchy.
(Farell 2015) Moreover, Barbara Oakley, teacher of the worlds most popular online course uses lots of variation throughout the course, and in her blog, she recommends frequent visual representations because as she says: "(...)online lecture videos easily lend themselves to imagery" (Oakley et al., 2017)
(Farell 2015) Moreover, Barbara Oakley, teacher of the worlds most popular online course uses lots of variation throughout the course, and in her blog, she recommends frequent visual representations because as she says: "(...)online lecture videos easily lend themselves to imagery" (Oakley et al., 2017)
Making the web course environment social has also proven to help. Subenvironments such as forums, peer-to-peer review, and live chats help completion of the course (Rosé et al. 2014) and give width and variety (Omer, 2017) to the organizational structure.
Careful Contextual navigation
Contextual navigation is a kind of associative navigation. It can be related links within the text or embedded as the text itself. They can lead to similar pages at the same level within the site, new content areas, different page types or new sites. (Kalbach, 2008 chapter 4)
On one hand claims these are good to support associative learning, (Rosenfeld et al.2015, p.188, 208) keep one alert and entertained. (Omer, 2017)
At the same time usability tests show that users often just scan the pages without noticing them. That is why they should not be used on an educational site if it is necessary to use the link to understand the content. It would, for example, be detrimental to the student's ability to focus if the teacher asked the students to leave the room to understand the meaning of what she/he just said. The example shows how contextual navigation and should be used with caution if they are critical to the content. Using contextual navigation with modesty and with a visual convention is therefore advisable.
On one hand claims these are good to support associative learning, (Rosenfeld et al.2015, p.188, 208) keep one alert and entertained. (Omer, 2017)
At the same time usability tests show that users often just scan the pages without noticing them. That is why they should not be used on an educational site if it is necessary to use the link to understand the content. It would, for example, be detrimental to the student's ability to focus if the teacher asked the students to leave the room to understand the meaning of what she/he just said. The example shows how contextual navigation and should be used with caution if they are critical to the content. Using contextual navigation with modesty and with a visual convention is therefore advisable.
As shown in figure 7 below, dedicating the desired area where you gather the contextual navigation links with other related links can work wonders. This approach should, of course, be determined by the nature and importance of the link itself.
Figure 7. Dedicating an area for contextual navigation can help students to focus.
Consider giving novice users less freedom
Earlier I mentioned how some web courses use mental models such as books and classrooms, and how the completion of the course is organized chronologically. Some courses are set up like a classroom where you need to pass quizzes and tests to go to the next level, whilst in other courses you can, in fact, navigate more freely, Dorian Peters recommends letting learners control their own pace through a learning experience when learners :
- ...have prior knowledge of advanced courses,
- ...when chunks of content are not interdependent, or
- ...when designing a learning experience to be supportive and informational rather than for skill building."
She found that "(...) novice users are not able to take a non-linear path through the content and know how much practice they need, and warns against “giving learners control of the sequence of instruction”. and says that unguided exploratory learning is not effective for achieving specific learning outcomes." (Peters, 2012) I would also claim that when changing a deeply embedded mental model that uses a strict chronological scheme is broken it can lead to confusion when information is digested like a hybrid scheme. (Rosenfeld et al.2015, p.115) This also makes me question why Khan Academy, whose mission is to break down information to the very basics, lets their typically young novice learners "surf and shop" their site freely.
Test
How you distribute information across pages must be based on the user testing and a predefined learning outcome. Putting the learner in the center is important when designing learning experiences in e-learning. Just because I learn better with support from visuals doesn’t mean everyone does. A novice user would perhaps preferer more multimedia, whilst an expert user would like more informative text. The course shouldn’t either be too hard or so easy so it feels boring or one loses interest and motivation to continue. In alongside using the tips on how to navigate Through interviews, observations and co-creations one can learn to understand the people one design for, a truly user-centered approach.
Bibliography
Bradley, S. (2017). Icon, Index, and Symbol — Three Categories of Signs. [online] Vanseo Design. Available at: http://vanseodesign.com/web-design/icon-index-symbol/ [Accessed 3. Oct. 2017].
Farrell, S. (2017). Navigation: You Are Here. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/navigation-you-are-here/ [Accessed 1 Dec. 2017].
Kalbach, J. (2008). Designing Web Navigation. Sebastopol: O'Reilly Media, Inc. Chapter 4. Available at: https://www.safaribooksonline.com/library/view/designing-web-navigation/9780596528102/ch04.html [Accessed 22 Nov. 2017]
Morville, P. & Rosenfeld, L. (2015), Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, O’Reilly Media.
Kalbach, J. (2008). Designing Web Navigation. Sebastopol: O'Reilly Media, Inc. Chapter 4. Available at: https://www.safaribooksonline.com/library/view/designing-web-navigation/9780596528102/ch04.html [Accessed 22 Nov. 2017]
Morville, P. & Rosenfeld, L. (2015), Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, O’Reilly Media.
Oakley, B. (2017). The “secret sauce” behind the world’s most popular online course | Coursera Blog. [online] Coursera Blog. Available at: https://blog.coursera.org/secret-sauce-behind-worlds-popular-online-course/ [Accessed 20.october 2017].
Omer, A. (2017). 8 Reasons eLearning Navigation Should Be A Top Priority - eLearning Industry. [online] eLearning Industry. Available at: https://elearningindustry.com/reasons-elearning-navigation-top-priority [Accessed 22 Nov. 2017].
Peters, D. (2017). UX for Learning: Design Guidelines for the Learner Experience :: UXmatters. [online] Uxmatters.com. Available at: https://www.uxmatters.com/mt/archives/2012/07/ux-for-learning-design-guidelines-for-the-learner-experience.php#sthash.scAiRJoZ.dpuf [Accessed 15 Okt. 2017].
Rosé, C. (2014). Social Factors that Contribute to Attrition in MOOCs. [online] Cs.cmu.edu. Available at: http://www.cs.cmu.edu/~mwen/papers/p197-rose.pdf [Accessed 1 Dec. 2017].
Omer, A. (2017). 8 Reasons eLearning Navigation Should Be A Top Priority - eLearning Industry. [online] eLearning Industry. Available at: https://elearningindustry.com/reasons-elearning-navigation-top-priority [Accessed 22 Nov. 2017].
Peters, D. (2017). UX for Learning: Design Guidelines for the Learner Experience :: UXmatters. [online] Uxmatters.com. Available at: https://www.uxmatters.com/mt/archives/2012/07/ux-for-learning-design-guidelines-for-the-learner-experience.php#sthash.scAiRJoZ.dpuf [Accessed 15 Okt. 2017].
Rosé, C. (2014). Social Factors that Contribute to Attrition in MOOCs. [online] Cs.cmu.edu. Available at: http://www.cs.cmu.edu/~mwen/papers/p197-rose.pdf [Accessed 1 Dec. 2017].
The Interaction Design Foundation. (2017). Learning Experience Design - The Most Valuable Lessons. [online] Available at: https://www.interaction-design.org/literature/article/learning-experience-design-the-most-valuable-lessons [Accessed 18 Nov. 2017].
