Saturday, September 22, 2012

Scrolling - e-learning navigation without a next button

For the last ten years or more e-learning navigation has primarily been a series of screens that have been navigated by clicking a link. The most used links have been 'next' and 'back' buttons though occasionally the links can be answers to questions or objects designed to give the e-learning a less linear feel.

This design approach has been accompanied by some cardinal e-learning design rules such as all text and information should fit on a single screen and there should be no scrolling required. In essence the metaphor of a physical book is replicated online on screen.

All change in the web world

I wonder if this may be about to change as the web world has decided that scrolling screens are very much the way forward. This change has been driven in part by the use of smartphones and tablets where scrolling with a finger or thumb is very natural, much more so than tapping a link to get to the next piece of content.

Ensuring more content is viewed

There are a great many advocates of scrolling pages and the key reason is that people view more content on a scrolling page than when content is sequenced as a series of pages. Amaze redesigned the Volvo web site using long single section pages. Whilst not all people scroll all the way down, they found 46% of users saw the majority of the content in the new scrolling format. In the past, the typical user only saw 18% of the content of the relevant car chapter.

Amazon typically uses single pages for products. The pages for the Kindle, their best selling product, are very long. See an example page.  Amazon clearly does not have a problem with using long scrolling pages to sell their products.

The new Beetle car site is positively designed around scrolling.


In many ways scrolling down a long page is not like navigation at all to a user. The ability to load the page progressively also gives the user a smoother experience than moving between screens.

Scrolling and responsive design

In part scrolling is linked with the development of responsive web design, in essence a fluid responsive web page which responds and re-sizes to different screen sizes so that a single version works on all devices. Thus a web page may look and respond like a web app when viewed on a phone but look like a typical web page when viewed on a desktop. I think we may see the adoption of a similar approach with responsive e-learning design.

Scrolling examples

Below are few examples of how scrolling is being used on the web to create stories and engaging content.

This first Titanic scrolling example where a user can scroll down to see different content and interact with the content.


This next example tells the story of Hydraulic Fracturing using a simple scrolling technique 


This example on Lost World's Fairs takes you 20 thousand leagues below the sea.




This next example from Skull Candy has a scrolling navigation panel on the right and the content arrives in an engaging and less linear format.


Scrolling in e-learning

A typical section within an e-learning module will have a number of screens, potentially these screens could form one long scrolling page rather than a series of pages. A user could scroll down to discover more content and different interactions rather than clicking next. This has the ability to create more elegant designs that enhance the learning.

A scrolling page can be made up of various interactions and components. At Kineo we have built an HTML5 framework called Adapt which allows a scrolling page to be built from many components and for the page to progressively load as the user progresses. See some scrolling screen components below.



These components can be shown or hidden as the screen size responds to various devices. The components can also respond intelligently so an animation on a desktop becomes expandable text on a phone. Thus a scrolling page on a phone can look quite different than it does on a desktop thanks to responsive e-learning design.

The page components can also be used in different ways and disaggregated to be used as performance support objects.

A user's progress down a scrolling page can be tracked in the same way as clicking through screens, so it is possible to track how much content a user has viewed. Scrolling also means less text overruns on screen, for example if you switch language to say German.

So far we have had very positive feedback on our scrolling e-learning designs. It has also given our designers a whole new way to develop creative and elegant learning content. It will be interesting to see how scrolling develops in the future as a form of e-learning navigation.