By Kristin M. Neumayer
Kristin M. Neumayer holds a Ph.D. from the University of Wisconsin-Madison, where she currently serves as a Faculty Associate in the Department of Spanish and Portuguese. She is an award-winning classroom teacher and experienced instructional designer who spends her free time learning to code and attending her three sons’ soccer matches. Visit Kristin at her website Kristin Neumayer, Ph.D. – Instructional Design & Consulting www.kristin-idc.com
Link to original article: https://kristin-idc.com/en/mobile-design/
What does mobile-first learning mean?
Mobile-first is a design approach that prioritizes smaller viewports, such as lighter tablets and smartphones, over laptop screens and desktop monitors. This approach has become more popular as mobile’s global market share overtakes that of desktops (57% vs 43% in February 2022); over half of all website views were accessed via mobile last year. The driving consumer group behind mobile growth is Gen Z (born 1997-2008), who use their phones 20% more than laptops and/or tablets. Since in 2022 Gen Z ranges in age from 10 to 25, we can posit that most of these users likely spend most of their days in an educational environment, be it school, college, technical or career training, or graduate studies. Thus it behooves instructional designers to consider the benefits of mobile-first design for projects geared towards learners in this age group.
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 professors than Gen Z undergraduate students. 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, students missed their teachers and classmates. Literally, students had a hard time accessing appropriate devices, maintaining a solid Internet connection, and using a Learning Management System (LMS) to access course resources, participate in course activities, and submit assignments. Resolving these issues is not only a question of educational quality, then, but equal access.
Mobile-first learning 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 learning management systems have options for hiding unused menu items, scaling visual media, and 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 learning for Gen Z design
Many design elements that make an attractive homepage, improve search engine optimization (SEO), or increase profitability on a large monitor are discouraged on small viewports: large, high-resolution images, ad-laden blogs, and email pop-ups 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:
The feature-rich, high-color design of Gen Z’s favorite mobile apps
Task Simplicity
Instead, we can appreciate that these apps have similar principles in common. The first principle is task simplicity: each app has a clean interface with a single “call to action,” or CTA. CTAs often appear as a button that users click to perform a task, such as “Request”, “Go,” and “Try.” For marketing pros, the CTA’s bright color, legible text, and urgent message entice consumers to make a purchase; for instructional designers, however, these elements can make tasks easy for learners to accomplish – brightly-colored, large-print buttons labeled “Share Slides,” “Start Quiz,” and “Submit Paper,” for instance, would make good CTAs in a course interface.
Meaningful Visuals
The second principle is meaningful visuals. Many conventional course materials convey meaning through text which is then decorated with visuals. In a slide’s bulleted list, for example, the bullets’ format is a matter of taste, but the text cannot be altered without changing the meaning of the slide. In the mobile interface, however, visuals create meaning: by superimposing Van Gogh’s self-portrait over a selfie, the Snapchat interface demonstrates how a user can deploy the Lens feature, without explanation or instructions. For instructional designers, visuals should be equally meaningful: interactive timelines, unnarrated videos, and labeled images can convey meaning without extensive text, which makes the material more engaging and saves valuable viewport space.
Sociability
The third principle is sociability. Learning-management systems were originally designed to replicate paper tools (files, documents, handouts, folders, and so on), and these features remain the fundamental structure of most e-learning organizers. The mobile app, however, facilitates paperless personal interactions: users can connect live and in real-time with drivers, short-order cooks, friends, and more, with a single click. Again, marketers will agree that the easier the connection, the more likely the user will convert into a consumer; for instructional designers, features that encourage learners to connect with one another, such as live chats, discussion boards, and drop-in video conference rooms, will engage them in the material and should be incorporated into the structure of the course.
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!
References
Allen, John. (2021, October 12). “5 Valid Opinions from Students on Remote Learning.” InfoBase. Retrieved April 5, 2022 from https://www.infobase.com/blog/5-valid-opinions-from-students-on-remote-learning/
Babich, Nick (2019, October 16). “Responsive Web Design Tutorial and Best Practices.” Adobe XD Ideas. Retrieved April 5, 2022 from https://xd.adobe.com/ideas/principles/web-design/responsive-web-design-2/
Chakraborty, P, Mittal, P, Gupta, MS, Yadav, S, Arora, A. (2021). “Opinion of students on online education during the COVID-19 pandemic.” Human Behavior & Emerging Technology. 3: 357– 365. Retrieved April 5, 2022 from https://doi.org/10.1002/hbe2.240
“Desktop vs Mobile Market Share Worldwide – March 2022.” (n.d.) StatCounter. Retrieved April 5, 2022 from https://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/#monthly-201202-202202
Friedman, Jordan. (2020, May 4). “Tackle Challenges of Online Classes Due to COVID-19.” US News and World Report. Retrieved April 5, 2022 from https://www.usnews.com/education/best-colleges/articles/how-to-overcome-challenges-of-online-classes-due-to-coronavirus
Morville, Peter. (2004, June 21.) “User Experience Design.” Semantic Studios. Retrieved April 5, 2022 from http://semanticstudios.com/user_experience_design/
Neumayer, Kristin (2021). “Kondo for Canvas (Articulate Rise portfolio sample.)” Retrieved April 5, 2022 from https://kristin-idc.com/en/portfolio/rise/
“Ninety-six percent of Gen Zers Own Smartphones, Q2 2017 | Globalwebindex.” (n.d.) Digital Marketing Community. Retrieved April 5, 2022 from https://www.digitalmarketingcommunity.com/indicators/96-of-gen-z-owns-smartphones-q2-2017-globalwebindex/
“Number of apps available in leading app stores as of 1st quarter 2021.” (n.d.) Statista. Retrieved April 5, 2022 from
https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/
“Percentage of mobile device website traffic worldwide from 1st quarter 2015 to 4th quarter 2021.” (n.d.) Statista. Retrieved April 5, 2022 from https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
Sears, Kat. (2016, September 6.) “Five Principles of Mobile-First Design.” Fredrickson Learning. Retrieved April 5, 2022 from https://fredricksonlearning.com/5-principals-mobile-first-design/
The Learning Network (2020, April 9). “What Students Are Saying About Remote Learning.” New York Times. Retrieved April 5, 2022 from https://www.nytimes.com/2020/04/09/learning/what-students-are-saying-about-remote-learning.html
u/SPisces 320. (2018). “Online Classes, What’s It Like?” Reddit forum: College. Retrieved April 5, 2022 from https://www.reddit.com/r/college/comments/7fnt3a/online_classes_whats_it_like/