1. MPAS
Website
Implementation
Rules
Geodesic Design Lab
Geodesic Design Lab
22 February, 2012

2. 2
MPAS Website
Table of Contents
Cover Page ................................................................................................................................... 1
Purpose of the Document ............................................................................................................... 5
Control Selection Rules .................................................................................................................... 6
Enter data.................................................................................................................................................. 6
Take an Action........................................................................................................................................... 7
Set a Choice............................................................................................................................................... 7
Set a Single Choice ........................................................................................................................... 7
Set a Single Choice ............................................................................ Error! Bookmark not defined.
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 ........................................................................................................ 11
Select Items from Hierarchical Data Structure ....................................................................................... 11
Cursor Movement ....................................................................................................................... 12
Cursor Placement .................................................................................................................................... 12
Cursor Movement ................................................................................................................................... 12
Standard buttons, tabs and links ............................................................................................. 13
Navigation ............................................................................................................................................... 13
Working list Tasks ................................................................................................................................... 13
General Guidelines .................................................................................................................................. 13
Data Entry and Display ................................................................................................................. 15
Instructions ............................................................................................................................................. 15
Field Labels.............................................................................................................................................. 15
General Format ................................................................................................................................... 15
Self-labeling Fields .............................................................................................................................. 15
Data Fields............................................................................................................................................... 15
Entry Fields .......................................................................................................................................... 15
Drop-down Lists .................................................................................................................................. 16
Checkboxes ......................................................................................................................................... 16
Radio Buttons ...................................................................................................................................... 16
Geodesic Design Lab
22 February, 2012

3. 3
MPAS Website
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 ............................................................................................................... 20
Overview ................................................................................................................................................. 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 ........................................................................................................................ 23
Overview ................................................................................................................................................. 23
Window Sizes .......................................................................................................................................... 23
General Guidelines .................................................................................................................................. 23
Layout............................................................................................................................................ 24
Page Grids ............................................................................................................................................... 24
Description of Page Areas ....................................................................................................................... 24
Tree Menu Area ................................................................................................................................ 24
Working List Area ............................................................................................................................. 24
Geodesic Design Lab
22 February, 2012

4. 4
MPAS Website
General Principles ................................................................................................................................... 24
Text Layout.............................................................................................................................................. 24
Capitalization............................................................................................................................... 26
Capitalization Rules ................................................................................................................................. 26
General Capitalization Guidelines ........................................................................................................... 26
Font............................................................................................................................................... 27
Font Specification ................................................................................................................................... 27
General Guidelines .................................................................................................................................. 28
Color ............................................................................................................................................. 30
Web 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....................................................................................................................................... 32
General Guidelines .................................................................................................................................. 32
File Format .............................................................................................................................................. 32
Background Images ................................................................................................................................. 33
Making Graphics Accessible .................................................................................................................... 34
Geodesic Design Lab
22 February, 2012

5. 5
MPAS Website
Purpose of the Document
This 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. 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
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
Example
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. 7
MPAS Website
Take an Action
User triggers a process or opens another window (E.g., Submit, Clear, Cancel).
If frequency of
access is…
Rare
And the number
of selections are
Few (1-4)
Then use this control
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…
Medium
And the number
of selections are
Few (1-4)
Then use this control
Rare
Many (3-8)
Drop-down list and button.
Buttons for expert users in
a mouse-primary system.
Link List
Set a Choice
Set a Single Choice
When the user selects an item as operational or not.
If an object is to be
selected…
<80% of the time
Then use this control
="or" >80% of the time
Check box with default
selection.
Geodesic Design Lab
Example
Check box.
22 February, 2012
Example
Examples (not from Mundu
Sync)

