Design Guidelines

General Principles

Some basics:

• Don't design from the "inside (looking) out". Take the customer perspective.
• Speak naturally. Use "the rhetorical you" rather than "users". (Would you want to be called a "user"?)
• Use non-jargon-laden terms whenever possible.

The novice wants to be helped and guided along.

• You should be "hand held" through a set of default procedural paths without having to make too many choices. 

Differentiate, organize, guide.

• Determine a "hierarchy" for the display of information.  Visually emphasize the more important information.  Subsidiary "support" buttons, graphics and icons should not visually compete with the more important information. 

Consistency = credibility.  Stability breeds confidence.

• Maintain consistent and pervasive "stylesheet" of interface behavior and display attributes (color, text attributes, position, controls, navigation & procedure).  Use consistent terminology & instructional syntax within pages, among topic areas and throughout the site

Redundancy across media forms reinforces comprehension.

• Icons, sounds, textual cues and instructions aid the customer in understanding the information.  Present the same information in different forms (text, image, color, sound). 

You should never feel alone when using the software.

• Provide proximity-sensed context-sensitive Help Info and step-by-step procedurals. 

Guidance - not Distraction.

• Color should be applied selectively, conservatively and with care. 

 

Terminology

Client  The Instinet department or organizational group which provides the content for a topic area on the intranet.
 
Customer  The Instinet employee/viewer who is using the intranet service.

Site  For purposes of this document, this term refers to the structure and content of the Intranet service.

Topic Area  The content of the site is organized into topic areas.  The topic area is a coherent group of information (it may be one or more pages).  Topic areas may be nested to several levels.

Home Page  The main or “top” access point for entering a Topic Area.  Usually contains an overview of the topic and access to subsidiary pages or topic areas.

Welcome Screen  The main or “top” access point for entering the entire intranet service.  Usually contains an overview of the service and access to the primary topic areas.

Service Utilities  The site provides a set of tools (search engine, site map, help info, etc.) which assist the customer in using the service. 

Site Map  A conceptual map of the hierarchical tree structure of the intranet service.  Clicking on an item in the structure provides direct access to that page.

File The electronic “pages” on the intranet are stored and retrieved as files and a long electronic file may be experienced by the customer as containing several “pages”.  We use the term “file” to refer to the electronic data chunk which is retrieved by the browser.

Page By convention a “page” in the printed world is a fairly modest chunk of information, usually about 200 words. The scrolling browser interface allows for an individual electronic file to be quite long, but the practical norm is to break long documents down into more manageable chunks (For example, a set of “table of contents” links might allow the user to jump to a particular section of a particularly long file).  Thus, the customer may experience two different sections of the same file as being different “pages”.  We use the term “page” to refer to a modest chunk of material.  It may be a whole file itself or only part of  a file.

Link Any “live” element which, when clicked, causes something to happen.  This may be a button, a graphic hotspot or a text hyperlink.

Site Design

It is very important that the high level structure of the site is designed before any pages are actually created.  The process of organizing the information on a site should result in a description of all the pages that  will comprise the site and how they are  linked together. 

The Site Structure

Although not mandatory, it is good practice to organize the objects on the site in a hierarchical tree structure. Don’t dig the roots of your tree structure too deep.  No page on the site should be more than 6 hyperlinks away from the site’s Welcome Page.

Topic Areas 

A topic area is a coherent group of information (may be one or more pages).  Topic areas may be nested.

Landmark pages

Within the tree structure hierarchy, “landmark” pages provide reference points from which to navigate the site.  The site’s landmark pages must be optimized for efficiency since they will typically be the most frequently requested pages.  Landmark pages should be “single screen” (i.e. viewable without scrolling).  They provide an introduction to the material below them in the hierarchy.  Example landmark pages are:

Home page is the main entry point to a major topic area on the site (which usually contains several pages or sub-topic areas). It should provide a brief description of the contents of the topic area and links to those contents, as well as to any sub-topic areas within it.

Welcome page is the main entry point to the entire intranet site and is usually the first page a user sees (It is the “top-level” landmark page). It should provide a brief description of the content areas of the site and links that lead to all the first-level topic areas on the site.

Content pages

The real informational “meat” of the service resides in the Content pages.  These pages are scrollable, but should not exceed 4 or 5 “screenfuls” of information.

Page Structure

Every page contains at least two major areas:  the header and the body.  Single-screen landmark pages are likely to have only two areas.  Scrolling content pages will usually include a footer and may also use a sidebar.

Header

The “header” area across the top of the page (often called a “banner”) generally displays the title for the current topic area and provides navigation links to other topic areas at the same level or above, as well as to the service utilities.

Footer

The “footer” area is a banner which appears at the end of a scrolling (content) page.  It repeats the navigation links offered in the header, but is usually not as graphically sophisticated.

Body

The “body” area contains the informational material, the content, which is the real focus of the page.

Sidebar

Sometimes a “sidebar” is included as a column on the left side of the body area (usually in a scrolling page).  It provide “table of contents” links to subsections within the scrolling page.  This is especially useful if the scrolling page is quite long. Even without active linkages the sidebar may be used simply to provide attractive layout and design continuity.

