Consumer’s expect it They want it when they need it On the device they are using – right now!
Sequential screening is when you start an activity on one device and then move along to another. You start doing your shopping research on your phone, but then you want to get into the details and play around more and you move to your desktop.
Misconception that HTML5 equals responsive design. This is just not true.
Storyline can be published in HTML5 and can play on tablets, but that does not make it responsive.
Captivate 8 says that it is responsive, and it is, more or less in that you can author for different “breakpoints”. That said, “Captivate doesn’t use standard web design methods to produce responsive design and therefore, may not be forward compatible.” Chad Udell, Float Learning
Airline pilots in the cockpit accessing manuals and checklists on their tablets; sales people in the field looking up product knowledge on their phones before a call; teachers going through a learning module at night on their couch from a tablet; a doctor accessing a product tutorial between patients from her tablet.
What matters the most, is how we use them and when. Know your use cases.
We have small smart phones, large phones (phablets), tablets with keyboards, laptops with touch screens.
guildresearch_mobile2014.pdf page 17 of 49
So these are the types of questions and behaviors we should consider as we dive into “mobile” and multi-device delivery of content. learning
Note that this example isn’t “responsive” for all screen sizes. It adapts for desktop to tablet, but is not a great experience on a smartphone.
This example is also not truly responsive, but meant to show the power of the scrolling navigation to unlock your user experience and flow through a narrative in a very different way.
The increase space offered by scrolling pages offers learning designers several benefits, namely: the removal of unnecessary navigation (click next to continue) with pages being as long or as short as they need to be a more contemporary way of presenting information (learners are already scrolling when they’re on the web) More opportunities to present the learner journey in new and engaging ways
Think about the length of your pages: Don’t make your pages too long. Each one of these scrolling pages would typically tackle a single learning objective. Anything longer than around 10 blocks and it’s probably getting to long. If the page has less interactivity and is more presentation you could probably make it slightly longer. Likewise if it’s a dense page, packed with interactions then it could maybe do with being a touch shorter. We’re trying to strike the balance between removing unnecessary navigation whilst not overloading the learner.
Don’t cram scope by using interactive components when a simple presentation of text on an interesting background would be more appropriate. You have as much space as you need so use it and pick the right interaction to do a job for the learner. If you have a lot to say on a given objective you should definitely think about using submenus to break up your pages. (see below).
How are your menus going to work on smartphone and tablet? There’s a lot less space to play with so it’s sensible to think through the mobile design first then think about how you can make use of the extra space on desktop rather than working up a great desktop design which just can’t be implemented on a screen 400 pixels wide. NB: Don’t forget there is no overstate/rollover on touch devices.
Think about your treatment and learning model and consider whether they will work for mobile? Consider keeping pages short if it’s critical that the course is going to need to be completed on smartphone. Also remember that page background images will be removed on phones so ensure your treatment still works without these elements of the design.
If you intend to offer reduced version of the course for mobile with perhaps some components or even entire pages or topics hidden then make sure you’ve thought through all the ramifications and the client understands the approach.
Are you hiding some things from a mobile version? What will that do?
Make use of the blank component to create a window through to the background image. This creates a sense of space, allowing your design to breathe as well as helping to create a flow down the page.
Making navigation a part of the journey.
Consider the visual elements to this learner journey. Lead the eye down the page with the art direction. Tell a story. Make it possible to dive deeper into the content by using triggered or revealed components as appropriate points in the journey.
Look for opportunities to tell stories, particularly when you can weave the graphical backgrounds and the component content together to make the page a really coherent and well thought out experience for the learner.
Building flexible content in small blocks and components
We should continue to follow put the learner at the heart of what is produced; creating well-structured content that follows an appropriate learning model and which meets clearly defined objectives and is presented in a manner that resonates with the target audience.
Adapt is a response to the changing nature of how our content is accessed and what our learners expect from their interactions with technology and whilst it presents us with opportunities to do things differently, best practice in instructional design should still underpin all that we do.
AIDA – Attention, Interest, Desire, Action – we can still do this in a responsive eLearning program. It’s all about how you design your page and the components you use.
Introduce the content and create curiosity by turning learning objectives into questions: “Do you know how to….”
Create increasing levels of Interest by illustrating the importance of the topic
Make it personal and create the Desire by getting the learner to see what they will gain from learning this topic.
Inspire action. Set Direction. Explain how the rest of the programme is organised and provide links to what they should do next
Analyse - to identify poor or best practice in a case study (matched to key principles) Rate - to decide how well a character performs in a scenario (in line with the key principles) Decide - to suggest the best way to respond to the situation (following the key principles) Reflect - to think about what they have seen and relate it to their own situation or needs
Think about the length of your pages: Don’t make your pages too long. Each one of these scrolling pages would typically tackle a single learning objective. Anything longer than around 10 blocks and it’s probably getting to long. If the page has less interactivity and is more presentation you could probably make it slightly longer. Likewise if it’s a dense page, packed with interactions then it could maybe do with being a touch shorter. We’re trying to strike the balance between removing unnecessary navigation whilst not overloading the learner. Don’t cram scope by using interactive components when a simple presentation of text on an interesting background would be more appropriate. You have as much space as you need so use it and pick the right interaction to do a job for the learner. If you have a lot to say on a given objective you should definitely think about using submenus to break up your pages. (see below).
You should build a technical prototype of the course that contains all the required functionality/styling so that you can carry out cross-browser compatibility testing in a timely manner. Different browsers will render the pages differently so best to tackle issues early and only once, rather than encounter them late in the day when it’s been replicated across multiple pages.
IE8 will cause you problems. If it’s in the mix then design for it as your baseline and then look to add niceties as and when newer browsers are detected.
The authoring tool interface is on its way!
Adapt went open source in Jan 2014. It caused quite a stir in the market
FUNCTIONALITY EVEOLVES SO QUICKLY AND RPIDLY AS IT’S THE PRODUCT OF COIMMUNITY -25 years worth of code wouldn’t have been possible without collaboration of open source
IMAGINE IF ADOBE CAPTIVATE AND ARTICULATE SOTRYLINE WERE WORKING TOGETHER ON A DEV TOOL INSTEAD OF COMPETING AGAINST EACH OTHER.
THAT PLUS THAT ITS FREE MAKES ADPAT A UNIQUE OFFERRING
The authoring tool interface is on its way!
Its as simple as selecting a component
Top Tips for Responsive eLearning Design
How many devices do you use in a
(Desktop, laptop, smartphone, tablets)
4) More than 3
Content that responds to your
“A web design approach aimed at
crafting sites to provide an optimal
viewing experience—easy reading and
navigation with a minimum of resizing,
panning, and scrolling—across a wide
range of devices (from mobile phones
to desktop computer monitors).”
How do you build responsive sites?
Think WEB DESIGN tools.
HTML, jQuery, CSS, JSON…and other
things I can’t explain…
How will your audience use their devices?
Know your use cases.
It’s a grand convergence: smart phones, large
phones (phablets), tablets with keyboards, laptops
with touch screens.
“Making mLearning Usable: How We Use Mobile Devices”,
Steven Hoober with Patti Shank, PhD, CPT, eLearning Guild Research Report, 2014.
What is responsive eLearning?
Single version of your course
delivered to multiple devices
Built in everyday web technology
• One version works on all devices
• One version to track and maintain
• Distribute from a single LMS or source
• Accessible content
• Searchable content
• More cost effective
• Allows sequential screening
So let’s change how we think
about eLearning design.
Just because you can, doesn’t
mean you should.
Making the entire course
available on mobile may not be
the best approach….
Think through your use cases!
Put scrolling at the heart of your
Your learners are already doing it!
Make the navigation meaningful!
Liberate yourself from the fold!
Introduce the content and create
by turning learning
objectives into questions:
“Do you know how to….”
Create increasing levels of Interest by illustrating the
importance of the topic
Make it personal and create the Desire by
getting the learner to see what they will gain from
learning this topic.
Explain how the rest of the programme is
organised and provide links to what they should do
Set Direction for the section:
(Say what it will cover and what the learner will get from it)
Summarize the key points via ‘Recap’ block
(e.g. Hot Graphic
Text and Graphic
Give Examples or let the learner Explore the key learning points
(DON’T introduce new learning points here).
Observe and Analyze
Audio to introduce
a Case Study
Narrative presents the
M/C Question based
on the case study
Your possible options here:
I wrote a book!
http://www.astd.org/Publications/Books/The-Accidental-Instructional-Designer and on Amazon
References and more on responsive design:
The Accidental Instructional Designer:
Open source & free
No vendor lock-in
Adopts web based scrolling principles
Why Open Source?
We don’t compete on authoring tool
We all want a great multi-device
No single company has monopoly on
Give back to wider community
217 modules build
using Adapt content
45 plugins built
94,222 lines of code that
took 24 years to write
18,702 unique visitors
across 145 countries
7 active partners
1,661 registered users