When it comes to mobile learning design, the biggest factor that comes into consideration is the display size. Since the user’s screen size is much smaller, your design elements need to be uncomplicated and easy to digest.
Focusing on the mobile display element puts your mind in the right place. It forces you to focus on and prioritize the most important features and content in your application. But it also extends your abilities by offering new tools and services that are not available in a traditional desktop environment. By approaching your mobile learning design with the mobile-first mentality, you’ll start on the right foot.
Step 1: Design for what we know about how people work with touch.
Touch targets must be big enough to be contacted by users’ fingers and detected by the touch sensor. Make them at least 1/4 inch and preferably 1/3 inch. Make sure your users don’t hit the wrong target by not spacing out the targets enough. Measured from the center, make sure nothing else is inside a circle at least 1/3 inch across, and if at all possible, 1/2 inch.
Step 2: Design to device scale and context.
Make or download physical-scale templates so your paper sketches are correct from the start. Put wireframes and comps on devices so every step of review is at scale. Pick up the pieces of paper and phones to test out the interface. Does it work in the real world? You’ll be surprised what issues come up with just this simple step early in the process.
Step 3: Let users test your mobile courses.
What happens when you or your learners actually use the mobile course on phones and/or tablets? Can they reach the controls you want them to use? Do their fingers obscure important information on the screen when they are clicking? Most click actions need to be big enough to be seen around the finger or need to happen above it.
Step 4: Adjust accordingly.
Consider options such as simplifying content when needed and adding extra content when it makes sense, changing what is displayed (or how it is displayed depending on the accessing device), and you’ll produce training that is effective and impactful no matter how it is accessed.
No One Size Fits All
One of the biggest issues in mobile learning today is the “one size fits all” mentality. Namely because not every element converts properly for every device.
For example, when the user has to simulate mouse-clicks on a smartphone and the buttons are shrunk down to the size of a pinhead, the learning incentive is completely lost. If you can’t “click” the right button, how are you supposed to work through the module?
Also, your content might look fabulous on the average high resolution desktop or laptop screen, but that doesn’t mean it works on a tablet, or even more so a phone. Mobile devices have constrained resolution. Even with fancy retina display tablets, despite being nominally hi-res, they use their extra pixels for extra sharpness, as opposed to using them to fit more material on your screen.
Mobile Learning Design: Keep It Simple
The bottom line: Most eLearning courses need some serious work to be converted to an effective mobile learning experience. The most well-designed mobile courses are the ones that have been refined to their simplest state.