8. 8
MPAS Website
When the user selects between two alternatives.
If the item is
to be
selected…
Translatable to
single choice
And the designer
Then use this
control
Knows with 80%
probability the user‟s
selection
Check box
with default.
Does NOT know with
80% probability the
user‟s selection
Not translatable
to single choice
Examples
Check box.
E.g. Merge Contact- Photo selection
Drop-down list
with default.
E.g. Merge Contact- Name selection
And the designer
Then use this
control
Examples (not from Mundu Sync)
Makes selection
optional
Radio button
with "None"
selection.
# Does NOT know
with 80% probability
the user‟s selection
Not translatable
to single choice
Radio buttons.
Knows with 80%
probability the user‟s
selection
If the item is
to be selected
Requires 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
Adequate
Dynamic
Single select list box
(make box as tall as
possible). This control is
also applicable for variable
actions on a list.
Adequate
Static
Radio button.
Geodesic Design Lab
22 February, 2012
Examples (not from Mundu Sync)

9. 9
MPAS Website
Tight
Static or
Dynamic
Geodesic Design Lab
Drop-down list box.
22 February, 2012

10. 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
Tight
Dynamic
Drop-down single select
list box.
If space is
And data are
Then use this control
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
Example
Examples (not from Mundu Sync)

11. 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 ActiveX 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:
Java or Active X controls
E.g. Tree Menu in the
Working list
Tree control (allows expand/collapse).
Geodesic Design Lab
22 February, 2012
Example

12. 12
MPAS Website
Cursor Movement
Cursor Placement
When 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 Movement
As 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. 13
MPAS Website
Standard buttons, tabs and links
Consistent 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).
Submits the Form to the server for processing.
Searches for and retrieves an item or items from a data source, based
on the specified search parameters. Displays the result of the search.
Cancels the pop-over and returns to the originating page or menu where
the form was launched. Does not save entered data.
Saves the data and returns to the originating page or menu where the
form was launched.
Edit in view mode enables the editable mode for forms
Continues to the next logical screen on the interface where the File
upload window is shown during the uploading process.
Register
Search / Go
Cancel
Save
Edit
Continue
New
<Contacts/Events/Notes>…
It is primarily used to trigger the wizard of new entity creation.
Working list Tasks
Label
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.
Used when a selection of a number of entities is done and the user
wants to download this selected entry to his/her machine.
Used primarily in view only forms and notes table. It allows users edit the
field entry and make appropriate changes.
Restores the selected entities back to the main volume from the deleted
content.
Deletes the selected entities from the working list.
Permanently deletes the selected entities from the user account.
Download
Edit
Restore
Delete
Permanently Delete
General Guidelines
Use 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.
(E.g. Save, Submit, Sign Up, and Cancel etc.)
Geodesic Design Lab
22 February, 2012

14. 14
MPAS Website

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. 15
MPAS Website
Data Entry and Display
Instructions
When 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.
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.
Geodesic Design Lab
22 February, 2012

16. 16
MPAS Website

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
color macro for text
italic text
E.g. Username, password
Input mouse hover/click
E.g. Email, Address
stroke weight increases for
border
fill color changes
border line weight increases
border color changes to Red
color macro for text with error
icon
only for mandatory data fields
color macro
cancellation on the macro to
return to an empty state
Input in error state
E.g. Password Re-confirm
Search Box
E.g. Search Contact
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.
Left align with other fields on the page.
Position text label to the right of the radio button.
Geodesic Design Lab
22 February, 2012

17. 17
MPAS Website

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.
Asterisk in the mandatory field
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.
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.
Geodesic Design Lab
22 February, 2012

18. 18
MPAS Website
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.
Grouped items
Selected Header
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”

Do not use "No.," "Nbr.," "Nmbr.," "Num," or any other word or abbreviation.
Geodesic Design Lab
22 February, 2012

19. 19
MPAS Website
Special Field Formats
Dates
Display

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 Numbers
Display

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. 20
MPAS Website
Messages and Feedback
Overview
Messages 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
Confirmation dialog
The user has taken an action, but something went wrong.
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)?").
A form or transaction is successfully submitted. Provides
confirmation that the information submitted went through.
The user has submitted a transaction and the system response time
is longer than 3 to 5 seconds.
Drawing attention to special information of which the user needs to
be aware.
Confirmation message
In-progress Indicator
Notification/alert
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 Handling
As 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:
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.
Geodesic Design Lab
22 February, 2012

