*First published in **Adobe Art Line**, Issue 8, June 1997.*

*Also published in **LOOP: AIGA Journal of Interaction Design Education**, Number 1, November 2000.*

*Later Published in **The Education of an E-Designer**, Steven Heller, Allworth Press, 2001.*

Over the last five years, the rapid growth in the number and complexity of Internet Web sites has created a demand for designers with skills and experience in Web site design and Web application design. The increased demand has bid up designers’ salaries. The public spotlight on the Internet, and the job opportunities it presents, has increased demand from students for classes that will prepare them for the Web-design market.

Often, students believe that they need skills in using a specific software applications, such as Photoshop or Flash, or familiarity with mark-up or programming languages, such as HTML or Java. Design faculty generally recognize the limited value of specific application skills. Applications are likely to change as the technology surrounding them changes. What’s more, application skills have little to do with actually designing Web sites—or anything else.

Faculty, then, face a problem: how to satisfy demand for courses that will prepare students for the Web design market, while also preparing students for a world that will change greatly over the next five years—and even more over the forty or fifty years a graduating student might expect to practice.

A strong thread in design education has been the real-world-project approach to teaching, for example, the exercise that has students design a music CD cover. The approach can be popular with students, and even with employers, because it builds a portfolio.

Applying the real-world-project approach to teaching interaction design is tempting. Why not ask students to design a music Web site, for example? Teaching with real-world projects carries risks. The outcome or product can overshadow the process. Time spent working on the product can crowd out time spent understanding principles. Applying the real-world-project approach to Web-site design can carry practical risks as well. Web sites are complicated and students have relatively little experience with them, compared to books or television. Introducing students to information architecture or interaction design by asking them to design a commercial Web site, is like teaching people to swim by pushing them out of a boat in the middle of a lake. The students may learn, but the process can’t reasonably be called teaching.

One way to approach the problem is to ask how it can be broken into smaller, more digestible pieces. I visualize the problem as a large step function. The x-axis represents time. The y-axis represents skill. A lot of time passes before the first skill is obtained. Scott Kim, who introduced me to this model, uses it to describe the process of learning a difficult and (initially) unrewarding game. Juggling might be an example. Scott contrasts that kind of game with what he thinks of as a good (or well designed) video game that is easy for users to begin playing and them offers a succession of more challenging levels. The user receives positive feedback for mastering one level by being allowed to move to the next. Mastery of the next level is always close at hand. A second example can be envisioned, a series of small steps building a set of stairs forming an easy path to the top; it contrasts with the large step function of the first diagram, which illustrates more of a barrier than a path.

How Can We Apply the Multiple Small-Step Approach to Teaching Information Architecture?
============

The rest of this paper describes a step-by-step approach to introducing information architecture. It is an outline for an introductory course on the subject. The course is heavily focused on various aspects of information design and touches on issues of interaction design. It describes a series of elated exercises that build on one another over a semester. My hope is that other instructors will find the approach useful, and will borrow on the sequence of assignments.

I have designed the course for college-level seniors (or first-year masters-level students) in graphic design programs. The course assumes students have had introductory and intermediate 2-D design and typography courses, and that they have familiarity with design systems and the design process—though the course offers ample opportunity to elaborate on those subjects. No specific computer skills are prerequisites. In theory, students can successfully complete all the assignments using conventional tools such as pen and paper. In practice, I find an increasing number of students, even those in high school, have taught themselves the rudiments of using Photoshop and Illustrator. These skills can be helpful in the class—not for improving quality of design, per se, but for increasing the number of options considered, and speeding the process of creating a high level of finish.

In organizing the course, my strategy was to put off consideration of the computer (and interaction) until the last section, and to focus on understanding a body of content. That process involves:

+ Gathering data
+ Structuring and representing the data in multiple ways
+ Synthesizing the data, structures, and representations

Through this process students come to own the content and create for themselves a set of content assets (text photos, illustrations, and diagrams). They learn to look at content from different points of view, and begin to understand how methods of structuring and representing information affect content and influence perception.

Now we come to the problem of what content to use in the course. I use baseball and how to play. More specifically, I ask students to describe how to play baseball to an adult speaker of English (someone over twelve) who is unfamiliar with the game.

Why baseball?
============

+ It’s a system—it consists of elements and their relationships
+ It’s discreet—we can define (or agree on) its boundaries
+ It’s complex—we can’t hold the entire system in mind at once
+ It’s finite, even relatively small—approximately sixty terms suffice for a description
+ It’s a fun subject—rather than a serious, technical subject
+ Students have different levels of domain expertise
+ More students have easy access to qualified reviewers
+ Information about the subject is easily and widely accessible

