In the current environment, learners consume a lot of course content on mobile screens. Thus, it’s essential we take this factor into account when designing our course screens.
This course shares some tips to make the learning experience more friendly for mobile screens. Although these design tips are applicable to content design for any type of screen, due to a smaller screen on mobile devices, application of these tips is essential for an engaging learning experience.
Instruction: You can either watch this video or read the associated blog.
Objectives
By the end of this short training video, you will be able to:
- Design course slides or screens that are easy to read on mobile screens
- Identify the best practices for designing for small screens
- Identify and use the right font types and colors that are recommended for mobile screen viewing
- Explain the importance of white space and visualization for facilitating a good mobile learning experience
Why Do You Need to Design for Mobile?
The world has gone mobile. What a user did on a PC or a desktop computer a decade back can be now done on a mobile device. As a result, Smartphone usage has increased drastically.
It has resulted in changing expectations from app builders and content makers to develop apps and content that is easy to consume on mobile screens.
To add to this, our audience’s attention span has never been shorter.
So, to keep them engaged, it’s recommended to use best practices from the field of User Interface or UI, and User Experience or UX design into your courseware. We’ll learn and adapt these UI or UX principles for designing course slides.
Components of Designing for Mobiles
As we are drawing parallels from UX principles, let’s see how we can use the following to ensure an effective learning experience: Choice of Colors, Choice of Fonts, Layout decisions, Volume of content, Design affordances for interactivities, Tools, and Style Guide.
Let’s examine the tips and practices related to these principles one by one. Here are the tips we’ll cover to design course screens for mobile. What we’ll discuss will cover: Color Choices for Mobile Design, Choice of Fonts, Contrast, White Space, Visualization, Keeping the training short.
Tip One: Color Choices for Mobile Design
First, let’s start by examining the color recommendations for mobile design.
Owing to a smaller screen size, use colors that are high in contrast against the text.
This is because your learners may take your course while travelling on a bus or train on bright days. Having high-contrast elements will facilitate readability and ease the learning experience.
Examples of good choice of contrasting colors are dark blue background and white font color for text that appears on the blue background, or black colored font on a white or any pastel light color.
Using the right contrast theme for instructions related to performing on-screen interactions is essential.
Tip One: Color Choices for Mobile Design – Consistency
Another tip for color usage relates to using consistency.
Stick to a standard color palette and use it in your courses.
Finally, make sure you don’t use noisy, fluorescent, or neon-colored backgrounds.
Tip One: Use the Color Wheel to Choose Colors
You can consider the Color Wheel as a foundation for choosing the right color combination for your work.
The color wheel has been used over the years to define the details of the color theory and select which colors look good together.
So, before proceeding with developing courses, use the color wheel to pick the right colors to use in your course.
In the design world, choosing colors for a particular project is termed as defining a color palette for the project.
You are strongly recommended to use a consistent palette across all your courses to ensure your learners get accustomed to the experience of seeing the same set of colors.
Another important tip is to use a consistent, but different color or formatting to identify instructions related to formatting instructions related to performing interactions.
This will allow learners to easily separate instructions from other on-screen text easily.
Tips to Get Started with Colors
Colors play a pivotal role in how your courseware looks.
You can categorize the colors in your theme into Primary and Secondary color groups.
Secondary colors are recommended to be used occasionally. They should be chosen to act as a supporting theme for your primary colors. You are advised to keep a limit on the number of secondary colors.
Along with the primary colors, the total number of colors in your palette should not exceed 8 to 9 colors. This is because colors play a significant role in determining your user experience. And using a consistent theme of colors provides a consistent visual experience for your users or learners.
Tip Two: Choice of Fonts
In addition to colors, your choice of fonts significantly influences the learner experience on all screen sizes. This is more significant on mobile screens as the area available on a screen is limited.
Also, since a mobile learner can take a course when travelling on a bus or train, the font that you choose must simplify the learning experience. Hence, choose fonts that are simple to read.
Keep the fonts large enough to ensure the learners don’t experience strain when reading the on-screen content.
Avoid complex or stylized fonts that replicate handwriting as these can be difficult to read on a small screen.
Some popular font families that are popular across the web for mobile and desktop experiences are fonts from families, such as Open Sans, Roboto, Helvetica, Montserrat, and Avenir.
Tip Three: Contrast
Choosing the right contrast between your font color and the background is a hotly debated topic in the UX industry.
The W3C web standards recommend keeping a contrast of at least three to one or 3:1 between the background and the font color.
You can use tools available on the Internet to measure the contrast ratio of your selected fonts.
To measure the contrast ratio of your font and background colors, you can use the Contrast Checker tool on the website webaim.org.
If the website is not updated after this training video is released, you can find it on the Resources page and under the Tools section.
Note that we are not endorsing webaim.org. You can use any other tool on the web that lets you make decisions on selecting the right contrast.
Do note that the minimum ratio of three to one is not the golden standard in the industry. Some claim that such a high ratio of contrast is difficult to read for dyslexic readers.
Our recommendation is to choose a ratio and test it on your audience group.
Choose and stick with the contrast ratio that your audience finds best to read.
Tip Four: White Space
The tip related to keeping sufficient white space is applicable to designing for any form of screen.
Providing sufficient white space in your designs allows learners to focus on the key message or content on your course screen.
Tip Five: Visualization
To design slides with enough white space, aim to present information in the form of relationship or hierarchy diagrams that convey the meaning of the content.
If the content type you are teaching cannot be visualized easily, it’s okay to present it in the form of plain text or bulleted lists.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
However, make sure that the screen is not overloaded with information.
Keep sufficient white space on the screen.
If required, break a topic across multiple screens and smartly use animations to ensure sufficient white space on the screen.
Using animations will also enable you to draw attention to the key points that you are presenting.
Ensure that you place important or educational elements on the screen based on your audience’s cultural reading habits.
Certain segments globally read left-to-right while some read right-to-left.
Know your audience and use the information to make decisions around your screen layouts.
This is important if you are using some stock photos or illustrations for decorative purposes on a slide.
Typically such images or illustrations don’t serve significant educational objectives, but can visually distract learners.
Hence, placing them in areas of the screen where your audience will not look first can improve the learning experience.
Tip Six: Keep It Short
If you know that your courses will be consumed significantly on mobile devices, break up your curriculum into short courses or into micro-learning modules.
This will allow the learners to complete logical modules on the go and reward them with a sense of achievement.
To learn more about designing micro-learning modules, do check out our videos and blogs on the topic.
You can click the links in this blog or the YouTube description to visit them.
Summary
The current generation is hooked to their mobile devices, so it makes sense for us to take mobile learning experiences into account when designing our courses.
While some advanced and complex topics are better suited to be consumed over larger screens or in presence of expert trainers, a lot of foundational or basic training can be designed for and taken on mobile devices.
Hence, always take these tips into account when designing your courses to ensure your course screens facilitate a good learning experience on mobile devices.
Thank You
If you liked this video or blog, do subscribe to our newsletter and YouTube channel to stay updated with our new releases and content.
Additionally, do check out our course portfolio on Udemy to learn more about Instructional Design.
Thanks for reading the blog or watching this training video.
We’d like to thank Riddhi Madhu, a guest contributor for her suggestions and inputs on this topic.
