Site Structure of Web Applications

There are four types of pages used in our website structure: homepage, topic page, transaction page, and content page. It shows the site structure and how information flows between these pages. The page types are defined as follows:

• Homepage contains categories that direct to topic pages.


• Topic pages serve as an intermediary step between the homepage and transaction/reference pages.


• Transaction pages contain all Web tool applications.


• Reference pages contain on-line contents.

Page and Size Grid

We design all web pages with the fixed page size of 760 pixels to support monitors of 800 x 600 pixels or above. Many users still use monitors of 800 x 600 pixels. This requirement ensures these users to be able to view the pages without horizontal scrolling. This requirement also helps the readability of the pages when viewed from a full-window browser on monitors with resolutions higher than 800 x 600 pixels, because a page with long lines of text reduces the readability of the content.

We design all pages to fit the page grids as defined below.

• Top row width is fixed at 760 pixels.


• The top menu bar contains page title, related transactions, related reference pages, and a help link (optional).


• Left hand navigation column width is fixed at 170 pixels max. The left hand navigation column is an optional design for within-application navigation area.


• Right hand information box width is 170 pixels max. The right hand information box is an optional design for key information related to a Web application.

Page Content

We avoid requiring the use of horizontal scroll bars. If page content is wider than the browser window, a horizontal scrolling bar will appear. Users often become annoyed if they have to manipulate a horizontal scrolling bar to see content. Designing the page size with the max 760 pixels will avoid the appearance of the horizontal scrolling bar when a full browser window is open on a monitor with 800 x 600 resolution or above.

We avoid requiring users to scroll vertically in order to determine page contents. Helps users recognize immediately whether the subject of any given page interests them. Key information that is critical to identifying page contents needs to be visible without vertical scrolling.

We use standard page separator for separations of contents on one page. Break up content on one page into meaningful and functional chunks using the recommended tabs wherever necessary. Use the separator only when there is more than one functional chunk in one page.

Our contents are divided into multiple pages in an organized way to minimize vertical scrolling. It Increases readability and decreases loading time. We design pages no more than three vertical scroll bars, wherever possible. We also provide an internal link (“Return To Top”) for a page longer than one vertical scroll bar. The content of a document are divided into topics that make sense alone but function as part of a coherent and organized document.

Decide on long pages versus short document pages to meet user needs. The following table summaries the decisions for selection of long vs. short document pages.

If users ...	Then we should ...
Want to find specific information quickly	Create many links to short pages
Want to print all or most of the content to read offline	Use one long page, or many short pages and the first page with an option for a print version that uses one page
Will be loading over slow modems but don't need all pages of information	Create a comprehensive content page

Page Identifiers

Each page identifies itself as belonging to your organization, company or corporation. A consistent and predictable visual identity gives a site a sense of unity and reinforces the users' experience that they are rooted in a certain place.

Each page uses a standard top menu bar. The top menu bar contains page title, related reference, related transactions, and a page help link. Users can access the related reference/transactions using mouse-over. This integrated design helps: (1) create a consistent design across all transaction page; (2) remove the related reference/transactions from the left hand column and provide more space for page content design; (3) enhance user experience as they have learnt from other Intel intranet sites (e.g., the experience of using mouse-over).

The titles we make are clear and specific enough for all pages. Helps orient users as they browse a page or scan favorites lists, history lists, and search lists for particular URLs. Titles appear at the tops of browser windows, act as identifying text on user-designated favorites and history lists, and used as key words in search. The standard title format is: “application title – page subtitle” (e.g., My Home Page).

We provide a standard footers for all pages. The standard footer consists of a horizontal rule, and three lines of text.

Text

We use Arial font with minimum 10-point size for page content text. Maximizes design control over the appearance of text and maintains readability across different browsers. Users may modify their browser preferences to display font types and sizes of their own choosing, and these choices are not possible to anticipate. Arial with minimum 10 points size is one of the most readable fonts.

We use black text for page content text. Maximizes the contrast between the text and background to ensure readability. Black text ensures high contrast when used against light colored background (such as light gray for highlighting/shading purpose). Use blue font for hypertext links only.

We use bold letters to emphasize certain body text. Prevents users from confusion. We do not use underline for emphasis because users typically assume underline as a hypertext link. We reserve bold text for the most important information and use bolding sparingly. In general, we use bolding to highlight some key words or a single sentence and avoid using bolding for highlighting a whole paragraph.

We don’t use Italics. Italics reduce the readability of Web pages. Current computer monitors use CRT and LCD technology. Different from traditional printing, most CRT and LCD monitors use a pixel-based display mechanism that may distort the perception of the diagonal lines of Italic text.

