eTorF website-implementation-rules

Geodesic Design Lab 22 February, 2012

MPAS Website

Implementation Rules

Geodesic Design Lab

2 MPAS Website

Table of ContentsCover Page.................................................................................................................................. 1Purpose of the Document.............................................................................................................. 5Control Selection Rules...................................................................................................................6

Enter data................................................................................................................................................6

Take an Action.........................................................................................................................................7

Set a Choice.............................................................................................................................................7

Set a Single Choice..........................................................................................................................7

Set a Single Choice..........................................................................................................................8

Choice from a list.....................................................................................................................................8

Make a Single Choice from a Short List (Between 3-5 choices)................................................8

Make a Single Choice from a Long List...................................................................................................10

Make a Single Choice from a Long List (> 5 choices)...............................................................10

Make a Multiple Choice from a List.......................................................................................................10

Select Items from Hierarchical Data Structure......................................................................................11

Cursor Movement......................................................................................................................12Cursor Placement..................................................................................................................................12

Cursor Movement..................................................................................................................................12

Standard buttons, tabs and links.............................................................................................13Navigation.............................................................................................................................................13

Working list Tasks..................................................................................................................................13

General Guidelines................................................................................................................................13

Data Entry and Display................................................................................................................ 15Instructions............................................................................................................................................15

Field Labels............................................................................................................................................15

General Format..................................................................................................................................15

Self-labeling Fields.............................................................................................................................15

Data Fields.............................................................................................................................................15

Entry Fields........................................................................................................................................15

Drop-down Lists.................................................................................................................................16

Checkboxes........................................................................................................................................16


3 MPAS Website

Radio Buttons....................................................................................................................................16

Required Entries................................................................................................................................17

Tabular Display......................................................................................................................................17

Column alignment.............................................................................................................................17

Row appearance................................................................................................................................17

Sortable column headers...................................................................................................................17

Table layout.......................................................................................................................................17

Grouping................................................................................................................................................17

Sub-Grouping.....................................................................................................................................18

Number Indicators.................................................................................................................................18

Special Field Formats.............................................................................................................................19

Dates..................................................................................................................................................19

Telephone Numbers..........................................................................................................................19

Messages and Feedback..............................................................................................................20Overview...............................................................................................................................................20

Error Message........................................................................................................................................20

What is in an error message, notification, or alert?...........................................................................20

Error Handling.......................................................................................................................................20

Field Level Errors...............................................................................................................................20

Messages – In line (Error Prevention)................................................................................................21

Confirmation Dialog...............................................................................................................................21

Confirmation Message...........................................................................................................................21

Notification Messages...........................................................................................................................22

General Guidelines for Wording Messages............................................................................................22

Pop-up Windows.......................................................................................................................23Overview...............................................................................................................................................23

Window Sizes.........................................................................................................................................23


Layout.......................................................................................................................................... 24Page Grids..............................................................................................................................................24

Description of Page Areas......................................................................................................................24

Tree Menu Area..............................................................................................................................24


4 MPAS Website

Working List Area............................................................................................................................24

General Principles..................................................................................................................................24

Text Layout............................................................................................................................................24

Capitalization............................................................................................................................. 26Capitalization Rules...............................................................................................................................26

General Capitalization Guidelines..........................................................................................................26

Font............................................................................................................................................. 27Font Specification..................................................................................................................................27


Color........................................................................................................................................... 30Web Color Palette..................................................................................................................................30

Basic Display Elements......................................................................................................................30

Text Color.........................................................................................................................................30

Form elements................................................................................................................................30

Tables / Working List......................................................................................................................30

General Guidelines for Selecting Colors.................................................................................................30

Limit colors.......................................................................................................................................31

Maintain high contrast....................................................................................................................31

Use color to draw attention and inform........................................................................................31

Account for color-deficient users...................................................................................................31

Guidelines for Tables and Lists..............................................................................................................31

Graphics..................................................................................................................................... 32General Guidelines................................................................................................................................32

File Format.............................................................................................................................................32

Background Images...............................................................................................................................33

Making Graphics Accessible...................................................................................................................34


5 MPAS Website

Purpose of the DocumentThis document details out the different data entry, control selections, operations and presentation as best usability practices. Some of these controls are not uses in the current system; these are for reference only should there be a new requirement in future.