I worry that some people might see the subject as having an inappropriate gender, cultural, or other biases. In the classes I have taught, I find students who have never played or even seen the game alongside avid fans and players. I have students fro the United States as well as other countries. The students with knowledge of the game help those unfamiliar with it. Students new to the game have an important asset: a beginner’s mind. These students are more easily able to put themselves in the shoes of the intended audience. In fact, they begin as the intended audience; they sometimes have an advantage because they can see what’s really important, while an avid fan may get lost in the details.

Course Structure
============

Before launching into specific assignments, it’s a good idea for you to set your students’ expectations and describe the entire course—the goals, the general sequence of assignments, your method of grading, and your expectations.

Section 1: Gather Data
——————————–
The first section of the course focuses on gathering data in order to understand the subject. Do that by asking students to participate in an actual game, read the official rules, read other explanations, and summarize a specific game.

**1.1: Play a Game**

The best way to begin the project is to go out and play a short, informal game. This exposes everyone to the basic elements, and lets each student experience first-hand the flow or process of play.

You’ll need a bat and a ball; a plastic whiffle-ball set is fine. You can improvise the bases. Divide the class into two teams. If there are more than nine people on a team, or less, that’s okay. It’s just a game. Ask one of the students to briefly explain pitching, hitting, fielding, outs, and scoring. Play a couple of innings. If space or weather interfere, play inside. The field can be quite small; you can ask base runners to walk instead of run.

Alternatively, you might begin by asking the students to watch a game. The drawback to watching is that some students may not understand what they’re seeing, or may not pay attention, or simply may not watch. If you begin with watching a game, you may want to ask the students to record what happens. (See section 1.3 below for details.)

**1.2: Read the Rules**

Provide a copy of the rules of baseball. Or send students out to find the rules. The [Major League Baseball Site][1] has a foreword and many PDFs on its site.

Make sure they do the reading. For undergraduates, a test might provide the needed incentive. Suggest that they also find and read books that introduce and explain the game. Ask them to bring the books to class to discuss what’s good and bad about the content and design.

**1.3: Record a Real Game**

Ask the students to record a real baseball game—using more than just video. Ask for a readable summary, such as a sequence of key frames grabbed from video or shot with a camera, or a text transcript, or a completed scorecard. Scorecards are available at large sporting-goods stores and on the Web.

The scorecard provides a way to introduce the general idea of scoring—notation for recording all sorts of things. Scoring is an important branch of information design.

Section 2: Structure and Represent the Data in Multiple Ways
——————————–
The second section of the course focuses on analyzing the data and internalizing it—on really understanding it. We do that by organizing the data into different structures and re-presenting it.

**2.1: List Related Terms**

The real work begins with the class a s a group, listing terms related to baseball. The instructor acts as a facilitator for this brainstorming session, writing down all the terms suggested by the students (none are “wrong”). I like to write the terms on sticky notes (Post-Its) so that we can rearrange them later. The facilitator has three main tasks: (1) Involve all the students, making sure no one dominates, (2) Remind the group of the focus on how to play the game, and (3) Ask questions to elicit more terms should the group get stuck.

The goal is to come up with fifty to seventy-five terms. This takes about ten to fifteen minutes.

The next task is for the class to edit the list, deleting terms not relevant to the explanation of how to play the game, for example, names of players or specific teams. Then, discuss which terms are related and how they might be grouped; point out that there are several possible groupings, and that a term may be used in more than one group. Finally, discuss how the terms might be ranked—the most important concepts to the least important.

**2.2: Write an Essay**

Assign each student the task of writing an essay describing how to play the game of baseball. Divide the exercise into a series of steps: (1) List terms to include, (2) Define each term, (3) Rank the terms, (4) Write an outline, (5) Write a first draft, (6) Edit the draft to create a final draft, and (7) Format the text using the tools of typography to make it clearer.

Ask the students to begin with the terms from the previous exercise and determine which ones need to be included in the essay. Suggest that they write definitions of all the terms before organizing them. Having defined the terms, the students should then decide on a ranking of each term: major, minor, or detail. The ranking leads to an outline. Review the outlines for completeness and structure. Ask for a first draft. Read the first drafts and mark them up. Ask for a final version.

