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

2. 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. 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. 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. Login Screen
Required elements:
Logo, application name, version, username & password fields,
login button, copyright

6. Dialog Boxes
Dialog boxes have three required elements:
Title bar
Input controls
Command buttons

7. Dialog Boxes
Optional elements are:
Tabs
Help Access
Required field asterisks

8. 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. Controls and Components
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

10. Controls and Components
- 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

11. Controls and Components
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

12. Controls and Components
- 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. Controls and Components
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.

14. Controls and Components
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

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

16. Controls and Components
- 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

17. 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. Text and Data Formatting
- 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.

19. Text and Data Formatting
- 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.)

20. Text and Data Formatting
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.

21. Text and Data Formatting
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.

22. Text and Data Formatting
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.

23. Text and Data Formatting
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 © , Narus, Inc.
Note: © = Copyright: Copyright 2014 Narus, Inc.
(c) is wrong for copyright and should not be used.

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

25. Narus Brand
Corporate Color Palette
PRIMARY COLORS :
SECONDARY COLORS

26. Narus Brand
Chart

27. Narus Brand
Pie Chart

28. Narus Brand Narus Corporate Font
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.
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).
BENTON SANS CONDENSED BOOK (body text, headlines, all cap headline style)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz $&%#(.,;?!”*)
BENTON SANS CONDENSED REGULAR (headlines, emphasis)

29. Narus Brand
Narus Visual and Typographic Style

30. 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:

31. Web Accessibility Page title
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
Image text alternatives ("alt text") (pictures, illustrations, charts, etc.)
<img src="picture.jpg" alt="my picture" >
<td class="alertCritical" title=“Critical"></td>
Icon: not only color differential but shape
Text:
Headings
Contrast ratio ("color contrast")
Resize Text
Interaction:
Keyboard access and visual focus
Forms, labels, and errors (including Search fields)
General:
Multimedia (video, audio) alternatives
Basic Structure Check
References:
Web Content Accessibility Guidelines (WCAG) Overview, WCAG 2.0

32. Web Optimization
- Host Assets Separately and Maximizing Parallel Downloads
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.
Compression with GZip
Minimize Redirects
Reduce DNS Lookups
Optimization: The Assets (CSS, Javascripts, Images) Merge Multiple Javascripts into One:
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.

33. Web Optimization - 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 <div class=“pretty-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 <head> and non-UI related javascript links on bottom of page after </body>

34. 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. Model-View-Controller (MVC)
- 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

36. Model-View-Controller (MVC)
- 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);

37. Q & A