At some point in the design process, you have to put your work in front of a group of people that represent your target market for the ultimate litmus test: Can they figure out how to use it? And, do they like how it looks?

Ideally, you should test your work as early in the design process as possible in order to stave off any unforeseen usability problems before you're knee-deep in production (which is too late). By putting together a workable prototype early in the design phase, you can organize a bona fide user test, complete with a list of questions to ask and a plan for recording and evaluating the feedback.

By using WebAssist rapid development tools and techniques featured in this edition of Web Pro Resource, you can quickly assemble a testable prototype.

I have found it useful to create two sets of testable prototypes during the design phase - "clickable wireframes" to test your information design, and HTML "click-throughs" to test out the usability of your visual designs. Both prototypes should be shared not only with end users but also with your clients so they can get a feel for, and can approve, the end product before it's built.

Creating clickable wireframes

Early in the process, clients need to understand how the site is organized. In my experience, for large or complex sites, just looking at blueprint - like diagrams on paper is not enough for them to visualize the interaction and organization of a site. So, after you work out the site map and begin wireframing, set aside some time and money to assemble a working wireframe edition of the site in HTML.

I recommend exporting wireframes as GIF files. Because they are (should be) grayscale and text, you get better quality and compression saving as GIFs.

In Dreamweaver, insert the whole GIF wireframe into the page, just as you would insert an image. As shown in Figure 1, you can then draw hotspots (clickable regions that you define) on top of your navigation and link them up to go to your various pages. Voilà - a clickable wireframe prototype ready to share with your clients.

Figure 1

Use a program like Dreamweaver to create a prototype site you can test with clients.

If you are handy in HTML, you can take your prototype one step further by building a working navigation system separately and using CSS (Cascading Style Sheets) to plop it into a layer on top of your wireframe image.

Present your clickable wireframe edition to the clients as a way to help them visualize how the site is organized and how users would navigate through key tasks such as ordering a product. You can also present the clickable wireframes to end users to see if the site makes sense from their perspective. Later in this chapter, I discuss ways to conduct tests with users. At this stage, it's important to work out all the kinks in the site and get client approval before moving forward with visual and HTML production.

Cruise line case study

For a major vacation cruise line company (with ships bigger than the Titanic!), we created each wireframe in Dreamweaver. Because each wireframe was already in HTML, the prototype site virtually built itself as we created each new wireframe page. While the IAs (information architects) took some time to get comfortable building wireframes in Dreamweaver (as opposed to Visio), the time was well made up during the client approval stages. Each week we'd walk the client through a different section of the site - the online booking process and the reservation retrieval process for example. The client sessions were highly productive because, for such a large and complex site, the client could really navigate through the site and provide accurate feedback and faster approvals.

Testing your visual design

While the wireframe details are being worked out, the visual design team can create a few different "look and feel" options and test them with users. Aptly named "look and feel," these designs look real enough, as in Figure 2, to pass for a home page and an interior, or subpage, of your site, but they are not 100 percent accurate in terms of final navigation, photography, or text. However, keep in mind that users and clients are very literal. Selecting headline copy and photography that are fairly accurate to get a good read on your audience is important. All non-major text should be greek (gibberish text), but navigation choices and key headlines should be a close approximation.

For high-profile Web sites, it's a good idea to conduct a focus group before committing to a design direction. Otherwise, the design is chosen based on the personal tastes of a few client executives - which is okay if the site is for a small to mid-sized company. I like to get focus group feedback before showing the design to the client. That way, you can rule out designs that just don't work at all, and come prepared with user feedback when you go into the client creative presentation to help guide the decision making process.

Figure 2

This design direction was one of three shown to the client and was ultimately selected. Notice the greek text.
www.terralago.com

To test your visual designs, follow these steps to put together a focus group:

1. Recruit seven to ten people that represent your intended audience.
2. Print each of the design options.
   I like to present three different design sets of a home page and a subpage.
3. Mount all the designs on boards so that your focus group can get a good look at each one, refer back to them, and compare them side by side.
4. Prepare JPEG versions of your designs (saved at 100% quality for the purposes of demonstration) and place them in HTML pages using Dreamweaver.
   This enables you to show the focus group how each design looks on a computer screen in a browser window.
5. Gauge people's emotional reaction to the designs.

See which design most resonates given the type of business your site reflects. Sometimes there are clear winners and losers. If all rate about the same, then truthfully any of the designs can probably fare just fine in the real world.

Building an HTML click-through to test for usability

Not only do users respond to the mood created by a site's visual look and feel, the visual design also has a big impact on how users identify interactive elements and navigate through a site. So, it's a good idea to mock up a few pages in the chosen look and feel that illustrate a user's path through a key task such as ordering a product.

Assemble these few key pages into an HTML click-through. As shown in Figures 3 and 4, the click-through looks real and contains all the pages that users would see if they were to step through a task successfully. Each of the pages can be a mock up saved as a single JPEG and placed in an HTML page. In fact, you can expand upon your initial design directions to make your first testing prototype.

For testing purposes, don't mock up only half the page and leave the rest blank. During the test, users will ask about these neglected areas. Even if you give them an explanation, they are forced to use their imagination to fill in the gaps. This can skew their reading of the page. Users need to see the page in its full context to give you the most accurate feedback.

Figure 3

On this home page, it's pretty clear where you click to upload your photos.

Figure 4

The first step is to register by entering basic information.
© Shutterfly

For testing purposes, the HTML coding for each click-through page should be just enough to place the mock up image in the page and apply a few hotspots to interactive areas that link to the next page in the task sequence. At this point, you just want to see if the visual and interaction design work as you intended.

During the testing phase, users may offer suggestions on how the interface can be better or different. After all, the whole point of user testing is to open up to new ideas that better serve the end user. If you've already invested a lot of design time to make the site work a certain way, you may be reluctant to change it.