1. 1 1 @ 2014 Narus, Inc. UI/UX Guidelines Hannie Fan, Principal UX Designer November 5, 2014  UI Standards  Narus Brand  Common UI Assets  Web Accessibility  Web Optimization  MVC pattern For Consistency & Productivity 24 30 5 32 34 31

2. 2 2 @ 2014 Narus, Inc. User Interface Principle The Simple, The Better ! 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. Design the UI first and get it right, then build the back end.

3. 3 3 @ 2014 Narus, Inc. Importance of UI Standards Help developers produce consistent, Narus-branded applications in less time, by leveraging assets and tools. Improve customer satisfaction and usability by providing a consistent user experience across all the Narus 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 Reduce code changes

4. 4 4 @ 2014 Narus, Inc. Conformance Conforming to these standards will benefit Narus and its customers. Development teams should follow threse steps to conform to the standards. 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, left navigation area). Step 2. Prototype Evaluation Usability test: easy to use and consistent

5. 5 5 5 @ 2014 Narus, Inc. Login Screen Required elements: Logo, application name, version, username & password fields, login button, copyright

6. 6 6 6 @ 2014 Narus, Inc. Dialog boxes have three required elements: Title bar Input controls Command buttons Dialog Boxes

7. 7 7 7 @ 2014 Narus, Inc. Optional elements are: Tabs Help Access Required field asterisks Dialog Boxes

8. 8 8 8 @ 2014 Narus, Inc. Controls and Components The content area should be designed to optimize space and clarity. White backgrounds, gray boxes, color, and line work should clearly delineate interaction areas. Buttons – Button Placement

9. 9 9 9 @ 2014 Narus, Inc. - 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 ort Controls and Components

10. 10 @ 2014 Narus, Inc. - 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 (Save) and Cancel Up and Down (in scrolling lists) Yes and No Controls and Components

11. 11 @ 2014 Narus, Inc. - Button text standards Follow the headline capitalization standards. 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 Controls and Components

12. 12 @ 2014 Narus, Inc. - 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. Controls and Components

13. 13 @ 2014 Narus, Inc. Check Boxes & Radio Buttons Laying Out The label for the check box or radio button should be located to the right of the 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. Typically, each checkbox or radio button is left aligned in its own row. However, if there are three or fewer check boxes, they may be located on the same row. Controls and Components

14. 14 @ 2014 Narus, Inc. 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 Text fields Text areas List boxes Pull-down list boxes The controls should be left justified to the left edge of the control with the longest label Controls and Components

15. 15 @ 2014 Narus, Inc. - Right Side Labels Locate the label to the right of the control for: Controls and Components Check boxes Radio buttons

16. 16 @ 2014 Narus, Inc. - 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 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 Controls and Components

17. 17 @ 2014 Narus, Inc. 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 next slide) 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.

18. 18 @ 2014 Narus, Inc. - 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"). Combo box text (Centimeters) Command button text (Don't Save) Icon names (Trash Can) Labels for buttons or controls (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. Text and Data Formatting

19. 19 @ 2014 Narus, Inc. - Sentence-Style Capitalization Check boxes (This is a check box label) Radio buttons Instructional text Alert box text (The file 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.) Text and Data Formatting

20. 20 @ 2014 Narus, Inc. 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. Text and Data Formatting

21. 21 @ 2014 Narus, Inc. Abbreviations Exceptions: Country names: Use periods for the abbreviations U.S. and U.K. when they are used as adjectives. E.g. 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. Text and Data Formatting

22. 22 @ 2014 Narus, Inc. Instructional Text Instructional text is added information about the presented content or controls. 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. Text and Data Formatting