6 MPAS Website

Control Selection Rules

Enter data

For any character-based data (E.g., Date, Name, Address, etc.).

If the data are… Then use this control Example

Single line Text edit field (editable text field).

Potentially multiline, with fixed number of lines

Several text edit fields.

Potentially multiline, with indefinite number of lines

Multiline text edit field. Notes, Event Note etc.

Note: Avoid horizontal scrolling of text edit window objects by making fields wide enough for 95% of the potential entries. If there is a very likely entry (>80% probability), include a default value.


7 MPAS Website

Take an ActionUser triggers a process or opens another window (E.g., Submit, Clear, Cancel).

If frequency of access is…

And the number of selections are

Then use this control Example

Rare Few (1-4) Buttons for expert users in a mouse-primary system.

Frequent Few (1-4) Common Button. (Use Java or Active-X for true default behavior, or use HTML 4.0 as an approximation method.)

Less Frequent site level

Few (3-6) Global navigation links

If frequency of access is…

And the number of selections are

Then use this control Examples (not from Mundu Sync)

Medium Few (1-4) Link List

Rare Many (3-8) Drop-down list and button.

Set a Choice

Set a Single ChoiceWhen the user selects an item as operational or not.

If an object is to be selected…

Then use this control Example

<80% of the time Check box.

="or" >80% of the time Check box with default selection.


Welcome <user name> LogoutAccount Settings | Downloads | FAQ

8 MPAS Website

When the user selects between two alternatives.

If the item is to be selected…

And the designer Then use this control

Examples

Translatable to single choice

Knows with 80% probability the user’s selection

Check box with default.

Does NOT know with 80% probability the user’s selection

Check box.

Not translatable to single choice

Requires selection Radio buttons. E.g. Merge Contact- Photo selection

Knows with 80% probability the user’s selection

Drop-down list with default.

E.g. Merge Contact- Name selection

If the item is to be selected

And the designer Then use this control

Examples (not from Mundu Sync)

Not translatable to single choice

Makes selection optional

Radio button with "None" selection.

# Does NOT know with 80% probability the user’s selection

Drop-down list with a blank “- -“.

Choice from a list

Make a Single Choice from a Short List (Between 3-5 choices)

If space is And data are Then use this control Examples (not from Mundu Sync)

Adequate Dynamic Single select list box (make box as tall as possible). This control is also applicable for variable actions on a list.


9 MPAS Website

Adequate Static Radio button.

Tight Static or Dynamic

Drop-down list box.


10 MPAS Website

Make a Single Choice from a Long List

Make a Single Choice from a Long List (> 5 choices)

If space is And data are Then use this control Example

Tight Dynamic Drop-down single select list box.

If space is And data are Then use this control Examples (not from Mundu Sync)

Adequate Static Menu.

Very Tight Static or Dynamic

Spinners to be used for quick selection and immediate small/tight changes


11 MPAS Website

Make a Multiple Choice from a List

If the list is Then use this control Examples (not from Mundu Sync)

Short (1-10) Check boxes as a menu.

Use “Select All” option to enable the user to make all selections in lesser time.

Long (more than 10)

Accumulator. (Java or Active-X for maximum functionality. Or, use HTML if server-side processing is acceptable.)

Select Items from Hierarchical Data Structure

If you have Then use this control: Example

Java or Active X controls E.g. Tree Menu in the Working list

Tree control (allows expand/collapse).


12 MPAS Website

Cursor Movement

Cursor PlacementWhen possible position the cursor in the top leftmost entry field. When the page is redisplayed (with data entered), the cursor should again be in the top leftmost position.

Cursor MovementAs a general rule, the user must press TAB to advance to the next field. The default order for tabbing through entry fields is left-to-right, and then top to bottom. Tabbing will bring users to fields and links on the page, and so always make sure that page layouts allow mobility impaired users to access the most logical and highest priority items on that page.


13 MPAS Website

Standard buttons, tabs and linksConsistent labeling of functions makes an interface easier to learn and use. The following functions must be expressed using the following labels.

Navigation

Label Function