21. 21
MPAS Website

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.
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
Geodesic Design Lab
22 February, 2012

22. 22
MPAS Website
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. 23
MPAS Website
Pop-up Windows
Overview
Use 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 Sizes
Use 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 helpwindows.

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. 24
MPAS Website
Layout
Page Grids
Lay 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 Area
When 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 transactionoriented pages.
Working List Area
This 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).
Text is most easily scanned if spans 6 units. In exceptional cases, it can extend to 9 units.
Geodesic Design Lab
22 February, 2012

25. 25
MPAS Website

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. 26
MPAS Website
Capitalization
Capitalization Rules
Use 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
Subtitles
Category, column, and
group headers
Field labels
Bullet items
Radio button labels
Check box labels
Instructions
Informational messages
Sentence Style Capitalization
Hypertext links
Generally, use Sentence Style Capitalization depending on the
context:
 For hypertext links embedded within a sentence, do not
(Capitalize the first letter of all the words and proper names only;
capitalize every letter in an acronym, do not capitalize prepositions).
(Capitalize the first letter of the first word and proper names only;
capitalize every letter in an acronym.)
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. 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, Geneva
Sans-serif, bold
Photoshop Size: 14 px
CSS Size: 105% of x-small
Tab Headers (H2) & Page status
labels (H3) in running text
Verdana, Arial, Geneva
Sans-serif, bold
Photoshop 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, Geneva
Sans-serif; bold
Photoshop Size: 11 px,
CSS Size: 85% of x-small
For HTML text:
Verdana , Arial, Geneva
Sans-serif; bold
Photoshop Size: 11 px,
CSS Size: 85% of x-small
Running text
Help text
Form/Wizard Instructions
Verdana , Arial, Geneva
Sans-serif; normal
Photoshop Size: 12px
CSS Size: 95% of x-small
18px leading
Column Header
Verdana, Arial, Geneva
Sans-serif; bold
Photoshop Size: 11 px,
CSS Size: 85% of x-small
Table data
Verdana, Arial, Geneva
Geodesic Design Lab
22 February, 2012

28. 28
MPAS Website
Input text field data
Read-only data
Sans-serif, normal
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, Geneva
Sans-serif; bold
Photoshop 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; normal
Photoshop 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. 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. 30
MPAS Website
Color
Web Color Palette
Provide a consistent look and feel across all pages.
Basic Display Elements
Style
Color
Color Code
Where used:

Text Color
Style
Color
Color Code
Where used:

Form elements
Style
Color
Color Code
Where used:


Tables / Working List
Style
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. 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. 32
MPAS Website
Graphics
General Guidelines
Graphics 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 Format
Consider 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
Best for
GIF
 Photographs and graphics with
 Smaller images or graphics that
thousands or millions of colors and
contain large blocks of color and/or
continuous tones.
text (where no more than 256
 Greater compression and quicker
download times for appropriate images.
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
 Try saving the file with fewer than
processing step for a color image, since
256 colors to reduce the file size,
a loss in image information results from
but ensure the result is acceptable
the compression.
visually.
 Do not reduce the amount of color
Geodesic Design Lab
22 February, 2012
 Create transparent GIFs using the

33. 33
MPAS Website
before compressing. This may even
target background color as the
increase file size. JPEG compressing
transparent color.
works in large part by reducing the
 Avoid using interlaced GIFs for
amount of color information in a way
images with text, as the user will try
that leaves the result perceptually little
to read the blurry image while it is
changed. This process works best when
loading.
the original has a maximum of color
information.
 Progressive JPEGs often provide
 Use greater compression for
appropriate
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.
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).

The size of the graphic detail must be several times larger than the size of the text characters.
Geodesic Design Lab
22 February, 2012

34. 34
MPAS Website
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