23. 23 @ 2014 Narus, Inc. Copyright Notice Text Application names should start with the word “Narus”, for example Narus nSystem. Use the date when the application first became publicly available in the copyright notice. Example: © 2014 Narus, 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 1.3 (released in 2014) incorporates original aspects of version 1.2 (released in 2013, the copyright notice for 1.3 should state: ©2014 Narus, Inc. or © 2013-2014, Narus, Inc. Note: © = Copyright: Copyright 2014 Narus, Inc. (c) is wrong for copyright and should not be used. Text and Data Formatting

24. 24 @ 2014 Narus, Inc. Color is a key brand differentiator Always use the correct color specifications when using and reproducing the Narus Corporate Signature. #808C24#EA7600 Narus Signature Color & Minimum SizeClear Space Narus Brand

25. 25 @ 2014 Narus, Inc. SECONDARY COLORS PRIMARY COLORS : Corporate Color Palette Narus Brand

26. 26 @ 2014 Narus, Inc. Chart Narus Brand

27. 27 @ 2014 Narus, Inc. Pie Chart Narus Brand

28. 28 @ 2014 Narus, Inc. Narus Corporate Font The Benton Sans Condensed family was chosen for its contemporary appearance, compatibility with the Narus Corporate Signature, and the high degree of readability in print and electronic media. (Note: Arial is used as the default font for word-processed letters and documents only). Typography plays a major role in shaping and differentiating a corporate brand. To help create a consistent identity for all printed and electronic materials generated by Narus, a standard family of typefaces has been chosen for exclusive use in all media—marketing materials, corporate communications, business forms, signage, website, etc. BENTON SANS CONDENSED BOOK (body text, headlines, all cap headline style) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789$&%#(.,;?!”*) BENTON SANS CONDENSED REGULAR (headlines, emphasis) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789$&%#(.,;?!”*) Narus Brand

29. 29 @ 2014 Narus, Inc. Narus Visual and Typographic Style Narus Brand

30. 30 @ 2014 Narus, Inc. Common UI Assets Common UI assets will speed up product development with consistency. css/nsystem.css: common layout (header, left /right pane, footer, popup) css/menu.css: top navigation menu css/nav.css: left navigation menu css/tabs.css: tabs in the content pane css/nlogin.css: login page css/jquery.datetimepicker.css: date & time calendar js/misc.js: common javascript for general actions js/jquery.js: renamed jquery API file for jquery.min.js without version js/copyright: for footer js/tablesorting.js: table column sorting js/jquery.datetimepicker.js: date & time calendar picker images/*.*: icons, images nSystem UI prototype: http://172.31.3.128:8888/UI/131/cvectors.htmlhttp://172.31.3.128:8888/UI/131/cvectors.html

31. 31 @ 2014 Narus, Inc. Web Accessibility Accessibility of a system describes its ease of reach, use and understanding. Accessibility in many contexts can be related to the ease of use for people with disabilities and comes under Usability.  Page title Page title  Image text alternatives ("alt text") (pictures, illustrations, charts, etc.) Image text alternatives ("alt text") Icon: not only color differential but shape Text:  Headings Headings  Contrast ratio ("color contrast") Contrast ratio ("color contrast")  Resize Text Resize Text Interaction:  Keyboard access and visual focus Keyboard access and visual focus  Forms, labels, and errors (including Search fields) Forms, labels, and errors General:  Multimedia (video, audio) alternatives Multimedia (video, audio) alternatives  Basic Structure Check Basic Structure Check References: http://www.w3.org/WAI/eval/preliminary.html http://www.w3.org/WAI/eval/preliminary.html Web Content Accessibility Guidelines (WCAG) OverviewWeb Content Accessibility Guidelines (WCAG) Overview, WCAG 2.0WCAG 2.0

32. 32 @ 2014 Narus, Inc. Web Optimization These includes any web graphics, images, Javascripts, Cascading Style Sheets (CSS), etc. Hosting assets separately is not a must, but we’ve seen tremendous result in terms of server stability with this implementation when the blog was having a traffic spike.server Compression with GZip Minimize Redirects Reduce DNS Lookups Optimization: The Assets (CSS, Javascripts, Images) 1. Merge Multiple Javascripts into One: http://www.creatype.nl/js/prototype.js,builder.js,effects.js,dragdrop.js 2. Compress Javascript & CSS (removal of unnecessary whitespace/comments) 3. Customize Header Expiry/Caching (skipped unnecessary HTTP request) 4. Optimize image for web. Do not scale images. Use sprite 5. Keep your markup clean with CSS Selectors. Optimize and Compress your CSS code (e.g. CSS Tidy) DRY rule: Clean and optimized code is important not just for file size, but for maintenance and readability as well. The principles mentioned above are good considerations not just for CSS, but can be applied to HTML, JavaScript, and other programming languages. http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/ http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/ - Host Assets Separately and Maximizing Parallel Downloads

33. 33 @ 2014 Narus, Inc. - Useful hints for faster loading Lay out your pages with CSS not table Browsers read through table twice before displaying their content. CSS requires less code and load once with external CSS file and is cached on computer. Don’t use images to display textCall up decorative images through CSS as background image.pretty-images {background: url(filename.gif); width: 200p;, height: 100px} Use shorthand CSS properties : margin: 2px 5px 3px 5px // top, right, bottom, left padding: 2px 5px 3px // top, right/left, bottom.myFont {font: 1em/1.5em bold italic serif} …instead of:.myFont { font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif } Minimize white space, line returns and comment tags Use relative call-ups. To avoid absolute call ups as they take up more space Put CSS and Javascript into external document Use “/” at the end of directory links Put CSS links in and non-UI related javascript links on bottom of page after Web Optimization

34. 34 @ 2014 Narus, Inc. Model-View-Controller (MVC) - MVC design pattern brings better organization and code reuse 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

35. 35 @ 2014 Narus, Inc. - 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 Model-View-Controller (MVC)

36. 36 @ 2014 Narus, Inc. - MVC Code Separation sample private static final String DATE_FORMAT = "yyyy/MM/dd"; // for model private static final String DATE_TEXT = "yyyy/mm/dd"; // 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); } Model-View-Controller (MVC)

37. 37 @ 2014 Narus, Inc. Q & A