<< Back to Contacts Performs the same function as the browser Back button. Used only on search results pages where the only option for the user is to go back (E.g., a searched contacts page with Back link to return to the all contacts page).

Register Submits the Form to the server for processing.Search / Go Searches for and retrieves an item or items from a data source, based

on the specified search parameters. Displays the result of the search. Cancel Cancels the pop-over and returns to the originating page or menu where

the form was launched. Does not save entered data. Save Saves the data and returns to the originating page or menu where the

form was launched.Edit Edit in view mode enables the editable mode for forms Continue Continues to the next logical screen on the interface where the File

upload window is shown during the uploading process.New <Contacts/Events/Notes>…

It is primarily used to trigger the wizard of new entity creation.

Working list TasksLabel Function

Merge Used to merge the selected contacts. It spawns a pop-up “Review and Merge” so that the user can review the duplicate data before merging it.

Download Used when a selection of a number of entities is done and the user wants to download this selected entry to his/her machine.

Edit Used primarily in view only forms and notes table. It allows users edit the field entry and make appropriate changes.

Restore Restores the selected entities back to the main volume from the deleted content.

Delete Deletes the selected entities from the working list.Permanently Delete Permanently deletes the selected entities from the user account.

General GuidelinesUse the following general guidelines to decide whether a function is best represented by ‘button’ or ‘link’.

Use a button:

If a discrete function is to be performed on a collection of items on a page or to the page as a

whole (E.g., initiating a search with a “Go” button, accomplishing an action with “Delete” or

“Merge” button).

When the function is conceptually an action or computation, rather than a simple navigation.


14 MPAS Website

(E.g. Save, Submit, Sign Up, and Cancel etc.)

When a user is sending or pulling the data over the web. (E.g., Upload and Download Contacts)

Use a link: When the function is a Global navigation. (E.g., FAQ, Logout, Account Settings etc.)

To save space on the interface or a window stack.

For tertiary functions that the user is not likely to access often (E.g., help link icon).

Use buttons and links consistently (E.g., always show "Help" as a link icon and "Submit" as a button).

Navigation labels are always links.

Use a tab: When the function is for navigation from similar Interface structure i.e tables or forms or similar

lists. (Tabs are as per the table headers E.g., All contacts, Last synced, Duplicates, Deleted etc.)

When a large amount of data needs to be categorized for ease in viewing, use tab for Contact,

Personal, Work and custom information of a contact.

When using buttons:

Provide a default button on forms (i.e., the button is activated when user hits ENTER). If your

toolset supports it, indicate the default button with a highlight rectangle surrounding the button.

Generally, display push buttons that affect a specific field or part of the page adjacent to field or

part of the page they apply to.

Center the words on the button. Avoid making buttons with short words too small or too large

(E.g., not or , but ).

Height of the push button must accommodate the selected font.

Generally, use the same height for all buttons unless constrained by vertical space.

When showing links in running text:

Underline the text to indicate that it is a hyperlink.

Use a color change to indicate which links have been previously visited.


15 MPAS Website

Data Entry and Display

InstructionsWhen clarity demands it, include instructions within pages to:

Express the purpose of the form or wizard.

Describe procedures that span across pages. For example, ‘Uploading contacts’.

Set a user’s expectations for how long the process normally takes and to tell them what

information they’ll need before they start only on progress indicator. Such progress indicators can

be added in form of GIF images which can be dynamically displayed.

Place instructions in relation to the part of the page to which they apply:

Instructions for the whole page appear on the top of the page.

Left align instructions applying to only a portion of the page directly below the section or group

header.

Field Labels

General Format

Left align field labels within the column where they appear.

Apply standard Capitalization rules consistently.

Self-labeling Fields

Search is the self labeling field with ‘Go’ as a button next to it. It contains a ‘Magnifying glass’ to

make itself self explanatory

Apply Title case Capitalization rules consistently.

Data Fields

Entry Fields

Left align fields in column(s) on the page.

Always leave adequate space for the longest possible entry. Multi-line data entry fields are

permitted.


16 MPAS Website

It is better to make the field a multi-line input type, allowing at least three lines of space

and scrolling if there is more information than that.

For high-volume data entry applications, provide a default if the correct entry is known with>80%

probability.

Affordance messages helps in interacting with the data entry fields, such affordances can be data

