Primary Symbols

Categories are business-specific areas of interest. Arrowed lines (bones or branches) tie causes to the category lines; other arrowed lines tie secondary causes to the cause lines. Category lines point to the spine, which points to the effect.

Cross Section

Cross sections are good for showing internal structures that you would normally never see, as well as how different parts relate to each other in an assembled unit.

Cross-sectional views show the object as if it had been cut straight through. For example, Figure 13-2 is a cross-sectional view of mammal skin showing sweat glands, ducts, receptors, skin layers, and other pieces of which skin is made.

Do not confuse cross-sectional views with cutaway views. A cross section is cut straight through the subject in a line from one point to another. A cutaway view has some of the parts removed or cut open to show the inside parts.

Cutaway View

The cutaway view is good for showing how parts are connected to the whole. For example, Figure 13-3 shows the relationship of a car’s engine, transmission, and axles. Because these parts do not line up, a cross-sectional view would miss several connections.

By cutting out only the material that hides the important details, the rela- tionship between the structure and the details becomes clear.

Elevation View

Also known as the front or side view, the elevation view is good for showing the height or length of an object. Elevation views are often used in documents to identify a product or object (Figure 13-4) or to show the front, sides, and back of buildings in architectural drawings (Figure 13-5). An elevation can be a drawing or a photograph. Drawings are commonly used in technical documents to control clutter and noise. Architects use elevation views to show how their buildings will fit into their surroundings and also to show what surface materials will look like.

Exploded View

Good for showing the orderly relationship of parts to each other, exploded views, such as the one in Figure 13-6, are almost always line drawings, although there are occasional photographic exploded views.

When using photos in exploded views, make sure the photo is well lit, that the objects in the photo are easily recognizable, and that there are no distracting shadows or unnecessary details cluttering the picture. You may also have to add callouts to the picture to identify the parts.

The problem with photographic exploded views is that the parts cannot always be aligned exactly as they would fit in real life. For example, in Figure 13-7 the parts are not lined up in the positions they would normally occupy. They are lying flat next to the housing, and it is not clear exactly how they fit together.

To line components up as they would actually fit in an assembly, the parts would have to float. The photograph would then have to be retouched to remove the wires or platforms used to show the parts in the correct alignment.

However, animation could solve this problem—for example, if the user clicked the exploded view, the components could assemble themselves in the right order. Or you could provide drill-downs into individual parts and show tooltips with part numbers. Or you could let users print out a single part with its specifications via clicking it and then clicking “Print with Details,”⁴

Line Drawing

The line drawing, also known as the cartoon, is good for illustrating complex material without extraneous detail. Even the best photographs are often toocluttered to be as helpful as a good line drawing. For example, medical publications often use high-quality renderings to help doctors and students identify organs, muscles, and other tissue without the mess of the real thing (see Figure 13-8).

Cutaway, cross-sectional, plan, elevation, and exploded views are usually line drawings.

Consider providing methods to animate and rotate drawings and to add tooltips (text) and rollovers (other pictures) containing details.

Photographs

Photographs are not usually thought of as diagrams, but they are sometimes used in the same ways—to provide information—and therefore follow some of the same rules.

Photographs are good for showing objects realistically. For example, one photograph can take the place of many paragraphs when describing a process or the differences between items. Figure 13-9 is a photograph of a flexible drill bit that electricians use to drill through floors and between walls to fish wires from one floor to another. It sounds confusing (flexible drill bit?) and would require several paragraphs to explain. But the photograph shows immediately how it works.

Photographs and other images created from real objects can also be animated to good effect. For example, at the University of Texas, Austin, Digital Morphology site, photographs, scans, and X-rays of many species are available as animations (see Figures 13-10, 13-11, and 13–12).

Surgeons use three-dimensional models from MRIs, angiograms, CT scans, and other radiographs before surgery to plan and practice a procedure and during surgery to guide their scalpels. The computerized information can also be used to generate transparent plastic models (Davis 2003).

