The rise of e-learning in the past decade has now coincided with a more recent wave, in the form of mobile computing. As fresh batches of learners use more versatile devices, e-learning providers are also scrambling to catch up, and it seems the landscape is changing faster than ever.
Here in the US, 25% of web users are mobile-only, which means they only use their smartphones for online activities. Interfaces not suited for mobile might put off a lot of e-learners who belong to this demographic. Moreover, Statista predicts that global mobile data traffic will increase considerably between 2016 and 2021. In other words, we are in the midst of an industry-wide migration.
While there are many guides on how to optimize general user interfaces for mobile, not a lot have focused on e-learning specifically. Here are some of the things that you have to consider if you’re aiming to make your e-learning interface mobile friendly.
Identify your users
Your design approach should be optimized towards a specific group of users. Do you have basic, intermediate, or advanced learners? If you have low-literacy learners, researchers from University of Colorado and Indiana University suggest using non-text based widgets and a linear navigational structure.
Additionally, ensure that the design accommodates bite-sized information packages. In a previous post here on our blog, we discussed the importance of letting your candidates learn at their own pace. Designing for specific users helps you streamline your interface and make it easier to take in.
A good interface is an invisible interface
If understanding how your interface works is already a mental challenge, then you are doing a disservice to your actual content. Jakob Nielsen’s design principles show how to make your interface intuitive and inconspicuous.
First off, users should know where they are in the interface. For example, you can do this by changing the colors of tabs that have already been clicked. They must also remember how they got there and be able to go back via clear navigation buttons. The interface should show how far they are into the e-learning module by using a screen ID such as “page 3 of 55”. Lastly, it should be clear where else they can go, which can be done through visual cues.
A good deal of planning must be done for this aspect. In an article by Ayima on the ‘3 Steps to Optimize Your Website for Mobile’, they suggest that placing the navigation buttons in the wrong places is a common mistake when designing a mobile page. You can avoid this by considering how people usually use mobile devices. Most use their thumbs, so navigation buttons are best placed at the bottom.
Because a lot of mobile readers tend to skim over content, you can also consider putting a sticky menu, although it will reduce your screen real estate. The important thing to keep in mind is to design an organized interface that's not imposing to the learner.
Be consistent
Consistency with colors, shapes, icons, and labels allow users to create mental associations for your system architecture. In an e-learning interface, consistency allows the learners to absorb the content without being distracted by novel visual elements.
Ensure that touch targets are large enough
Selection errors are also common in touch devices, so make sure that touch targets such as icons, links, and text are large enough. At the very least, provide a zoom feature.
If a learner wants to search for a concept or look at its definition in a third-party dictionary, the font size should be large enough for proper selection. Tech Crunch also suggests avoiding the 'hamburger menu', or stacked menu bar, as it is rarely used and difficult to use with thumbs.
Learning-friendly first, mobile-friendly second
Most important of all, remember that the interface should facilitate learning and be adaptable to any learning context. Pedagogical techniques are universal regardless of medium, so the focus should be on implementing these basic principles to the specific platform.
This means coming up with engaging content and modules, rather than focusing on the bells and whistles. Consider the interface as the gateway to your content.
To sum up
To sum everything up, making a mobile-friendly e-learning interface is all about maximizing the platform and minimizing clutter. After all, aside from medium-specific considerations, there are not many differences between learning via desktop computer and learning with a handheld device. The highest priority goes to presenting the content in the most engaging manner possible. The landscape of delivering e-learning content may change, but the core principles remain the same.
