Responsive Design in Mobile Learning – 3 Tips for Better UX

Professional learning is increasingly happening on the mobile. While learning that is happening via devices, be it desktops, tablets, televisions or mobile phones often gets labelled as just “digital” or “eLearning”, we might be better off thinking of the various mediums more granularly. Due to the limitations and restrictions caused by e.g. screen size, we cannot simply expect the same type of design to work for all the devices. Responsive design has emerged as a solution to that problem. However, simply using a responsive and automatically adjusting layout is not enough. Hence, we’ve compiled three tips for using responsive design in mobile learning. Let’s have a look!

1. Don’t overkill with interactivity

Looks like we barely made it to the first item and we are already contradicting conventional wisdom! Shouldn’t all learning contain as much interactivity as possible?

Well, no. Firstly, you should never use interactivity for the sake of being interactive. Rather, you want to make sure that the learning interactions actually contribute to the experience. Secondly, we need to carefully consider the peculiarities of mobile use if we want to deliver successful responsive design in mobile learning.

For instance, whereas on the desktop, having the learners “click” through objects is a widely used mode of interactivity, it doesn’t really work on the mobile. Rather, such interactivity in responsive mobile learning should be based on scrolling and swiping, two “natural” behaviours on mobile. Also, due to the smaller screen real estate, you don’t want your learners to have to jump through hoops and constantly open or launch new pieces of content.

2. Optimise your media and graphics elements

Another important factor to take into account is the use of media, graphics and visual elements. Generally, mobile devices are not great mediums for focused, extensive reading. Hence, we often tend to look at visual ways of conveying the information. However, there are a number of things to consider with visual elements when it comes to responsive mobile learning design. Here are a few you should keep in mind:

  • Optimise your file sizes. Mobile often goes with limited bandwidth, and increased loading times will get your learners dropping out.
  • Use simple graphics. Don’t attempt to include all the information in a single graphical illustration. This will often result in something that the learner has to zoom and manoeuvre about. Also, try to keep text out of graphics that are going to be scaled, as the text becomes illegible very easily.
  • Use icons, breaks and white space. Icons are great in communicating many things, e.g. navigation, context, sections or instructions. Breaks help the learner to pace the content and avoid “scrolling too fast”. White space works equally well in that, and also helps to balance out the design.

3. Design intuitive UIs and navigation

If we want to be successful in responsive mobile learning design, we also need to focus on UIs and navigation. Whenever our learners are spending time navigating complex structures or trying to find the information they are looking for, they are not learning. Thus, we should make finding and retrieving information as fluid and seamless as possible.

What’s fluid and seamless then? Firstly, you might be better off following the prevailing “logic” and “flow” of everyday applications. It gets very irritating when navigation elements like “previous”, “next”, “exit” or “play” are not in their “common” places. And you probably don’t want to make your learners frustrated. Furthermore, when it comes to mobile learning, it’s important to acknowledge the screen size limitations once more. Due to the small field of view, it’s much harder to quickly find new elements, compared to e.g. desktop, where one can see a lot more at once.

Final thoughts

Responsive design in mobile learning definitely proposes an extra hurdle for organisations, as they have a lot more to consider when designing digital learning. However, it’s a hurdle that one really can’t ignore. We haven’t seen any organisations that have ignored the need for responsive design and “mobile optimisation” and succeeded with their mobile learning initiatives. If this sounds entirely foreign to you, we are happy to help you understand the peculiarities of mobile, and to deploy effective learning initiatives utilising mobile devices. Just contact us here.

More Learning Ideas