Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.

com http://aldencase.com

Sample Web Product User Interface Style Guide

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com

Introduction Guidelines for Minimum Computer Configuration Minimum hardware and operating system Minimum browser Minimum screen size Guidelines for User Interface Elements Accessibility Alt text tags Buttons Colors Copyright statement Error Messages Filter Controls Fonts (see Text) Form Fields

1 1 1 1 2 3 3 4 5 5 6 6 6 7 7

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com

Introduction
These are guidelines, not cast in concrete, but developers for this product release must have a compelling reason not to use a particular guideline.

Guidelines for Minimum Computer Configuration

Minimum hardware and operating system
Policy Designer PC Win2000/XP Unix N/A Computers must have a minimum of 128MB RAM and Microsoft Word 2003 installed. Employee Resource Center PC Win2000/NT/XP. Unix [TBD] Mac [TBD] Operating system statistics (http://www.w3schools.com/browsers/browsers_stats.asp)

Minimum browser
Web Application #1 Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Web Application #1 Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Safari Opera 5.5 7.2 1.0 5.01 4.7.0 0.9.3 [TBD] [TBD]

Latest version: Latest version:

1.2 7.51

Browser statistics (http://www.w3schools.com/browsers/browsers_stats.asp)

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com

Minimum screen size

Minimum monitor size: 15 Standard monitor sizes: 15-21 Web App #1 mininimum screen resolution: 1024 x 768 Web App #2 minimum screen resolution: 800 x 600 Users may be running with their browser window not maximized.

Display resolution (http://www.w3schools.com/browsers/browsers_stats.asp)

Color depth (http://www.w3schools.com/browsers/browsers_stats.asp)

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com

Guidelines for User Interface Elements

Accessibility
Refer to IBMs Accessibility Checklist for a more information on web page accessibility features, including rationales, coding techniques and testing. o http://www-306.ibm.com/able/guidelines/web/accessweb.html For images and animations o Use the alt=text attribute to provide text equivalents for images. For images that do not convey important information or convey redundant information, use alt=. For image maps o Use client-side image maps and alternative text for image map hot spots, instead of server-side maps. If the page must use server-side map, provide equivalent text links. For graphs and charts o Provide a text or alt text summary of the content of each graph and chart, or use the longdesc attribute to link to the description or data. For video or audio content o Provide captions or transcripts of important audio content. Provide transcripts or audio descriptions of important video content. For scripting (e.g., javascript, ActiveX) o Ensure the functionality of scripts is keyboard-accessible. If the content affected by scripting is not accessible, provide an alternative, (for example: text links for rollover menus). For applets, plug-ins and non-HTML content o When an applet, plug-in or other application is required to be present, provide a link to one that is directly accessible, or provide alternate content for those which are not directly accessible. For forms o Make forms accessible to assistive technology by giving every form field a label attribute Provide quick access to main content o For text-only browsers and assistive technology, provide methods for skipping over navigation links to get to main content of page (e.g., a Skip To Main Content link that is only visible with non-graphical browsers). Example:

<a class=skiplink href=#startcontent accesskey=2> Skip over navigation</a>

For frames o Avoid frames, if possible. If page must have frames, provide a title for each FRAME element and frame page. Provide an accessible source for each frame. For tables o Use the TH element to mark up table heading cells. Use the headers attribute on cells of complex data tables. For cascading style sheets o Web pages should be readable without requiring style sheets. For color and contrast o Ensure that all information conveyed with color is also conveyed in the absence of color. Avoid content that blinks, flickers, or moves. For pages with timeouts o When a timed response is required, alert the user, and give sufficient time to indicate more time is required. For mouse-less access o Where practicable, provide keyboard shortcuts. Customary keyboard shortcuts: Enter Same as clicking button currently having focus Esc Same as pressing Cancel button Tab Give focus to next link or form field on the page* ____ Print

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com
*use the o

tabindex

attribute to define the tabbing order for the page

It may be possible* to include the HTML accesskey attribute for links and forms, which allows keyboard shortcuts to be defined for frequently-used links or form fields. Example:

<a href=www.mysite.com accesskey=1>Home</a>

On Windows, you can press ALT + an access key; on Macintosh, you can press Control + an access key. If the access key is defined on a link, your browser will follow the link; if its defined on a form field, your browser will set focus on that field. *NOTE: When using the accesskey attribute, be aware of browser compatibility concerns. The accesskey attribute is only supported by IE 5.x+ and NS 6.x running on a Windows platform. Customary access key shortcuts: Access key 1 Home page Access key 2 Skip to main content Access key 9 Feedback If accessibility cannot be accomplished in any other way, provide a text-only page with equivalent information or functionality. Update the content of the text-only page whenever the primary page changes. Make sure the pages are still readable and useable when CCS, images, and HTML fonts and color are turned off and mouse is not in use.

Alt text tags

Alt text is a descriptive information cue that appears momentarily when the mouse hovers over a screen element. It is also used by text-only browsers and assistive-technology browsers. The alt text message should explain to a user what the control does in the context of the users workflow, not the system. Developers should ask the teams tech writer or UI designer to provide the text for alt text tags. Alt text tags should be used consistently throughout the product for all graphics, images, and image maps. The alt text message should be descriptive; for button labels, it should describe what the button does, not just repeat the button name. Alt text should be displayed after the mouse has hovered over the screen element for 2-3 seconds, not immediately. Alt texts for some of the standard buttons: Image Alt text Back button Go to the previous page. Next button Go to the next page. Cancel button Cancel the current task. This policy requires your attention. Disconnect button Connect button Accept button Decline button Import button Import Now button Import Later Button View button Review button Take Quiz button Submit Done button Submit My Answers Disconnect from the current Directory Server. Connect to the current Directory Server. Pressing this button indicates you have read and accept the policy. Pressing this button indicates you have read and do not accept the policy. Import groups and users from the Directory Server. Import groups and users from the Directory Server. Add the directory server configuration to the compliance database but dont import groups and users at this time. View this policy. Review this policy. Take the quiz for this policy. Submit this form. Return to the main Employee Resource Center home page. Submit these answers to be graded.

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com

Buttons
Buttons o o Buttons o o have a standard height; button width may vary. The standard button size is 26 x98 pixels. Buttons may made wider in 20 pixel increments to accommodate longer labels. can have up to four states: Enabled button Disabled button

All buttons have text labels. The text labels use Title style. o Title style means that all words are capitalized except: Articles (a, an, the) Coordinating conjunctions (and, or) Prepositions of three or fewer letters, except when the preposition is part of a verb phrase, as in Move Up o In title style, always capitalize the first and last word, even if it is an article, a conjunction, or a preposition of three or fewer letters. Button will be comprised of image files on top of HTML button. o Using this approach, the browser automatically handles changing button focus. Button images include alt texts tags. (see Alt text section) Buttons are labeled consistently throughout the product. A buttons label should have a consistent meaning and; the same button should not represent two actions on different pages. The Enter key is the keyboard shortcut for the button currently having focus.

Colors
Button, Button, Button, Button, Button, Button, Button, Button, disabled, border disabled, face disabled, font enabled, border enabled, face enabled, focus border enabled, font highlight #C0C0C0 #CECFCE #A0A0A0 #C0C0C0 #CECFCE #000000 #000000 #FFFFFF #404040 #000000 #EFEFEF #333399 #CECFCE #A0A0A0 #333399 #FFFFFF #CECFCE #333399 #000000 #E7E3BD #000000 #000000 #B5CFE7 #A0A0A0 #FFFFFF #EFEFEF silver ash gray medium gray silver ash gray black black white dark gray black smoke highlight blue (bolded/no underline) ash gray medium gray highlight blue (unbolded/underline) white ash gray highlight blue (bolded) black medium beige black black light blue medium gray white smoke

Button, shadow, dark Form field label, active font Paging controls, background Secondary nav bar, active link, font Secondary nav bar, background Secondary nav bar, disabled link, font Secondary nav bar, inactive link, font Tab, active border Tab, active face Tab, active font Tab, inactive border Tab, inactive face Tab, inactive font Table column header, active font Table column header, background Table column header, inactive font Table, alternating rows

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com
Text link, unvisited Text link, visited Text, normal Text, warning or error Window, background #333399 #660066 #000000 #FF0000 #FFFFFF highlight blue highlight purple black red white

Copyright statement
Appears only on Login page and in About <product> page for all products except Employee Resource Center. o For the Employee Resource Center, the copyright is hidden. Sample:

Error Messages
Place the error message near the problem it identifies: o Place the error message in the primary window above the main content that contains the error; place an error indicator icon to the left of the text message. Error messages do not belong on a completely separate page with no context. o Highlight in red the content containing the error to make it easy for the user to spot where the correction has to be made. Before writing an error message, the developer should verify that s/he has done everything possible to prevent the error from occurring. o Rationale: Users success rate will improve with if they encounter fewer errors. 1 o Reference: Design of Sites : Design Pattern K12 Preventing Errors Ask the usability specialist to recommend error message text instead of forming your own error messages. The text should describe the problem in plain English. o Rationale: Users rarely have the same technical background as developers. The text should phrase the message from the users point of view, not the systems point of view. The text should phrase the message so that the user doesnt feel dumb. o Rationale: Users tend to blame themselves when things go wrong. Errors indicate that we havent done as good as job as we could in designing/implementing an error-free application. The text should suggest corrective action. o Rationale: Users need suggestions about what to do next. Make error messages stand out. If, for some reason, the error message cannot be displayed in the primary window, then a popup window is an alternative way to display the message. If using a popup window, give the error message box an appropriate and meaningful title (one that would make sense to a user, not the system). o Rationale: Titles cue the user about where the problem was encountered.

Filter Controls
A filter is defined as a pattern through which data is passed and only data that matches the pattern is allowed to pass through the filter. Filtering is handled by a combination of one of more form fields that allow the user to specify the filter criteria and a link or action button. o Sometimes the filter is controlled by an explicit button just for filtering. Example:

The Design of Sites by Doug van Duyne et al. 2003. Boston, MA: Addison-Wesley.

Alden Case Enterprise, Inc. 2035 Belmont Avenue San Carlos, CA 94070-4611 phone: (650) 592-4675 email: ccase@aldencase.com http://aldencase.com
Sometimes the filtering is part of a larger action; for example, the View Report button on the PD Customize Report page causes the filtering to occur before the user sees the report data. If a filter includes multiple fields that the user can set, the filter is additive and the resulting data is only that data which matches all the filter criteria. o

Fonts (see Text) Form Fields

Every form field should have a label that is meaningful in the context of the users task, not the systems organization. o Rationale: User should not be exposed to the underlying system or database names. Where practical, form fields are initialized with cues for how to use them instead of initializing with blanks. Examples: o Date form field: MM/DD/YY o Time form field: HH:MM:SS o IP address form field: 0.0.0.0 o Domain name form field: www.mydomain.com Where practical, the form field accepts data in multiple formats. Example: o Telephone number: 650-555-1212 (650) 555-1212 6505551212 Required fields will be clearly identified. o If some fields are required and others are optional, place a red asterisk (*) next to each required field and a note at the top right of the first form field with the red text * required field. o Example:

If all fields are required, place the text All fields are required. Example:

End of Sample Document