Chapter I Interactive Design And The Design Process 7 THE INTERACTIVE DESIGN PROCESS Building a successful interactive document can seem like an overwhelming task. One way to make the whole project more manageable is to understand there is an interactive design process that can be followed. Figure 1-5 depicts one possible way to approach your project. Following the interactive design process allows you to break down a complicated interactive pro- ject into smaller, more manageable steps (see Figure 1-6). By SEE igh sich ntep in a plocae ae a tae ae pee organize critical information more effectively. The completion of her feskindihn each step serves as a milestone of achievement. The interactive design process may be broken down into five major steps: problem definition, fact finding, idea finding, project visualization, and implementation’. If you are a novice interac- tive designer, you will probably want to follow these steps sequentially on several projects until you are more confident in your judgment and skills. More experienced designers, on the other hand, may skip over steps in the design process if the client The Interactive Design Process 'Meggs, Philip B., Type and Image: The Language of, Graphic Design. New York, N.¥: Van Nostrand Reinhold, 1988, p. 153. Meggs provides an excellent discussion of the design process as it relates to graphic design. In The Principles of Interactive Design, 1 have significantly revised and elaborated ‘on this theory to apply it to the medium of interactivity. For those wishing to know more about designer as com- ‘municator, there is no Figure 1-5 A schematic of better reference than the interactive design shar. Thee oat process Image.A through understndg of the gook ofthe iterate ejects ical the e- ‘ation of 0 good interactive document Mega Project , Figure 1-6 f the de 8s steps has provided extensive background information or they have worked on similar projects before. While the interactive design process is presentated here as a series of sequential steps, not all of the steps will take the same amount of time and effort. In general, the problem definition and fact finding stages will take less time than the project visualiza- tion and implementation stages. All the steps are important, ho ever, and each activity that takes place in these steps will help n interesting and functional interac- tive design. The next sections explore the steps. you as you strive to create Problem Definition The problem definition step begins when you accept a project from a client. Problem definition requires you to analyze the pro- ject—examine goals and objectives, define the product ni brainstorm on distribution formats, establish the message, and ntify limitations (like time and budget). The background infor- mation gathered during the problem definition stage is critical to understanding the client's goals and the project's requirements. It may be tempting at this point to jump ahead and start to design the screen images and interface. This can be a mistake. Withoutclearly defined goals and requirements, it is all too easy to con- centrate on the bells and whistles of the technology instead of building a design that communicates clearly. Certain critical pieces of background information can profound- ly affect the design of the document. Some interactive projects, for ‘example, are intended to transfer existing information to a digital format. In these situations, existing information and media pieces (such as posters, brochures, videotapes, and so on) offer a rich image and text base for reuse in the interactive project. The existing design will influence the interactive design. The image on top in Figure 1-7 shows an interior spread from a brochure designed for Walters Millworks. When the business decided to create—mostly as an experiment—a limited edition m Orders J} ey Fr .398.t07 | way <> Figure 1-7 The established layout << style and content of the brochure top) Na 5 clearly influenced the development of il ze the interface design for the Walters <= — Millworks multimedia document | Custom Wall & Window Mouldings = (bottom)spars 8 Ae a = = a = r=] tance 9 lowcha fo structure hort The re ages rep ‘ : screens, and the arrows Ex Ea Ea Ex ee ee cree =a information, mation in the project (see Figures 1-8 and 1-9). Understanding ne how a user will navigate through the interactive document to fol- | Aged eeleane low information helps everyone working on the project stay | Sauaatanend esti Y | gl he lormalon pus in focused on the importance of clear communication. A critical | farmed function of a flowchart is to reveal those parts of the navigation- al scheme that are too complex to be easily followed to access Figure 1-9 An coily (and rough} flowchart from The Musician's Post web siteFigure 1-10 Screen sequence from an early (1990) interactive pro- ject. Unfortunately for the user, no “quit” command is included—the user must either force quit the presentation using key- stroke commands, or endure the entire sequence, You may sketch several alternative flowcharts before defining, one that works, Those designers who skip this task before begin- ning a project run the risk of creating unclear and chaotic inter- active links—links that take the user through multiple levels of information screens without letting the user go back to previous screens, access the main menu, quit the document, or worse (see Figure 1-10). This happens when interactive designers dive directly into working with a prototype before organizing the pro- ject. Organizational tools like flowcharts ease the management of complex interactive projects. (For more information about flow- charts, see Chapter 2.) Idea Finding Idea finding is the search for a working interactive visual lay- ‘out with clear navigation controls. During this stage, you will produce many quick sketches to try out possible layouts for screen elements and the look of navigation controls. Experienced designers start this stage with thumbnail sketches (small quick drawings designed to rapidly capture ideas on paper) and then progress to roughs (larger, more refined sketches based on thumbnail ideas). In the project visualization stage, the roughs will be further refined in comps (short for “comprehensives”, very detailed mock-ups of the final design). For a graphic exam- ple of this progression, see Figures 1-11 and 1-12. Thumbnail sketches should be quickly executed in pencil or pen without prejudging the quality. The goal is to record the ideas as they flow—you can decide later if any of them are worthwhile. Even if only a few of the thumbnails are any good, having a body of sketches to look at opens up the possibility of comparison. Side-by-side comparison allows for the possible recombination of ideas in a new and unexpected manner. Sometimes even an ugly thumbnail sketch may contain an ele- ment that, when extracted from the sketch and combined with elements from other thumbnail sketches, may surprisingly form a winning solution. Once a body of thumbnail sketches has been developed, you can refine several of the better sketches into roughs. Roughs are also fairly quickly executed, but with a finer eye for detail. After several roughs are on paper or onscreen (short for “on the screen”), you can proceed to the project visualization stage.Project Visualization The earliest part of the project visualization stage is the devel- ‘opment and critical evaluation of comps. Some elements that designers create comps for are title screens, navigation controls, and sample screen layouts. These comps are commonly shown to the client. Many clients require the designer to present comps before giving permission to proceed with the project. ‘Comprehensives (ample Screens) ea ital Prototype Screen Figure I-11 The progression of the refine ment of a visual idea: thumbnails, roug comps, to final screen elements. Thumbnails @ + (atta SANNATION ANd Tot. BD S. ‘comps from the multi Mouse. Note the progressive refinement of the imagery from top to bottom, (Cou sh Design Partnership.)determine the effectiveness of the design and reveal early bugs in the programming. At this point, the emphasis is on creating a clear and stylish design, as extensive programming and debugging (finding and eliminating all programming flaws) takes place in the mastering stage. Usability tests often find the first prototype in need of revision to increase functionality. Almost inevitably, proto- types are tested, reworked, tested, and reworked—often more than once or twice. Testing should be an ongoing task that begins with the prototype and continues through to the final version of the project. Problems that are not discovered and solved through early and continuous usability testing can grow into insurmountable problems when usability testing is delayed. Remember to test early and often. MASTERING. Once the series of usability tests confirms that the content, interface design, and navigational pathways in the prototype work and provide the user with a rich interactive expe- rience, you can flesh out the prototype into a fully functional interactive document. To develop a fully functional interactive document, you will proceed through a number of design phases, including the following: Production, where all artwork, audio, video, animation, virtu- al reality, and other media are prepared for placement within the document Programming, where all production elements are placed into the authoring program along with any special computer codes that enhance the functionality of the interactive docu- ment The alpha version, the first complete interactive document that is thoroughly tested for correctness and general functionality The beta version, the second complete interactive document that undergoes extensive usability testing by actual users in real-world situations @ The master, the final version of the interactive document recorded onto the target media. If the final version is record- ed onto a compact disk (CD), this version is often called a golden master, after the color of the disk. At the end of the mastering process, the final document goes ‘online (in some cases, it may already have been online and “under construction”), or the master is taken to a media produc- tion house to make copies for mass distribution. ® interactive Design Principle Test early and often.