Navigation and Links

Banner (header)

A banner must appear at the top of every page.  It should provide sufficient information to enable a customer to identify the page as belonging to the Intranet (the Instinet logo) and to know what Topic Area they are in (a textual or graphic identifier).

The style of the banner should be consistent throughout the site.  The certain design elements of the banner will probably change from page to page, but the overall layout and design characteristics of the banner should remain consistent across all banners.  NOTE: A common banner style for our Intranet service is available from (directory address)

The banner should also provide a common set of on-screen tools for navigation.  In the banner these links usually appear as graphical buttons illustrated with icons and/or text.

•      
• Mandatory
• link to the intranet Site Map (which provides universal access to any page in the service, help information, a search engine and feedback to the Webmaster)
• go up one level in the hierarchy of the tree structure

Recommended

• “lateral links” to other topic areas at the same hierarchical level

NOTE:  the lateral links may also be physically located in a “sidebar” to the left of the content area.

 

Footer

Since navigation links will likely be lost if the customer scrolls down the page, the navigation tools must be replicated at the bottom of the page.  These do not need to be as graphically sophisticated as the tools in the banner, and can be displayed simply as a series of text hyperlinks separated by vertical bars (the “pipe” character on the keyboard).  Display Format:

|  Choice One  |  Choice Two  |  Choice Three  | ……. |  Last Choice  |

You also may wish to display the  text hyperlinks as items within a bordered HTML table, which gives the appearance of a series of buttons.  Display Format:

•  

Text Hyperlinks

For the most part, hotspots within the body of  the page are text hyperlinks, although they may also be activated by clicking on a graphic. Although not exactly a style issue, it is important that hyperlinks do actually point to something. Automated methods of checking that links within a site are still active (unbroken) should be implemented and links to external  sites need to be checked manually every so often.

• The default color for a text hyperlink is dark blue.  HTML format:

 

<BASE LINK=NAVY VLINK=PURPLE>
     

• Text hyperlink labels must be meaningful - for example links must not be labeled with “click” or “here”.  Instead, incorporate the hypertext in a sentence.  Page Display format:

“Information about This Topic is now available.”

•  
• Text hyperlinks should ideally appear early in the text body of a page so they can be seen before a user scrolls down the page.
•  
• The number of text hyperlinks on a page should be kept to a minimum as they can become a distraction.

Sidebar

The sidebar appears as a column on the left side of the body area (usually in a scrolling page).  It provide “table of contents” links to subsections within the scrolling page.  This is especially useful if the scrolling page is quite long. Even without active linkages the sidebar may be used simply to provide attractive layout and design continuity.

 

General Rules about Links

• Links to other sites outside of the intranet must be explicitly marked to inform the user that they will be leaving the site and can no longer rely on the intranet’s navigational aids.
•  
• Links to large files or other large objects, which might take some time to download, must contain an appropriate warning.
•  
• Relative links should be used in preference to absolute links since they make documents more portable.
•  
• A ‘slash’ must  be inserted after the object name if a directory is referenced in a link, since some browsers do not construct the URL properly without it.
•  
• Links with the labels “return” or  “back” should be avoided since they assume that the customer arriving at the page in a linear fashion. How the customer arrived at the page will depend on a number of variables, e.g. word searching, a hyperlink from another page etc.
•  
• Link label text should match the title of the target page (at least in part). For example, if the  link text is “Travel” then “Travel” should also appear in the title of the target page.

Page Design

Pages must be well designed in order to look good and perform well (in terms of the length of time they take to retrieve). A consistent approach to page design (common logos, icons, navigational bar, background colors and page layout) is needed in order to create a common look and feel on a Web site.

Look at Page Design as Graphics

We use several sets of graphical attributes to give organization and meaning to complex documents.  Even a page which is exclusively made up of text is first perceived as a graphical layout. Design effective visual cues and use them consistently to ensure a page that really communicates.

 

Grouping      The blank “empty space” around text, titles and graphics (indentation, boxing, alignment and margins) helps to group information into discretely identified objects.

Ranking        The ordering of the information objects (by physical positioning, size, colorfulness or contrast) allows us to rank the objects as to their perceived importance or sequence.

Sorting          The shared graphical characteristics (color, shape, size, related icon, etc) help us to order the information into categories.

 

Clarity, Consistency and Redundancy

Reinforce the information on your pages by using consistent terminology and repetition.

•  
• Use similar terms and phrases when referring to similar actions. 
•  
• The label of the text hyperlink you click on should appear in the title of the linked page you go to.

• Don’t be vague, especially when giving directions or explaining.  Repeat the complete name of the issue at hand rather than using “this”.

• If you use a graphic (like a text style or bullet point) to identify a particular type of information, then repeat the graphic consistently with all information of that type.

 

Technical Display Issues

All pages must be viewable at a minimum size of 600 x 500 pixels per screen with a Windows default resolution of 256 colors. (These figures to be verified)

