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.