Create an effective mobile learning experience

Posted by Greten on 15 Feb 2021 under Tips

Mobile learning is among the easiest and most accessible ways to learn. Learners can take mobile learning lessons or access learning materials while waiting for their turn in doctor's appointment, caught in heavy traffic on the road (as long as not driving), and other spare times. Mobile learning is also a helpful reinforcement for new knowledge and skills that a learner acquired from other channels such as traditional classroom or synchronous online learning.

To develop an elearning module for mobile accessibility, consider how users interact with their devices. It would help if you also consider how mobile devices have less power than laptops and personal computers.

Bigger onscreen text

Stylelize big letter W, like the first letter of a chapter in some old books,When I started working and using computers, the common trend is that smaller screens have smaller resolutions while bigger screens have bigger resolutions. I remember working on a monitor with a native display of 1024 × 768 back in 2007. Now, people are using smartphones with 2436 × 1125 resolution. While I cannot remember the exact physical dimensions of the monitor I was using in 2007, I know for certain that no smartphone can be larger than it, which means high-resolution smartphones pack several pixels in its small size.

The high resolution of smartphones means we can no longer rely on what we traditionally know as the readable font size such as 10 points or 12 points when designing an online learning module. Use 16- or 18-point font size as a baseline. More importantly, test your learning module to various mobile devices and different resolutions, and modify accordingly should you think an important onscreen text is not sufficiently legible.

Buttons and interactive elements are for tapping

Besides bigger font size, you need to develop your mobile elearning lessons with bigger buttons, links, and other interactive elements such that users can interact with them using their fingers.

Rule of finger

Learners interact with their mobile devices using their fingers. Thus, the rule of thumb, or shall we say, the rule of finger, is that interactive elements must be sufficiently large such that adult learners can tap on them without mistakenly tapping the adjacent interactive elements.

Five different configuration of menu on a mobile device in comparison to a pointing finger. The three on the left are okay, while the two on the right are difficult to tap.

You can resize most buttons, text boxes, drag-and-drop elements, hotspot areas, and click boxes to be sufficiently large for fingers. However, a hyperlink in a 12-point text, as well as check boxes and radio buttons, are difficult to tap; it can feel like you're trying to hit the bull's eye on a dartboard or a two-meter wide exhaust port of a moon-size space station. Hence, aside from legibility, the capacity to interact by tapping is also an additional reason to use a bigger font size for onscreen text. As for check boxes and radio buttons, you can replace them with toggle buttons or toggle switches that are larger and resizable.

If your elearning lesson includes a video, design the playbar; volume controls, and the play, pause, stop and replay buttons to be large enough for tapping.

No hover and no right-click analogue

A tap on a mobile device's touch screen is equivalent to the computer mouse's primary click. By default, a primary click is when you use the left mouse button to press the buttons in the user interface. Some software programs have secondary or right-click interactions that may do many things, such as displaying additional options. For some buttons or icons, hovering the mouse pointer on an icon may show submenus related to that icon. Mobile devices have no functions equivalent to that of secondary click or hovering the mouse pointer.

I used primary and left-click interchangeably as well as secondary and right-click. You can configure your operating system to have the right mouse button as the primary click, but I never used it and never heard of anyone who does.

If you design an elearning module that utilizes the mouse hover and right-click functions, remember that these functions do not translate well with mobile interactions. Thus, you need to alter the interactive elements to retain similar learning experience without using the secondary click or hover. If you're designing a mobile learning module from scratch, do not use these functions.

Smaller file size

Smartphones typically have smaller storage and memory (RAM) than personal computers. The internet is usually accessible through a smartphone using only either wifi connection or mobile data. There are ethernet cables available for mobile devices, but if you need to stay in one place to use the internet, you might as well use a computer or a laptop connected to the ethernet cable. Thus, mobile learning module should have a smaller total file size than a computer-based elearning module.

One of the elements to look at when developing a mobile learning module is the image files you use. The largest images should probably be of the same size as the screen resolution, or perhaps even just a fourth of it (half of the width and half of the height) since mobile devices pack several pixels within a small physical dimension of its screen. These largest images are for those you need to display in full such as diagrams and background images; images that serve as icons should be proportionately smaller.

If you are using videos for mobile learning, you can make its size smaller by using lower-resolution videos for your mobile learning. High-density videos (higher resolution) look awesome on computer screens while low-resolution videos look ugly; learners are not likely to tell the difference in mobile screens. You can also make the video file size smaller by making the videos microlearning that are way shorter than the full video lessons for computer users. These microlearning videos are either summary of the longer video lessons or the coverage of a video lesson chopped into smaller independent videos.


Mobile learning lessons can be the same as that of elearning lessons, or a separate set of lessons working in tandem with the main elearning. When designing mobile learning, use large font size for onscreen text, interactive elements that fingers can tap, and smaller file size to utilize the mobile devices' lower memory and storage capacity.


Last updated on 15 Feb 2021.

Share your thoughts

* Required. Your email will never be displayed in public.

Instructional design and educational technology for effective learning