Wireframes - Usability

U.S. Department of Health & Human Services - 200 Independence Avenue, S.W. - Washington, D.C. 20201

1

Wireframes

Design Wireframes A wireframe is a basic visual interface guide that suggests the structure of an

interface and the relationships between its pages. They serve as a blue print that

defines each Web page’s structure, content and functionality. Wireframes are created

before any design work is started so that the focus is on layout without the

distraction of color and visual elements.

Gathering Requirements Using wireframes will often help to flush out new requirements and questions that

may not have been considered by the project team. Wireframes often end up

evolving into the requirements for a system. Wireframes can be created using a

variety of software applications, for example, Visio, Excel, Word, Illustrator,

Photoshop and Power Point.

Important Elements Wireframes should include all the important elements of a Web page. These include:

Navigation

Company logo

Content area sections

Search function

User log in areas if appropriate

Example:


2

Functional Wireframes This is another type of wireframe that is used in building web applications. It shows

not only how each page is structured but information about each widget, button,

field, each piece of content, and what page is rendered by an action. It provides a

map of the entire page in the Web site, its function and features. Even the message

that may be rendered by a behavior can be included on this type of wireframe.

I wanted to provide some background for this Web application process so that it

would be clear what the wireframes represent. The purpose of the Web application is

to provide a tool for users to create and maintain FAQs. Users can be either general

users (who create and maintain their FAQs) or a system administrator who not only

has the same authority to create and maintain FAQs but also maintains users (i.e.,

assigns new users or deletes existing users). The following screen captures are some

of the general user wireframes.

Wireframe Content

Each wireframe contains the following information and a description:

Title: This is at the top of every wireframe. The wireframe title describes the

purpose of the wireframe. Each is numbered with a 1.0 or 1.1 nomenclature.

How to get here: this section describes how the user got to this panel

Concept/Purpose/Objective: this section describes what the objective or

purpose is for this panel.

Content/Data: this section describes all the content on the panel including

any buttons or icons.

If/Then:This section describes a user behavior and the result of that behavior

(e.g., what panel is rendered after the ‘If’ condition is met).

Navigation Links/Buttons: this section describes any navigation links on the

page.

Error conditions: this section describes any errors that may result from a user

behavior and what message wireframe they will receive.

The following wireframe examples should make the content a bit clearer.


3

Site Title Wireframe

Any information that appears on every page should also have a wireframe. You can

see that this wireframe is for the site title and that is appears on every page. Note

the nomenclature is below 1.0 (this indicates to the user that the wireframe does not

relate to a page). Since your site has either a navigation menu or tabs – there would

be a similar wireframe describing the navigation scheme. If your site has footers on

every page, you would also want to document the footer with a wireframe.


4

Login Wireframe This is an example of a login wireframe. There is a Functional Templates label at the

top left corner then the title of the wireframe and then the nomenclature and

category it belongs to.


5

Create a New FAQ Wireframe This wireframe is a bit more complicated but clearly shows the wireframe fields. Here

the user wants to create a new FAQ and either submits it to the system or saves it as

a draft. The question id is automated and the submitting office is recognized by the

user’s id (they are static fields). User has to enter the question and the answer and

select any categories/sub-categories for the question. The user can add any related

FAQs to include with this FAQ.


6

Search FAQs The following three panels will show why the nomenclature is important. The user

wants to search all FAQS in the database. Note that the main category is Search or

Browse:

Since the search wireframe has an associated behavior (search & submit) and results

for that behavior, there would be a results wireframe (Note this wireframe is

numbered 5.1 to indicate that). This wireframe indicates the user searched by

keyword or ID number.


7

This wireframe indicates that the user selected to browse by category/sub-category.

The end result for this section is for a user to select and view one FAQ from the

browse panel. The nomenclature indicates this is the result of the 5.2 panel.

Documents

Wireframes - Usability