Learn about UX Rules in Mobile Learning

Introduction

Nowadays, everyone is using mobile phones and glued to them. On average, people check their phones 221 times every day. It is now the primary way of communicating with friends and family, online shopping, ordering food, playing games, and so on. Source

According to statistics by edume, smartphones are used by 80% of the world's population. With having that extent of accessibility, today mobile users are growing exponentially. The user experience is enhanced. It encompasses users’ perceptions and feelings before, during and after their interaction with cellular devices. Mobile learning is a new means of accessing mobile learning content. Let’s take a plunge into mobile learning and know more about its role in user experience. Source

What is mobile learning? 

The new means to access learning content through utilizing mobile devices is mobile learning, often known as M-learning. You can learn whenever and wherever you want, provided that you have a mobile device connected to the internet. 

There is a growth of mobile users and mobile use. The number of mobile users and the amount of time they spend on their phones is on the rise. With more people doing more things on their phones, the focus then comes on how to improve the individual components that make up the mobile user experience. 

When there is a massive increase in adoption to mobile users, it then becomes really important to improve the user experience. Therefore, creating delightful mobile user experiences pushes us to reconsider a lot of what we've taken for granted in desktop design. Mobile-specific concerns, such as small screens, wide variances in device characteristics, usage and connectivity limits, and the difficult-to-identify-but-ever-changing mobile environment, all add to the complexity.

When designing for mobile, designers must first determine whether to create a single design that fits all devices or numerous versions tailored to different screen sizes. Responsive design is the first type. Adaptive design is the second. Typically, the first approach is to design for the smallest gadget and build up from there (smartphones to tablets, etc.). Then web standards (W3C's) are followed, and as many browser kinds as feasible are supported. It's critical to concentrate on context, ease of use, conciseness, and consistency.

Designing for mobile includes many things to consider, and while many are conventional UX factors, there will also be mobile-specific design considerations. Will your mobile offering be integrated with your current offering? If it does, will you use the responsive or adaptive design?

With learners seeking access to learning at all times and on any device, delivering e-learning that can be accessed on any device has become critical. Adaptive and responsive design are the options; there are distinctions between the two. Knowing them will assist you in selecting the best option. There are two primary approaches to developing asynchronous content for delivery across a variety of mobile devices. 

Adaptive Design

It's a style of design that adapts the layout of an online course to the device on which it's being watched. The layout of the screen changes depending on the device being used to view the material - desktop, laptop, tablet, or smartphone.

Responsive Web Design Guidelines: What It Is and How to Use It

 Before getting into the details of responsive web design guidelines, let’s have a short background introduction. The responsive web design, firstly put forward by Ethan Marcotte, is not just about the adaptiveness of screen resolution or the auto-scaling of pictures. Instead, it’s more like a new way of thinking where designers need to consider many factors, such as the device performance, Dom node number and the screen size, etc. Following are several responsive web design techniques for your reference.

How about responsive product design? 

The responsive design is out of the product design, which requires the engagement of product managers, interaction designers as well as engineers. It’s of necessity for us to break the traditional way of thinking in the design, shifting from the web to mobile applications. The first step is to build a clear information architecture, then get the design started on the smallest display of mobile devices with the abandon of interference so as to ensure the best experience of the core function.

Meanwhile, the participation of interaction designers should deal with the responsive design problems and the issue of how to make the module much smaller and flexible. They also need to confirm the design style and framework. For the developing engineers, their responsibility is to make the test of coding and programming on the basis of the completed project, taking full advantage of individual device’s characteristics and building frame structure.

How does the interface design look like in the RWD? 

 Previously, most of the interface designs aim to the desktop products, and there will be one single size with fixed location of each module. But everything has changed in the responsive design. According to those responsive web design tutorials on the web, it proves that designers need to make multiple versions of design. A typical example is the module A which is shown in a black background in the width of 1024px is shown in a white background in the width of 768px.

Does the traditional media query breakpoints still go popular? 

From the perspective of traditional design, it’s possible to change the page layout through Media Query. For instance, we can change the layout in a fixed width (that’s what we call breakpoint). The usual way of thinking is to set breakpoints in accordance with some devices, such as desktop, tablet and mobile phone. As a matter of fact, the media query breakpoint is unreliable as the screen size will continue changing with the development of technology.

But the responsive design shouldn’t be targeted only at some devices with certain sizes, and there needs an interval value during the design process, rather than a resolution corresponding to a device. Henceforth, it’s necessary to make correspondent settings according to the content need. For designers, they need to find a critical point – that is the value when the visual effects start failing to meet the aesthetic of people or the acquisition of content.

 

What are the differences between interaction design and RWD?

In the responsive design, it requires a comprehensive consideration about the way of interaction, which is one of the responsive web design key features. An excellent interaction designer should not only consider the habits of desktop users, but also must take the portable devices of different sizes into account. For instance, we’re used to using the floating layer on PC, but it cannot be used on some devices of small sizes. Also, some links of a small responsive area are not easy-to-operate by fingers.

This requires designers to seek common ground while reserving differences. For example, they can decide whether to use floating layer, increase the operating area and keep unified or not, on the basis of screen size. To ease the process of design, we’d like to recommend a simple-yet-powerful prototyping tool – Mockplus. It enables rapid prototyping and highly-visualized interactions with the simple drag-and-drop option.

 

In Conclusion

Above are the responsive web design guidelines for product design, interface design, media query breakpoints and interaction process. Hopefully, you can find it helpful, and you can also learn about the difference between responsive and adaptive design.