MixT: automatic generation of step-by-step mixed media tutorials

As 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 hard to create and don't always give all of the necessary information for how to accomplish a step. In contrast, video tutorials provide very detailed information and are easy to create, but they are hard to scan as the video-player timeline does not give an overview of the entire task. We present MixT, which automatically generates mixed media tutorials that combine the strengths of these tutorial types. MixT tutorials include step-by-step text descriptions and images that are easy to scan and short videos for each step that provide additional context and detail as needed. We ground our design in a formative study that shows that mixed-media tutorials outperform both static and video tutorials.

[1]  Tovi Grossman,et al.  Chronicle: capture, exploration, and playback of document workflow histories , 2010, UIST.

[2]  Roberto Brunelli,et al.  Template Matching Techniques in Computer Vision: Theory and Practice , 2009 .

[3]  Takeo Igarashi,et al.  Generating photo manipulation tutorials by demonstration , 2009, ACM Trans. Graph..

[4]  Fabio Pellacini,et al.  MeshFlow : interactive visualization of mesh construction sequences , 2011, SIGGRAPH 2011.

[5]  Tovi Grossman,et al.  CommunityCommands: command recommendations for software applications , 2009, UIST '09.

[6]  Björn Hartmann,et al.  Delta: a tool for representing and comparing workflows , 2012, CHI.

[7]  Mira Dontcheva,et al.  A Framework for content-adaptive photo manipulation macros: Application to face, landscape, and global manipulations , 2011, TOGS.

[8]  Tovi Grossman,et al.  IP-QAT: in-product questions, answers, & tips , 2011, UIST.

[9]  Tessa A. Lau,et al.  DocWizards: a system for authoring follow-me documentation wizards , 2005, UIST.

[10]  Morgan Dixon,et al.  Prefab: implementing advanced behaviors using pixel-based reverse engineering of interface structure , 2010, CHI.

[11]  G. W. Furnas,et al.  Generalized fisheye views , 1986, CHI '86.

[12]  Tovi Grossman,et al.  ToolClips: an investigation of contextual video assistance for functionality understanding , 2010, CHI.

[13]  Susan M. Harrison A comparison of still, animated, or nonillustrated on-line help with written or spoken instructions in a graphical user interface , 1995, CHI '95.

[14]  Tovi Grossman,et al.  Sketch-sketch revolution: an engaging tutorial system for guided sketching and application learning , 2011, UIST.

[15]  Björn Hartmann,et al.  ShowMeHow: translating user interface instructions between applications , 2011, UIST.

[16]  Susan Palmiter,et al.  Animated Demonstrations vs Written Instructions for Learning Procedural Tasks: A Preliminary Investigation , 1991, Int. J. Man Mach. Stud..

[17]  Susan Palmiter,et al.  Animated Demonstrations for Learning Procedural Computer-Based Tasks , 1993, Hum. Comput. Interact..

[18]  Mira Dontcheva,et al.  Pause-and-play: automatically linking screencast video tutorials with applications , 2011, UIST.

[19]  Tovi Grossman,et al.  Searching for software learning resources using application context , 2011, UIST.

[20]  Rob Miller,et al.  Sikuli: using GUI screenshots for search and automation , 2009, UIST '09.