Adapt Learning Community: Scrolling page approach

Scrolling page designs

Feedback from our early user trialling, as well as ongoing conversations with users/clients supports the assertion that users ‘get’ the Adapt approach to scrolling page designs, saying that they preferred our approach over more traditional template type designs. We’re looking to build on this initial user trialling and have asked an academic from a UK university who specialises in user design/human interactions to carry out a review of all the available related academic literature.

We’ll publish his results as soon as we have them. In addition, we’re looking to get some hard data by carrying user testing where we are looking at usability, user experience using direct observation, user interviews and conduct eye tracking studies. In the meantime, here are four reasons why we think scrolling is desirable.

Your learners already do it

Visit a website today and vertical scrolling will most likely factor into the overall design of the site. Users understand what’s expected of them and are scrolling down the page to read content. Surely we want to present learning that uses conventions our audience is most comfortable with?

Device proof your learning

More and more learners are accessing content on a wide range of devices and each of these devices will display pages differently. The only thing you can guarantee is if you’re accessing content on a smartphone then vertical scrolling will be required. Why not embrace this and place responsive design and vertical scrolling at the heart of your design?

Meaningful navigation

It’s common sense to cluster any related content on a single page that’s either as short or as long as it needs to be. Not only does this reduce any unnecessary navigation, it also helps the learner make sense of the structure and the relationship between content. Navigation becomes meaningful, rather than a by-product of the template size.

More flexibility

Scrolling pages provide more flexibility in how content is arranged, allowing for different layouts, lengths and density of content. Pages can be structured so that white space is used to give copy room to breathe and imagery can add interest and meaning which is harder to achieve than when its relegated to just being a picture in a box. Interactive widgets (or components as we call them in Adapt) can be used to provide richness and increase engagement were needed, rather than being used as a device to cram content onto a fixed screen layout. Finally, overruns are also far less likely meaning localisation of content becomes a simpler proposition as well.

Scrolling's great for storytelling too. Rather than the step by step, 'click next' approach, you can create stories that flow uninterrupted down the page. More interaction can be added where needed, but the overall content story plays out like a journey, drawing learners deeper into the story with each scroll.

Show parent | Reply

I have 2 concerns based on samples I've seen of courses /modules developed with Adaot.

