eCourse Next: A Tablet Friendly mLearning UI
Prototyping the Shell
Back in January I began to prototype the mLearning shell. First steps were to define the size @ 1024 X 576 and select a CP7 theme. Since Tablet screens wash out in bright light, I choose a dark CP7 theme called “Green” with white text for maximum contrast.
Next, I used some DG images to make 2 CP7 Master pages as below adding a mask to reduce the alpha thus lessening the background distraction for the learner’s eyes.
Simple Navigation: Workarounds/PlayBar Tweaks
After adding text to a number of slides, I discovered some HTML5 limitations that needed a few workarounds. HTML5 does not support transitions between slides, but I find making the screen do something on entering new slides helps the learner maintain focus. CP7 Effects come to the rescue with a simple Zoominfade in each slide. The effect simulates the unsupported transition.
Best practice in most mLearning modules is to use a <Next> or <Continue> button so the learner can control the pace of the presentation. I started with a standard <Continue> button, but it looked very small on the tablet screen and was hard to press with a finger tip. What next?
Hide the button!
By matching the button stroke color to the background, setting the fill alpha to 0, and deleting the text, the button becomes virtually invisible. So? In CP, a button has two states Active and Inactive. In the Active state objects continue to load the move. On a button becomes Inactive, the screen freezes. In effect, the button state change issues a Pause to the player.
Add the Mobile PlayBar
Again since this module is defined as Tablet centric, I decided to put the PlayBar on the right side of the screen so the Play/Pause button is close to the top by the right thumb/index finger for easy access. This placement works also for desktop and laptops as top right an easy position for mouse clicks tool.
When the hidden button state changes to Inactive, The Play/Pause button changes to Play, a cue for the learner to press for viewing the next slide. The Forward/Back buttons also work at any time, and learners may use Pause to stop a video side.
Advanced Navigation and Search
Not bad for simple navigation but there’s more! The slide below shows the overlay TOC that is accessed via the top handle. With the TOC open learners can Go directly to any slide and Search for any text content in the module.
The advanced navigation and search capability add more ways to accommodate different learning styles and objectives for a flexible and comfortable UX.
I am still testing a widget for Quiz and eCourse Evaluation components and sorting out some other issues with the audio and video elements, but the full e-mLearning section will be done sometime this coming week.