Pei-Yu Chi
Sally Ahn
Björn Hartmann
ABSTRACT
Users of complex software applications often learn concepts and skills through step-by-step tutorials. Today, these tutorials are published in two dominant forms: static tutorials composed of images and text that are easy to scan, but cannot effectively describe dynamic interactions; and video tutorials that show all manipulations in detail, but are hard to navigate. We hypothesize that a mixed tutorial with static instructions and per-step videos can combine the benefits of both formats. We describe a comparative study of static, video, and mixed image manipulation tutorials with 12 participants and distill design guidelines for mixed tutorials. We present MixT, a system that automatically generates step-by-step mixed media tutorials from user demonstrations. MixT segments screencapture video into steps using logs of application commands and input events, applies video compositing techniques to focus on salient infor-mation, and highlights interactions through mouse trails. Informal evaluation suggests that automatically generated mixed media tutorials were as effective in helping users complete tasks as tutorials that were created manually.
Supplemental Material
- Bergman, L., Castelli, V., Lau, T., and Oblinger, D. DocWizards: a System for Authoring Follow-me Documentation Wizards. In Proc. UIST '05, ACM Press (2005). Google Scholar
Digital Library
- Brunelli, R. Template Matching Techniques in Computer Vision: Theory and Practice. Wiley (2009). Google ScholarDigital Library
- Denning, J. D., Kerr, W. B., and Pellacini, F. MeshFlow: Interactive Visualization of Mesh Construction Sequences. In Proc. SIGGRAPH '11, ACM Press (2011). Google ScholarDigital Library
- Dixon, M. and Fogarty, J. Prefab: Implementing Advanced Behaviors Using Pixel-Based Reverse Engineering of Interface Structure. In Proc. CHI '10, ACM Press (2010). Google ScholarDigital Library
- Ekstrand, M., Li, W., Grossman, T., Matejka, J., and Fitzmaurice, G. Searching for Software Learning Resources using Application Context. In Proc. UIST '11, ACM Press (2011). Google ScholarDigital Library
- Fernquist, J., Grossman, T., and Fitzmaurice, G. Sketch-Sketch Revolution: An Engaging Tutorial System for Guided Sketching and Application Learning. In Proc. UIST '11, ACM Press (2011). Google ScholarDigital Library
- Furnas, G. W. Generalized Fisheye Views. In Proc. CHI '86, ACM Press (1986). Google ScholarDigital Library
- Grabler, F., Agrawala, M., Li, W., Dontcheva, M., and Igarashi, T. Generating Photo Manipulation Tutorials by Demonstration. In Proc. SIGGRAPH '09, ACM Press (2009). Google ScholarDigital Library
- Grossman, T., and Fitzmaurice, G. ToolClips: an Investigation of Contextual Video Assistance for Functionality Understanding. In Proc. CHI '10, ACM Press (2010). Google ScholarDigital Library
- Grossman, T., Matejka, J., and Fitzmaurice, G. Chronicle: Capture, Exploration, and Playback of Document Workflow Histories. In Proc. UIST '10, ACM Press (2010). Google ScholarDigital Library
- Harrison, S. A Comparison of Still, Animated, or Nonillustrated On-line Help with Written or Spoken Instructions in a Graphical User Interface. In Proc. CHI '95, ACM Press (1995). Google ScholarDigital Library
- Kelleher, C., and Pausch, R. Stencils-based Tutorials. In Proc. CHI '05, ACM Press (2005). Google ScholarDigital Library
- Kong, N., Grossman, T., Hartmann, B., Fitzmaurice, G. and Agrawala, M. Delta: A Tool for Representing and Comparing Workflows. In Proc. CHI '12, ACM Press (2012). Google ScholarDigital Library
- Matejka, J., Li, W., Grossman, T., & Fitzmaurice, G. CommunityCommands: Command Recommendations for Software Applications. In Proc. UIST '09, ACM Press (2009). Google ScholarDigital Library
- Matejka, J., Grossman, T., and Fitzmaurice, G. IP-QAT: In-Product Questions, Answers & Tips. In Proc. UIST '11, ACM Press (2011). Google ScholarDigital Library
- Palmiter, S. and Elkerton, J. Animated Demonstrations vs. Written Instructions for Learning Procedural Tasks: a Preliminary Investigation. In International Journal of Man-Machine Studies (1991), 34, pp. 687--701. Google ScholarDigital Library
- Palmiter, S. and Elkerton, J. Animated Demonstrations for Learning Procedural Computer-Based Tasks. Human-Computer Interaction. 8, 3 (1993), pp. 193--216. Google ScholarDigital Library
- Pongnumkul, S., Dontcheva, M., Li, W., Wang, J., Bourdev, L., Avidan, S., and Cohen, M. F. Pause-and-Play: Automatically Linking Screencast Video Tutorials with Applications. In Proc. UIST '11, ACM Press (2011). Google ScholarDigital Library
- Ramesh, V., Hsu, C., Agrawala, M., and Hartmann, B. ShowMeHow: Translating User Interface Instructions Between Similar Applications. In Proc. UIST '11, ACM Press (2011), 1--8. Google ScholarDigital Library
- Yeh, T., Chang, T.-H., and Miller, R. C. Sikuli: Using GUI Screenshots for Search and Automation. In Proc. UIST '09, ACM Press (2009), 183--192. Google ScholarDigital Library
Index Terms
- MixT: automatic generation of step-by-step mixed media tutorials
Recommendations
MixT: automatic generation of step-by-step mixed media tutorials
CHI EA '12: CHI '12 Extended Abstracts on Human Factors in Computing SystemsAs software interfaces become more complicated, users rely on tutorials to learn, creating an increasing demand for effective tutorials. Existing tutorials, however, are limited in their presentation: Static step-by-step tutorials are easy to scan but ...
Torta: Generating Mixed-Media GUI and Command-Line App Tutorials Using Operating-System-Wide Activity Tracing
UIST '17: Proceedings of the 30th Annual ACM Symposium on User Interface Software and TechnologyTutorials are vital for helping people perform complex software-based tasks in domains such as programming, data science, system administration, and computational research. However, it is tedious to create detailed step-by-step tutorials for tasks that ...
Porta: Profiling Software Tutorials Using Operating-System-Wide Activity Tracing
UIST '18: Proceedings of the 31st Annual ACM Symposium on User Interface Software and TechnologyIt can be hard for tutorial creators to get fine-grained feedback about how learners are actually stepping through their tutorials and which parts lead to the most struggle. To provide such feedback for technical software tutorials, we introduce the ...
Comments