(1) Some developers seem to take 'deep scrolling' as confirmation that including very long textbook style content is good practice. This is what used to be referred to as the 'scroll of death' (http://elearningstuff.net/2013/05/01/is-the-scroll-of-death-inevitable/).

Once you navigate away from the first page of these apps, they look the same as any other e-learning course, and if you think such passages are long on a laptop or desktop screen, they seem to be endless on a smartphone! 'Deep scrolling' becomes permission to continue with 'content dump'.

(2) It's tempting to use deep scrolling as a means to incorporate all the exciting whizbangs offered by Adapt in one learning space. Such apps can be exciting because they are packed with so many delightful features, but in an m-learning environment, too much variety can be as detrimental as too little. The learner can become distracted by the dazzling effects or frustrated by how difficult it can be to find or get back to specific content or activities because the layout required to accommodate all the effects is complex and hard to visualize.

To use deep scrolling effectively, we may all have to engage in more design thinking, selectiveness, and a combination of storyboarding and wireframing, as well as redoing course content, assessment, activity, and resource outlines than we ever anticipated when we first thought developing m-learning apps would be cool.

Show parent | Reply

Hi Sue,

Yes, I tend to agree with your first point and made some recommendations around maximum page lengths. I tend to advise anything over 10 blocks is beginning to get a touch on the long side. Although interestingly when we were designing Adapt one of the first articles we read in our research was about the length of the Amazon Kindle page which is over 3 Hasselhoffs high (or a more prosaic 19 feet). Of course, education and consumer web sites are different beasts and users go with different expectations and assumptions but still, there’s still a shared design language. As always, multi device delivery brings with it additional considerations and on a smartphone screen the scroll of death is of course exacerbated due to the narrower screen size. There’s an argument for keeping pages even shorter, even if to avoid the risk of RSI to the index finger!

With regards to your second point, I believe it's about balancing engagement with considerations around cognitive load along with solid visual design principles. I’m prone to saying that content is still king and I believe that Adapt provides the designer with an opportunity to present this content on a page with room for it to ‘breathe’ and in fact removes the need to use interactivity to cram content into a fixed space – something I’ve seen far too much of over the years in elearning. Instead, interactivity can be used judiciously to add value and aid understanding at appropriate points.

Of course, all of the above is dependent on the skill and judgements of the individual designing the course. To this end I hope we can use these forums to debate which of the ‘sacred cows’ of instructional design we should think about letting go due to the advances in technology and changes in presentational still and which are still sacrosanct. Be great to work up some principle of best practice for responsive elearning, to share our experiences, post examples of what we’re working on and offer and seek advice from the wider community.

Thanks,

Paul

Show parent | Reply

Paul,

I am very new to adapt learning. I came across this as I was looking for simple open source HTML5 content authoring tool. Which I can propose for use by Kenyan primary school teachers in creating digital content for the kids in a government project aiming at giving each standard one kid a laptop.

Probably due to what we are used to, I find deep scrolling more suited when providing content on a website, where, the user does not require a mechanism to reward a behavior. But for a learner even as old as I am, turning a page or going next gives me a sense of fulfillment, it is a form of a reward, an achievement - that I am progressing, which I do not find in the scrolling page approach.

Please comment on how scrolling page approach would reward a learner ?

Thanks

Edwin

Show parent | Reply

Hi Edwin,

Welcome to the community!

In my experience I’ve found that some audiences and/or content is well suited to the more open scrolling approach whilst others require a more measured, controlled presentation of content. The good news is Adapt is actually pretty flexible and you can still recreate more traditional type learning content should it be your preference. There are several ways you can do this:

The most common techniques is most probably the use of the Trickle plugin. This allows the flow of content on the page to be controlled either by block completion or by the selection of a button. This is akin to the ‘click next’ experience.
You can also produce single block pages and link these together as you would click next style pages. I know there is a plugin being released shortly by one of the collaborators which allows the learner to move between pages by selecting a back and next button which sits at the foot of the page.
Finally, I know several of the Adapt collaborators have produced block sliders. These allow for lateral scroll of blocks controlled via buttons.

I've also seen good examples of Adapt courses where the designer has had a deep scrolling page but has added elements which help control the experience - adding moments of reflection, signposting to next steps, providing feedback and encouragement at given points and so on.

I hope that answers your question.

Thanks,

Paul

Show parent | Reply

Thanks Paul,

I will take time to explore these features and share the experience with others.

Edwin

Show parent | Reply

Hi Edwin,

To follow on from what Paul has mentioned. Appitierre have quite a few clients mentioning about the scrolling effects and we've built into our Adapt certain plugins that help with this:

1 - Footer Navigation. This works as a next and back button and we have some Learning Designers who create courses with only one article and a maximum of two blocks per page. This still gives the same effect of achieving something and moving on. Feedback from the Learning Designers has been great - they've said the ability to add multiple blocks into a page has enabled the learning to feel more coherent and flowing. Instead of broken up screens.

2 - Achievements. To help with creating a sense of achieving learning objectives, or gaining knowledge Appitierre have developed an Achievements plugin that enables gamification elements like Points, Lives, Stars and Badges and have modelled it on a pyramid of achievement levels, where points are on the base and badges are top (so it's harder to earn badges, easier to gain points). We even have a way to describe this with - gain points, collect stars and earn badges.

3 - Article Styles. I recently wrote a post about Appitierre's page structure here and how this has been created by research of Learning Designers and AB testing of students. Article Styles helps create familiar pieces of UI that help keep the learner engaged and keeps expectations (which is linked closely to achievements) of completing certain parts of the page. This approach negates the need for next and back buttons completely and is becoming hugely popular with our clients.

In terms of scrolling effects of learning - I've seen a lot of courses were the scrolling is too long and this affects learning and you're right - learning can become lost amongst the scrolling with learners feeling they haven't achieved anything. So it's important to shorten the pages to not go over 3 articles and each article having no more than 2 blocks (maximum 6 blocks per page). Looking across our content it tends to be about 3 articles and 4 blocks per page.

The whole idea of scrolling content is to put relevant content in a section so you're not having to click a button to read more. Content should be easy to access and not hidden. (I personally cannot stand websites where I have to click a button to read more of the same content). Scrolling pages helps with this by putting relevant content together - I just think Adapt needs structure to help with creating engaging eLearning.

I hope this helps and it sounds like you're working on a great project. Appitierre are also working on a similar project which you can read about it here.

Thanks,

Daryl

Show parent | Reply

Thanks Daryl, for sharing your experience, it will help a lot. The Capsule is a great idea and a noble one, I also like the fact that content is not being served from the capsule continuously, thus saving on resources.

The teacher is the learner's primary contact, therefore, in the proposal I am giving I feel if we can enable them easily create and serve digital content to the kids, it would mean much more, than forcing digital content made at the national level. such content should be secondary.

I can already imagine a standard one teacher creating client-side content using adapt, uploading to the capsule to push to the kids laptop's. fantastic!

I will surely keep tabs on it; such a device would come in hardy.

Thanks.

Edwin

Show parent | Reply

Hi Edwin,

It would be great to have a chat about your project as Appitierre also allow user generated content to be uploaded to our capsule through our authoring tool. If you want you can private message me or email me directly at daryl.hedley@appitierre.com.

Thanks,

Daryl

Show parent | Reply