By YuPing Hsu, University of Kansas

Instructional designers  and developers should guarantee the quality of their learning materials as student learning experience is related to the quality of learning material design.  According to Chiu & Churchill (2016), interactive learning objects can affect student learning.  While designing learning objects on different learning platforms or devices, instructional designers meet many technical challenges.  Before designing learning objects on a touchscreen, designers have to understand the characteristics of a touchscreen and take note of the differences between a touchscreen and a monitor, as the functional and interactive designs from a monitor cannot be transferred completely to a touchscreen.  

This article addresses a variety of interactive learning objects and how designers and developers apply their designs to a touchscreen.   This includes two main challenges: a screen size and resolution variations, and gesture changes.   Since high quality instructional design can enhance the learning experience, this article also provides technical solutions.  The technical design solutions of learning objects - images, short answer, true or false, drag and drop, and line graph - will be emphasized.  In addition, the progress of interactive learning objects modification will be explained. These solutions have the potential to increase efficiency of interactive learning objects. 

The term “instructional design” refers to “the systematic and reflective process of translating principles of learning and instruction into plans for instructional materials, activities, information resources, and evaluation. An instructional designer is somewhat like an engineer” (Smith & Ragan, 1999).   When students are interacting with digital learning objects on the screen, they are experiencing their learning progress.  Therefore, “learning design” is defined as instructional designers adapting learning objects from laptops or computers to mobile devices.  When transferring the learning objects to mobile devices, learners’ experiences have a significant influence on learning design (Donald, Blake, Girault, Datt, & Ramsay, 2009).  The following paragraphs will discuss the most common technical issues and provide solutions.   

                  

Figure 1:  Infographics of Learning Design and Instructional Design

Learner behavior varies when using a computer mouse vs a touchscreen.  The main features of concern are screen sizes and resolutions.   The screen size of a standard smartphone is 5 ½” or less, whereas larger smartphone and tablets tend to be larger than 5 ½”.   In comparison, the screen size on laptops and computer monitors have an average range  between 12” to 16”.  As for the resolutions in pixels, various touchscreen devices range from 750x1334 to 1440x2560 to 1080x1920.   However, the standard resolution of a laptop or a computer is 1024x768 (Table 1). 

Table 1:  Screen Size and Resolution Comparisons between Touchscreen and Laptop / Computer 

When designing the online course materials, it is important to check the HTML file in learning management system to ensure HTML5 format is applied with responsive design.  A responsive design can approach the dynamic changes to screen size and resolution variations.  Figure 2 is an example of different screen sizes and resolutions between a mobile, a tablet and a desktop.  

 

Figure 2:  Screen Size and Resolutions are Varied

Figure 3 is an example of HTML5 for responsive design.  Sans-Serif fonts, such as Arial or Helvetica are used in this example.  Another way to set up a responsive layout is setting up <meta> element in all online learning pages. Please see W3C examples: https://www.w3schools.com/html/html_responsive.asp.  After HTML5 has been implemented, the results of responsive designs on a mobile screen and a tablet screen are shown in Figures 4 and 5. 

 

Figure 3:  An HTML5 Example of Responsive Design

 

Figure 4: The Result of Responsive Design on a Mobile Screen (480 px) 

 

Figure 5: The Result of Responsive Design on a Tablet Screen (768 px) 

Because of screen size and resolution variations, more and more browsers have adapted Scalable Vector Graphics (SVG) to support HTML5.  Since SVG is vector graphic base, it can scale any size to fit web pages without changing the image resolutions.  Designers use several conversion tools for changing other image formats to SVG.  One example is the web-based conversion tool, Convertio: https://convertio.co/.

 

Figure 6 shows an example of the differences between PNG and SVG images.  When PNG images are enlarged, the images are pixelated, making for a lower quality image. In comparison, the SVG image doesn’t change the resolution, no matter how the image is scaled. 

  

   

Figure 6:  The Difference between Enlargements of PNG and SVG Images

