Foundation Tier

No background styles or colours should be used.

Black on white is the preferred presentation for contrast and printing ease.

Use only one colour of ink, preferably black.

More than one colour of ink must be justified by an increase in form usability and no impact on accessibility (or alternative provided).

Use Arial as much as possible.

Use font families instead of a single font.

For example:
style="font-family: Arial, Helvetica, sans-serif;" instead of a single font style="font-family: Arial."

This trick will ensure consistency across platforms. When a font family is used, the browser looks for the first font in the list; if not found, it looks for the second and so on. So on a Windows machine Arial would be found; on a Mac, Helvetica would be found. Sans serif is a generic catch-all that works on all platforms.

Use standard fonts.

You want to be sure the user's computer has the font otherwise the page will not display as anticipated. At some point, web pages will be able to attach fonts to be downloaded with the page. Until then, it's best to stay with standard fonts. Below is a list of common families:

Times New Roman, Times, Serif

Arial, Helvetica, sans-serif

Courier New, Courier

Information Tier

Title should be in bold caps with a font size of 12-14 point.

Place title close to the top of the page, consistent with other forms.

Left justify title.

Limited use of graphic elements is recommended because of the impact on file size.

Use a picture format that is easily displayed by most browsers.

Form number and revision number may be included in the footer.

Be aware of the printable area of the page.

Use a font size of 8-9 point.

Left justify footer/header text.

When required, instructions should be clear and concise, and presented in a way that's most helpful to the user while still meeting the format requirements.

Instructions must be included as part of the form and not physically separated.

If possible, don't have the instruction page print when form has been completed unless the user requests it.

Instructions must include clear steps to complete the form, and print the completed form, with directions on where to send the form and how to include payment or attachments, if necessary.

Privacy statement to be determined, depending on type of information collected.

Interactive Tier

Place before field for accessibility.

If this is not possible, position labels immediately above and to the left of the field. This allows screen readers to announce the upcoming field.

Not all fields require help. Certain obscure or uncommon data elements will benefit from some guidance. Fields commonly confusing for users include:

Dates (entry of MM-DD-YYYY or DD-MM-YYYY)

Acceptable government format is the latter - DD-MM-YYYY.

A Help button should be displayed at the top right corner of the webpage. There should be only one Help window for each form and it should launch in a new window, which the user can close easily (ex: with a Close Window button).

Reasons for a help option:

• Place task-related information at the top of the screen. (ex: state the main reason for doing this task or purpose of the screen).
• Reference any grouping(s) found on the screen (ex: other activities).
• Include specific instructions for fields.
• Other user assistance may include Help, Help desk number, Contact us, Mail box, or FAQ's.

Minimize errors and recovery time

One of the best ways to minimize users' navigational errors is to ensure that the user-interface design maintains an overall level of consistency.

Here are some other ways to reduce the number and impact of user- errors:

• The design should provide as much user assistance and guidance as possible. Guidance can include limiting the number of options or providing conditional entries. Ex: If the user needs to enter a date that has a certain format, displaying that format eliminates the possibility of entering any incorrect data. (ex: DD-MM-YYYY)
• The use of 'check digits' allows users to verify information against a list of acceptable dates. This can be used to accept or reject an entry.
• User assistance include pull-down menus, prompts, FAQ's and Help screens.

The number of errors made by users, and their time to recover, can be evaluated through testing for various scenarios.

• Grouping can be used to keep functional units together
• Two of the most effective ways to group elements are by proximity and similarity.
• The grouping of similar elements reduces complex information into manageable portions that users can more easily understand.
• Information should be grouped into logical chunks to help users identify and locate relevant information quickly and easily.
• Proper use of spacing and alignment (also referred to as spatial logic) can produce effective grouping.

Alignment

• Objects in alignment create a visual connection even when separated by large distances.
• Using alignment, screens can be broken up into several areas of visual interest.
• Text columns should be left aligned.
• Numbers should be right justified.
• Numbers that contain decimals should be aligned based on decimal position.

Standard Controls Use

Data can be entered using a variety of controls, including text boxes, option buttons, check boxes and drop-down combo boxes. Selecting which one to use depends on several factors (ex: user keyboard and mouse skills, speed of entry, need for more extensive prompting.

Here are some guidelines to follow when choosing controls:

• Use a text box when the information is extremely variable, such as names and addresses.
• Use a text box with an associated lookup dialog when there are more than 20 choices and no room in the window for a combo box, or when the user needs to specify criteria to narrow down the number of valid choices.
• Use a drop-down combo (box instead of option buttons) when there are three to six choices and space is limited; users are already using the keyboard for entering other data for this task; or users don't need to type additional unlikely choices.
• Use a drop-down combo box when there are a limited number of likely choices (about 20 or less) and users need to type in additional unlikely choices.
• Use option buttons when there are two to six choices and space permits. Use access keys for the choices in each group to ease rapid keyboard selection; for instance use Y and N access keys for Yes and No option buttons. (Even in keyboard intensive tasks, option buttons are more effective and less prone to errors than keying the entries).
• Use option buttons without an initial default choice when there is a business reason to ensure that the user explicitly makes a choice.
• Use check boxes when users can select none, some or all of the choices. (Even in keyboard intensive tasks, check boxes are usually preferable to a series of text boxes requiring Yes or No entries.)
• Use a combo box or list box when there is enough room in the window for a list of at least six items.
• Use a drop-down list when there is not enough space in the window for a full list box and users can only select a choice from the list.

For accessibility and general ease of use, ensure the users can click anywhere on the entire label area containing the box or button. This reduces the amount of precision required when selecting the choice. Otherwise, this task could be very difficult for visually challenged people.

Interactive Tier

Format the capture field to nine digits and no spaces or special characters.

Social Insurance No. (nine digits, no spaces)

Maximum 40 characters including spaces.

Provide formatted input areas to ensure information is captured in a consistent manner.

Four to five lines of address information are required to accommodate all formats (civic, post office box, rural route and general delivery).

Use Canada Post guidelines when formatting addresses on forms to accommodate mailing requirements of Canada Post. (Canada Post guidelines http://www.canadapost.ca/business/tools/pg/manual/b03-e.asp)

General collection of personal information should be displayed:

Certain circumstances will require that you expand on this information. Plan to include more detail when referring to name information (ex: hyphenated names, prefixes and suffixes, professional or other designations)

Format 999-999-9999

Phone numbers are common, but which number is required depends on why you're collecting the phone number. Ensure there is a need to collect multiple phone numbers. (Work and cell phone numbers are more likely to become out-of-date than home phone numbers.)

An alternative to collecting phone numbers is to designate the field as the primary contact number and indicate what type of number has been provided. For example, if the primary contact number is the home phone number, if the type would be "home." Use an alternate contact number too (ex: work number.) Leave room at the end of the work number to accommodate an extension number.

Numbers should be right justified.

Numbers that contain decimals should be aligned based upon the decimal position.

Currency: In Canada, the national symbol is $ and the international abbreviation is CAD. The United States uses USD. Please adjust for appropriate spacing where applicable.

All date fields should follow the Canadian format standard for date, which is day, month, year. Ensure the form indicates that the spaces are to be filled with either the numeric month or the numeric day.

Date of birth (DD-MM-YYYY)

Format: 2:00 p.m.

Keep in mind the French format uses the 24 hour time clock; adjust your spacing accordingly (ex: 14 h.)

Text input areas should be large enough to capture all required information.

When providing space to capture electronic text, make sure there is also enough space for written text information, as the form may be printed and completed by hand.