Paul Welch
Six basic tips for designing with Adapt
by Paul Welch - Friday, 6 March 2015, 5:25 PM

Hello all and welcome to the design area of the community. In my role as design lead on the framework I thought I’d get us up and running by posting six basic tips on designing for Adapt.

These tips aren’t an exhaustive list of do’s and don’ts and may not be news to some of the ‘old hands’ out there, but hopefully there will be something of use for most people.


Number one - Think about the bigger picture first (and then wireframe it)

  • Have a clear picture of who your audience is and the particular gaps in their knowledge that your course is intending to address. Make sure you’ve got the objectives written and have thought about how you are you going to map the source content in a manner which is both memorable and that sits well within your chosen learning model. Once you’ve got these fundamentals nailed down, you can then start to scope out your course.
  • Think about wireframing your pages. This provides you with a great opportunity to experiment with the layout of your scrolling page, map interactions to specific content and capture your ideas for any graphical treatments.
  • If it’s a commercial project then use the wireframes to take your client on a guided tour of the proposed design before proceeding any further. If they like it great, but if not then it’s better to fail fast, fail cheap on paper rather than later when you’ve built all your Adapt pages.


Number two - Watch those page lengths:

  • The layouts of Adapt courses tend to lend themselves well to course structures that, at the top level, resemble standard elearning courses (with between 1 to 6 topics). However rather than these topics consisting of say 10 or 15 pages, you will probably have fewer, longer pages - but watch the page lengths!
  • A single ‘chunk’ of content per page would be a good steer, not an entire topic (unless perhaps it’s quite a short topic). More than 10 blocks and you might be getting a bit on the long side. Of course, this isn’t a ‘golden rule’ and it should be taken on a case by case basis.


Number three - Don’t make your pages too dense:

  • Keep an eye on how much you have going on within a single page. Too much interactivity can muddle the message and lead to the learner being swamped with information and choice. Try to strike the right balance between simplicity of design and engagement.
  • Think about making use of the blank component to create windows through to the background art direction. This creates a sense of space, allowing your design to breathe as well as helping to create a flow down the page.


Number four - Think in blocks:

  • Don’t tackle completely unrelated content within a single block. Stick to one idea per block.
  • Use the block structure as an opportunity to create really interesting and meaningful interactions by combining components, e.g. ‘watch this video and make a judgment by answering this question’ or ‘Get under the skin of this customer's requirements and then try and pick the right product to meet their need’.
  • If you want to create the impression of a close relationship between two components in a block then think about using the block title and the block body to tie the two components together. NB: Don’t forget to add the component titles though as these are used in the page level progress tracker.


Number five - Think mobile 

  • Think about your treatment and learning model and question 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.
  • Don’t forget that those lovely detailed graphics in your hot graphic component on the desktop aren’t going to look so great when it snaps down to the narrative style view on a smartphone.


Number six - Content is still king:

  • Make sure that your pages don’t just appear to the learner as a sequence of unrelated components on a page. Use the body of each component to link your content together.
  • You should still be ensuring content is logically organised, appropriately chunked and flows well, building from broad principles and the basics to more detailed, complex content.
  • 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.
  • Think about the use of sensible use of questions, whether they’re formative at the beginning of a page or summative at the end.
  • Pick the right component for the job and don’t be shy about using the humble text and graphic components. Due to the scrolling nature of Adapt pages these simple components can be combined to create an appealing learner experience – they're also cost effective to produce and are well behaved across the range of browsers and devices that Adapt supports.
Picture of Paul McElvaney
Re: Six basic tips for designing with Adapt
by Paul McElvaney - Tuesday, 10 March 2015, 9:53 AM

Hi Paul,

Great article - thanks for sharing.

The Learning Pool team is working on a bunch of similar type guides for our customers as we roll out Adapt and customer start building their own content. We'll share these here when we're ready.

What are your views on sharing this stuff outside the Adapt site? Are you happy for us, for instance to cross post this to the LP community or elsewhere?

Just thinking this content might be useful to boost the profile and adoption of AL plus save us all some time. Might be good to get some best practices established between us.


