AI Create Index 10 (1 = AI was used in the research for the content, but not in the writing O = AI was not used in generation of the graphics) THIS IS ORIGINAL CONTENT.
With more of us than ever working remotely, the need for on-line training has never been greater. But learners don’t just want remote learning, they want it whilst on the move. There is increasing evidence that many of us are now using mutiple devices to access online learning, with the Smartphone rapidly becoming the device of choice for many groups. The consequence is that it is even more of an imperative, when designing e-learning, to ask not just who the training is for, but also what devices they will be using?
Designing e-learning material that will work on different screen sizes, responds well to touch screens, and is suited to mobile device navigation has never been easy. Of course, it is possible to design different versions of the content for different devices, but this creates challenges when the learner switches device mid-course, as well as having obvious cost and maintenance implications.
Far better to:
- Find a solution that will deliver the same content seamlessly across all devices.
- Design your material with mobile device use in mind from the outset.
'Frame-based' screen design
There is no doubt that there have been huge advances in e-learning authoring tools over the last decade, both in terms of levels of interactivity and the capabilities for creating responsive designs. Yet still, many popular authoring tools in use today have their roots in a form of ‘frame-based’ screen design popularised by tools like PowerPoint. In this approach, we define the screen size we are authoring for, then break our content into a series of ‘screens’ or ‘slides’ allowing the learner to navigate to the next screen by clicking a button or swiping on their tablet.
An immediate problem for the designer, when using frame-based screen authoring tools, is that you are required to choose the screen size and hence set the aspect ratio (the relationship of the width of a screen image compared to its height). The most common aspect ratios being 4:3, also known as fullscreen, and 16:9, referred to as widescreen.
If we look at the example shown (created using Articulate Storyline), we can see that the screen size chosen (1440px by 1080px – i.e. an aspect ratio of 4:3) fits the screen exactly when previewed for a tablet…
… but does not fill the full screen width if previewed for a widescreen desktop device.
So what exactly is going on? Well, the Storyline Player is telling the browser to display the screen image on the device and maximise the image (i.e. fill the screen) – BUT retain the aspect ratio. This means, in this case, the image displays to the full screen height, but not width. If the browser adjusted the image to match the screen width as well as the height, the image would become distorted.
The examples here show the content in full screen display mode as a web page. If the course is to be loaded under an LMS, then, as designers, we need to take account of the screen real estate occupied by the LMS viewer. And, in this case, it is quite useful to have the spare screen width available for a content menu or notes section.
Opposite is the same course using the same screen size, published to SCORM and loaded under Moodle.
The real problem comes when we start attempting to view frame-based content on a Smartphone. As you can see, text that would be perfectly readable on a larger screen becomes unreadable scaled down, unless the learner uses the zoom function on the device.
In the examples shown above, the browser responds to the screen size and dynamically resizes, or ‘scales’, the images and text blocks proportionately to fit the screen.
Responsive screen design
Although this dynamic resizing of the screen components is part of what is referred to as responsive screen design, true responsive design requires a more holistic approach to ensure that content is not only scalable but also usable and readable across different devices. Let’s see how the content might look using an authoring tool with fully responsive capabilities.
In 2017, Adobe Captivate introduced the concept of ‘fluid boxes’ and, in the latest (2023) version they have gone further introducing the option to choose how you want a block to behave when viewed – the options being ‘scaled’ or ‘responsive’. Putting our ‘Icebergs’ introduction into the new Adobe Captivate, we can see the difference when viewed on a smaller screen.
Choosing a responsive screen design introduces a level of ‘content adaptability’ and ‘contextual re-scaling’. This means content might reflow from a multi-column layout on a desktop to a single-column layout on a mobile device and, as well as increasing or decreasing the font size of text, the line length and spacing are also adapted for readability on smaller screens.
If, after adaptation, the content on the smaller screen overflows the available viewing window, scrolling bars will appear automatically to allow the learner to view the whole screen.
Scrolling Screen Design
Using an authoring tool with fully responsive screen capabilities goes a long way to allowing us to design content that will work on both desktop and smaller screen, mobile devices. But, although in our Captivate example, we have added responsive (‘fluid’) blocks , the content is still organised into screens with a defined screen size i.e. we haven’t fully moved away from a frame-based structure. For that we need to look at another strand in the development of authoring tools – scrolling.
Although not the first e-learning authoring tool to offer a flexible ‘scrolling’ design, the release of Articulate RISE in 2020 was certainly influential in changing developers thinking about the way content can, or should, be structured for presentation on mobile, touch-screen devices.
Influenced by the developments in advanced web page builders, several web-based e-learning platforms and course builders had already begun offering scrolling designs allowing the creation of web-like course pages that users could scroll through, in a way that is similar to reading a web article or blog post.
The screens below (developed using Articulate RISE ‘microlearning’ authoring tool), illustrate how this changes the learner’s view:
Using a range of pre-defined, fully-responsive screen elements and ‘widgets’, RISE moves away from the idea of fixed-sized frames or ‘screens’, allowing the designer to add blocks to the content and then decide whether each block is ‘connected’ to the previous block or whether to insert a break. In this way the designer can build the content into ‘pages’ of variable length. The learner scrolls through each page and then clicks or swipes to view the next page. The experience is, to all intents, the same as navigating through a web-site. From the developer’s point of view using these tools is remarkably similar to using web page builders such as NicePage or Elementor. And, before Adobe fans complain, I should add that the new Adobe Captivate 2023 allows what Adobe refers to as ‘infinite scrolling’ which operates in the same way as described above. i.e. the developer can add blocks to a screen creating a variable length page. The nice thing about New Captivate is that it allows the designer to mix fixed-frame size screens and scrolling, variable length screens in the same course module.
This free-format style of e-learning screen design has proved immensely popular with both learners and designers. From the learners point of view It works well on mobile devices and has a modern, familiar look. Learners are used to scrolling and swiping their way through content on the web. For developers, by using pre-formatted blocks and templates, great looking content can be developed very quickly and is easily amended.
So, is responsive, scrolling screen design the answer to your e-learning challenges? Well, not entirely. To achieve rapid authoring with true professional-looking, responsive and scrolling screens, there is a trade-off:
- Frame-based design generally allows more precise placement of elements on the screen and the layout of each screen is consistent, which can be crucial for designs where exact alignment and positioning are important.
- With a frame-based design, the designer has far greater control over the order in which the learner consumes the material. Conditional branching and personalisation of the content displayed is much easier using a frame-by-frame design.
- The scrolling screen design may look great when loaded to a web page, but may not be so attractive when loaded under some of the older LMS platforms. If you are forced to launch the content in a new window, then tracking and notification of completion can be problematic.
- Interactive tools and layout available to enhance learner engagement will, generally, be more limited with scrolling screen authoring tools.
…and there are new technologies that will inevitably play a greater part in future e-learning design that could bring about an even bigger transformation in e-learning screen design!
The 'new kid' on the block - 360 degree views
With Augmented Reality and Virtual Reality beginning to gain traction in the field, the major authoring platforms are working hard to stay ahead of the game. Screens which allow the learner to navigate and interact with a 360o view will play an important role as we see more e-learning designed to be delivered using a VR headset rather than a screen. The opportunity to create a totally immersive learning experience for the learner is both challenging and exciting.
Both Articulate Storyline and Adobe Captivate support 360o images (although they are not yet available in the new 2023 Captivate). Designers can insert a 360o image and add markers or hotpots over the image which become available as the learner scans the view, creating an immersive view of the subject matter being studied.
The example above shows our iceberg presentation in Articulate Storyline. The Smartphone landscape view is responsive and, although this is not strictly scrolling, the navigation is intuitive and controlled by the learner. It is not difficult to see the potential in this form of screen design.
In conclusion...
E-learning design has changed a lot in a very short space of time. And there is no sign that the rate of change is slowing. As more and more e-learning is being consumed on mobile and touchscreen devices so the design criteria of e-learning is changing.
In this article we have explored some of the basic concepts of screen design and the challenges the designer faces when creating content that will be consumed using devices with different screen sizes. The article has not, however, looked at how the material will interact with an on-line Learning Management System. Nor has it looked at how the authored material can be integrated with LMS authoring tools and hybrid frame-based and scrolling designs can work in tandem to deliver the modern look and feel as well as interactive elements to enhance learner engagement. We will leave these topics to another article.
Please feel free to share this article by clicking the bottons opposite and don’t forget to follow our company page on LinkedIn for news of further articles or free courses on this site by using the link below.