Wireframes
Wireframes are rough illustrations of page content and structure which serve several purposes throughout the website design and testing process. They are low-fidelity representations of the content that will appear on web pages and were originally created as paper-prototypes. Today, wireframes are most often created using software like OmniGraffle or Visio. Other software programs that can be used to develop wireframes include Adobe Fireworks, Apple Keynote, and Microsoft PowerPoint.
Wireframes are low-fidelity, meaning you do not need to create them using actual content. Instead, you can simply draw a rectangle and place it where specific types of content could be placed (note: the visual design comes later). For example, you may have a block at the top of the page to represent global navigation, and blocks for the page header and footer; you may place a block along the side of the page to indicate local navigation, an advertisement, etc. The purpose of wireframes is to indicate the potential information and interface elements that may appear on a page, not the final content.
Communicate Early Design Ideas
After the content inventory and site map diagrams have been created, you can create wireframes for some of the different types of pages that you anticipate on your website. These wireframes should be shared with visual designers to communicate early design concepts. Visual designers can use wireframes to determine the visual design of the website and layout for specific page types. For instance, you may want to create wireframes for dynamic web pages, such as those with web forms that visitors will complete to register for a service or make a purchase. You may also want to create wireframes for static pages of the site.
User Testing
Wireframes are a low-cost way to test early concepts for usability before a single line of code has been developed. Researchers may use paper prototypes at this stage to identify navigation issues as they relate to information scent, terminology, and the intended functionality of specific features. User testing of these wireframes may be computer-based, or sketches or print outs of wireframes may also be used. Some programs, like OmniGraffle or PowerPoint, may be used to create hyperlinked content that simulates how a real website would function. This is not always necessary; instead, the Wizard of Oz technique may be used, in which the researcher plays the part of the computer. As a participant points to elements on the web page, such as a web form, the researcher replaces the current page view with the view that would be seen on the real website, if the participant had clicked an actual link. The researcher should not say anything while doing this; she should just change the pages based on the participants’ actions. To learn more about why a participant clicked on a certain area of the page, the researcher might also use the Talk Aloud Protocol, and ask participants to speak their thoughts aloud as they navigate the website.
Updating Wireframes
As the project progresses, you may wish to update your wireframes to more accurately represent the conceptual design for iterative user testing before developing the actual website.