Storyboarding an Online Course

From E-Learning Faculty Modules


Contents

Module Summary

Storyboarding is a common development tool used for designing films, with sequences of fast-sketched designed imagery. Beyond filmmaking, storyboards have become even more popular because they offer graphic-based organization for more complex multimedia and interactive-based projects, especially in higher education. This short module highlights some basic features of storyboards and describes their usage in the design of online learning.

Storyboarding.jpg

Takeaways

Learners will...

  • consider what storyboarding is, where it came from, and some essential elements in a storyboard
  • review some common types of storyboards
  • consider how storyboarding may be a part of instructional design for online learning and some technologies with storyboarding features (in authoring tools)
  • think about what aspects make for effective storyboarding for instructional design for online learning
  • think about some low-cost ways to create storyboards with common office software

Module Pretest

1. What is storyboarding? Where did it come from? What are essential elements of a storyboard?

2. What are some common types of storyboards? Is there an organizational schema of storyboard types?

3. How is storyboarding a part of instructional design for online learning? What are storyboards used for in instructional design? What are some common technologies that offer storyboarding or authoring tools with storyboarding features?

4. What is effective storyboarding for instructional design for online learning?

5. What are some low-cost ways to create storyboards with common office software and similar tools?

Main Contents

1. What is storyboarding? Where did it come from? What are essential elements of a storyboard?

“Storyboarding” refers to a visual design method that uses a series of illustrations, diagrams, and / or images to communicate visual ideas in particular sequences. The imagery in storyboarding are not finished works but are draft sketches that “pre-visualize” a more refined or finished product.

Some basic definitions follow:

A storyboard is “a sequence of drawings, typically with some directions and dialogue, representing the shots planned for a movie or television production” (“Storyboard,” Google Search, 2017).

Dictionary.com defines a storyboard as

“a panel or panels on which a sequence of sketches depictthe significant changes of action and scene in a plannedfilm, as for a movie, television show, or advertisement” (“Storyboard,” Dictionary.com, 2017).

Originally, storyboards were design templates for professionally-made films. Indeed, they are still used today for this purpose:

”Storyboards are used in film production as a previsualization technique, in order to help the director plan the film and try out different scene ideas and orderings of camera shots. They represent a sequence of (usually) sketched drawings, each on an individual sheet (or panel) that are pinned on a bulletin board for the director, screenwriters and colleagues to view and discuss.” (Walker, ap Cenydd, Pop, Miles, Hughes, Teahan, & Roberts, 2015, p. 28)