Place the exclamation point icon to the right of the fields of errors.

Place the field related error below the entry field.

Data Entry States Presentation Interaction and Property

Free Entry Field no markup

Input with label value

E.g. Username, password

color macro for text italic text

Input mouse hover/clickE.g. Email, Address

stroke weight increases for border

fill color changes Input in error state

E.g. Password Re-confirm

border line weight increases border color changes to Red color macro for text with error

icon only for mandatory data fields

Search Box

E.g. Search Contact

color macro cancellation on the macro to

return to an empty state

Drop-down Lists

Left-align with other fields on the page.

For high-volume data entry applications, provide a default if the correct entry is known with>85%

probability.

Avoid the Internet convention of using one of the list items to label the list box or provide an

instruction.

Checkboxes

Left-align with other fields on the page.

Position text label to the right of the checkbox.

Use Sentence Style Capitalization.

Word checkbox labels in the form of a short statement to which the user either agrees (checks) or

disagrees (leaves unchecked).

Radio Buttons

Arrange horizontally or vertically.


17 MPAS Website

Left align with other fields on the page.

Position text label to the right of the radio button.

Use Sentence Style Capitalization.

Required Entries

Succeed required field with an asterisk, so it can be read by screen readers.

Ensure the form instruction area on the top shows what the asterisk connotes when it is used in a

form.

Tabular Display

Column alignment

Left align in most cases.

Align column headers to match the data below them.

If the data are fixed length and the column header is long (wraps in the second line), center the

column header.

Row appearance

To allow for easier scanning of data, use alternate row background colors.

Sortable column headers

If data can be sorted by a column header, indicate this capability by underlining them.

Highlight the appropriate caret for the currently sorted column header, indicating the sort direction

Table layout

Display-only tables don't need column lines if the column data are aligned according to the rules,

and not too sparse.

Grouping Group related fields, labels, and other design elements on the page to aid visual scanning. Use the following guidelines (as needed) to separate groups of items on the page:

Try to make the grouped items obey the same borders, both vertically and horizontally.


Asterisk in the mandatory field

18 MPAS Website

If needed, use thin lines (E.g., 1- or 2-pixel-wide, gray) to separate groups of items. To avoid use

of line, ensure sufficient white space is there between to adjacent groups.

Align groups with each other on the page.

Use a consistent structure with each group; for example, using group headers.

As a general rule limit the use of boxes, 3D panels, background color, or foreground color to group items

in the content area because their visual salience draws too much attention. Example below shows

necessary use of colors.

If push buttons or tabs apply to a function within a group, locate them inside the group. For

example, if a push button applies to a field, place it next to, or immediately below, the field.

Sub-Grouping

When more than five rows of fields occur in a group, use a sub-grouping line or a vertical space.

Where possible, use sub-grouping to indicate logical sub-relationships.

Limit the content organization to three levels of sub-grouping. If a more detailed level is required,

navigate the user to a new page focused on the sub-grouping and allow the user to drill down

from there.

Number Indicators If a number indicator is necessary:

Use the word "Number" if there is enough space.

Use "123" if there is not enough space to write the word "Number." Also make sure that 85% of

users will know that "number" is implied by “123”


All DuplicatesAll Duplicates Last Synced Search ContactsDeleted

Search ContactsAll DeletedDuplicates Last Synced

Grouped items

Selected Header

19 MPAS Website

Do not use "No.," "Nbr.," "Nmbr.," "Num," or any other word or abbreviation.

Special Field Formats

DatesDisplay

Display-only dates use a three-letter abbreviation for the month format (E.g., 03 Nov 1997). This

eliminates the need to include any specific date format.

On display, always show a four-digit year. Also, consider separating the date and year for an

unambiguous interpretation.

Entry

Allow entry of calendar widget.

Use standard order: day, month, and year. [DD MM YYYY]

Telephone NumbersDisplay

Do not use parentheses "( )" to enclose the area code. This convention is disappearing. However,

allow entry in free form. Example: +44 20 7953 4011

Entry

Use a single field for the entire phone number. Provide enough space in the entry field to allow for

user-entered separators (however, do not require separators).


20 MPAS Website

Messages and Feedback