However, although photographs are considered to be the most realistic type of graphic, they often suffer from background clutter. For example, at first glance Figure 13-13 appears to be a photograph of a church. But if you look at Figure 13-14 and its callout, you see what appears to be a 200- foot-tall professor waving her arms over the church. Once you know she’s there, it’s pretty obvious. But the background clutter makes it hard to pick her out initially.

Besides adding callouts, you can clarify photographs by turning them into photo-realistic drawings. For example, the photograph in Figure 13-15 is badly lit and cluttered. The drawing in Figure 13-16, on the other hand, is much clearer.

Plan View

The plan view, also known as the top view or map, is good for showing relationships between objects on a flat or horizontal plane. The view is looking down on an object from directly above.

Plan views are often used for architect’s renderings, floor plans, and landscaping layouts (see Figure 13-17). Plan views are also used to show layouts, distances, directions, and sizes (see Figure 13-18).

There is no perspective in plan views—views into the distance stay the same from one end of the plan to the other. This is an artificial view: If you were actually standing on top of a ladder or building looking down on an object, the object would seem distorted because of your visual acuity. In other words, the center of the object would be in clear focus, but the edges would become distorted by distance. In a plan view, however, everything is in focus.

Schematic

The schematic is good for simplifying complex objects like the wiring in a piece of equipment or complex processes like the brewing of beer.

Wiring diagrams such as the one in Figure 13-19⁹could be used for interactive what-if analyses. For example, engineers designing circuitry for a new instrument might sketch the circuit and then let the program automatically test it for shorts and redundancies, based on built-in rules.

Schematics lend themselves to animations—in Figure 13-20, for example, grain and water could make their ways through the various tanks and ultimately to market. If the system sends alarms to a computerized monitor, a “live” version could even be used to show trouble spots.

Primary Symbols

The lozenge (start, stop), rectangle (activity), diamond (decision), and torn paper (document) are the four most common flowchart symbols. For a more complete list, see Harris (1999, p. 156) or the International Standards Organization¹¹and American National Standards Institute¹²standards.

Primary Symbols

Network symbols are not standardized, although there are standard practices. Depending on the purpose of the diagram, lines are used to represent either relationships (for example, “This station contains this item” or “This router supports this service”) or actual connections (for example, “This T1 line runs to this point of presence”).

Shapes can be either abstract—for example, boxes and circles (see Figure 13-23)—or concrete—for example, line drawings of actual equipment (see Figure 13-24).

Primary Symbols

The top levels of the organization or other hierarchy are usually indicated by position (at the top) and heavier lines around the shapes.

Temporary people or departments are often indicated by dashed lines.

Formal or permanent relationships are usually indicated by solid lines. Temporary or indirect relationships are indicated by dashed lines.

For more symbols, see “Organization Chart, Construction Options” in Harris (1999, p. 264).

Create Live Organization Charts

Organization charts can be much better “alive” than “dead.” For example, making boxes clickable lets users easily get more information about the department or organization (see Figure 13-26).

Another example: When the user holds the pointer over an employee, you can provide popups containing data such as years with the company, years in the current position, major projects, interests, photos, and so on.

If you’re asked to design a directory, consider including an organization chart as well as the standard text listings and search options. The org chart could be updated automatically from human resources databases and might let users move up and down through the various levels.

For example, an employee who knows the right department but not the right contact could start with a department-level org chart and then drill down until she found the desired contact name. Or she might know a name but need to find the department head; in this case, you could show her the name in the context of a department org chart and provide a way to jump to higher levels of the hierarchy.

Don’t Restrict Yourself to Hierarchies: The Anti-org Chart

For many people, the standard corporate organization chart is barely meaningful. Perhaps their workplace has a flattened hierarchy. Perhaps they are independent consultants. Perhaps they work in an industry where employment is fluid—an individual can be looking for work one month and looking for employees the next. Or perhaps they work in a field where professional contacts outside the company are just as important as the ones inside.

In short, people may need to organize their relationships, but not hierarchically. As Bonnie Nardi et al. say (2002, pp. 89–90):

