Mobile-first is a design approach that prioritizes smaller viewports, such as lighter tablets and smartphones, over laptop screens and desktop monitors. Since over 90% of all U.S. adults own a smartphone, and over half of all websites views were accessed via mobile devices last year, many U/X-perts advocate for mobile-first design. For Gen Z, mobile use is even higher: in 2017, 96% of Gen Z owned a smartphone, which they used 20% more than their laptops; post-pandemic, their mobile use has only increased. It would make sense, then, that instructional designers consider mobile-first to be a universal design model.
E-learning and the Gen Z experience
When schools went online en masse in 2019, many educators (myself included) believed that e-learning would be more of a challenge for Gen X profs than Gen Z undergrads. After all, while we struggled to share our screens, our students downloaded millions of Android and Apple apps. Yet online learning during the COVID-19 quarantine proved hugely problematic for students, who felt disconnected, literally and figuratively, from their learning experience. Figuratively, they missed their teachers and classmates. Literally, they had a hard time accessing appropriate devices, maintaining a solid Internet connection, and working in-depth with an LMS. Resolving these issues is not only a question of educational quality, then, but equal access.
Mobile-first for e-learning design
Adopting a mobile-first approach can solve some U/X issues for Gen Z, since phones are more accessible, more portable, and have greater connectivity than laptops. As far as interface design goes, mobile-first reduces extraneous content, menus, and visuals, while increasing font sizes, margins, and calls-to-action, like buttons. Most LMS have options for hiding unused menu items, scaling visual media, enlarging font sizes, among other design features (for an example of how to make your Canvas course more user-friendly, see my Articulate Rise portfolio project.) These format changes could help e-learning be more “useful,” “usable,” and “accessible,” all positive measures of user experience. But we can do even more.
Mobile-first for Gen Z design
Many design elements that make an AWWWard-winning homepage, improve SEO, or increase profitability on a large monitor are discouraged on small viewports: above-the-fold hero images, ad-laden blogs, and email popups can turn visitors off. Apps designed primarily for mobile use, on the other hand, have proved wildly popular: Uber, Doordash, and Snapchat provide great experiences for their users. When we look at their interfaces, however, we see that they do use images, descriptive text, various font families and sizes, and so on. A well-designed experience, then, is about more than the display:
Instead, we can appreciate that these apps have similar principles in common. First, each has one CTA per page: request a ride, order food, express yourself. Within that CTA, options are limited: you can request a ride for now, or you can request a ride for later. Second, the interface is colorful and engaging, with images, icons, even humor. The difference, however, is that they create meaning (this is the kind of food you can order; this is what a Lens can do.) rather than illustrate a point. Third, the apps are highly social: you can connect yourself to friends, or drivers, or short-order cooks, with a single click. These are all principles that we instructional designers can incorporate in our students’ e-learning experience.
Mobile-first design for Gen Z students
Instructional designers have access to more information about Gen Z learners than simply looking at their favorite apps. Given Gen Z’s enthusiasm for all things social and sharing, they offer almost unlimited user-profile data in real time. Scientific studies, open-ended surveys, course evaluations, even peer discussions on forums like Reddit, can help us re-design e-learning for Gen Z learners. Based on what we have seen thus far, we can make a few simple suggestions:
- Make it small. Phones are more affordable, connected, and popular than other devices, so a mobile-first approach makes e-learning more accessible. Upon doing so, edit course content for narrow screens. Favor portrait over landscape views; format texts to mirror simplified- or reader-modes; and optimize images and videos before uploading them.
- Make it simple. Too many options confuse users, especially when the users are anxious students. To simplify your options, think of every action item (menus, buttons, hyperlinks, responses, and so on) as a CTA, and then ensure that your CTAs are limited, visible, meaningful, and large enough to be clicked with a thumb.
- Make it social. Keep your students engaged with simple, small CTAs: break up long explanations with pop-up polls; gauge student comprehension via chatbox emojis; assign participation in a forum thread over an in-class group activity; encourage slide sharing and voice recordings over read-aloud presentations and short essays. Save typing-heavy input, like term papers and exams, for midterm and final assignments that are scheduled well in advance.
Mobile-first is more than a minimalist design trend; it’s an approach to structural organization, content presentation, and user interaction that can make e-learning even more accessible and appealing to our Gen Z learners!