Paul Welch
Re: Six basic tips for designing with Adapt
by Paul Welch - Tuesday, 10 March 2015, 5:29 PM

Thanks Paul, and really looking forward to reading what you guys are putting together.

I definitely think that with this community we can use the forums to establish best practice guidelines for responsive design and helping people get the most from Adapt. I think it makes sense to have the discussions and make the posts here as our aim is to establish the Adapt forum as the go place for all things responsive elearning.

Where possible it would therefore make sense to use our channels to direct folk here. We can then use these discussions to help shape the future direction of the framework and the authoring tool.

If we’re creating company specific Adapt content that the community would find useful then I think linking out from this site is fine (like Lisa’s link) especially if we’re inviting discussion, debate and so on.

Picture of Prajakta Shah
Re: Six basic tips for designing with Adapt
by Prajakta Shah - Monday, 22 June 2015, 7:12 AM

@ Paul Welch, These are great tips. Thanks!

@ Paul McElvaney, Look forward to see design guidelines from you guys.

Picture of x z
Re: Six basic tips for designing with Adapt
by x z - Monday, 22 June 2015, 11:31 PM

I'm stuck at the wireframing stage -- too many ideas and seemimgly competing priorities without an organizing framework/workflow yet, but it will come. F2f educators tend not to think about 'design' in these terms because we can control the flow as we unfold the lesson in the class and adapt the process on the fly, so wireframing -- planning the flow from entry to exit --  is very challenging for me. 

In the meantime, I offer this article by John Hattie about designing effective instructuon from the pedagogical side. [] The big idea is to determine which sorts of strategies/interactions have the biggest "effects" & which are stronger learning enhancers in which contexts or stages of the learning process &  how an individual learner's purpose or use of the material will also make instuction/strategy pairings more or less effective. 

Hattie is also doing a lot of work on improving teacher efficacy by reframing what feedback means, who it's for, and how to ensure it meet learners' needs so they will use it. His work is in the f2f environment, but his findings add yet another layer of complexity to the task of designing effective e- or m-learning experiences.

I think my next task may be to develop a map for myself of what 'good design' means in each of the different spheres of consideration & to find the priorities by looking for natural groupings that are most easily implemented given my own level of in-expertise with coding and my preference for open & free or very low cost software tools (the place where most teachers find themselves). 

Paul Welch
Re: Six basic tips for designing with Adapt
by Paul Welch - Thursday, 25 June 2015, 3:55 PM

Hi Sue,

Thought provoking comments as usual.

As someone in the online training game (rather than f2f education) working with scopes/wireframes is a far simpler proposition for me. I’m tasked with plugging an already identified gap in the knowledge or behaviour of a large group of adult learners, not imparting a large body of interrelated knowledge with the associated opportunities and challenges that exist within (what I imagine) to be your particular environment.  

As an Instructional Designer working for clients, rather than being an expert in the subject matter myself, scopes have always been a key delivery for me. We provide expertise in working with technology to deliver memorable, effective training but we often start as complete novices in the subject matter. Wireframes (and/or scopes) help us sense check assumptions about the source content with, often multiple, subject matter experts, they allow junior team members to sense check their work with more senior peers, they act as briefs to creatives within the organisation and they provide an early indication on whether what is planned is commercially viable.  In short they’re valuable for me but I can definitely see that they’re not for everyone.

Thanks very much for the link, it looks a very interesting article.  I’ve only scanned it so far but the idea that better measurement of learning can be used to help learners identify different strategies that work for them at different times seems highly logical (as does not referencing pseudo theory such as learning styles and left brain/right brain!) In some ways this idea, the idea of feedback meeting the needs of the learner (and other points raised in the article) relates, at least to my mind, to one of the more interesting approaches emerging at the moment - adaptive learning – the idea of using measurement to maximise learning by providing tailored content that is focussed on the needs of the individual.  

We’re planning on a rework of the responsive design area of the site which might be of interest to you, given your comments about ‘good design’ and ‘natural groupings that are most easily implemented’. We’re looking at setting up an area where community members can upload sequences (or combinations of components in the technical sense) which demonstrate how a particular piece of learning was presented to good effect.