Designing “Mobile First” Learning Content

dreamstime_m_36899365 (2)Over the last few years, I’ve become a strong proponent of moving towards “mobile” first learning strategies.  This is – to a large degree – as a result of the observations I’ve made about how the world of workplace learning is changing and how the use of mobile devices continues to grow, giving us the platforms we need to start to make mobile learning and performance support a reality.

There are two elements to a “mobile first” strategy.  The first – which I will definitely come back to another day – is the development of complete programmes of learning with a significant use of mobile content and a move away from desktop based e-learning and content-packed live sessions.  The second element – and the aspect I will address in this post – is actually designing content that supports a “mobile first” philosophy.

“Mobile first” originated in the web-development arena, when companies realised that just squeezing their regular websites onto a smaller screen didn’t really work and in fact turned their customers off.  “Mobile first” changed how web-developers looked at the new world of smartphone usage; and marketing, external communications and customer operations departments similarly sought to better understand how their customers wanted to interact with them using their mobile devices.

The classic example I use is from the airline industry, where the first apps for some airlines just allowed a passenger to check-in in a simple, no-frills manner.  At that point in time, passengers weren’t interested in booking flights whilst on the move.  That was seen as too complicated and risky.  They still preferred to do that on the airline’s main website.  And as for researching destinations and seeing what films were going to be shown on-board, that was something for casual desktop browsing, where they would have a much more pleasurable user experience.

Based on these first experiences, the key elements of a “mobile first” solution are:

  1. a focus on the core ideas
  2. adopting a bottom-top approach
  3. making best use of standard mobile device functionality
  4. organising the content in a way that makes sense on a mobile device

And for me…

mobile first” is not an e-learning course on a tablet or – even worse – a smartphone.

Focus on the core ideas

A “mobile first” learning offer should force you to think of the essentials.  Focus on the stuff that matters most.  For starters, you could be losing about 80% of your screen space and so there is literally no room for content creep.

A focus on the core ideas means that:

  • the content should stick to the main learner use cases
  • the material should highlight the most important content or features and ensure this is what the learner always sees first
  • learners should be able to interact with, learn from and perform some action around each core idea
  • you will use clear directions and prompts to minimise learner effort

The key to success here is to absolutely know your audience – what they really need or want to do.  It’s often been said that you need to also design for “partial attention”.  Design for the big thumb!  Design for one eye!

Adopt a bottom-top approach

A bottom-top approach to development ensures that delivering an acceptable experience on different mobile device types is put front-of-mind.  So make sure that those core ideas are well presented and that the user experience is intuitive and reflects how people use other mobile apps and websites.  The key is to enable the learner to get to the relevant content as quickly as possible.

It can be very difficult to create mobile learning objects using a top-bottom approach, as it’s often very tricky to fit the content and features of a bigger screen onto a smaller screen and so that they function as they do on the web.  Remember, “mobile first” is not an e-learning course on a tablet or smartphone.  It should be something different.

Make best use of standard mobile device functionality

When I reflect back on my design guidelines for e-learning courses a few years ago, I recall requesting that no learner should need to scroll to view all the content on a screen.  Mobile devices and the newer generation of tablet computers have changed all that.  We now expect to scroll to whizz through content.  Having to click a “next” button really doesn’t feel right anymore.

So in your “mobile first” learning offers make sure that you consider such features as:

  • Touch gestures – for intuitive exploration of the content, including zooming in for more detail
  • Geolocation – to link content to the place of need
  • QR/barcode scanning – to make it easier for people to locate and consume learning content from different sources at the place of need
  • Cameras – for capturing learner-generated content, for example
Organise the content in a way that makes sense on a mobile device

I often comment that, as L&D professionals, when it comes to mobile learning, we’re playing catch-up in most cases, as our audience are well versed in using their mobile devices and apps to find and consume new knowledge.  And the developers of these apps and addictive games have set a high standard for “mobile first” design that we really ought to follow.  The closer we mimic what users are already experiencing, the more intuitive will be our mobile learning.

So it’s important that we consider things such as:

  • those gestures and behaviours that now come naturally
  • the simplest of menus and navigation to make usage easy and obvious; or guessable and predictable
  • the use of accordions and scrolls – where users can scroll to the sides for more detail or to literally go off on a tangent

    Accordians in Web Design
    Example Accordion Format
  • progressive disclosure of content [show/hide] – to allow users to reveal content in a focused manner, rather than seeing it all at once and needing to scroll with a close eye on what’s passing by
  • using carousels – for quickly “spinning” through related materials, which is done well on the BBC News app in the case of video content

    BBC News App
    Video Carousel in BBC News App
  • not using pop-ups, instead presenting new content in new windows

Taking time to consider these four aspects of “mobile first” design should help to determine what will make a good mobile learning experience.


Designing “Mobile First” Learning Content

4 thoughts on “Designing “Mobile First” Learning Content

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s