One of the most challenging questions in the eLearning industry is, “How do I get my learners to comprehend what’s in my course?” More so, “How do I get them to change their behavior that impacts a measurable performance increase?” I don’t know if we’ll ever answer those questions with concrete data, but following certain tips in design we have a better chance of retention.

On this side of the planet, can we agree that in the Western culture we read left to right and top to bottom? For the past couple decades, research has been conducted on how we ‘read’ a computer screen compared to that of a book or newspaper. Jacob Neilsen’s article in April 2006, titled “F-shaped pattern for reading web content” studied the heat maps of user’s eyes across the screen. He notes that a user generally reads (scans) the upper portion of the screen left to right forming the top bar of the “F.” Next, a user will move down to about the center of the screen and read (scan again) left to right, however not as far to the right – forming the second bar of the “F.” Finally, a vertical swoop from top to bottom along the left edge forming the stem of the “F.” Do eLearners read (scan) course modules the same way? I haven’t done the research, but my guess is they do to some extent. I’d like to introduce the “Z-effect” in addition to the “F-Pattern.”

Let’s first talk about why some courses are designed that require a separate training module just to learn how to navigate. The past two decades have already taught people taking eLearning how to navigate a computer screen. We can thank Mr. Gates for putting the “X” in the upper right corner of Windows. The “X” button communicates ‘close’ or ‘exit’, right? So why not capitalize not only on the same iconic graphic but also its location? I get a kick out of seeing eLearning courses with an [exit] button placed at the bottom in the center. Why teach learners to go somewhere other than what they already know about where and how to exit a window? Obviously this is all subjective and every situation dictates the design.

The theory of the “Z-effect” is a user scans the first ‘page’ of your eLearning course in a “Z” pattern. A users first 3 seconds opening your course is the most valuable time you have to get their attention. The “Z-Effect” forces the eye to follow a prescribed path across the screen in sequential pattern that you want learners to see first, second, next, etc. There are many websites that experiment in varying navigation and layouts and are somewhat non-traditional. However, in terms of eLearning it’s pretty straightforward.

Let’s look at a basic design. Where do you want your learner’s eyes to go first? This is up for debate but I like a big image, graphic, cartoon, illustration, etc. placed at just left of center of the screen where there is no question the eye will see it.

Naturally, as Jacob Neilsen also pointed out, a user’s eye will generally go to the top of the screen first. Taking advantage of the natural reading (scanning) patterns this is an opportunity to introduce an image in the upper left corner. Usually it’s the logo of the course or some image that represents the forthcoming training. As with brands and company websites, the traditional location is in the upper left corner so why not eLearning courses? Remember, in this culture we read left to right before going top to bottom, so as the eye travels across the top of the screen as in Neilsen’s “F-Pattern”, the next logical element would be the Title of the course. Now we have an image/logo and supporting text in the form of a title.

As the learner’s eye continues to the right I typically place global navigation icons in this location. This is the absolute best location because Microsoft and the World Wide Web have already “trained” your learners where to go to find these buttons! The Home, Help, About, Contact, Resources, Info, Exit, etc. buttons fit perfectly here. Mac user’s aside, Windows has taught us if we want to close a window, click the X in the upper right corner. Capitalize on that! This forms the top bar of the “Z.” I will point out that the landscape can be used for other elements once the learner enters the course. I like to put the page count in this area also just under the global navigation, but keep it hidden until the learner goes to the next page/screen.

OK, we have their eyes moving across the screen to the right and have landed at or near the exit button. The natural progression would then be down and back to the left. Not in a word-search sort of manner, but in a gradual diagonal pattern back to the left. The trick here is let it! In some cases there may be additional elements, but we only want them to ‘glance’ at them as a visual reference for later retrieval. We want the eye to now hit the main meat of the page to get their attention as we only have a few seconds on this screen. The image, graphic, or illustration they have already registered when first launching the course. The big mistake here is leaving the learner with the question, “What do I do now?” Or, “I don’t get it.” I typically place a small paragraph in a bit larger font in the upper right area of the ‘stage’ just below the global navigation as their first visual stopping point along the path back to the lower left corner. This text is short enough and in a bigger font that a learner can comprehend and retain by simply scanning – not reading.

As the eye swoops back across the screen in the “Z” diagonal pattern to the lower left, it will ‘see’ the image if first registered but this time triggering a memory of it as it passes by and may pause to study it in more detail.

Finally, the eye finds its back to the left and at the bottom working its way across to the right where we’ll end our visual journey of the “Z.” Since this is the bottom and usually the last place the eyes will find, I place instructional text here, such as “Click on the arrow to begin…” Typically, this area is kept completely clean until the eye travels all the way to the right where the directional navigation is found – the Back and Next buttons. Again, I try to keep it simple by taking advantage of what my learners have already been taught. An arrow pointing to the left of the screen suggests going back to the previous page and respectfully, an arrow pointing to the right suggests going forward to the next page. Easy eye flow, and most important retaining the learner’s attention.

In the more eye-catching themes, grab your learner’s attention immediately – with an image! By the time they click the next arrow [button] there will be no confusion as to the content they’ll expect going forward.

Enjoy, and happy designing!