Logically, the essay belongs in the third section of the course, the section on synthesis. The reason for beginning the second section with the essay is that students already have some writing skills, and can focus on the content rather than on new techniques. The essay also establishes a foundation for further work by making sure all students demonstrate a basic understanding of the subject. The outline of the essay may also serve as a basis for the concept map. Of course, the converse is also true: the concept map and the process flow diagrams might also serve as the bases for the essay.

Unfortunately, my experience is that many design students are poor writers. Reviewing and copyediting outlines and drafts can be a substantial amount of work for the instructor. I am interested in experimenting with small group development of outlines, and with peer review of both outlines and the essays.

**2.3: Create a Concept Map**

Ask the students to create a concept map of the game of baseball.

A concept map is a picture of our understanding of something. It is a diagram illustrating how a set of concepts is related. Concept maps are made up of webs of terms (nodes) related by verbs (links) and other terms (nodes). The purpose of a concept map is to represent (on a single visual plane) a person’s mental model of a concept. See Learning How to Learn, by D.B. Gowin and Joseph D. Novak, for a more detailed description of concept mapping. It’s available on [Amazon][2].

Concept maps provide useful contrast with essays. With a concept map, a viewer can see both the forest and individual trees. The big picture is clear because all the ideas are presented on one surface. At the same time, it’s easy to see details and how they relate.

Examples of a good description such as Gowin and Novak’s are essential for learning concept mapping. Students may benefit from an exercise in which they quickly (perhaps in class) make a simple concept map (with eight to twelve terms). See Designing Business, by Clement Mok, and AIGA’s journal, Gain, volume 1, issue 1, for examples of complex concept maps [a model of the internet, a model of search, model of experience, and a model of brand].

Begin the baseball concept map by going back to the list of terms and their definitions. A useful exercise is to create a matrix listing all the terms down one side and repeating the list across the top. In the boxes where a row and column intersect, write the relationship between the terms. The resulting matrix provides a checklist for building the concept map.

Review the ranking of the terms. Review the outline of the essay. Consider the main branches from the primary term (baseball). One approach is to ground the primary term within a sentence that also contains the other two or three most important terms. A first sentence might be set in context; a second sentence might define the main term branching out at ninety degrees from the first sentence.

Figuring out the structure of a concept map is a significant amount of work, but not necessarily the end of the task. A second phase is giving the map an appropriate typographic form—to make the typographic hierarchy support the structure of the content.

Divide the exercise into a series of steps: (1) List terms, (2) Edit the list, (3) Define the remaining terms, (4) Create a matrix showing the relations of terms, (5) Rank the terms, (6) Decide on main branches or write framing sentences, (7) Fill in the rest of the structure, (8) Use color and the tools of typography to clarify and make the content more accessible, and (9) Create a final version.

Format: 22″ x 34″, full color (11″ x 17″ is generally not large enough for a readable map of 50 terms).

The concept-map assignment works well for individual students (its origin is as an assessment tool for individuals). I have also found that it works well as a team project for groups of two to five. Groups are able to create richer maps in a given time period than are individuals. The experience of developing shared understanding through the process of co-creating a concept map is valuable in and of itself. And it can also be quite valuable in the “real-world” development of Web applications. The assignment may also make an interesting and useful team-building exercise. As a practical matter, critiquing and grading five or six maps is easier, and allows more details feedback than is possible for twenty or thirty.

If undergraduate students work on the project in teams, they will probably benefit from a discussion of team dynamics before they begin. Encourage them to discuss roles, disclose their availability, and map the process they plan to follow. They also need to know how you will grade their projects. Asking the students to evaluate each team member is a way to understand who contributed and who shirked.

**2.4: Create a Process Flow Diagram**

Concept maps are good for defining a set of terms—for defining rules. Essentially they are descriptive. But understanding involves both description and prescription. Rules gain meaning when applied to an activity. One way to represent activities is with process flow diagrams (sadly, a technique not only ignored, but actively eschewed by Gowin and Novak).

Most advanced students may come across a problem of describing the process of playing baseball in their concept maps. Sometimes they will present concept maps with partial process flow embedded. Such mixed diagrams are great points of departure for the process flow assignment and should be discussed with the entire class.

Ask the students to create a diagram mapping the process of playing baseball. When the diagram is complete, it should be possible to trace the sequence of steps in any play, in any game on the diagram. Most of the game lends itself easily to a decision tree. The simultaneous action of fielding and baserunning is more difficult to map.