As the screen sizes and resolutions are different between a touchscreen and a monitor, learners’ gestures change accordingly.  The core gestures that people use in learning design are “Pinch”, “Touch+hold”, “Two-finger scroll”, “Tap”, “Double tap”, “Flick” and “Drag”  (Figure 7).  When designers create their learning objects, the interaction spaces need to be considered.  In the following paragraph, four examples are given to explain what challenges designers need to take into account.

  

 

Figure 7:  Common Gestures (from  https://static.lukew.com/TouchGestureCards.pdf)

Since users’ gestures change when they use touchscreens, developers must design learning objects in different ways.  This section explains four common digital learning objects and provides solutions for mobile devices.

Figure 8 is designed for a mobile device and figure 9 is designed for a laptop or a computer screen. The answer underline area on a mobile device needs to be longer to give the space needed for learners to use their fingers to answer the questions.  

  

Figure 8:  Longer Underline Area  (Length)

Figure 9: Regular Underline Area (Length)

Figure 10 is designed for a mobile device and Figure 11 is a common design for a laptop and a desktop.  While designing the selection learning object, it is better to emphasize the answer selection.  Designers can use colors or larger shapes within text for mobile devices to make tapping an answer choice with a finger easier.

 

Figure 10:  Colors and Larger Shapes for Tapping

 

Figure 11:  Normal Sensitive Area for the Mouse

While designing the drag and drop learning object for a mobile device, the “hot-spot” area should be considered.   In Figure 12 and Figure 13, a sensitivity area designed for touch /click response is shown, represented by the blue squares  Drag and drop images on mobile devices can be normal size, but that sensitivity area needs to be bigger (See Figure 12).  When users interact with that item using their fingers, the sensitivity area should be big enough to complete the task.  In Figure 13, the sensitivity area does not extend past the box that holds the answer choice. This is effective for learners using a mouse for dragging and dropping.

Figure 12:  Bigger Sensitive Area for Tapping        

Figure 13:  Normal Sensitive Area for the Mouse

This type of learning object is normally designed for mathematic, business, or science subjects.  While designing this type of learning object, the tap area should only happen in one place.  In Figure 14, the example shows the tap areas in blue.  Users tap the blue area to add up to the number of the percentage, in this case, 50%, 62% and 90%.  If the add-up action is a slider, it will be difficult for users to use on a mobile screen.  

 

Figure 14:  The Tapping Area Improves Learners' Actions When They Answer This Type of Question.  

When instructional designers adapt learning objects to mobile devices, there are many challenges.  This article provides examples of how instructional designers assist teachers by  transferring learning objects to mobile devices.  These techniques will make learning materials more efficient and ensure the quality of learning materials in mobile device.  If instructional designers notice these issues, they will communicate them with learning management system (LMS) administrators or developers.  Thus, students will have fewer problems when they interact with these learning objects on mobile devices.  

Chiu, T. K., & Churchill, D. (2016). Design of learning objects for concept learning: Effects of multimedia learning principles and an instructional approach. Interactive Learning Environments, 24(6), 1355-1370.

Donald, C., Blake, A., Girault, I., Datt, A., & Ramsay, E. (2009). Approaches to learning design: past the head and the hands to the HEART of the matter. Distance Education, 30(2), 179-199.\

HTML Responsive Web Design.  (1999 - 2017).  W3C.  https://www.w3schools.com/html/html_responsive.asp.

Luck, W. (2011, Aug. 3).  Touch Gesture Reference Cards.  Retrieved from https://www.lukew.com/ff/entry.asp?1370

Smith, P. L. & Ragan, T. J. (1999). Instructional Design (p. 3). New York: Wiley.

YuPing Hsu is an user experience designer in Agile Technology Solutions at the University of Kansas.  She also collaborates with faculty from education and journalism departments.  Hsu's expertise is in emotional engagement design in online learning, learning measurement, user (learning) experience and technology design.  More about her research can be found in https://kuscholarworks.ku.edu/handle/1808/18434. 

Hsu holds a Ph.D. in Educational Leadership Policy with emphasis in Educational Technology, minor in Interaction Design from University of Kansas.  She can be reached at yupingh@ku.edu or yuping106@gmail.com.