learnability matters

Mobile phones are an integral part of our daily life. We no longer miss our computer while traveling; our phone provides the functionalities of a computer. What a change from a few years back when we would use the mobile to only make calls! This extensive reach of mobile phones has opened up the scope for learning using mobile phones (mLearning). Given below are a few things that we noticed as we stepped into mLearning using FlashLite.

1. Screen resolution and Size:

The most challenging factor in designing for mobile is the size and resolution of screen. Each handset has different size, resolution, and orientation.

Therefore, the ‘nugget’ designed for handset A may not play in the desired way in handset B. You need to keep this in mind when designing for different devices.

Fig: The nugget designed for model B working on model A.

Tip: During storyboarding, define a fixed area within which the instructional designer can work. The work area should be the same as the handset resolution.

For example,  if the desired handset size is 320×240 , your work area should also be the same.  This helps ensure that you don’t have to force fit elements on your screen at a later stage.

Fig: Screen shot of our storyboard

2. Learning Content:

Reduce  text on screen as much as possible. You are migrating from computer to mobile device also means that your work area has reduced from1024 to 240 pixels. Keep it short and crisp. Too much content will mean that you may need to have a scroll feature. This is not advisable. Make your content more visual and less text heavy. Identify the maximum number of words that you can include on your screen.

3. Use of Fonts:

In e-learning,  the On Screen Text (OST) is Calibri, 18 point. This is usually clean and readable. But on the mobile device, 18 point is too small.  For mobile devices, it is preferable to use 22 points Calibri. This is legible and easy to read.

Fig: Uses font type Calibri and Size 18,25 and 22 points.

4. Color Scheme

The colors or gradients, which look good in your computer screen, may not be visually appealing or even readable on your mobile device. Use contrast colors to increase visual appeal and increase readability.

5. Display Quality:

Display quality of the mobile device plays a big role.  The module may appear different in different phones with same resolution. It may look extremely good in handsets that have a powerful display.

6. Use of Graphics:

Use simple graphics with less gradients or glows. Use PNG format to avoid loss and best display in most of the phones.

7. Usability:

Usability of the learning modules is another challenge. In e-learning, the navigation can be made very clear and usable. Most of the times learner has Next/Previous buttons to navigate. When it comes to handset, the users do not have a mouse and have to use the keyboard to navigate.

For eg: In one of our learning demo, we have used few scenario-based questions with 3 different options. While usability testing, few clicked 1,2,3 in the keypad to select the respective options while others used handset navigator to move up and down. We had designed such that the options are selected using the handset navigator. We had to rethink this post learner testing.

Hope these tips have been useful to you. Please do share your experiences/tips too.

Share this