Nardi and her many colleagues have developed a program called ContactMap that presents users with a visual model of their personal social networks, showing which members are literally central or peripheral to their work and personal lives and letting them reorganize the clusters as responsibilities and relationships change. In Figure 13-27, you can see at least seven clusters of people. One person, Steve Whittaker, is selected; his personal information appears at the left.

Other Hierarchical Charts

Family trees and dendograms are two other types of hierarchical charts that are semantically very unlike organization charts.

The family tree or genealogy chart (see Figure 13-28) shows ancestral relationships in a family or other group (for example, influences within a musical genre).

Unlike organization charts, family trees rarely use boxes. The hierarchy is organized by time rather than corporate relationships.

A dendrogram (also called cluster diagram or tree diagram) shows relative similarities between elements. The clusters (degrees of similarity) are determined mathematically. Dendrograms are especially good for indicating evolutionary relationships—see Figure 13-29, which shows the evolution of the fishes from the Agantha, Ostracoderms, and Placoderms to modern fish lineages. Each fish shape in the figure is clickable and opens a drawing or photograph of the fish clicked.

Unlike organization charts, the value at which a line crosses from one group or subgroup to another is generally proportional to the degree of similarity between the groups or subgroups.

For more information, see “Dendrogram” in Harris (1999, p. 133).

Data-Flow Diagram

The data-flow diagram (also known as the DFD, bubble chart, process model, business-flow model, workflow diagram, or function model) is good for displaying the functions of a system but not good for modeling databases or time-dependent behavior (Figure 13-30).

The data-flow diagram (DFD) pictures a system as a network of functional processes connected with flows, plus occasional collections (called stores) of data (Yourdon 2001, pp. 1–3).

Primary Symbols

Processes or functions are shown as circles or sometimes as rounded rectangles. A process shows a part of the system that transforms inputs into outputs. The label should be a word, phrase, or short sentence that says what the process does—for example, “Find information on DFDs.”

Flows are shown as arrowed lines (either straight or curved). The label should say what kind of information or item moves along the flow—for example, “Web link.”

Stores (places where data are stored) are shown as two parallel lines or an open-ended rectangle. Not all systems have stores.

The label is generally the plural of the name of the items carried by the flow into and out of the store—for example, “Web links.” (This implies that the same items go in and out, so the flows into and out of the store will have the same labels.)

Terminators, external entities or people with which the system communicates, are shown as rectangles. The label is the name of the terminating entity (for example, “Web application book”), person, or group of people.

Entity-Relationship Diagram

The entity-relationship diagram (also known as the ERD or E-R diagram), is good for describing the layout of a stored-data system. It is not good for modeling functions or time-dependent behavior (Figure 13-31).

The entity-relationship diagram (ERD), because it is relatively simple and familiar, is a good communication tool. It can be shown to:

Primary Symbols

ERDs have two main components: object types and relationships. Object types are shown as rectangles. An object type represents a collection or set of objects in the real world. The label is a noun or name, usually singular.

Note that objects in an ERD can correspond to stores in a related DFD. For example, if there is a CUSTOMER object in the ERD, there should be a CUSTOMERS store on the DFD.

Relationships are indicated with lines (or diamond shapes). One-to-one and one- to- many relationships can be indicated using single-headed arrows (1 to 1) and double-headed arrows (1 to many). Direction (from Object 1 to Object 2) can be shown with the arrows as well. A required relationship can be shown with a short line; an optional relationship can be shown with an open circle.

Variations

State- Transition Diagram

The state-transition diagram (Figure 13-34) is good for showing a system’s time-dependent behaviors. Originally designed for real-time systems such as process control, telephone switching systems, high-speed data acquisition systems, and military command and control systems, state-transition diagrams are now used whenever timing might be an issue—for example, if thousands of terminals might hit a database at the same time or when activities occur in flurries, as shown in Figure 13-35.

Primary Symbols

State- transition diagrams have symbols for states, transitions, and conditions and actions.

States are shown as rectangles. Labels should describe the state the system can be in—for example, WAITING FOR CARD.