Storyboards may be created in a number of ways. They may contain information at differing levels of granularity. They contain the following basic elements: visual content, visual styling features, sequencing (or navigation, for interactivity), in-screen textual contents or captioning, and metadata. (Beyond storyboarding, there are many other design elements that may be used alongside storyboards: proposals of work, templates, flowcharts, content maps, scripts, and others. Design documents describe the objectives of learning objects, how those objectives are met, the underlying structure of a learning sequences, the look-and-feel, and other elements.


2. What are some common types of storyboards? Is there an organizational schema of storyboard types?

In multiple research pieces, there are storyboards used for various applications (even though these were not described using unique names or types. Storyboards have been described as tools for participatory design (used to capture feedback from users of the product or equipment or website). They are sometimes used as elicitation tools particularly from younger pre-lingual individuals, like children. Some storyboards are drawn with some inspiration from comics in an accessible way for multidisciplinary teams (Haesen, Meskens, Luyten, & Coninx, 2010).

There are unique applications of storyboards for analytical purposes. One more recent work, for example, described the uses of storyboards for visual analytics and six guiding principles: “composition, viewpoints, transition, annotability, interactivity and separability” as applied to microblogging data and for narrative inquiry (Walker, ap Cenydd, Pop, Miles, Hughes, Teahan, & Roberts, 2015, p. 27).

In the research literature, though, there are mentions of some types. One is a “schematic storyboard,” defined as follows:

”Schematic storyboards are static — like a filmstrip — but organized and annotated to convey continuity and directionality — like an animation. A key advantage of schematic storyboards is that a significant time interval of the video content can be observed instantaneously” (Goldman, Curless, Salesin, & Seitz, 2006, p. 1).

In the above work, the authors do show creative ways to represent time and change-over-time in a composite static image (Goldman, Curless, Salesin, & Seitz, 2006).

There does not seem to be a formal schema of storyboard types.


3. How is storyboarding a part of instructional design for online learning? What are storyboards used for in instructional design? What are some common technologies that offer storyboarding or authoring tools with storyboarding features?

Storyboards encompass three basic design competencies: (1) understanding, (2) visualizing, and (3) writing, which are critical for instructional design.

”The empowering dimension of the storyboard process as a training tool is that it facilitates the expression of three essential design competencies: understanding, visualizing, and writing.

In other words, the performance environment of trainers requires that they know relevant design principles and that they articulate and express visual images and written words” (Bunch, July 1991, p. 69).

In an electronic learning (e-learning) context, storyboarding has often been used to focus on user interfaces (the screen through which learners interact with the application or learning management system). One authoring team describes the uses of storyboarding to capture project requirements:

”Sketching and Storyboarding is a technique frequently used by graphical designers in the development of Web applications. It consists of a schematic representation (usually on the paper) of the different user interfaces (sketches). These sketches can be grouped and connected using links, building this way a so called storyboard that gives an idea about the navigation structure.” (Escalona & Koch, 2004, p. 197)

In the instructional design related to online learning, storyboards have often been used to define the “content, design, and interactions for each screen (page)” (Barron, Oct. 1998, p. 5). (There are technology tools that enable interface designs to be interactive, as wireframes, which serve as more advanced storyboarding of interactivity.)

Storyboards in instruction provide visuals of screen sequences that users see in the learning experience (Ellis, 1996). Storyboards convey related scenes in “a narrative scenario of use” (Haesen, Luyten, & Coninx, 2009, p. 2), to provide context.

As design documentation, storyboards keep interactive multimedia designs coherent and workable. Here, storyboards serve as schematic diagrams to enable the design and execution of that design (Roberts, Keim, Hanratty, Rowlingson, Walker, Hall, Jacobson, Lavigne, Rooney, & Varga, 2014).

In simpler designs, there are clear points-of-view (user vs. back-end), but others may capture more complex and relational views, such as full interactivity from differing points-of-view.

In other cases, storyboards zoomed out and captured full course navigation:

”A number of storyboards were developed and the main purpose was to gather information regarding the structure of the elearning courses, their functionalities and navigation options.” (Zaharias & Poulymenakou, 2006, p. 93)

Foremost, storyboards are a tool to add design value to projects—whether the objects being designed are films, interactive learning objects, slideshows, or some other form of multimedia. Storyboards are designed to convey the design information to all developers on a multi-disciplinary development team. Storyboards enable the full thinking through of a designed object and enables the identification of gaps and logical challenges. When applied properly, storyboards inspire design innovations. Storyboards, at least initially, are a lower-cost method of prototyping a work and testing out ideas. In general, storyboards are considered fairly informal, draft-y, and free-form. Some authors suggest that storyboards are “without a precise notation” (Preece et. Al., 1994, Sano, 1996, and Schneiderman, 1998, as cited in Koch, Kraus, & Hennicker, 2001, p. 2). After all, designers and developers want to stay limber and open to brainstormed ideas…at least in the initial phases of a design. Many storyboards are sketched freehand and annotated, to capture initial ideas. In other contexts, though, storyboards may become formalized with project-based template storyboards that are used by the design and development teams.

A storyboard serves as “documentation for interactive multimedia production” and further:

”It contains instructions for programming, an audio script, and a detailed description of the visual elements such as text, video, graphics, and animation. Storyboards are developed during the design phase of the ISD process, typically by instructional designers, with input from other development team members such as subject matter experts, videographers, programmers, and graphic artists. The storyboard becomes the key design document that the entire production team uses as a base for developing the interactive program. The information on the storyboard is often reviewed and approved by the customer prior to the start of the development effort.” (Orr, Golas, & Yao, Jan. 1994, p. 18)

In the design of online learning, storyboarding is sometimes used to spell out didactic strategies, to enable the examination of didactic knowledge, to see how learning is designed and delivered, and to assess how well the learning has been created (Knauf, Sakurai, Tsuruta, & Jantke, 2010, p. 357). As such, storyboards provide a “road map for a lesson, a course, a subject to teach, or a complete study” (Knauf, Sakurai, Tsuruta, & Jantke, 2010, p. 357).

Some common tools that enable storyboarding, depending on how they are harnessed, include Microsoft PowerPoint, Microsoft Visio, Articulate Storyline, and others. Storyboarding, though, is not the central functionality of any of the above. There are wireframing tools for interactivity modeling. There may be some freeware that enables storyboarding. In the research literature, a project was described that enabled the multimodal design of online learning, but that software does not seem to be available today. (It was unclear if the software ever made it to the commercial market.)


4. What is effective storyboarding for instructional design for online learning?

The core function of a storyboard is to create an organized structure and sequence of a learning design. Back in the early 1990s, one researcher described a storyboard model for the design of training materials:

“The storyboard model is an effective device for focusing general design knowledge on specific needs to produce training materials. As a planning tool, the storyboard can be as simple or as elegant as the instructional challenge and the quality of the trainer’s response to it” (Bunch, July 1991, p. 69)

The storyboard was conceptualized then as containing both visual and text components. The author described a five-step process that could be used in the design:

”1. Write on notecards.
2. Play solitaire with the cards.
3. Visualize the instruction.
4. Write the narrative.
5. Set validation criteria.” (Bunch, July 1991, p. 69)

It is an aid to organizing thought and sequencing it for instruction. The related processes were seen as helping to focus the right amount of content in teaching and to answer a range of design requirements, such as what sort of medium would be optimal for production. Finally: “Storyboarding aids the development of sensitive evaluation criteria” (Bunch, July 1991, p. 71).

There are a wide range of standards that can be applied to storyboards—based on how the storyboards are applied to the respective tasks in the particular context. These are some initial thoughts only.


5. What are some low-cost ways to create storyboards with common office software and similar tools?

At the simplest level, storyboards may be created with paper and writing instruments. These papers may be placed on a board in various orders…and linked with yarn, for example.

Even as early as the late 1990s, some researchers were discussing the likelihood that storyboarding systems would be built into digital authoring tools to more easily enable the work (Liu, Jones, & Hemstreet, 1998).

There are built-in storyboarding features in various authoring tools. For example, in PowerPoint, there is the SlideSorter view, which is fully interactive and enables the moving around of various slides and sequences of slides (with CTRL + click selection).


SlideSorterViewinPowerPoint.jpg


In Articulate Storyline, the StoryView provides a branching sequence of thumbnails of the respective interactive slides.


ArticulateStorylineStoryView.jpg


In both of these two authoring tools, the storyboarding is integrated with the tool, and there are walk-throughs of the sequences available in both.

Examples

There are some storyboards released online. It is hard to evaluate these without understanding the backgrounds of their usage. More often than not, storyboards are part of internal project documentation and are not released publicly.

How To

How to design and use storyboards effectively depends on the workplace context to which these are applied.

  • Are the storyboards used for style? Content? Sequencing? Navigation? Interactivity? Some combination of these?

Possible Pitfalls

Storyboarding assumes that pre-planning and pre-visualization are desirable for the particular projects. It may be that design work may be more effective on-the-fly with highly agile development. It may be that designing straight in the authoring tool is the way to go, without a lot of planning work. Those who work in design and development may experiment broadly and see what works for themselves as individuals and as team members.

Module Post-Test

1. What is storyboarding? Where did it come from? What are essential elements of a storyboard?

2. What are some common types of storyboards? Is there an organizational schema of storyboard types?

3. How is storyboarding a part of instructional design for online learning? What are storyboards used for in instructional design? What are some common technologies that offer storyboarding or authoring tools with storyboarding features?

4. What is effective storyboarding for instructional design for online learning?

5. What are some low-cost ways to create storyboards with common office software and similar tools?

References

Barron, A.E. (1998, Oct.) Designing web-based training. British Journal of Educational Technology. Retrieved Aug. 16, 2017, from http://onlinelibrary.wiley.com/doi/10.1111/1467-8535.00081/abstract.

Bunch, J. (1991, July). The storyboard strategy. Training & Development. 69 – 71.

Ellis, A.E. (1996). Design, implementation and testing techniques for multimedia industrial experience projects. Integrating Tech into CSE. June 1996. Barcelona, Spain. 119 – 121.

Escalona, M.J. & Koch, N. (2004). Requirements engineering for web applications—a comparative study. Journal of Web Engineering: 2(3), 193 – 212.

Goldman, D.B., Curless, B., Salesin, D., & Seitz, S.M. (2006). Schematic storyboarding for video visualization and editing. GRAIL. Retrieved Aug. 17, 2017, from http://grail.cs.washington.edu/projects/storyboards/paper/boards.sig06.pdf. 1 – 11.

Haesen, M., Luyten, K., & Coninx, K. (2009). Get your requirements straight: Storyboarding revisited. In the proceedings of the INTERACT 2009: IFIP Conference on Human-Computer Interaction. 546 – 549. Retrieved Aug. 17, 2017, from https://link.springer.com/chapter/10.1007/978-3-642-03658-3_59.

Haesen, M., Meskens, J., Luyten, K., & Coninx, K. (2010). Draw me a storyboard: Incorporating principles & techniques of comics to ease communication and artefact creation in user-centred design. In the proceedings of the 24th BCS Interaction Specialist Group Conference. Dundee, United Kingdom. Sept. 6 – 10, 2010. 133 – 142. Retrieved Aug. 17, 2017, from http://dl.acm.org/citation.cfm?id=2146323.

Knauf, R., Sakurai, Y., Tsuruta, S., & Jantke, K.P. (2010). Modeling didactic knowledge by storyboarding. Journal of Educational Computing Research: 42(4), 355 – 383.

Koch, N., Kraus, A., & Hennicker, R. (2001, June). The authoring process of the UML-based web engineering approach. In First International Workshop on Web-Oriented Software Technology (pp. 1-29). Retrieved Aug. 17, 2017, from http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.58.9417&rep=rep1&type=pdf.

Liu, M., Jones, C., & Hemstreet, S. (1998). Interactive multimedia design and production processes. Journal of Research on Computing in Education: 30(3), 254 – 280.

Orr, K.L., Golas, K.C., & Yao, K. (1994, Jan.) Storyboard development for interactive multimedia training. Journal of Interactive Instruction: 6(3), 18 – 31.

Roberts, J.C., Keim, D., Hanratty, T., Rowlingson, R.R., Walker, R., Hall, M., Jacobson, Z., Lavigne, V., Rooney, C., & Varga, M. (2014). From ill-defined problems to informed decisions. EuroVis Workshop on Visual Analytics. 1 – 5.

“Storyboard.” (2017). Dictionary.com. Retrieved Aug. 17, 2017, from http://www.dictionary.com/browse/storyboard.

“Storyboard.” (2017). Google Search. Retrieved Aug. 17, 2017, from https://www.google.com/search?q=Dictionary#dobs=storyboard.

Walker, R., ap Cenydd, L, Pop, S., Miles, H.C., Hughes, C.J., Teahan, W.J., & Roberts, J.C. (2015). Storyboarding for visual analytics. Information Visualization: 14(1), 27 – 50.

Zaharias, P. & Poulymenakou, A. (2006). Implementing learner-centred design: The interplay between usability and instructional design practices. Interactive Technology & Smart Education: 2(2006), 87 – 100.

Extra Resources