Designing for Mobile

Jeanne Samuel
  • Scrolling: Design for a natural fit with the device (Long pages and fewer clicks are best)
  • Chunk: Be concise keep your learner engagement time to about 5-10 minutes
  • Fewer clicks: Removing unnecessary screens or clicks
  • Less is more: Clean look, white space, system fonts, fewer words, large images
  • Scannable: Make sure your key points will stand out when learners are scrolling quickly (Use clear headers, numbered points and icons to grab attention)

Chunk information

Using backward design, identify the course outcomes. Create a course outline starting with the learning outcomes and course goals. Break broad topics into subtopics. This is known as chunking information at a micro level. Within traditional course design you chunk information into modules and then visually chink information on the page. Develop one course for each subtopic and map the course to one, small, distinct, learning objective. Try to keep readings, activities, and assessments to 5-minutes of learner interaction. Small, frequent bursts of engagement.

Put your course on a diet

De-fat your course by avoiding extraneous material/information. Do not just take an entire module and break it into short topic-related chunks. You include only what information that concisely enables the learner to master the aligned outcome (“must know” content versus “nice to know”). Be brief because the display screen on mobiles and tablets is smaller than a laptop or a desktop screen. Provide opportunities for learners to ask questions to compensate for any missing information. Edit text and summarize more.  Place secondary content on bottom of the page. Use of icons and graphics to represent content instead of text. The last two techniques support easily scanning content to get the gist of the information presented.

Your course design should be simple

The structure and flow (navigation) should be intuitive and consistent. Design for touch (swipe/scroll). Reduce the number of interactions that the learner will have to perform in a mobile learning course. Avoid distractions from the learning content. Place navigation controls and program usage information at the bottom of the screen. Use just the essential application features. Avoid unnecessary banners, buttons, legal writings, copyright notices and logos in your mobile courses’ content. Just as the content should be “need to have” (relevant), each element in the mobile learning course (media image, video, text) must be essential. Use % rather than explicit set height & width (responsive sizing in HTML 5). Design content that’s user-friendly and accessible by everyone.

Student Prompts

Avoid using mobile and/or device-specific prompts in activities and assignments. This includes statements like  “Click on the reply button below” or “Click on the next button to move through the module”. Instead, refer learners to specific course tools such as Announcements, Modules, or Assignments.

Learners will always be distracted

Focus on engagement. Your content must compete other distractions on the same device students are using to access your course. Elements that keep the student engaged include be images, videos, interesting design, and interactivity. Balance between reading content and interaction. Employ competition using game-based learning. Knowledge checks provide a great opportunity to embed games within learning (especially for refreshing knowledge in 2-minute lessons). Badges reflect the time and effort learners apply to developing their skills and can motivate learners to progress in the course. You can use texting or 1-question quizzes during the week to check-in with the class. For example, 10 questions throughout the course may be 10% or 1 bonus point each. These texts serve as nudges from the instructor to the learners that they are in a class.

Simplify your button design

Make your buttons bright, bold and highly visible. Use clear and very descriptive action verbs on your buttons. Buttons should be large enough to support touch options such as click, drag, drop, and swipe. Place buttons like Submit and Cancel far away from each other (minimize users pressing the wrong button). Include a “more” button that leads to additional information. Leave a lot of space around your buttons (at the very least, 10px). Keep the input fields to a minimum (try to use large checkboxes or radio buttons instead).

Consider the display area size (real estate) in your design

Keep important content within the screen viewing area. Users of mobile devices are more used to scrolling in order to see all the content on their mobile. As able, break up information across pages to reduce scrolling (swipe vs. scroll). You may want to add a visual marker such as a line or logo to denote the bottom of the page. Keep related information (e.g., items to compare or contrast) on one page.

Be a font style and variation minimalist

Fonts and style can be distracting if too many are used or difficult to view when viewed on smaller devices. Make your default font size at least 14pt. 12pt font is the very smallest font size you should use. Don’t use text in images, some devices compress images or render fuzzy images. Designing mobile learning which system fonts are safest option (Arial and Tahoma). Keep the number of custom fonts to a minimum (they increase page load time).

Media

Media tips include the use of bold imagery and images on white backgrounds. Simplify, compress, and crop graphics to reduce their dimensions. Replace a large graphic with image maps (learners touch different parts of the graphic to visualize related content and graphics). Use updated videos and images. Use thumbnail images to access larger images and complete texts. Many applications will create thumbnails when you upload your media content. Save your audio files as .mp3 to ensure they play on different devices.  Be mindful of large file sizes since mobile device speeds are may be slower and less reliable than Wi-Fi. Also, a data charge could be incurred for larger file downloads. Avoid media that is not supported on mobile devices. This is generally Flash and Java (not to be confused with JavaScript). There are many sources of mobile-optimized videos and audio such as YouTube. HTML5 media is the best alternative to Flash and Java for games and video. 

Test your course Test the behavior of your content using different devices (ex. smartphone, tablet, iOS, android) for testing. Keep track of learner behaviors and what their behavior can tell you about your courses. Is something too easy or too hard? Where do learners spend most of their time on the course? Are they stalled by barriers? Are the engaging with content?

Resources

Leave a Reply

Your email address will not be published. Required fields are marked *