Transitions are shown as arrows connecting related pairs of states. Although the transitions are not labeled, rules about valid connections are implied by the arrows themselves. For example, in Figure 13-35 you can see that the WAITING FOR CARD state can return to IDLE or change to WAITING FOR PASSWORD. It cannot jump directly to DISPLAY BALANCE. You can also see that IDLE is the first state and WAITING FOR CASH REMOVAL is the last (at least in this transaction).

Conditions and actions are shown as a line and two short sentences, with conditions above the line and actions below it.

Primary Symbols

On Gantt charts, the most common time-and-activity chart, overall activities are indicated with horizontal bars; milestones are indicated with triangles or diamonds.

The individual tasks that make up the activity are shown below the activity. If tasks are dependent on one another, they are linked with arrowed lines.

For more symbols, see Harris (1999, “Time-and-Activity Bar Chart,” pp. 412–415).

Provide Text Versions

Two experts say that text versions of time-and-activity charts are often more useful than graphic versions. For example, Anna Baldino, a Wall Street project management specialist, says (Baldino 2003, personal email):

integrate at the end of a phase, making the number of interdependencies in most projects much smaller than you might think. It’s often more important for everyone to understand how the “blocks” of a project need to integrate at a higher level.

Why use charts at all, then? Well, as Anna says, “Senior managers hate details. They do like graphics. I have used summary-level graphics to make a point when necessary.”

Mary Anne Martucci (2003, personal email), a senior project manager in the insurance industry, adds, “I usually limit the amount of data being displayed on the Gantt chart. I look at the roll-up level information and find it helpful. The lower-level Gantts are visually cluttered. For resource allocation, I look at the information in a table format. For instance, I can review all of the allocated resources to see when they are on the schedule and to which tasks they are assigned.”

Edward Tufte (2000, pp. 4–5) agrees that most time-and-activity charts are not all they could be:

For examples of more elegantly designed Gantt charts, including an overview-plus-detail version, see Ask E.T. at Tufte’s website.

Create Live Time-and-Activity Charts

Time-and-activity charts can be made interactive. Here are some possibilities.

Hide details until the user holds the pointer over the element—see Figure 13-41.

Let users transform charts from one form to another easily. For example, Microsoft Project lets users readily transform Gantt charts (the default style) into PERT charts and tables (see Figure 13-42).

Automatically send messages to managers and employees. Consider designing time-and-activity charts that will automatically send messages when key dates change, when teams have missed deadlines, when meetings are about to occur, and so on. But don’t overdo it—the messaging facility should support the project managers, not take over their jobs.

(Good project management requires at least as much negotiation and conversation as nagging—see Rothman (2003, pp. 48–49.)

Make the chart easily accessible. Provide a version on the intranet (or extranet if you have that type of relationship with your suppliers or customers) with various levels of read—write permissions. Large organizations already make their charts accessible via the corporate network or Lotus Notes; making them web accessible is just the next step in putting all the important information in the same place.

Treemaps

Treemaps, invented by Ben Shneiderman at the University of Maryland’s Human–Computer Interaction Lab, were originally designed to replace directory trees—the hierarchies used in directory programs like Microsoft Window’s “My Computer” to keep track of file folders (Shneiderman 2003). When there are hundreds or thousands of file folders or other elements in a tree, the trees become unwieldy. Shneiderman looked for a way to show the same information more compactly. The result was the treemap. Each rectangle’s area is proportional to some attribute in the hierarchy; in the case of file directories, they’re proportional to the size of the subdirectory.

In addition to representing file directories and hard-drive space allocations, treemaps have been adapted for the financial industry (Husmann 2002). In Figure 13-43, for example, the colors indicate price performance (yellow indicates positive numbers, blue indicates negative numbers, and dark colors are neutral) and the rectangle sizes indicate the companies’ market capitalization (total amount of stock). For more information about the company, users can click the rectangle to get a menu of research links. The SmartMoney treemap is live as well—it’s updated every 20 minutes with market data (there is a 20-minute delay in the data, however).