Standards Documentation

The purpose of the User Interface (UI) standards is to establish best practices for application/Website design.

Purpose

The purpose of the User Interface (UI) standards is to establish best practices for application/Website design. The primary audiences of: Information Architects, Development and Quality Assurance (QA) will benefit significantly from the development of core standards, as they will contribute to enhanced communication, reduced design time and a common knowledge regarding user interface design/user experience and functionality. All new products or products that will undergo /have undergone a major redesign will be required to comply unless otherwise specified.

Core UI standards will be able to be measured and enforced. Any given application (fitting the criteria listed above) will be able to be reviewed against them to determine its degree of compliance.

The UI Standards document is intended to be a global document for Web sites/applications must follow. In addition, it is expected that each Web site or application created will also have an accompanying style guide which will further define elements specific to each (e.g. font family, colors, branding). References to these style guides can be found with each product’s documentation.

1.1 Supported browser / platform specifications

All Web sites must be designed to support the W3C standards for HTML, CSS and DOM and be coded for device and platform independent.

Baseline capability will target Internet Explorer 9.x for Windows.

1.2 Target Resolution

1024 x 768 pixels (px); design for this resolution must accommodate for screen pixels used by the browser’s interface (browser chrome).

2.0 Links

Use links within the document as needed, to provide navigation to related articles or documents or to related Web sites. Do not underline headings that are not hypertext links.

3.0 Forms & Interaction Guidelines

This section includes best practices for the layout of forms and other interaction patterns.

3.1 Use Familiar &  Real World Field Layouts

Mimic the users’ real world experiences and expectations in laying out form fields. Present information in the same logical format within the application as it appears elsewhere in the users’ world. For example, the layout of the name and address on a form would appear the way it does on an envelope.

Example:

Location of all page elements/components should stay consistent throughout the application. For instance, if the location of the search box of a Web site is at the top-right of the screen on the homepage, it should also be at the top right on every other page where it appears.

Documentation Samples

• Evaluation Users' Tryout and Presentation
• Evaluative Instrument Critique
• Edited - Site Evaluation
• Content Approval
• Page Analysis
• Content - Tone of Voice
• Competitor Analysis
• Process Checklist
• Tutorials
• Event Promotion Tasks
• Project Approval
• Wordpress Usage Tutorial