Post on 22-Nov-2014
description
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
Geodesic Design Lab 22 February, 2012
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
General Guidelines................................................................................................................................23
Layout.......................................................................................................................................... 24Page Grids..............................................................................................................................................24
Description of Page Areas......................................................................................................................24
Tree Menu Area..............................................................................................................................24
Geodesic Design Lab 22 February, 2012
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
General Guidelines................................................................................................................................28
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
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
9 MPAS Website
Adequate Static Radio button.
Tight Static or Dynamic
Drop-down list box.
Geodesic Design Lab 22 February, 2012
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
Geodesic Design Lab 22 February, 2012
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).
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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”
Geodesic Design Lab 22 February, 2012
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).
Geodesic Design Lab 22 February, 2012
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. xyz@example.com"
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:
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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).
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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:
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012
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).
Geodesic Design Lab 22 February, 2012
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.
Geodesic Design Lab 22 February, 2012