Responsive and fluid video content adaptation

Abstract

Mobile video-based learning attracts many learners with its mobility and ease of access. However, most lectures are designed for desktops. This thesis (1) investigates the gap between mobile learners’ challenges and video engineers’ considerations using mixed methods, (2) provides design guidelines for creating mobile-friendly MOOC videos, and (3) develops a system that provides responsive and customizable video content. To uncover learners’ challenges, we conducted a survey (n=134) and interviews (n=21), and evaluated the mobile adequacy of current MOOCs by analyzing 41,722 video frames from 101 video lectures. Interview results revealed low readability and situationally-induced impairments as major challenges. The content analysis showed a low guideline compliance rate for key design factors. We then interviewed 11 video production engineers to investigate design factors they mainly consider. The engineers mainly focus on the size and amount of content while lacking consideration for color, complex images, and situationally-induced impairments. We then present and validate guidelines for designing mobile-friendly MOOCs, such as providing adaptive and customizable visual design and context-aware accessibility support. Based on the findings from the interviews and surveys, we present FitVid, a system that provides responsive and customizable video content. Our system consists of an adaptation pipeline that reverse-engineers pixels to retrieve design elements (e.g., text, images) from videos, leveraging deep learning with a custom dataset, which powers a UI that enables resizing, repositioning, and toggling in-video elements. The content adaptation improves the guideline compliance rate by 24% and 8% for word count and font size. The content evaluation study (n=198) shows that the adaptation significantly increases readability and user satisfaction. The user study (n=31) indicates that FitVid significantly improves learning experience, interactivity, and concentration. We discuss design implications for responsive and customizable video adaptation.