Students may be unfamiliar with process flow diagrams. Show them examples. Explain the basic building blocks of events and decision points—a question (often represented with a diamond) to which the answer must be yes or no. Describe feedback loops. A good introductory exercise is to ask students to make a process flow diagram describing the operation of a simple system such as a thermostat or heater.

In creating their diagrams, ask the students to consider: (1) The divisions of time within the game, (2) Nested and repeated sequences, (3) Counting—how the system/diagram tracks the state of the game, and (4) Decision points.

Divide the exercise into a series of steps: (1) List operators (players) and their roles, (2) Define things to be counted, (3) Define boundary conditions (beginning and ending), (4) Begin with a walk through sketching each step, (5) Fill in the rest of the structure, (6) Reorganize to create a coherent overall structure, (7) Use color and the tools of typography to clarify and make the content more accessible, and (8) Create a final version.

Format: 22″ x 34″, full color (11″ x 17″ is generally not large enough).

Students with experience in programming should be challenged to apply it. Tracking state involves creating variables; repeated sequences and nesting is similar to creating and calling functions. Students with no programming experience can complete the assignment, though less mature or less analytical undergraduates may find it difficult. Like the concept maps, process flow diagrams lend themselves well to development by team.

Section 3: Synthesize the Data, Structures, and Representations
——————————–
The third section of the course focuses on synthesis. Having worked with the information in a number of forms, students are now prepared to produce more finished work—work directed toward end users. I must acknowledge (and you should point out to the students) that the concept map and process flow diagram are tools to help the design team think about the subject; they may prove poorly suited to explaining how to play the game to a naïve audience (though they’re quite useful for discussions with experienced audiences). The assignment is this third section (as with the essay) focus on communicating with our original audience of adults unfamiliar with the game.

**3.1: Create a Poster (Diagrammatic Form)**

Ask the students to focus on explain how to play baseball using primarily visual means. Use diagrams, illustrations, and photographs. Organize the information on a single surface to create a “poster.” Use a minimum of text. Suggest that the students review their concept maps and process flow diagrams and think of them as points of departure for the poster, as check lists for concepts to include, and as direct sources of content.

I call this project a “poster” in order to emphasize the importance of a strong organizing principle for the content, the need for a strong visual hierarchy, and to set an expectation for a high level of finish in the final result.

Divide the exercise into a series of steps: (1) Sketch at least five alternative main concepts or organizing principles, 8.5″ x 11″, (2) Sketch at least five alternative organizational structures for the second concept, (3) Create a full-size pencil rough showing all information for the selected structure, (4) Create a tight comp showing all information, probably in “Illustrator” format, and (5) Create a final poster.

Format: 22″ x 34″ (so that 11″ x 17″ printers can be used for comps). Final poster in full color.

Often students ask whether they must create their own illustration or photography, or whether they can find and appropriate other people’s work. The main focus on this assignment should be diagrams—which the student should create themselves. Allowing appropriation of photos and illustration for use in details or examples (with appropriate attribution) saves time, and focuses students on the structure of the information. Requiring students to create their own illustration and photography may mean that more time must be allotted to the project.

I first saw examples of work from the baseball diagram project (3.1) in the portfolios of students from Krystof Lenk’s classes at Rhode Island School of Design (RISD). A few examples printed in Graphis magazine, number 238, July/August 1985, page 50. I am indebted to Krystof for the original idea, which I’ve borrowed to form the basis for this sequence of assignments. Krystof is a partner in the design firm Dynamic Diagrams in Providence, Rhode Island.

**3.2: Create a Booklet (Narrative Form)**

Ask the students to explain how to play baseball using a combination of visual and verbal means. Ask them to build on the assets of the essay and poster to produce a sequence of double-page spreads bound in a booklet. They should also consider the organizing principle for the booklet—the idea that ties the spreads together. And, as always, they should consider visual hierarchy and quality of finish.

An interesting variation on the assignment is to require the students to layer in a description of the real game—individual plays, a summary, or the whole game. Weaving the story of a particular game together with a description of how to play provides an extra challenge and may yield a richer result. By the way, the use of examples from a real game can make parts of the poster clearer, or even serve as an organizing principle in the poster.

Divide the problem up into a series of steps: (1) Text description and thumbnail sketches of two options for organizing principles, (2) Outline describing the main topic of each spread and the main image, (3) Pencil sketches of each spread (show headlines and indicate placement of text and images), (4) At least two options for grid structures, (5) Tight comp showing all information, probably in Illustrator or Quark format, and (6) Final booklet.

Format: At least ten pages (five spreads) plus cover, each page 8″ x 8″ (so that 11″ x 17″ printers can be used); bound (accordion fold or codex form).

