User Interface Guidelines UI Design team December 15, 2012

Why Guidelines? Uniformity in Solutions Branding Easy maintainable Reuse User centered approach Quality Analysis

User Interface Guidelines Topics Topology Header Navigation Forms Types of Screens Table Notification Widgets Footer

Topology Topology A topology in UI is usually a schematic description of the arrangement of: Header Navigation Main Work Area Footer

Topology

Header There should be three things present in a header. Customer Logo Solution Name Help links

Position : top left Size : height – 44px (Fixed) width – variable (160px max.) Alignment – As per figure below Header (Customer logo)

Header (Solution name) Position : Center Aligned Size : Solution name should not exceed 16 characters Alignment – As per figure below

Position : top right Links: Ask TCS and Help Size : As per figure Font: Arial Header (Help links)

Header (Exception) There are different types of header based on requirement of solution. Some Examples:

Navigation The user needs to navigate among sections of a application/website and while having clear indication of what section the user is currently looking at.

The size of the Navigational Bar is 1004x26 pixels. Maximum tabs in one screen ( 7 + 2) Navigation

Navigation (Tabs structure)

Navigation (Tabs alignment)

: Navigation ( Sub Navigation structure )

Navigation (Sub navigation alignment)

All screens should have controls to Close,Maximize and Minimize properly. There should be a clear exit point in each screen. Re-size should not hide any functionality All tabs and links present on screen should be up for click and in case they are disabled they should be grayed out. All appropriate browsers should be supported with respect to correct display. Tab in use should be highlighted to inform the user about his location in the application. Navigation Guidelines

The On hover tab should be a bit distinct from other tab. Arrow head pointing downwards can be used. The contents of On hover tab should be displayed when cursor is moved on that tab. The user should be able to use both mouse and keyboard on the interface. Navigation Guidelines

All items under a particular tab if exceeding seven should be arranged as follows: By frequency— most frequently used options at the top. By task— if there is a usual order in which parts of a task are performed. By logic— if there is a logical order, for instance a list of dates. By alphabet— only use alphabetical order if the labels match the way your users think about the items. Navigation Guidelines

Breadcrumbs should be used in design as they are a form of secondary navigation that helps user to understand the hierarchy and structure of the application/web page. Breadcrumbs should take minimal space and positioned at the top of the page,below the header and above the content. They would serve no purpose on the homepage so should not appear there. Breadcrumb trail should be linked to its respective page or section in the hierarchy,the exception being the one for current page. Navigation (Breadcrumbs)

Forms Forms include label and input fields. Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only need to move in one direction: down.

Length of all the fields should be made uniform as per the requirement. If no. of characters are known ensure that the fields are uniform throughout the screen. Exceptions may be there but the length of remaining fields should be uniform. The background color of all the mandatory fields should be yellow. The * mark for mandatory fields should be on the left side of the label. Forms

The text which is non-editable should not be shown in any colored box. It should be shown as text only without any box. The date field may not be without a date picker for predefined dates. Icon (magnifying glass) should be provided within auto-look up field to distinguish it amongst other fields. Forms

The calendar displayed against the date field should be aligned properly, with same color combination, and the number of options eg. total number of months (Jan,Feb, etc) and years visible should be same across all the applications. A loader with proper message should be presented on the screen whenever the solution is processing an action. Forms

The text pertaining to Radio button/Check box should be after the Radio button/Check box. Always group radio buttons and align them vertically. Horizontal alignment of radio buttons is not user friendly. Limit option buttons to six or fewer choices. If you have more choices, consider using a single selection list box or drop-down list box instead. Default date format have to be displayed in the Date field (dd-mm-yyyy) the user should have the options to fill in the date without selecting the calendar.

If there are more then two radio button then vertical alignment should be used. Horizontal alignment is not user friendly. The Date field should have provisions to be picked up from the pop-up calendar and the default date format should be mentioned in the date field. For eg- (dd-mm-yyyy). The user should also have the option to fill the date without selecting the calendar. Forms

The hyperlinks, which navigate within the application, are represented by a simple text and on rollover; there is an underline on hover along the linked text. Calendar controls should be altered for ease of selection for YEAR and MONTH using drop down. a

Forms Date entry field should be with a date picker and a tip informing about the format of the date to be entered. The alignment of fields should be consistent and uniform on the screens.

