How to Design a Mobile-First Online Course

By: LearnDash Collaborator • October 1, 2018
Filed Under:

Should online educators consider restructuring their courses to be mobile-first?

It’s been a few years since mobile users surpassed desktop users on the Internet, yet online courses are still predominantly designed for desktop use. There are good reasons for this, as well as bad.

On the one hand, most adults are still used to turning to their desktops for important, in-depth tasks, such as writing a paper, researching a project, or writing a business email. Desktops are better designed for multi-tasking, so a course that requires users to switch between programs or applications simultaneously isn’t well-suited for mobile. On the other hand, some educators have been slow to move to mobile because they aren’t aware of a need, or else they aren’t sure how to begin.

It’s important here to note that desktop and mobile designs aren’t mutually exclusive. A course with a responsive design should be accessible on any device through the Internet browsing app. However, in some cases it is worthwhile to prioritize a design for mobile so that it provides a better learner experience. In doing this, educators should look at both the infrastructure of the course, and the instructional design. Here’s where to begin.

Infrastructure Design

When I talk about your course infrastructure, I’m referring to the more technical side of the course. How does your course display on smartphones, and how do users engage with it? When it comes to mobile, there are three key design decisions you will need to focus on.

1. Design for a vertical orientation.

Computers have a landscape orientation—we all know that. But while mobile phones can also be held in landscape position (like when you’re watching a video), almost all other engagement happens in a vertical orientation. Most likely your current website will have a responsive design, meaning it will automatically adjust to fit the orientation of your screen.

However, even with a responsive design, there may be some elements that adjust better than others. Test your program on your phone to see how well it works. Even better, get used to accessing your course primarily through your phone so that you can experience it the way your students do.

2. Create accessible navigation.

When it comes to usability issues, one of the usual suspects is navigation. Hamburger menus are one common solution, as they take up almost no space and their minimal design makes them unobtrusive. However, they can also be hard to notice for that very reason, and some users still aren’t used to them.

You may try splitting up your navigation into icons, or offering a simplified navigation on mobile. However you do it, make sure menu items are large enough to easily select by touch. You don’t want learners constantly frustrated because menu items are too close together to easily select.

3. Use appropriate gestures and interactions.

Mobile designs also use different gestures compared to desktop. While desktop users have a full keyboard with shortcuts and a trackpad or mouse, mobile users rely on gestures such as swiping, tapping, or scrolling.

Make sure you have the right corresponding gestures worked out for each desktop ability. And if you add new gestures, include a short tutorial to help learners discover what they are.

Course Design

With the nuts and bolts in hand, it’s time to look at the course content. Remember that mobile learners are operating in a different environment than desktop users—and not just because of their interface. Here are three things to keep in mind.

1. Keep lessons short and digestible.

Mobile learners are on the go, which means most aren’t going to settle down to complete an hour-long lesson on their phone. This means mobile lessons need to be bite-sized, focusing on one key theme per lesson. Shorter, more frequent quizzes are more effective than long ones. Flashcards can also be a convenient review tool, as the information on a flashcard is about right for a phone screen.

2. Assume your learners will be interrupted.

No matter now long or short your lesson is, assume disruptions as a matter of course. Mobile learners will access your course more frequently, but will also set your course aside as external demands take over their attention. This means you will want to avoid any course features that can’t easily be started and stopped, and for those that are difficult to pause, make sure you label them clearly before learners begin.

3. Use responsive formats.

The size of mobile screens means the teaching formats you offer will need to adjust. If you use infographics, design them so they fit the screen so that users can read them easily without having to scroll sideways. Use a video player that can easily expand to full screen, and double check that your text is legible and your buttons are easy to click. They may seem minor, but the smallest problems can be the most irritating, if they appear frequently enough.

Desktop isn’t disappearing—just declining.

Considering how your course functions on mobile devices is critical for the future success of your business. However, while you may want to create a design that prioritizes mobile users, that doesn’t mean desktop users should be neglected. You may find that your learners prefer taking some parts of your course on mobile (such as reading lessons and answering quiz questions), but switch to desktop for more writing-intensive tasks (such as responding to a forum thread).

If you’re still trying to decide which is more important for your learners, look at your user data. See how many visitors come to your website via their phones, how they interact with content, and whether your design helps or hinders their engagement. Then use your discoveries to inform your course design decisions.

LearnDash Collaborator

A LearnDash specialist wrote this article to help guide new and current LearnDash members.