1. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 1 Hannie Fan Lead UX/UI Designer & Web Developer Physical Security Business Unit User Interface & Standards For UI Developers

2. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 2 User Interface Principle  A clear, consistent layout streamlines the way users move through an application and use its features.  An effective layout organizes content according to application workflows and groups logically related content. The Simple, The Better ! Design the UI first and get it right, then build the back end.

3. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 3 Importance of Standards  Improve customer satisfaction and usability by providing a consistent user experience across Cisco products  Increase the productivity and efficiency of development efforts  Give teams a set of standardized components that will expedite development cycles  Provide a flexible and scalable framework that promotes cross- application consistency  Ensure that applications adhere to corporate branding and accessibility standards  Increase customer satisfaction by simplifying installation and lowering training costs  Reduce code changes Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/ These standards are intended to help application developers produce consistent, Cisco-branded applications in less time, by leveraging assets and tools.

4. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 4 Conformance  Step 1. Levels of Conformance Level 1: focuses on brand (color, buttons, fonts, icons, and the like). Level 2: focuses on the framework (basic screen structure and elements, such as the menu bar, task bar, left navigation area).  Step 2. Prototype Evaluation  Step 3. Self-Assessment Checklist The application development team should fill out the checklist and submit it to the UE Groupfill out the checklist UE Group Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/compliance/ http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/compliance/ Conforming to these standards will benefit Cisco and its customers. Development teams should follow three steps to conform to these standards.

5. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 5 Login screen

6. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 6 Dialog Boxes Dialog Box with Divider Line Dialog boxes have three required elements: Title bar Input controls Command buttons Dialog Box with Group Box

7. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 7 Optional elements are: Tabs Help Access Required field asterisks Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/secondary-windows/dialogs.shtmlhttp://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/secondary-windows/dialogs.shtml Margin with Tabbed Pane

8. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 8 Controls and Components  Buttons – Button Placement The content area should be designed to optimize space and clarity. White backgrounds, gray boxes, color, and line work should clearly delineate interaction areas.

9. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 9 - Grouping and Ordering If there are more than three buttons, consider separating the buttons into logical groups and separate them with small vertical lines called separators. Example button groups include: OK, Cancel Create, Edit, Delete Add, Edit, Remove Import, Export

10. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 10 Source: http://wwwin.cisco.com/CustAdv/PSE/uestand/java/defs-specs/buttons.shtml http://wwwin.cisco.com/CustAdv/PSE/uestand/java/defs-specs/buttons.shtml - Button Label Term Pairings Dialog boxes and wizards can offer users a choice between two opposite actions, such as "Approve" and "Reject". The following button pairings specify consistent nomenclature for these situations. If one member of a pair does not apply to a screen, then it may be omitted or grayed out, depending on the circumstances. The standard pairings are: Add and Delete Add and Edit Add and Remove (in dual column dialogs) Apply and Reset Apply and Cancel (in dialogs) Approve and Reject Back and Next (in wizards) Create and Delete Create and Edit Cut and Paste OK and Cancel Open and Close Start and Stop Submit and Cancel Up and Down (in scrolling lists) Yes and No

11. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 11 - Button text standards Follow the headline capitalization standards.headline capitalization A single word for button text is preferred The OK button appears in entirely uppercase letters and with no periods Except for the OK button, do not use all uppercase letters unless the label is an acronym Avoid use of acronyms or abbreviations unless you are certain that the application’s audience is aware of their meaning Verbs are preferred for button labels

12. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 12 – Ellipses When a command button does not fully specify an operation, but instead that operation is completed by a dialog box, notify the user by placing an ellipsis mark after the button text. (Note that this applies only to text in buttons. No ellipsis is used in graphics-only buttons.) For example, after clicking a Print... button, users are presented with a dialog box in which to specify printer location, how many copies to print, and other print settings. By contrast, a Print command that prints one copy to the default printer without displaying a dialog box would not require an ellipsis mark.

13. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 13 – SWT sample code for minimum width of button: { buttonOk = new Button(composite, SWT.NONE); GridData gd = new GridData(GridData.HORIZONTAL_ALIGN_FILL); gd.widthHint = WidthHints.BUTTON; buttonOk.setLayoutData(gd); buttonOk.setText(ButtonLabels.OK); }

14. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 14  Check Boxes Laying Out Check Boxes The check box label should be located to the right of the check box graphic, unless the application is designed for locales with right-to-left writing systems, such as Arabic and Hebrew. In these cases, place the label to the left of the graphic. If one or two check boxes are provided amid a number of data input controls, placing the check box to the left of the label may be visually disruptive. In this case, the check box label may be located to the right of the check box. Typically, each checkbox is left aligned in its own row. However, if there are three or fewer check boxes, they may be located on the same row.

15. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 15  Labels Labels are user interface text that is provided by the system to identify controls. The user cannot edit labels. Positioning of labels is vital to the appearance and ease of use of your application. Left Side Labels Locate the label to the left of the control for: – Text fields – Text areas – List boxes – Pull-down list boxes When there are many of these controls arranged in a column, such as in a form: – Left justify the labels *Quintron use right justify the labels – Insert 8 pixels between the trailing edge of the longest label and the associated control – Other controls should be left justified to the left edge of the control with the longest label Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/text/labels.shtmlhttp://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/text/labels.shtml

16. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 16 Right Side Labels Locate the label to the right of the control for: - Check boxes - Radio buttons In rare cases, the check box or radio button label can be located to the left of graphic if the control is in a column of other types of controls. This may allow greater visual continuity with the other controls. In the typical case, when the label is to the right of the graphic: Insert x pixels between the trailing edge of the graphic and the start of the label.

17. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 17 Top Labels Locate the label above the control for: - Transfer boxes - Multi-column list boxes - Controls when horizontal space is constrained and there are a small number of controls Insert 5 pixels between the bottom of the label and the top of the graphic: –The label should be left aligned with the left edge of the control –Insert 5 pixels between the bottom of the label and the top of the graphic

18. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 18 Text and Data Formatting Capitalization Text is an important design element and appears throughout applications in such Controls as command buttons, check boxes, radio buttons, message boxes, and labels for groups of interface elements. Use language that is clear, consistent, and concise throughout your application text. Ensure that the wording of your labels, control text, and instructions is readable and grammatically correct. For all text that appears in the interface elements of your application, follow one of two capitalization conventions: book title capitalization or sentence-style capitalization. Use book title capitalization (see below) for most names, titles, labels, and short text. Use sentence-style capitalization for lengthy text messages, check boxes and radio buttons. Do not capitalize words automatically. You might encounter situations in your interface when capitalization is not appropriate, as in window titles for documents that users have named without using capitalization. Use standard typographical conventions for sentences and headlines in your application controls. Let translators determine the standards in your target locales. Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/text/text-capitalization.shtmlhttp://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/text/text-capitalization.shtml

19. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 19 Combo box text (Centimeters) Command button text (Don't Save) Icon names (Trash Can) Labels for buttons or controls (New Contribution To:) *Quintron labels use sentence type. (New contribution to:) Menu items (Save As...) Menu titles (View) Slider text (Left) Tab names (RGB Color) Titles of windows, panes, and dialog boxes (Color Chooser) Tooltips (Cut Selection) If tooltips are longer than a few words, sentence capitalization is acceptable. Be consistent within your application. - Book Title Capitalization Most items in your application interface should use book title capitalization. The first and last words of phrase are always capitalized. Capitalize every word except articles ("a," "an," and "the"), coordinate conjunctions ("and," "or," "but," "so," "yet," and "nor"), and prepositions with four or fewer letters (such as "in").

20. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 20 - Sentence-Style Capitalization Check boxes (This is a check box label) Radio buttons Instructional text Alert box text (The document you are closing has unsaved changes.) Error or Help messages (The printer is out of paper.) Labels that indicate changes in status (Operation is 75% complete.) Resource: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/text/text-capitalization.shtml

21. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 21 Abbreviations Beginning sentences: Do not begin a sentence with an abbreviation unless it has been previously defined. Consistency: After you use and identify an abbreviation once in a table or figure, use the abbreviation in other tables or figures throughout the remainder of that document. Latin expressions: Do not use Latin expressions, such as “a priori,” “ca.,” “cf.,” “e.g.,” “et al.,” “i.e.,” “via,” and “viz.” Exceptions: Using etc. is acceptable. When space is limited in presentation slides, you can use “e.g.” and “i.e.” Months of the year: In text, do not abbreviate the months of the year. In tables and figures, use standard abbreviations when conserving space is important: Jan., Feb., Mar., Apr., Aug., Sept., Oct., Nov., and Dec. Do not abbreviate May, June, or July. Periods: Use periods with abbreviations.

22. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 22 Exceptions: Country names: Use periods for the abbreviations U.S. and U.K. when they are used as adjectives—for example: U.S. Postal Service—but do not use periods for the abbreviation USA. Spell out United States and United Kingdom when they are used as nouns. State names: Do not use periods in two-letter state name abbreviations when they are used with zip codes. Spell out state names when zip codes are not included. Units of measurement: Do not use periods for units of measurement abbreviations unless the abbreviation might be mistaken for a word that is not an abbreviation, such as “in.” (inch). Spelling out: Use abbreviations for units of measurement when preceded by a number; for example: 3 KB, 2000 bps. Do not spell out abbreviations for units of measurement unless the abbreviated form of the word may have an unclear meaning; if this is the case, spell it out only at the first occurrence. Titles: Do not use abbreviations in titles, headings, or subheadings. U.S. and U.K. as adjectives are the only exceptions to this rule.

23. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 23 Instructional Text  Usage Instructional text may be provided if there is an expectation that some proportion of users will not know how to complete an activity. Instructional text should be kept short (no more than two sentences) and should not be provided on every screen.  Layout Instructional text can be provided at the top of a form, above a control, or above a table.  Writing Style These writing guidelines are for wizards, but may be applied elsewhere: – Use boldface type for text that you want to emphasize. Do not overuse boldface type. – When describing how to perform an action in a wizard, state the outcome before stating the means to achieve it. Sample: "To stop the print job, click the Stop button." – If a wizard's additional instructions describe command buttons, use wording like: "To perform this action, click [button-title]." For example, the instructions might be "To display more names, click More." Do not enclose the button name in quotation marks. – Inform users of how to format the needed input – Do not use terms used solely for politeness (for example, "please" and "thank you") – If the completion of a page initiates an action that cannot be undone, provide an explicit message in the instructions – Inform the user of what will happen as a result of completing a wizard or a wizard step. Instructional text is added information about the presented content or controls. It is not intended to be a substitute for a Help system. Source:http://wwwin.cisco.com/CustAdv/PSE/uestand/java/text/instructionaltext.shtmlhttp://wwwin.cisco.com/CustAdv/PSE/uestand/java/text/instructionaltext.shtml

24. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 24 Code discussion for capitalization and proper wording GwImageMgrControl.Exp_ServerAddress = There was an error while trying to get the connected TFTP server address. GwImageMgrControl.InvalidIPAddress = Please enter a reachable hostname/IP address. GwImageMgrControl.Exp_CannotManageServerDir = The TFTP server provided does not seem to be connected to the client. Directories can only be managed for a connected TFTP server. GwImageMgrControl.Exp_DeviceNotFound = Cannot get a handle to the driver device GwImageMgrControl.Exp_RootDirNotFound = Please enter the TFTP root directory GwImageMgrControl.Up_Btn=Up GwImageMgrControl.Tbl_Col_Name=Name GwImageMgrControl.Tbl_Col_Size=Size GwImageMgrControl.Tbl_Col_Date=Date GwImageMgrControl.Lbl_Delete_Dir_Prompt=Are you sure you want to remove the folder and delete all its contents? GwImageMgrControl.Lbl_Delete_Prompt=Are you sure you want delete the file? GwImageMgrControl.Delete_Dialog_Title=Delete file GwImageMgrControl.Delete_Menu_Item=Delete... GwImageMgrControl.Create_Menu_Item=Create directory... CreateRemoteDirDialog.InitDialogTitle=Create directory CreateRemoteDirDialog.Lbl_Name=Directory name: TFTPServerPropDialog.Ok=Ok TFTPServerPropDialog.Cancel=Cancel TFTPServerPropDialog.InitDialogTitle=TFTP server properties TFTPServerPropDialog.Lbl_OS_Name=Operating system: TFTPServerPropDialog.Lbl_Windows=Windows TFTPServerPropDialog.Lbl_Unix=Unix

25. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 25 Model-View-Controller (MVC)  View - the interface the user sees and interacts with  Model - represents enterprise data and business rules  Controller – a way for the user to interact with the model and view MVC design pattern brings better organization and code reuse

26. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 26 Benefits of MVC – Unrelated aspects are separated – Better abstraction – Easier design – Simple programming – Easier maintenance – Loose coupling – Multiple views, controls, or both – Especially suits interface and events – Combining view and controller

27. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 27 private static final String DATE_FORMAT = "MM/dd/yyyy"; // for model private static final String DATE_TEXT = "mm/dd/yyyy"; // for view dateformatMMDDYYYY = new SimpleDateFormat(DATE_FORMAT); // for model private void addHintToDateFieldsIfEmpty() {// for view if ( ( startdateText != null ) && startdateText.getText().equals("") ) { startdateText.setText(DATE_TEXT); } if( ( enddateText != null ) && enddateText.getText().equals("") ) { enddateText.setText(DATE_TEXT); } MVC Code Separation sample

28. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 28 Copyright Notice Placement Copyright Notice Text Application names should start with the word “Cisco”, for example CiscoWorks and Cisco Video Telephony Advantage. Use the date when the application first became publicly available in the copyright notice. Example: © 2007 Cisco Systems, Inc. The copyright notice date should always indicate the year when the software was first made publicly available. When there are revisions to a piece of software that incorporates work from previous versions, the range of years needs to be cited. If version 5.0 (released in 2005) incorporates original aspects of version 1.0 (released in 2003), 2.0 (released in 2004) the copyright notice for 5.0 should state: ©2003, 2004, 2005, Cisco Systems, Inc., or © 2003-2005, Cisco Systems, Inc. Note: © = Copyright (c) is wrong for copyright and should not be used.

29. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 29 Cisco Color Palette 1 131 183 1 95 133 71 176 213 RGBRGB Cisco Blue 208 52 52 178 26 26 RGBRGB Cisco Red 142 142 149 95 95 101 192 192 196 RGBRGB Gray 137 164 36 105 126 28 160 192 42 RGBRGB Green 238 104 4 181 79 3 252 137 50 RGBRGB Orange 138 68 170 102 50 126 170 120 198 RGBRGB Purple 239 181 37 210 135 0 240 197 102 RGBRGB Gold 103 141 197 62 103 164 131 162 207 RGBRGB Blue Primary Color PaletteAccent Color Palette Common Visual Attributes : http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/visual-design/attributes.shtmlhttp://wwwin-dev.cisco.com/CustAdv/PSE/uestand/java/visual-design/attributes.shtml

30. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 30 Icons Guidelines A. System Bar (Product Icon)  The application icon represents product branding.  The application icon is always located on the far left of the window title bar before the product and document name (icon, product name - document name).  The application icon is 16 x 16 pixels.  The standard format for a Windows based application is.ico.  Java, web and UNIX based applications can use.gif or.png.

31. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 31 B. Naming Conventions  Icons should be named according to the following guidelines: [Product Descriptor] + [Object or Action Descriptor] + [Object or Action Modifier] + [Dimension] + [Condition/State] + [Background] + [Reserved]  Most Cisco products use the following icon dimensions: 16 x 16, 24 x 24, 32 x 32, 48 x 48 e.g. FirewallStatus16T.gif (T: transparent background) FirewallStatus16DT.gif (D: disabled) Quintron: VX.BADGE_MANAGER_32.png Alarm_16.png Edit_co_16.png (co: disabled) Source: http://wwwin-dev.cisco.com/CustAdv/PSE/uestand/icons/introduction.shtmlhttp://wwwin-dev.cisco.com/CustAdv/PSE/uestand/icons/introduction.shtml

32. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 32 UI Review: Screen 1

33. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 33 UI Review: Screen 2

34. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 34 UI Review: Screen 3

35. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 35 UI Review: Screen 4-5 (Wizard)

36. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 36 UI Review: Screen 6-7 (Wizard)

37. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 37 UI Review: Screen 8 (Wizard)

38. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 38 UI Review: Screen 9 (Wizard)

39. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 39 Asset Library The Asset Library provides links and downloads for all the current tools and components that support the use of the Cisco Product UE Standards. Assets include:  Application Help - includes the suite of online Help System authoring tools. Application Help  Browser Component Libraries - components for brower-based applications. Browser Component Libraries  CUE Charts - many chart types coded and ready for use in a website or wiki. CUE Charts  Icon Library - icons for Cisco application software. Icon Library  Java Desktop Component Libraries - components for desktop applications. Java Desktop Component Libraries  Login and Splash Screen Generator - creates application login screens and splash screens. Login and Splash Screen Generator  Software Usability Measurement Inventory (SUMI) - a method of measuring software usability. Software Usability Measurement Inventory (SUMI)  TA&W - The Translation Asset & Workflow server allows you to request localization projects and manage your existing projects in a centralized location. TA&W  Usability Test Lab - an ideal environment for conducting usability tests. Usability Test Lab Accessibility Requirements: http://wwwin-dev.cisco.com/accessibility/requirements /http://wwwin-dev.cisco.com/accessibility/requirements /

40. © 2008 Cisco Systems, Inc. All rights reserved.Cisco ConfidentialEDCS-681432 40 Q and A