Simple symbols: A visual lexicon for instructional design process flowcharting

DEVELOPING A VISUAL LITERACY of process flowchart symbols is vital for effective communication within a web development team for designing online educational instruction.

Instructional designers may wear one of many or all developmental phase hats in actual practice, dependent upon organizational structure. But if there is a full-blown team consisting of project managers, subject matter experts, graphic designers, interface designers, information architects, and instructional designers, a common visual language is essential for effective communication.

As the instructional designer, you know how you want the course structured, but conveying that to others who have buy-in rights is a tricky process that can be assisted through the use of a common visual lexicon throughout the development phase.

Because the degree of detail needed by individual team members varies considerably (Garrett, 2002), the flowchart diagram greatly reduces the cognitive load for all involved in the design phase.

This paper provides a visual representation of basic flowchart symbols and their proposed usage in communicating the structure of a well-developed web site, as well as their correlation in developing on-line instructional projects.

The Symbols and Their Usage

terminal points	Terminal points indicate the starting [sometimes known as a 'trigger'] and ending points of the process.
step	Represents a single step within the process, and usually contains the name of the specific action.
page	Page symbols refer to individual web pages, which may or may not contain multiple elements.
file	File symbols represent those data elements that exist independently of navigational properties outside of that page, e.g., audio sounds, movie clips, or a portable document file (pdf).
decision point	A decision point indicates a sequence in the process at which the end user chooses an option, i.e., a "yes-no", or "true-false" response, and then branches to different parts of the flowchart.
connectors	Arrows and connecting flowlines diagram the logical progression through the course, subject to the choices made at decision or action points within the process.
user input or action	The input/action symbol represents a user response that directs the course flow from that point onwards, i.e., an online test, or questionnaire form.
conditional branch	Represents the choice made by the user from mutually exclusive options, e.g., a student choosing among different lesson plans.
conditional selector	Similar to the conditional branch except that the user has the option to choose from a number of paths that will fulfill the requested conditions, e.g., the results of a search engine request.
area	Pages that share one or more common aspects, and are functionally identical may be simplified as a rounded corner rectangle, such as an on-line test or feedback form.
reference	Used as a connecting point when the flowchart necessitates using more than one page, or refers to a complicated subroutine that would be impossible to contain on the main flowchart page.
annotation	Annotations provide helpful comments or explanations, e.g. denoting the location where an undeveloped new page/process will fit into the navigational flow structure, or notes for specific team members for further development.
flow reference	Flow references and flow areas are symbols for reusable sequences, such as logging in with a specific user id and password to enter the course or to initiate an on-line quiz. The flow reference symbol acts as a placeholder for the flow area sequence in the chart in every situation in which it is repeated.
flow area	Used as a flow area, it documents sections that share similar components/repeated steps within that flow, and requires the use of the following two symbols: entry and exit points.
exit point	This symbol concludes the subroutine, such as when the proper user id and password are verified, and documents where the user re-enters the master flowchart.
entry point	This symbol documents the place within the master flowchart where the process deviates into a subroutine.

Process Flowchart Drawing Guidelines

There is no one right way to develop a flowchart, but the following guidelines provide a general structure to follow, whether it's of the overall course navigational process, or at the handoff phase to the various team members to develop more detailed treatment.

1. Start with a simple one-line description or title of the process being flowcharted , e.g., "How to..."
2. Using a top-down hierarchy, start with a terminal symbol, naming this trigger event, e.g., "User accesses course database..."
3. Connect each successive action step in the logical sequence of events.
4. Reference detailed information through annotations or connectors.
5. Follow the process through to completion, denoted by a labeled end terminal symbol, e.g., "exit course."

Putting the Pieces Together: A Typical ID Development Process Flowchart

The following graphic demonstrates a typical simplified process flowchart for an instructional design project.

Click on any of the above symbols or text areas for definition or further clarification.

Summary

A well-developed functional flowchart created in the design phase can save hours of wasted manpower time by ensuring that the structure, sequencing and branching decision points in a computer based instructional program support the course goals and objectives before development.

Whether you are the sole creator wearing many hats, or one of many on the development team, sharing a common visual language will guide the project through its many iterations and development phases throughout the ADDIE instructional design process.

More Information

More in-depth information on flowcharts and their symbols can be found at the following:

Garrett, J.J. (2002). A visual vocabulary for describing information architecture and interaction design, version 1.1b. Retrieved October 31, 2003 from http://www.jjg.net/ia/visvocab/

Hall, L.C., Forde, A., and Carraro, M. (2000). Charting multimedia: The process between concept and creation. An on-going research project retrieved October 31, 2003 from http://www.rcc.ryerson.ca/schools/rta/flowchart/index.html

Smith, P.L. and Ragan, T.J. (1999) Production of instruction: Developing functional flowcharts. In Instructional Design, 2nd ed. (pp. 323-324). New York: John Wiley & Sons. 

---

Lynda Stone, Graduate Student
SDSU Educational Technology

Stone, L. (2003). Simple symbols: A visual lexicon for instructional design process flowcharting. In  B. Hoffman (Ed.), Encyclopedia of Educational Technology. Retrieved from