OverviewMessages and feedback inform the user of system status and provide a response to his or her actions. The table below outlines when to use each type of message:

Message type Use when:

Error message The user has taken an action, but something went wrong.Confirmation dialog Verifying an action before committing it. Usually takes the form of a

Yes or No question (E.g., "Are you sure you want to permanently delete the selected contact(s)?").

Confirmation message A form or transaction is successfully submitted. Provides confirmation that the information submitted went through.

In-progress Indicator The user has submitted a transaction and the system response time is longer than 3 to 5 seconds.

Notification/alert Drawing attention to special information of which the user needs to be aware.

Error Message

What is in an error message, notification, or alert?Include three things in the content of an error message:

A brief explanation of what happened or what went wrong, in language that the user will easily

understand. Identify where the problem happened; E.g., in which field.

The reason for the problem or requirement, again in terms familiar to the user.

A recovery strategy that the user can adopt to solve the problem.

Examples: "This email is not registered with us. Please enter the complete email address used during reintegration. E.g. [email protected]"

Error HandlingAs a general rule, design forms to minimize the likelihood and possibility of errors. E.g., identify required entries, give good hints, and don't be fussy about punctuation requirements.

Following are the basic methods for handling errors:


mailto:[email protected]

21 MPAS Website

Field Level Errors

Use Field Level Error messages to indicate where errors occur within a long form, which allows

users to easily scan pages and quickly find the form fields in which they have made errors.

These errors are retrieved once the form is submitted.

Display of error message is the same as In-line error in Red Color.

Messages – In line (Error Prevention)

Use an in-line message to describe the input for completing an action (essentially used for error

prevention), which can help avoiding unexpected or undesirable error. Messages may describe

inputs format of the data entry in the mandatory field(s) or range violations for dates and data etc

An in-line message appears in along with the form below the field.

Display of error prevention message is the same as In-line message in Dark Grey Color.

Confirmation Dialog Use a confirmation dialog to validate a user action before committing the action when:

There is no way to undo the action.

The result of committing the action could have serious consequences.

The result of committing the action is likely to require significant rework to undo (E.g., deleting

several database records at once, logout).

The confirmation dialog does not have to appear in a modal dialog window. The key is that a choice is forced: either the user agrees to the action and continues or disagrees and goes back. Provide word confirmation dialogs in the form of a yes or no question and provide “Yes” or “Ok” and “No” or “Cancel” options from which the user must choose.


22 MPAS Website

Confirmation Message A confirmation message informs the user that an event has occurred. For example, the user could receive an acknowledgment that a form just submitted has been received by the system. Use clear, concise writing in the confirmation message. If the user will continue to work on the same page, display the message on the feedback line of that page.If there is no logical page after the event, display the confirmation on a dedicated message page entitled, "Confirmation." Highlight the feedback line. When using a full page confirmation:

Include a link to return to the page from which the form/wizard was accessed or a link to do

another transaction (whichever is appropriate).

Links to other likely navigation locations can be included optionally as well; however, these links

must be relevant and likely navigation choices for the user.

Notification Messages Use a notification message to call attention to alert or other important information that is not an error

message and is not feedback on a user’s action. Display and highlight the message on the feedback line.

General Guidelines for Wording Messages

When wording messages: Be concise and indicate which data field has the error.

Identify what was wrong with the entry or action.

Explain what the user must do to correct the problem.

Avoid jargon that will be unfamiliar to the user.

Be consistent in tone; polite is good. Remember that the user is having trouble when your

message appears.


23 MPAS Website

Pop-up Windows

OverviewUse pop-up windows to supplement information in a parent window without disrupting the user's task. For example, third-party or information provided with a plug-in (for example, Flash or Adobe Reader).

Window SizesUse the standard child window sizes as follows:

Approx One-third Sized Pop-Up (500x600) px^2 to display quotes, Symbol Look Up, or similar

information.

Approx Half-Sized Pop-Up (750 *x600) px^2 to display Detailed Help Screen.

General Guidelines Use a pop-up window to show supplementary information to the user such as Help text. Never

pop up a child window while the parent window is refreshing or loading.

Never pop up a child window from another child window.

Use Secondary windows to support the user's primary experience in the main browser window.