**3.3 Create an Interactive System**

At last we come to the interactive version of the content. Students now understand the content, have seen it organized into several structures, and have seen those structures represented in many forms. They’ve also developed a set of content assets.. The earlier assignments form a strong foundation for moving to the interactive world. By taking these early steps first, the last step is much smaller. And students are able to focus on what an interactive system can provide that might not be available in other media—rather than on understanding the subject and creating content.

Ask the students to create an interactive (computer-based) system to explain how to play baseball. Challenge them to consider what an interactive medium allows that was not possible within the constraints of the earlier assignments.

With the interactive project, it’s important to introduce students to the idea of usability testing. Of course, user feedback can improve the poster and the booklet as well. Encourage or even require students to show their work to users and present a summary of feedback to the class. Explain the process of usability testing with rough paper prototypes—how the team can simulate the operation of a working system. One member of the design teams acts as facilitator, one as note taker, and one plays the software system responding to the user’s decisions by presenting the appropriate parts of the prototype.

Divide the exercise into a series of steps: (1) Paper prototype (low fidelity, rough), (2) Usability test, (3) Rough screen flow diagram, (4) Detailed screen flow diagram, (5) Functional prototype (low fidelity, scanned sketches), (6) Usability test, (7) Graphics design of templates, and (8) Final graphics in a working system.

An interesting variation on the assignment is to require students to layer in animation, a simulation, or even a game for users to play. Weaving together the game and the description of how to play baseball will yield a richer result.

The project is a great deal of work for one student. Students working alone are not likely to generate such rich results. The project is better suited for teams.

Students can design the interactive system entirely on paper. This option is especially attractive if access to computers is limited, for the classroom or for students, but it’s not a bad idea even if computers are available. However, students are usually quite eager to work on a computer. Hypercard, Director, and HTML are all good development environments and require little learning from students. John Maeda’s programing language, DBN, described in his book Design by the Numbers, is also a potential development environment—though the learning curve might be somewhat steeper.

Schedule
============

The amount of time needed for each exercise can vary depending on the experience of the students, other demands on their time, and the level of finish the instructor accepts. Below I’ve offered estimates for senior-level graphic design students:

Section 1:
Gather Data
——————————–
+ 1.1 / Play a game (1 class)
+ 1.2 / Read the rules (1 class)
+ 1.3 / Record a real game (1 week)

Section 2:
Structure and Represent the Data in Multiple Ways
——————————–
+ 2.1 / List related terms (1 class)
+ 2.2 / Write an essay (1 week)
+ 2.3 / Create a concept map (2 weeks)
+ 2.4 / Create a process flow diagram (2 weeks)

Section 3:
Synthesize the Data, Structures, and Representations
——————————–
+ 3.1 / Create a poster (3 weeks)
+ 3.2 / Create a booklet (3 weeks)
+ 3.3 / Create an interactive system (3 weeks)

The total is about fifteen weeks.

The complete sequence of projects is probably too much for a fifteen-week semester—but should fit easily in an eighteen-week semester. The interactive system project, especially, could benefit from more time. On the other hand, you can tailor the course in a number of ways: You might give less emphasis in the second section, asking for less finished results, or leave out the process flow diagram altogether. Another option is to cut the booklet project; while it has value, you may wish to emphasize the second section more, or dedicate more time to the interactive system project.

Conclusion
============

I have outlined a semester-long introduction to information architecture for senior-level (or graduate-level) graphic design students. My focus has been on creating sequence of steps designing an interactive system. The course touches on a whole range of information design problems, but I have not organized it as an introduction to information design. That is to say, the course is about the structure (architecture) of the information, rather than about methods of diagramming. It assumes some familiarity with information design methods, and it also assumes 2-D design and typography skills. The course also touches on aspects on interaction design (or user experience design), but that is not its focus.

I have taught the exercises outlines above at Art Center College of Design in Pasadena, San Jose State University in California, and the Institute of Design, IIT, in Chicago. I am indebted to those schools for the opportunity to teach, and to their students for teaching me. I;m very grateful for what I have learned from them.

I hope other teachers will find the course useful and begin to adopt (and adapt) it. I welcome comments, suggestions, and examples of student work on the projects.

Download PDF

[1]: http://mlb.mlb.com/mlb/official_info/official_rules/foreword.jsp “Major League Baseball Site”
[2]: http://www.amazon.com/exec/obidos/ASIN/0521319269 “Amazon”