Your SlideShare is downloading. ×
eTorF website-implementation-rules
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

eTorF website-implementation-rules

118
views

Published on

Published in: Design, Business, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
118
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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