Design the interaction in a pop-up so that it does not divert users from their intended session

goals.

Provide links back to the main browser window where necessary and include anchor links in help-

windows.

Use the pop-up icon to indicate that another browser window will be launched. Use plain text links

to indicate contextual help on terms and labels that need definition or clarification.

The pop-up window should be smaller than the parent window. This allows the user to see that a

new window has opened on top of the parent window.

Limit the maximum number of windows open within an application to four, including the parent

window. That is the parent window plus three child windows are the maximum number of

windows allowed open at one time.

Provide appropriate titles for pop-up windows.


24 MPAS Website

Layout

Page GridsLay out the screen to optimize the efficiency of visual access. You can do this by using a standardized grid and making the body of the screen flow from the top left to the right, and down. Use a grid to maintain consistency across the various screen layouts for the different page types.

The diagram below shows an example grid system and the variations that can be developed from a single grid.

Description of Page Areas

Tree Menu AreaWhen used, a table of contents appears on the left side of the page. The table of contents is most often found on content-oriented pages and does not typically appear on transaction-oriented pages.

Working List AreaThis area is used to display different types of tabular data.

General Principles

The following guidelines will help ensure pages that are easy to read and use.

Lay out objects hierarchically left-to-right, top-to-bottom, to match the user’s expected task flow

(note that research has shown that on Web pages most users start by scanning the content area

first).

Limit the number of left edges on the page to simplify the appearance. Left align field labels, entry

fields, paragraphs, menus, lists, etc.

Use white space to break up the page and create groupings.

Text Layout Allow text to wrap to ensure legibility and accessibility. Design text areas so that wrapping does

not "break" the appearance of the page.

Ensure that the page can be easily printed and does not cut off critical information when printed.

If this is not practical for the design of the page, provide a printable version.

Avoid very short line lengths for long blocks of running text (E.g., <25 characters wide).


25 MPAS Website

Text is most easily scanned if spans 6 units. In exceptional cases, it can extend to 9 units.

Use the HTML heading tags (H1, H2, H3, etc.) to help clearly layout the content hierarchically. Do

not skip tag levels (E.g., going from H1 to an H4), as this will cause problems for screen readers.


26 MPAS Website

Capitalization

Capitalization RulesUse the following capitalization rules for the various display elements. Apply them consistently on all pages. This set of rules results in a relatively informal feel to the interface.

To display this type of text: Use this capitalization style:

Page title

Tab labels

Push button labels

Titles

Title Case Capitalization

(Capitalize the first letter of all the words and proper names only; capitalize every letter in an acronym, do not capitalize prepositions).

Subtitles

Category, column, and group headers

Field labels

Bullet items

Radio button labels

Check box labels

Instructions

Informational messages

Sentence Style Capitalization

(Capitalize the first letter of the first word and proper names only; capitalize every letter in an acronym.)

Hypertext links Generally, use Sentence Style Capitalization depending on the context:

For hypertext links embedded within a sentence, do not

capitalize at all (unless the link is the first word in the

sentence, a proper name, acronym, or code).

When embedded links include text that would otherwise be

capitalized, let that capitalization stand. For example,

acronyms within links remain capitalized.

General Capitalization Guidelines The capitalization style used contributes to the feel of the site. Inconsistent capitalization will reflect badly on the professionalism and degrade the perceived reliability of the site.

When choosing a capitalization style, consider the following:

DO NOT WRITE IN ALL CAPITAL LETTERS (unless you absolutely need the user’s attention).

People read whole words and phrases at a time by relying on the shapes of words. Writing in all

capital letters eliminates the distinctive shapes of words and causes the reader to slow down

significantly.

Use Sentence Style Capitalization unless there’s a proper name or acronym.


27 MPAS Website

Font

Font Specification Use the following fonts and sizes for the various page elements. Apply them consistently on all pages.

Note: In order to render Verdana 11 so that it is resizable for various browsers, it is necessary to use a combination of keywords (i.e., x-small) and a percentage – hence the designations in the table below, where appropriate.

Page Element Font

Page titles (H1) on the primary navigation bar

Verdana, Arial, GenevaSans-serif, bold Photoshop Size: 14 pxCSS Size: 105% of x-small

Tab Headers (H2) & Page status labels (H3) in running text

