Phase 4: Design & Prototype
    Overview
    Approaching Visual Design
Developing an HTML Prototype

Click-through prototypes, like page schematics, are non-design oriented and developed to confirm navigation and information flow. Unlike page schematics, a prototype is fully developed in HTML to show interactivity and linking structures. Informal usability testing can be performed at this stage. The first step in creating an HTML prototype is to review the deliverables from the structuring phase. You will need to determine how many pages and how much detail will be developed. On smaller projects, you may not have enough time and budget to create a comprehensive click-through of the site in HTML. On larger projects, it becomes a critical part of identifying user paths and verifying page flow and navigation. The HTML prototype can also be used for content placement as it is delivered, and formalizing user paths through a site.

Content Placement

The HTML prototype is an excellent place to begin dropping in actual content to see how the page flows, and how the linking structure works. Building out an HTML shell allows the content manager (or copywriter) to test copy length, and navigation in an actual page format.

Testing Information Structure
In the last phase, the information design and content layout was addressed in detail. From the site-view, the sitemap or flow chart was created. From the page-view, the wire frames or page schematics were developed. Navigation was addressed, as was naming and labeling. Finally, the site was viewed from a user-view, and the flow of pages and the development of an interactive path was explored. In the design/prototype phase, it is time to take your paper wire frames to the next level and start to test the information design assumptions in a working, clicking environment. A rough HTML prototype allows the production team (or individual) to build out the pages outlined in the sitemap. The next step is to sketch in rough navigation and links, to determine how intuitive the site is for a typical user to negotiate. Informal testing at this stage is a great way to generate feedback before finalizing the graphic templates and starting actual production.

Image Map Click-throughs

The HTML prototype is an excellent place to begin dropping in actual content to see how the page flows, and how the linking structure works. You can build out most of the pages in HTML using limited navigation and cells to indicate placeholder graphics.

Testing Usability
Usability testing at this stage (called assessment testing) allows for valid user feedback on the information design, copy and flow, navigational cues (shown in HTML at this stage) as well as naming and labeling. If formal testing is not an option (formal test lab, usability specialist, pre-screen participants) at least test against a few people who are not familiar with the site. Usability testing is a watch and learn approach. Ask someone to work with your prototype and determine what steps they would take to complete a task. Then sit back and watch - not saying a word. The results may surprise you - something you felt very comfortable with on the site might confuse a typical user and cause useless clicking and frustration. As always, formal testing with experts in human factors or cognitive psychology are recommended whenever possible. But when budget and time do not allow for formal testing, use basic usability techniques to conduct informal analysis and develop your own recommendations for refinement and improvement.

Assessment Testing

Usability tests can be performed at different times throughout the development process. The earlier the testing, the better. The most common form of testing is assessment testing, which is performed mid-development, before the site is in full development. This allows for feedback after the information design and labeling are determined, and before full production takes place.

Summary
The visual design phase is where all of the audience research, information design and graphic look and feel come together into one interface. At the same time the graphic interface is being developed, prototyping and testing the information design (established in the structuring phase) and content flow takes place. By running these two steps concurrently, the designer is able to test his/her assumptions (DHTML menu, JavaScript pull down's and more) for functionality and usability before committing to a visual look and feel or presenting to the client. The development of an HTML prototype or click-through allows the testing of functionality, as well a place to pour in content. With the visual design established and functionality tested, we are ready to move into the next stage: Build & Test.

Build & Test >>

. . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . .