Digital Web Magazine

The web professional's online magazine of choice.

Return On Design

Got something to say?

Share your comments on this topic with other web professionals

In: Reviews > Book Reviews

By James McNally

Published on February 20, 2003

Introduction

image of Return On Design book cover Here’s a book that consciously takes aim at the mentality that has taken hold in the wake of the so-called “dot.com bust.” Corporations are no longer willing to spend millions of dollars on their Web presence. They want to know what they are getting and how it will affect their bottom line. And since so many Web firms have gone belly-up in this climate, it is a buyer’s market. Web designers need to be savvy marketers when it comes to communicating with potential clients. Terms like “value” and “return on investment” have actually entered the lexicon of the Web designer, and Ani Phyo is here to tell you that this is not a bad thing—not by a long shot.

Ani Phyo is not really talking about how to design a Web site cheaply. The core of her message is that all this talk about lower budgets has actually helped the discipline by forcing us to focus on the user. Back in the wild and woolly ’90s, many Web sites were practically objets d’art. Designers were allowing their wildest impulses free rein, creating some beautiful, but often puzzling, sites. This was the era when a certain Web agency boasted of “firing” its clients if they didn’t like the proposed site design.

The collapse of the industry didn’t mean that people stopped using the Web. On the contrary, more people are online now than ever before. But the field of Web design has been changed forever. Designers can no longer afford to talk down to their clients, or to ignore the needs of users. Many artists may have left the field, but more and more instructional designers and information architects have joined it. On the whole, the field of Web design is healthier and more balanced now than it ever has been. However, as Phyo says, “I continue to see companies…make costly mistakes on their Web sites due to poor usability, as a result of leaving information design as an afterthought or forgetting it altogether.”

Now, more than ever, designers need to practice smart design. Phyo has written a book aimed at both the builders of the Web site, whether they exist within the corporation or at a specialized Web shop, and also at the larger group of people within the corporation for whom the site exists to advance their business goals.

Phyo proposes a seven-step, user-centered information design process:

  1. Determining What Your Web Site Needs
  2. Developing and Writing User Scenarios
  3. Designing User-Centered Content
  4. Developing a Site Map and User Workflows
  5. Creating a Navigation Scheme and Page Layouts
  6. Testing a Functional Prototype
  7. The Ongoing Process of User-Driven Enhancements

Underlying this process is a four-phase cycle:

  1. Discover (Step 1)
  2. Design (Steps 2-6)
  3. Develop (Step 7)
  4. Deploy (Step 7)

She talks about her process as an “iterative” process, meaning that small pieces are developed and tested and fixed before being assembled into larger pieces. There is continuous testing and redesigning along the way.

Beginning the book with a chapter on the basics of information design is a great idea. I found her chart defining the roles of each member of the Web team (each with its own cartoon monkey) especially helpful.

Creating a Navigation Scheme and Page Layouts

Chapter 5, on Creating a Navigation Scheme and Page Layouts, is particularly meaty, with great advice about how to create wireframes and plenty of examples. Let’s take a closer look. Phyo breaks this step down into its component pieces:

  1. Determine pages to include in your prototype
  2. Sketch wireframe page layouts
  3. Test and refine wireframes as necessary
  4. Present wireframes for signoff
  5. Create prototype page specifications
  6. Build your functional prototype

Phyo is very fond of food imagery, and the metaphor she uses most often for the process of Web design is that of the dinner party. In this chapter, she says, “the chef makes sure that when guests sit down at the table, they find everything they need to enjoy each course: place settings of linen, silver, glass, and china; condiments such as dressing for the salad; the right wine for each course.” Here, in fact, is where we start to break down the content into its component pages, and even further into sections and subsections.

Wireframes are simple page layouts using geometric shapes in the place of design elements. They are used to begin to decide how to lay out content most effectively. The relationships between pages, as well as the placement of images and graphic elements, can be explored this way quickly, with the knowledge that these may need to be changed quickly and repeatedly. Phyo also stresses that wireframes are also useful since they prevent the client from getting hung up on a particular design element too early in the process.

Every wireframe needs to include the following elements:

It’s not necessary to wireframe every page of the site at this point, but in addition to the home page, you should also include top-level pages (major sections) and sub-pages that are required for several of the major tasks that will be performed by users on a regular basis. These should be tested by a number of people before being presented to the client for signoff. It’s important not to underestimate the importance of getting the wireframes right. Though they’re not pretty to look at, they are the bones to which you’ll be adding meat later, and it’s much more expensive to have to revise after that additional work has been done.

The next step is creating a functioning prototype of the site, using the wireframes on which you have just received client approval. Prototypes are assembled from paper-based wireframes into slideshows (using, most often, Microsoft PowerPoint) and/or actual HTML pages which are able to demonstrate the essential functionality of the site.

Phyo suggests beginning with a paper prototype first, which is simply a sequence of the paper wireframes. After obtaining feedback on this, move it onto the computer with a linear prototype, which is a sequential slideshow usually created in PowerPoint. Again, after receiving and incorporating feedback, design the functional prototype using your HTML editor.

When testing these, pay particular attention to the user’s ability to accomplish tasks quickly and easily. Also watch to see how the prototype responds to users backtracking, abandoning a task, or moving to another section of the site.

This leads us directly into the next step in Phyo’s process, to which she has devoted the entire next chapter.

Conclusion

It’s true that almost every book on the process of Web design has a seven- or a ten- or a twelve-step process that usually look pretty similar when laid out side by side. What’s different about this book? Well, for starters, the book is laid out superbly, with inviting page design that makes reading a pleasure. Content is broken up into readable sized chunks, with a summary at the end of each chapter. There is even a navigational bar at the top of each left-hand page, letting you know exactly where you are in the seven-step process. Icons are used to denote tips, definitions, and possible pitfalls. Sure, the author could have crammed this information into 150 pages, but I wouldn’t have wanted to read it. The book lives up to its own standards of usability, which is in itself a ringing endorsement of the content within.

Something else that cannot be overstated is the value of the friendliness of the author’s voice. Phyo makes the content accessible and non-threatening to an audience that is sure to be dominated by readers for whom “information design” is a scary and unfamiliar concept. This isn’t to say she’s “dumbed down” her information. To use some of her own food imagery, she’s made this nutritious meal more appetizing by dividing it up into digestible pieces, and then seasoning those pieces in just the right way.

It’s funny that a book called Return on Design should mix its metaphors so readily. Maybe this is where the field of Web design exists at the moment, at the intersection of art and commerce, where culinary as well as business language can be useful. However, while designing a corporate Web site may be like cooking, it is an investment. So, though tempted to finish off this review with a hearty “Bon appetit,” I’ll say instead that Return on Design will deliver what it promises. And that’s no mixed message.

Return On Design
Ani Phyo
New Riders, 2003, 284pp.
US $34.99
CDN $54.99
£27.50

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: ROI, Web Design

 

James McNally is a Toronto based freelance writer and web designer. He is desperately clawing his way back into a new media career. His personal weblog is at http://www.consolationchamps.com/

Media Temple

via Ad Packs