Recipe 2.9. Creating a Flowchart for Complex Site Functionality

Problem

You need to map out how visitors to your web site will interact with a complex form or tool.

Solution

Use the standard flowchart symbols (see Figure 2-7) to create a diagram for the web site process.

Figure 2-7. Common flowchart symbols for diagramming a process

Discussion

Time to get out your No. 2 pencils. Although software such as Visio and OmniGraffle can make your flowchart look more presentable, the place to start is with a clean sheet of paper and your favorite erasable writing implement.

Wherever you have visitors signing up, logging in, checking out, or undertaking some other interactive endeavor on your site, your planning and implementation of the process can benefit from a flowchart. Flowcharts are all about improving communication: between you and the programmer who will implement the process and between your site and its users. A flowchart helps you visualize interaction points between visitors and the site and identify places in the process where error messages and other feedback are necessary. Include the flowchart in your functional specification document (see Recipe 2.1) to augment your textual descriptions of complex processes.

A visual example will help in this Recipe, too. Figure 2-8 shows a flowchart for the subscriber login process on a site I worked on a couple of years ago. The site already had a straightforward system for authenticating visitors: after data entered on a login form is checked against a list of valid subscriber accounts, the visitor gets the requested page, or an error message if the login information was incorrect. But the high cost of a subscription led to a lot of password sharing between subscribers and nonsubscribers. The owner of the site wanted the site to check the login information supplied by a user for other active sessions with the same login, and then let the new user kick the other user off the site. The site would allow only one active session per user"second come, second served," so to speak.

As shown in Figure 2-8, adding the additional checking required extra logic in the login routine (diamond-shaped decisions) and new system-generated messages (shown in rectangles). The visitor starts at the lozenge-shaped terminator marked "Home." Clicked links and user-input data are shown in parallelograms.

When an already logged-in visitor clicks a link for subscriber-only page, success is a straight shot down the left side of the chart. The system checks for an active session for the visitor (using a cookie set on the visitor's computer) and delivers the requested page if it finds one. If not, the visitor enters the extended logic of the login process, significantly simplified here for demonstration purposes.

Figure 2-8. Flowcharts help you visualize complex interactions between your users and the server, such as logging in to view subscriber-only content

The user name and password entered on the login form leads to another system decision: Is the login valid? If not, the visitors gets looped back to the login form, this time with an error message. If yes, the login routine performs a second checkthis time for an active session associated with the same login information. If yes, the system presents users with another choicelogout the other user? If the user clicks "Yes" she proceeds to the desired page. If no, back to the home page.

One thing to note about this (and other flowcharts you create) is that logical decisions often create the need for short bits of content that explain to users what happened. Error message or instructions are easy to overlook because they don't have a place on your site map or in your content inventory. You'll find them on a flowchart.

See Also

Microsoft's Visio (http://microsoft.com/visio/) and Omni Group's OmniGraffle (http://www.omnigroup.com/applications/omnigraffle/) are both excellent tools for putting a finer point on your pencil-and-paper flowcharts.