Verdana, Arial, GenevaSans-serif, boldPhotoshop Size: 12 px, CSS Size: 95% of x-small

Primary and secondary navigation labels e.g. Back to All Contacts ; Account Settings, Logout, FAQs

For graphic image text: Verdana , Arial, GenevaSans-serif; bold Photoshop Size: 11 px, CSS Size: 85% of x-small

For HTML text: Verdana , Arial, GenevaSans-serif; bold Photoshop Size: 11 px, CSS Size: 85% of x-small

Running textHelp text Form/Wizard Instructions

Verdana , Arial, GenevaSans-serif; normal Photoshop Size: 12pxCSS Size: 95% of x-small18px leading

Column Header Verdana, Arial, GenevaSans-serif; boldPhotoshop Size: 11 px, CSS Size: 85% of x-small

Table dataInput text field data

Verdana, Arial, GenevaSans-serif, normal


28 MPAS Website

Read-only data Photoshop Size: 11 px, CSS Size: 85% of x-small

Action buttons (Secondary Tasks like Merge, Delete, Download, Upload etc.). Search Labels, Folder Labels and Navigation Button on Homepage

Verdana, Arial, GenevaSans-serif; boldPhotoshop Size: 11 px, CSS Size: 85% of x-small

Hypertext links Verdana, Arial, Geneva Sans-serif; normal underline Photoshop Size: 10 px, CSS Size: 75% of x-small

Footer Verdana, Arial, Geneva Sans-serif; normalPhotoshop Size: 10 px, CSS Size: 75% of x-small

Field Labels Verdana, Arial, Geneva Sans-serif; normal Photoshop Size: 11 px, CSS Size: 85% of x-small

Notification Messages and In line Help and Error Messages.

Verdana, Arial, Geneva Sans-serif; normal Photoshop Size: 11 px, CSS Size: 85% of x-small

General Guidelines Use proportional fonts, not mono-spaced fonts, wherever possible. Proportional fonts provide

proportional amounts of horizontal space to each letter based on its horizontal width. Examples

are Verdana, Arial, and Geneva. Mono-spaced fonts provide the same amount of horizontal

space to each letter regardless of its horizontal width. Courier is the commonly available example.

Use only two font families for the site. Use Verdana primarily (Arial or Geneva are the backup).

These three typeface families are generally available across platforms. Verdana, Arial and

Geneva are sans serif typefaces that provide few implementation challenges: They are relatively

legible at smaller sizes and perform well across platforms.

Ensure that the default font set in the browser results in running text that is about 1/8 inch

(3.175mm) high on the target computer systems. Smaller text is difficult to read at normal reading

distances. Note: X-height of a font refers to the height of the lower case letters relative to upper

case letters.


29 MPAS Website

The following guidelines will help ensure that text is easy to read and use.

Allow the user to adjust the size of the text.

For running text, use normal style, never bold or italic. Plain, normal type is more legible than bold

or italic type in the same typeface.

Use boldface to emphasize a word or two in running text. Make sure that the highlighted words do

not have a hyperlink associated with them, and use the proper HTML coding (a <strong> tag) to

make sure that this emphasis is available to users of screen readers.

Do not use italics.

Within a font family vary the weight and size to indicate hierarchy and provide emphasis.

When using a larger type size for emphasis, do not also make the type bold. It will end up bolder

anyway because of the larger size and the way the type is scaled.

If using a graphic that contains a text image (not recommended in most cases), use a GIF. Do not

anti-alias fonts smaller than 12 point.

Underline hypertext links in running text. Do not underline any other text or titles. Do not

underline any lead-in text for links such as “Go to” or “See” or “View,” since users of screen

readers search for links alphabetically, and linking this lead-in text will result in the link being

categorized incorrectly.


30 MPAS Website

Color

Web Color Palette Provide a consistent look and feel across all pages.

Basic Display ElementsStyle Color Color Code Where used:

Text ColorStyle Color Color Code Where used:

Form elementsStyle Color Color Code Where used:

Tables / Working ListStyle Color Color Code Where used:

General Guidelines for Selecting Colors Color affects the appearance, ease of use, and productivity of an interface. Colors help achieve a consistent graphical style or theme, support corporate identity, and support or hinder text legibility. When choosing colors and a color palette for your site, consider the following guidelines:


31 MPAS Website

Limit colors

Limiting the number of colors will produce a less cluttered appearance and an easier to

understand page.

Attention is drawn more effectively to color when there are fewer colors used. Therefore, use

color sparingly, only where you want to draw attention.

Maintain high contrast

Maintain high contrast between the background and text colors. Use either white or a light, pale

color as the background for all pages. Use black or dark colored text.

Use color to draw attention and inform

Use color to highlight areas of the page that you want the user to see (E.g., an important

message, an error message). This works much better if you have limited the number of colors on

the page.

Use color changes to show the state of an item (E.g., selected versus unselected notebook tabs,

rollovers to reinforce when an item is selectable).

Account for color-deficient users

Avoid using color as the only way to communicate important screen data.

Ensure the design makes sense in grayscale before adding color. This is particularly important in

designing charts and graphs.

Guidelines for Tables and Lists Use either white or a light, pale color as the background color for all tables and list boxes. To aid in scanning across the page, use a thin dividing line after every row.


32 MPAS Website

Graphics

General GuidelinesGraphics have three main functions:

Help users make decisions.

Communicate information.

Make a site more appealing.

When used properly, graphics can be superior to text since they are perceived faster than text, remembered better than text, and able to say more with less space. However, graphics also add to the

download time of a page and pose accessibility challenges.

File FormatConsider the following when choosing a file format:

The type of image

Size of the image file

The way you want the graphic to download

JPEG GIF

Best for Photographs and graphics with

thousands or millions of colors and

continuous tones.

Greater compression and quicker

download times for appropriate images.

Smaller images or graphics that

contain large blocks of color and/or

text (where no more than 256

colors are needed).

Interlacing, which allows the image

to appear as it loads.

Creating images that blend in with

the background or create the

impression of non-rectangular

boundaries between graphical

elements (transparent GIF format).

Tips JPEG compression should be the last

processing step for a color image, since

a loss in image information results from

the compression.

Try saving the file with fewer than

256 colors to reduce the file size,

but ensure the result is acceptable

visually.


33 MPAS Website

Do not reduce the amount of color

before compressing. This may even

increase file size. JPEG compressing

works in large part by reducing the

amount of color information in a way

that leaves the result perceptually little

changed. This process works best when

the original has a maximum of color

information.

Progressive JPEGs often provide

slightly better compression than the

standard JPEG and also provide an

early view of the image.

Graphics with text and/or sharp

transitions between colors need to be

saved at higher qualities (less

compression) to avoid fuzziness around

edges. Consider using a GIF in this

case.

Create transparent GIFs using the

target background color as the

transparent color.

Avoid using interlaced GIFs for

images with text, as the user will try

to read the blurry image while it is

loading.

Use greater compression for

appropriate

For both Formats

Always save the original in a lossless format (i.e., TIFF, BMP, or PSD).

Consider the file size of a graphic, and test multiple formats (JPEG and GIF) to

determine the best tradeoff between image quality and file size.

When part of an image is right for JPEG and part for GIF, consider splitting the

image and compressing each part with the most appropriate method.

Background Images Minimize the use of background images. They are useful for branding, but can interfere with text legibility.

When using background images:

Use low color saturation to ensure high overall contrast and good text legibility (black text on

white background provides the best contrast). Generally white, light pastel colors, and very light

gray are the best when using dark text.

Use patterns and other graphic details with great restraint on backgrounds under text (E.g.,

watermark graphics).

Use colors for patterns and other graphic details that are close in value to the background color

(E.g., pastel blue on white).


34 MPAS Website

The size of the graphic detail must be several times larger than the size of the text characters.

Making Graphics Accessible Make sure graphics are accessible to visually handicapped users.

Provide descriptions of the graphic using the ALT tag for the image.

Do not provide alternative text for icons and bullets; these provide meaningless audio clutter for

users of screen readers. If graphic bullets are used, include the images in the style sheet and

format lists using proper semantic markup (for example, UL, OL and LI tags.) This will make your

lists accessible to screen readers without added noise.


eTorF website-implementation-rules

Design

Transcript of eTorF website-implementation-rules