Today, I thought I’d share some tips for designing elearning for delivery on mobile devices. Specifically, I’ll be talking about transforming an elearning design that was optimized for an iPad into one that’s optimized for the iPhone.
I’ll show you some guidelines I followed to transform the design on the left, which was optimized for use on tablets and PCs, into the design on the right, which is optimized for the iPhone.
Design for Landscape Orientation
Mobile devices are, of course, quite small compared to a computer or even a tablet so you want to make the most of the space you have. When designing for the iPhone you’ll likelyy want to design your course to be viewed in landscape orientation so you can use up as much of the limited space you have as possible.
iPhone’s built-in Safari internet browser only allows content to be displayed in full screen when the phone is oriented to landscape (the width is greater than the height). Landscape Orientation gives you a 480 x 320 pixel space.
Conversely, in portrait orientation, you only have a 320×355 pixel space.
Eliminate Unnecessary Elements
When creating a mobile learning design for an iPhone you’ll have 4 times less space then you would optimizing for the iPad. So if an element is not critical to the template or the page remove it. Each content page should be short and to the point.
Reduce Sizes, But Use Finger-Friendly Design
Once you’ve cut out all the unnecessary elements, reduce the size of your elements as much as you can, but keep in mind, people still need to be able to easily see and interact with the elements.
All interactive objects (buttons, tabs, links, etc.) need to be large enough and far enough apart from one another that a user can easily interact with them using their fingertip. Apple recommends buttons no smaller than 44×44 pixels. Multiple research studies back this up.
I recommend having at least a 5px space between interactive elements as well so user’s don’t mistakenly a button immediately beside the one they intended to click. Also, remember not to place buttons in the bottom left or bottom right corners of the elearning as Safari places the Back and Fullscreen buttons in these locations already.
Pick through your textual content, and remove everything that is not absolutely necessary. Use shorter words. Abbreviate.
Chunk Content into More Pages
If you’re converting an elearning course that was created for a tablet or PC for use on a phone, you’ll almost inevitably have to have more pages in the mlearning version. Don’t be afraid to split your content into more pages. Remember you only have 25% of the space on an iPhone than you do on an iPad.
Remember! There’s no rollover state for content on mobile devices because there’s no mouse cursor. So rollover images, rollover text, and rollover slidelets all need to be eliminated or converted for finger-friendly actions.
Test Test Test
How the elearning appears when previewing on your computer will very likely look different then what it will look like on an iPhone. So be sure to text the course on your iPhone as you create it, and certainly before you publish it for use.
To see an example of some mlearning in action, check out our iPhone Mobile Learning Template.
Have yourself an awesome day!