Every page must have a meaningful HTML title (<TITLE>) identifying the file’s origin and the subject matter. This is extremely important since the title is the only identification of a page in a browser bookmark file. Related pages should be given the same title distinguished by subtitles.  HTML Format:

<TITLE> This Topic </TITLE>
<TITLE> This Topic / Subtopic A </TITLE>

Landmark pages should be no longer than a single screen full when viewed on a high resolution computer screen.

Scrolling Content pages (as opposed to landmark pages) should not be longer than about three screens fully maximized when viewed on a high resolution computer screen (note this might increase to about 5 screens on a low resolution screen).

Scrolling Content pages should contain a “last modified” date in military format e.g. 10 January 1996. This date should appear at the top of the page rather than the bottom to provide an immediate indication of the age of the information on the page.

 

Page Margins

The body of the page content should be encased in tables in order to ensure adequate margins.  The width of the table should be proportional to the size of the screen so that the margins remain even when the browser is resized.  We recommend a table width of 80-85% for a single column of content material.  The page margin table should always be centered.  HTML Format:

<TABLE WIDTH=90% BORDER=0><CENTER>

Place coherent sections of content (both title and body) into their own table.  This will ensure that the content will appear grouped together on the same page when printed.  Grouping a section of text within its own table also makes it easier to edit or move that section of text.

 

Tables

Tables of data often require a set non-resizable minimum width in order to be readable.  We recommend a width of 600 pixels.  HTML Format:

<TABLE WIDTH=600><CENTER>

Text & Background

Font Type

Currently font types cannot be fully controlled in HTML and are browser specific (i.e. they can be changed in the browser by the user, but not by standard HTML mark-up). At present the only way to control font type is by storing the desired text as a graphic file. However, you should consider the internationalization issues and the impact on the number of graphics files and their size before choosing this option.

Font Style

Capitalize the first letter  of major words in all titles.  Large bodies of text which are in all caps are difficult to read and should be avoided, although all caps can work with short titles.

Boldface is the most effective way to draw attention to text without using color or changing text size.  Bold face implies weight and importance.

Italics are a great secondary way to emphasize text.  Italics imply action.

Underlining is reserved in the browser to indicate text hyperlinks and should generally be avoided.

Text Readability

• Maximize the contrast between text and background.  Don’t put dark text on a dark background, light text on a light background, and generally avoid middling level text and backgrounds.  The contrast level (darkness vs. lightness) should preferably be at a ratio of  7:1.

• Blinking text can be quite annoying to the user and is not an HTML standard so should be avoided.

• Use indentation, bullet points, a modest  increase in size, or other graphical effects to draw attention to text.  Colored text can be very distracting and is often difficult to read.  If you wish to use colored text, use a color which does not have too much chroma.

• Don’t make your titles too big or too flashy: They are not necessarily the main focus of a page.  Remember that the customer is probably most interested in the content of the page. 

Background Patterns

As a general rule you don’t want the background to compete with the foreground for the customer’s attention.

• Avoid “busy” or highly patterned backgrounds. 

• Avoid horizontal patterns..

• Keep background patterns within a limited range of hue (color) and value (darkness).  Think of the background pattern as a “watermark”:  It should be subtle and unobtrusive.

• Go extreme in size:  The background pattern should be either tiny or huge so that it does not compete with the text.

Color

Use color sparingly.  The general rule of thumb for page design is: 3 : 3 : 3
In a single page you should have no more than:

3 different Text Sizes
3 different Font Types
3 different Colors

Color is very powerful.  Avoid high-chroma (very colorful) hues.  Grayish colors will attract the eye without distracting.

Colors must be limited to those which will display cleanly on the system.  List of acceptable colors:

Graphics & Images

Images form an important part of Web pages, giving color and style to what would otherwise be text-only documents. However, images typically account for a higher share of the bandwidth than the text itself and care must be taken so that accessing pages with images over medium or slow communication lines is not sluggish. You must also remember that the display of graphics may be constrained by the customers’ hardware and the results may not be quite as you intended.

Guidelines for Images

Images that are used several times within a document must be referenced in the same way so that browsers can cache them for re-use, thus saving on downloading time.

GIFs greater than 4kb must be interlaced allowing images to be viewed progressively. On slow lines this gives more opportunity for users to decide whether to move on or wait for the image to completely download.

• Always use the “ALT=” attribute within the <IMG> tag. This will provide a text alternative to the actual image for browsers that do not support images.  HTML Format:

<IMG SRC=”mypic.gif” ALT=”A picture of me”>

• Always include height and width attributes in the image tags so that the file’s text can be displayed while the images are still being retrieved.  HTML Format:

 

<IMG SRC=”mypic.gif” ALT=”A picture of me”>

• Images should be kept small:

The total size of image files in a single page should not exceed 30KB
A page should have no more than 6 different in-line images
           

• A textual link must always be placed underneath a clickable image map because links from the image map are not indexed for a word search.
  

 

Individuals mastering these diverse disciplines are abundant, but not so those capable of inventiveness and less so those capable of subordinating that inventiveness to a rigorous and systematic plan.