We don’t use all capital letters except for acronyms. Users have a very hard time reading all uppercase text, instead, we use mixed case text, and break it up into easily identifiable chunks.

We use caution when combining different types of fonts. It helps improve readability. Different fonts may be used for non-content text (e.g., titles, buttons, icon labels, and menu). A good rule of thumb is to use no more than three different font styles on one page. Use families of type styles to create a consistent visual look and to provide visual unity.

We avoid color text except for hyperlinks. Because text color is associated with hyperlinks, we do not color text unless it is a hyperlink. Exceptions are: (1) text in graphics and titles; and (2) “Red” (#FF0033) font only in warnings or in case of catastrophic events.

Design standard text formats for all our pages are as follows:.

• Design all dates in the MM-DD-YYYY format.


• Spell out & ("and") and @ ("at") unless they are part of an URL, e-mail address, or a company/product name which already includes the symbol. For example, "@Home" and "S&P 500."


• The page title must be 50 characters or less.


• Use the symbols for "percent" (%), equations, and specific amounts of money ("$500," not "five hundred dollars").


• Start the page title with the information most specific to this page, beginning with the group of information to which this page belongs. A page explaining how to exercise stock options would start with "Stock Option Exercise," not "How To" or "Exercising."


• Use mixed case in page titles, beginning the first word and each important word with a capital letter.


• Abbreviate country names using country acronyms with no spaces or periods.

Page Format

We design tables or grids for multiple data rows. Provides a clear, logical layout so users can quickly scan, identify, and compare information. We're cautious when using table borders with dark lines. Overusing table borders might make it much harder to scan and read items in the tables. We use light background (Beige, #F5F5DC) for shading.

Num	Date	Payee
5098	10/31/03	Capital
5099	10/31/03	Funding
5100	10/31/03	Expense
	12/24/03	Shipping
	12/24/03	Freight
	12/24/03	Local Tax

We make paragraph text flush left. It improves readability. Text that is flush left is easier to read than text that is either flush right or centered.

Paragraph text is usually easiest to read when it is flush left.

Paragraph text is usually easiest to read when it is flush left.

Paragraph text is usually easiest to read when it is flush left.

We keep lists relatively short. Lists are commonly used in Web pages. HTML supports a variety of alternatives for presenting lists. However, all lists quickly loose their value if they appear as long chains of random items.

We use caution when choosing customized graphic bullets. Non-standard HTML bullets and customized graphic bullets will not be viewable for users using text-only browsers or browsers with deactivated graphics.

We provide a printing option. Supports users to print out a page they want, such as a data summary page and a confirmation page. The print version should only cover the main content without other unnecessary information (e.g., top navigation portion and a left-side navigation column). Allow uses to select sections for a long document before printing.

Graphics

We design graphics within boundaries of an "image-safe" area. We ensure that users can see graphics without cutting when graphics are printed out. We limit graphic image to the following dimensions.

• Graphic "safe area" dimensions for layouts designed to print well:
  • Maximum width = 535 pixels
  • Maximum height = 295 pixels
• Graphic "safe area" dimensions for layouts designed to maximize screen usage:
  • Maximum width = 595 pixels
  • Maximum height = 295 pixels

We use alternative text for images. Many users browse the Web with graphics turned off, and a few users are still using text-only browsers. We use alternative text with all graphics so these people do not miss out on important elements of pages.

We produce graphics that will load quickly. Many users still access Web resources over relatively slow modems, especially for international users. We make graphic files small to speed loading. We use GIFs whenever possible since GIFs are usually smaller than JPEGs.

We use interlaced GIFs to give users a preview of the graphics while being downloaded. It allows images to start appearing in one-fourth of the normal time, which provides a perceptual effect that they load faster. Users can usually decide before the image has finished loading whether it is something they are interested in, whereas users must wait longer to make these decisions with non-interlaced GIFs.

We use progressive JPEGs to give users a preview of the graphics while being downloaded. It allows users to quickly see and comprehend something about the image before it has finished. Progressive JPEG images allow images to gradually fade into view like interlaced GIFs.

We use graphics for international use. Other sites are designed for international and multilingual users. We keep in mind when selecting graphics for international users: (1) the graphics are widely understood; (2) no offensive gestures; and (3) representations are universally held.

We use animated graphics only when necessary. Animated graphics may cause distraction to users.

We are cautious when designing icons. Icons are widely used on Web pages. Several rules follow: (1) Make sure that all icons are easily discriminable from each other; (2) Use short, descriptive textual labels next to the icons to indicate their function when necessary; and (3) Use the same icon for the same function consistently throughout all Web pages.