back to wireframe home

Site Spec

Site Structure

The overall structure of the site is reflected in its home page:

http://www.usabilityprofessionals.org/redesign/home/

That is, there are eight main sections, shown in the tabs. Each section has its own hierarchical structure, shown in the various section design prototypes.

Style:

Unique home page style; all other pages will have one of the styles specified in this spec.

Visual Design
Create a set of standard/unique buttons, icons, headers:

• Links to Members Only pages of site (key icon)
  
• Headers (main, areas, e.g., newsletter headings "News" "Design" etc.)
  
• Feedback icon
  
• Search button
• Log in button on home page
  
• Orange arrows (bullets) - Used on page, not in navigation bar
• Black arrows (bullets) - Used in navigation bars; use orange arrows in body of page
• Pen Quill icon - Used to denote an article in Publications
  

The visual design for the site is best reflected on the following page:

http://www.usabilityprofessionals.org/redesign/about/about_structure.htm

The page headers can be downloaded via this UPA headers.zip file.

Spacing, Alignment, Indentation

Click for a depiction of the following layout.

Item	Alignment	Indentation	Cell Space	Cell Pad
Outer, main table			0	0
Main, outer table (includes nav bar and search)			1 pixel	Default pixel
Search table (within outer table)			2 pixel	2 pixel
Nav bar links table (within outer table)			4 pixel	2 pixel
Most other tables on page			2 pixel	2 pixel
Banner labels	Left	Indented
Page Titles (e.g. "Publications Overview"	Left
Sub-titles (e.g.): http://www.usabilityprofessionals.org/redesign/resources/res_jobbank.htm	Left
Table of Contents Will not use word "Contents" at head of TOC Bulleted by using a table and an orange bullet image--not the Dreamweaver default indentation.		Indented
Adjacent Boxes (e.g., Page title and Sub-title) Should be separate cells			2 pixel

• Click for a depiction of this layout.

Page Styles

There are several distinct page styles. When a new page is created, it should first be determined in which style it best fits; then, the page should be built to conform to this style. The styles include:

Home page (http://www.usabilityprofessionals.org/redesign/home/)

Sectional home page (a.k.a. Overview page) (http://www.usabilityprofessionals.org/redesign/resources/resources.htm) Some sections will benefit from having their own "home" (overview) page. Guidelines for when to use such a page include the following:

• Sections that are wide and deep (i.e., those with a great deal of content)
  Sections with navigation bar link names that are brief and perhaps not as descriptive as more lengthy names.

The main criterion for whether to use an overview page is whether user tests show the page is helpful as a navigation aid. If testing reveals that users perceive the overview page as an impediment, or an extra, unnecessary mouse click, then the page should not be used.

Follow these guidelines for Overview page design:

• This page style uses a two-column format
• The page title is followed by the word Overview. (e.g. Chapters: Overview).
• The page provides descriptions of each area. For sections that have Members Only content, the descriptions allow non-members to see descriptions of any areas that may be reserved for members only (noted by the key icon).
• Links within the descriptions are limited.
  

Newsletter (first page, not article page) (http://www.usabilityprofessionals.org/redesign/publications/pubs_voicecurrent.htm)

• This page style uses a two-column format.
• Newsletter articles span a couple of paragraphs before leading the reader to the rest of the article via a link (Read the rest of this article).
• For ease of printing, the entire article is provided on the linked page and the user is linked to the part of the article continued from the previous page.
• Links are provided for submitting an article and feedback to the article.
  

General information page (http://www.usabilityprofessionals.org/redesign/about/about_structure.htm)

This page style uses a one-column format.

Articles (http://www.usabilityprofessionals.org/redesign/resources/res_real_policy_vote.htm)

This page style uses a one-column format and includes a 'Print this article' link.

Page Length

The length of any given page will depend primarily on page tpe:

Overview page (e.g., http://www.usabilityprofessionals.org/redesign/resources/resources.htm): Should be designed so that all of the text appear above the fold, whenever possible.

Articles: For lengthy articles, provide one or two paragraphs on the initial page, and a "Read the rest of this article" link. This link would take the user to the starting point of where they left off on the previous page; however, the full article would be provided on this new page to facilitate printing (including the initial paragraphs that appeared on the original page). Provide a "Print this article" link at the top. See this section for examples: http://www.usabilityprofessionals.org/redesign/publications/pubs_voicecurrent.htm

General information page: Page length will vary depending on the amount of logical content. For pages longer than approximately two screenfulls, provide a Table of Contents at the top with in-page links and "back to top" links at appropriate, visible places within the page.

Text Hierarchy

Other Notes for Entire Site

• Use photos whenever possible (e.g., contacts section, in Newsletter, etc.)
• For anything that's news-like, use a newspaper-like look (columns, titles, photos, etc.). This will apply to the Voice and User Experience..
• Attend to internationalization for phone numbers, time, etc.

Navigation

• Consider using a callout box for related links (see, e.g., http://www.usabilityprofessionals.org/redesign/chapters/chaps_chaps.htm).
• Search: On every page, atop nav bar. Make it section-specific, including a "Members Only" category..
• Use lefthand navigation bar for links to second-, third-, and fourth-level categories.
• Do not use any lower level than fourth-level categories. (i.e., three levels of links in the nav bar).
  • Table sizes in nav bar will be 150, 130, 110 pixels wide, respectively.
• The navigation bar should represent categories of information. Individual articles should not be links in the lefthand navigation bar. They can instead be included in a table of contents in the body of a page. TOCs should be a single column wide. (see for example http://www.usabilityprofessionals.org/redesign/resources/res_about.htm)
• In-page navigation should not be accomplished with links in the lefthand navigation bar. They should instead be in a table of contents in the body of the page.
• Links to locked (members only) sections should be provided below the navigation bar on each locked page (see for example:)
  http://www.usabilityprofessionals.org/redesign/members/mem_virtualaddress.htm

Naming Conventions, Headers, Footers, and Introductions

• File names: File names should reflect the architechure. For example, resources.htm is a first-level category. res_real.htm is at the secondary level. res_real_voing is a page that is at the third level.
• Page names: Header names should reflect second-level category plus everything after (similar to breadcrumbs). See: http://www.usabilityprofessionals.org/redesign/resources/res_real_policy_vote.htm
• Page introductions. Place introductory sentences in the next cell after the header. Use a colon : after introductory sentences (e.g., "Here is some information about usability:")
• Area headings on the Overview pages are linked text leading to the specific area section. See: http://www.usabilityprofessionals.org/redesign/resources/resources.htm
  
• Footers on each page contain UPA contact info, a link to Site privacy info and a link to the e-mail address for UPA, as well as copyright info. See:http://www.usabilityprofessionals.org/redesign/resources/resources.htm
  

Section design

The following are the urls for the various sections. Note that the site visual design is not necessarily reflected in the following. The following does reflect the section structure vis a vis navigation, categories, general content, etc.

1. Home page:
http://www.usabilityprofessionals.org/redesign/home/

2. Member forms:
http://www.usabilityprofessionals.org/redesign/members/mem_login.htm

3. Membership Directory:
http://www.usabilityprofessionals.org/redesign/people/peo_memdir.htm

4. Usability Resources:
http://www.usabilityprofessionals.org/redesign/resources/resources.htm

5. About UPA:
http://www.usabilityprofessionals.org/redesign/about/about_purp.htm

6. Chapters, Committees, and SIGs:
http://www.usabilityprofessionals.org/redesign/chapters/chapters.htm

7. UPA Publications:
http://www.usabilityprofessionals.org/redesign/publications/publications.htm

8. Conferences and Events:
http://www.usabilityprofessionals.org/redesign/conferences/conferences.htm

9. People Pages:
http://www.usabilityprofessionals.org/redesign/people/peo_cons.htm

10. Resources (incl. job bank):
http://www.usabilityprofessionals.org/redesign/resources/resources.htm

11. UPA Store:
http://www.usabilityprofessionals.org/redesign/store/store_posterbooks.htm

Glossary

• Internet: Always capitalized
• Web: Always capitalized when referring to The World Wide Web. When used as a modifier (e.g., web organizations) it is not capitalized
• Web site: Should be two words.