Types of Screen Create Screen : This screen is to create a new set of Record. This screen is easily invoked when the users clicks on the Create Button available at the top left side screen.

View Screen : Users navigate to the View screen if they want to see further details of a particular record from a listing screen. Types of Screen

Listing Screen : The Listing screen appears when the user searches for any required information (record) through the search section. Types of Screen

Take Action Screen: The ‘Take Action’ screen is for scenarios where decision to be taken from transaction record. These screens are accessible only to certain type of users. Types of Screen

View/Update Screen : Types of Screen

Widgets A widget (or control) is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user.

Widgets The buttons in the page should be active/Inactive depending on the call to actions. CHECK BOX should be used instead of option buttons in case of binary choice (yes/no). Radio buttons/Check boxes should be selectable by clicking on the adjoining text also. The first few words should give the user a good idea of what the link is about. Tool tips should be brief. Paging should be used to avoid vertical scrolling for data grids. There should be no paging for edit screens.

Widgets The hyperlinks, which navigate within the application, are represented by a simple text and on rollover; there is an underline on hover along the linked text. Calendar controls should be altered for ease of selection for YEAR and MONTH using drop down. a

Table Table Layout A table layout is exactly what you might expect: a grid of made up of rows and columns, where a cell can display a view control. From a user interface design perspective, a Table Layout is comprised of Table row controls—one for each row in your table.

Table The search results are displayed in a Tabular format with or without pagination according to the requirement. The text of the action buttons should be a verb. For e.g. Save, Delete, Submit, Cancel. Check boxes should be used where you allow multiple selections.

If the data in the column is alphabetical/alphanumeric,then it should be left aligned. If the data in the column is numerical/Currency,then it should be right aligned. The alignment of fields should be consistent on the screens. Title case should be used for labels, in case of multiple word data grid column headings in a table has to be center aligned. Table

There should be a difference in color between the selected, active and inactive action buttons. All buttons present on screen should be up for click,if disabled should be grayed out. Tool tip should be provided wherever icon is present in table. Check boxes or radio button should get clicked and corresponding action (view,delete etc) should function properly. Whenever the cursor is placed on a hyperlink or action buttons the pointer icon should change into hand icon. Scroll bars should be present in a data grid if required. Table

Sorting is allowed on relevant columns of a data grid including images, icons, and photos. There should be an arrow near the data grid column heading to indicate whether the sort is ascending or descending. When a user changes the sort order on a “page” of the data grid, all pages of the data grid should assume the current sort order. When an entry is added or updated to the data grid in a table, the row should be added according to the current sort order. The data in first column of the table should be made hyperlink to view information related to it. Table

Notification A notification is a message to the user that contains relevant information and provides quick access to related content in an application.

Notification Pop up should have minimum buttons like CLOSE and MAXIMIZE. Every pop up should have a proper title. Pop up Should be placed centrally aligned on the screen. In case of small pop up (like calendar control and tool-tip), they should appear near relevant fields. When the parent window is closed, all its pop-ups must be closed. User focus should be taken to the area of error followed by display of error message in a pop up window.

Notification

Proper messages for warning,error,success and alert should be displayed. a) Note alert b) Warning alert

Notification c) Error Alert d) Success Msg Warnings and error messages should be meaningful, useful, accurate and correct. Warning messages for common operations should be same across the pages. There should be proper messages for every action performed, so that the user is well informed of the fact that what is going on.

Notification A loader should be presented on the screen whenever the solution is processing an action. If acronyms or icons are used for the button labels, then full text should be spelled in the Button/Tab tool tip. After Submit/Create/Modify/Delete, a confirmation message should be displayed on successful completion of the task. When delete task is performed an alert pop up should be displayed with message asking selected data to be deleted or not.

ICONS IconsUsed For To display the Calendar pop up To chose from List of Values (LOV) To insert a new row The details Will open in a pop up window The asterisk mark used denotes they are Mandatory fields. Verdana,11px,Bold,# Edit Schedule Configuration or Settings Copy

Pagination Pagination is used to fulfill user needs to view a subset of sorted data that is not easily displayed on one page.

Pagination Style to be followed for Pagination for the Table data:

Footer Footer should always consist of copyright message followed by ”|” and Terms of use Followed by “|” Version of the Application and stick to the bottom of page.