The mobile market has grown at amazing rate, and will continue to grow at an increased pace. Over recent years information about designing and developing m-learning has increased substantially. Developing e-learning for mobile has created unique challenges, mostly due to the fact that mobile devices come in all shapes and sizes, and have varying levels of quality and resolutions. 

The future will bring even more mobile devices into the fray, so a standard device is not likely to occur. It is difficult to create one e-learning design that will work across all devices, however there are some general guidelines and best practices you can follow to help you develop a good user experience.

Consider the Device
  • Keep the specific device you're designing for in mind (iPad, Android device, iPhone, etc.).
  • Beware of Flash and other formats that aren't compatible across all devices.
  • Consider the various inputs on the device you're designing for (keyboard, scroll-wheel, touch, directional pad, etc.).
User Experience
  • Avoid scrolling because it can be more difficult on the smaller screen.
  • Understand and observe how users hold the intended device.
  • Keep quizzes short and concise, keep options restricted to two or three.
  • If linking to outside sides, notify learners they are leaving the mobile-optimized course.
  • Keep course size very small, chunk into max. 10-15 minute pieces.
  • Consider landscape view vs. portrait view for your e-learning. 
Imagery 
  • Use bold imagery and images on white backgrounds.
  • Maximize the use of icons and graphics to represent content instead of text.
  • Don't use images that are irrelevant or too large.
  • Use clear and simple images.
  • Provide strong visual cues (bright colors, descriptive icons, etc.).
Fonts
  • Make your default font size at least 14pt.
  • 12pt font is the very smallest font size you should use.
  • Don't use text in images, some devices compress images or render fuzzy images.
  • Designing mobile learning with system fonts is safest option.
  • When using custom fonts, make sure they render nicely and you have web font licenses.
  • Keep the number of custom fonts to a minimum (they increase page load time).
Buttons and Input Fields
  • Large buttons are a must for mobile device navigation.
  • Place buttons like Submit and Cancel far away from each other (minimize users pressing the wrong button.).
  • Leave a lot of space around your buttons (at the very least, 10px).
  • Make your buttons bright, bold and highly visible.
  • Use clear and very descriptive action verbs on your buttons.
  • Keep the input fields to a minimum (try to use large checkboxes or radio buttons instead).
Additional Tips
  • Leave plenty of white space around your on screen items.
  • Optimizing and compressing any audio and video files is critical for fast mobile experiences.
  • Preview your mobile design early and often.
  • Develop content that is crystal clear and easy to understand.
Forum discussions on this topic:

Follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments, please share them below.

11 Comments
Sharon FultonBevers
Nicole Legault