Zodiac UI Design Guideline

Getting Started

Getting Started

This UI/UX Guidelines paper is aimed at introducing the ZODIAC's Port Management Information system while setting a new bar for consistency and simplicity for the modernization of the ODIAC legacy system.ZODIAC has titivated its comprehensive integrated enterprise level port-management information system with redesignedUI/UX components.

1.1 Executive Summary

ZODIAC is a next generation Terminal Operating System (TOS). As part of the Zodiac Architectural Revamp Assessment (ZARA) exercise, one of the critical requirements identified was to revamp its UI and UX Design to support various accessibility options such as desktop, tablet and mobile and with a purpose of modernization, responsiveness & seamless user interface design. This document provides the UI Design Guidelines for the intended audience to solve this purpose.

1.2 Aim

The key aims for writing these guidelines subsume

  • Create a visual language for ZODIAC users and other stakeholders including UI designers, UI developers, Business analysts, and System Integrators while outlining the UI design best practices to ensure comprehensive and avant-garde UI development for ZODIAC.
  • Synthesize the classic principles of a good design while highlighting the proven methodologies that can be followed for the modernization of the UI and UX elements of ZODIAC.
  • Development of a single underlying guideline that allows for a unified experience across varied platforms and devices.

1.3 Usage

This document has been intended for audiences that includes Business Analyst, UIDesigner, UI Developer, Mobile APP Developer, Quality Assurance Engineers & System Integrators.

How to use this guideline for Web, Mobile APP & OPS explained as below.

  • WEB & Mobile
  • Business analyst & UI Designer

While creating actual wireframe/design for the Zodiac Web UI or Mobile APP UI, Business Analyst & UI Designer shall consider the guideline with respect to its Logical & Visual structure.

Visual Structure compiles of various design principles, UI elements and UI components which is detailed in the subsequent sections 4 & 5.

Logical Structure related parameters are detailed in section 3.9 under Layout Structure.

  • UI Developer

While converting to HTML from Wire Frames, UI Developer shall consider the parameters defined in this guideline, including behaviour of different states for various UI elements & UI components as detailed out in section 4 & 5. As the revamp progresses, various libraries and code snippets shall be added in section 4 & 5 for the reusability purpose.

  • OPS

OPS UI shall only be revamped in terms of its visual look and feel. Any changes in the functional elements of OPS are excluded from the scope of this guideline. The usage of this guideline for OPS UI revamp shall be limited to following visual elements only

Buttons, Icons (only application related icons/ no business specific icons), Labels, Navigational Menus, Modal/Non Modal Popups, Typography and Panel.

Methodology

Methodology

2.1 AS IS Study

While preparing this guideline, an exhaustive AS IS study of the existing legacy system was carried out. As part of this study, the major insights pertaining to the UI/UX problems along with the challenges were discovered. An exhaustive system walk-through was conducted by the SME (Subject Matter Expert) to identify complications and glitches prevailing in the legacy system while bringing the imperative information, facts and data related to the problems. It was followed by the study of related modules of which complete list is as follows.

    Java Swing UI

  • OPS
  • Vessel Config
  • Terminal Config

    Emulator

  • Handheld – Reefer, Inspection
  • VMT – Tractor, Crane

    Web UI

  • Booking
  • Gatepass
  • EBS
  • SSR
  • Security Admin EDI
  • Admin Web
  • Notification Admin
  • CII
  • Reporting

    .NET Thick Client

  • Visit Schedule
  • EDI Admin
  • Container Admin
  • Gate Admin
  • Tractor Registration
  • TDA
  • BIS
  • Table Maintenance
  • Reefer WO Admin

2.2 Identification UI Elements and Components

The next phase was comprised of identification of the various UI Elements and Components used in the legacy system. Its intended usage (unique or repetitive) was studied in detail.

As the cardinal aim is to revamp the entire legacy system while performing its modernization, all the identified UI Elements and Components were considered for redesigning.

The final listof UI elements & UI components was discussed &validated by the DPWAH SME.

2.3 Research & Analysis

A profound research was carried out and brainstormed all the related industry practices in order to find out the most relevant best practices that can be adopted for eliminating the key issues of the prevailing legacy system which include maintainability and compatibility.

Main emphasis was on following the industry best practices includes Material Design Concepts of Google, iOS Human Interface Guideline and Various Responsiveness Frameworks like Bootstrap 3.0.0, Foundation v5.5, Skeleton v2.0.1 etc. in order to craft a implementable User Interface Design. Due diligence exercise was carried to validate the feasibility of identified UI elements & UI components using advanced web technology stack.

2.4 Theme Selection

Considering Color combination, Typography, Readability, Icon's lucidity &sizes,Look& feel as major factors, a theme selection exercise was carried out. During the process various references such as Zodiac application corporate website, DPW Asia pacific corporate websites&DPW Web Design guideline was considered to create various theme options that can cater the need of ZODIAC Web, Mobile APP & OPS. The final theme selection was performed by DPWAH management. The selected theme is as shown in fig 2.4 below..

Final Selected Theme
Fig 2.4 Final Selected Theme.

2.5 Prototyping

Considering the final list of UI elements & UI components selected by ZODIAC SMEs, various prototype options were created, deliberated and finalized. Details of each UI Elements and Components are explained in the subsequent sections.


Design Philosophy

Design Philosophy

To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning to the application. The principles of user interface design are intended to improve the quality of user interface design. Designer should consider following as a base principal for the Zodiac actual UI design screens.

3.1 Clarity

Clarity is the most important principal of user interface design. Indeed, the whole purpose of user interface design is to enable people to interact with system by communicating meaning and function. The interface should be visually, conceptually and linguistically clear, including Visual elements & Functions. So is the reason while creating prototype designs, it is considered: text is legible at every size, icons are precise and lucid, and a sharpened focus on functionality which motivates the design. While creating an actual designs, designer should take care of logical clarity of content and structure as well.

3.2 Balance

Balance is the concept of visual equilibrium, and relates to our physical sense of balance. As a design principle, balance places the parts of a visual in an aesthetically pleasing arrangement. Considering the same principal designer should take care while placing different elements, so that elements balance each other, like as in form control small elements can balance one large elements.

3.3 Consistency

Consistency is basic principle for any user interface design. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. they'll learn what the different buttons, tabs, icons and other interface elements look like and will recognize them and realize what they do in different contexts. They'll also learn how certain things work, and will be able to work out how to operate new features quicker, extrapolating from those previous experiences. While creating prototypes, it is considered that the consistency in terms of aesthetic like style and appearance is repeated to enhance recognition. Designer while creating the actual design needs to consider the same in the functional aspect.

3.4 Dominance & Focal Points

The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element. The more dominant element likely has greater visual weight than the elements it dominates. One can create dominance through contrast, emphasis and relative visual weight. dominance creates a focal point in a design which brings attention to the element or area that is the most important. Dominance is what catches the eye and makes the viewer stop and look at the image. While creating prototypes for Zodiac, It has been considered i.e. In buttons, the primary and secondary buttons are discovered where visually primary buttons has more weight than secondary buttons to let user know what primary actions needs to be triggered.

3.5 Contrast

One of the main reasons to use contrast in Zodiac user interface designs, is to grab attention, It not only helps in making UI more attractive but also brings clarity. Contrast can be used in many other ways, including: size, space, color etc. During process for writing this guideline, different color combination are discovered to create contrast between element, components &It's different states, which is explained in the subsequent section for the color.

3.6 Space

Space provides breathing sense to the user interface. It gives the eye freedom to move through a design and to discover the elements it's looking for. Without space, you don't have design. Space helps in establishing contrast & provides visual rest between groups of elements. One of the more important functions of space is to improve readability and legibility, it also helps in creating qualitative, simple, clean & openness user interface which. While creating prototypes space is considered to be important principal by fixing the space around element, placeholder etc which designer needs to consider while creating actual designs for the Zodiac application.

3.7 Color

Color plays a major role when it requires to create contrast in the UI & to bring clarity between the content. Designer should use colors as defined in the color swatch shown in the fig 3.7 below, which is created as per the selected theme.

  • Primary Blue color:

Blue color is introduced to create contrast & to bring clarity. It can be used in all different state like selected, active, hover & normal except the disable state.

  • DarkBlue(#0c79c1)  color can be used in the background & as border color to bring the clarity between two section of elements while used with SkypeBlue(#2991d6)   color. Mainly used in Button element & in Table component.
  • SkypeBlue(#2991d6)   color can be used in background, as font & border color to bring clarity and create contrast.
  • LightSkyBlue(#e0f3ff)   color can be used as a background to create contrast on hover or selected state when element is placed on white background. Mainly used in Dropdown menu element and Table component to show selected row.
  • NavyBlue(#120e5b)   color can be used in background & color for the element. Used in the elements like Icon, Scrollbar, Breadcrumb, Header/Footer & Table component.
  • Primary Gray:

Gray (#d8d8d8)   color is introduced to create contrast in the overall theme by using it in . It can not be used in selected & hover state except the OFF state of selection Switch but can be used in the normal state. Also used to show the disable state of element.

  • DarkGray(#5c5c5c)   color can be used in selection as background, in label as font color & in icon as an icon color
  • DimGray(#c5c5c5)   & LightGray(#e6e6e6)   , the only use of these colors, is in the disable state. DimGray(#c5c5c5)   can be used to display the label color & LightGray(#e6e6e6)   as background.
  • Gray (#d8d8d8)  , the only usage of this color is in the border. Can be used as border in various component and elements. Anywhere, when it requires to use the Gray (#d8d8d8)   border, designer should use Gray (#d8d8d8)   color.
  • LighterGray(#e6e6e6)   color can be used only as background. It can be used in panel heading section background, as normal state background for navigation etc.
  • Special Colors:

These colors are introduced to bring clarity between different validations.

  • SeaGreen(#45b6b0)   can be used to show success.
  • Orange(#feaa30)   can be used to show warning.
  • Red(#ff0000)   can be used to show error.
Color Swatch
Fig 3.7 Color Swatch

3.8 Typeface

Considering readability as the major factor for any complex user interface from Serif and Sans-Serif typeface, Sans-Serif typeface is discovered. In Sans-Serif typeface, after a deep research considering; narrower body, smaller counters, much tighter & uniform letter spacing, and a more complete Unicode character set, Tahoma font family is discovered as the main and only typeface for the Zodiac user interface design. Different style for the typography is described in show below

The font family which we've selected is Tahoma.

Below is different Typography examples

  • Heading
  • Heading title will be in 18PX, 15PX and 14 Px basing on the platform user is using.
  • Heading will be always in Bold
  • Heading will be in Primary colors only - SkypeBlue(#2991d6)  , NavyBlue(#120e5b)   and DarkGray(#5c5c5c)  
  • Normal Body text
  • Normal body (ex: tool tips, messages, Informational content etc.,) will be in 12 PX and 14px
  • The primary DarkGray(#5c5c5c)   color will be used in a normal style to represent Normal body text
  • Label/Flat action or text links
  • Labels/flat actions (or) text links will be in 12PX or 14PX.
  • Labels can be in 2 colors - NavyBlue(#120e5b)   and DarkGray(#5c5c5c)   only
  • Label's can be bold as well
  • Flat action will be SkypeBlue(#2991d6)  
Typography
Fig 3.8 Typography

3.9 Layout structure

Considering above design principals, structure for the User Interface can be discovered. There can be logical structure & visual structure. For the logical structure, one needs to consider ease for the end-user, cardinal principals of elements & components. I.e Considering UI element Navigation, its placement (top/right/bottom/left) should be fixed for the user to identify & content should be grouped logically to make user to understand where to land and from where to start. There are cardinal principals are mentioned below which one needs to consider:

  • Primary/Secondary buttons should always be in the center and bottom, flat buttons should always be in the right bottom.
  • Icon based actions on the panel heading should always be in the right. Grouped icons action while used in the toolbar should be at the top and while used in sub navigation should be in the left.
  • Icons should be in the center to its placeholder.
  • Labels used inside the input fields should be left aligned and to the left of element. Labels used in actions should always be in the center of the placeholder, while used in the form component outside element, should be right aligned and to the left of element except Radio & Checkbox, they should be left alight and to the right of element.
  • Dropdown menu, while in Select menu element should be open either upwards or downwards and in Navigation element should be open either downwards or right to the element.
  • Scrollbars can either be at the bottom or right.
  • Pickers should open either upwards or downwards.
  • Modal & Non-modal dialog should always open in center, while on minimizing the Non-modal dialog should be in horizontal sequence to the bottom right of window in case of multiple dialog.
  • Validations in ToolTip can be positioned in top/right/bottom/left to the element.
  • Progress & Loaders should always be in the center.
  • Pagination used in the table should always be on top and bottom.
  • Breadcrumb should always be on top.
  • Site specific main Navigation should always be on top while site specific sub-navigaion should be in the left as sticky to the window.
  • Title should always be left aligned and should be position left. Body text should always be left aligned. Header should be on top and footer in bottom.
  • All components should be in the center except the tabs, tab should be positioned in left to the panel. Considering Information, elements & components, the whole layout visual structure should be center aligned to the window both in mobile & web, while left in the OPS.

For the visual structure, considering all above cardinal principals, prototypes for UI elements & UI components are discovered and are explained with example in the subsequent sections. Designer should consider the bootstrap grid while creating a layout visual structure as explained in Implementation Guide separately.


UI Elements

UI Elements

Button clearly communicates the call to action when user press it. Buttons can be text, an icon or both.

Button clearly communicates the call to action when user press it. Buttons can be text, an icon or both.

4.1.1 Types

There are different types of buttons can be used which is listed as below.

  • Primary & Secondary Button

Primary are those who has highest priority & Secondary are those who has lower priority i.e In a form, suppose we have Submit and Reset buttons where Submit has the highest priority hence will consider as a primary button where as Reset has a lower priority as compared to Submit will consider as a secondary button.

  • Flat Button Set

Flat buttons are those having only text without background color/border specified around the placeholder. Mainly will be used in popup dialog box.

  • Icons/Text Based Dropdown Button Set

Icon & text based button which will have two call to action in the single button. Clicking on the Icon&text will occur the primary call to action and by clicking on the downside arrow on right side of the button, will open the dropdown menu with relative options to choose from.

  • Icons Based Button Set

Buttons are those having only icon in the placeholder & by clicking on the icon , the main call to action will occur.

  • Icon Based Group Button Set

When two or more icons based buttons needs to place together, defined patterns needs to be considered as shown in Certain consideration must be taken care while adopting buttons which are listed as below. fig 4.1.1

Different types of button set
Fig 4.1.1 Different types of button set

4.1.2 Guideline

Certain guidelines must be taken care while adopting buttons which are listed as below.

  • Primary buttons can be text based or icon/text based
  • Except flat button all buttons will contain 1px border around the placeholder.
  • Text size for the primary/secondary buttons is 14px
  • Text based primary button will have 1px border around the button with color DarkBlue(#0c79c1) . Left/Right padding from the placeholder will be 24px. Background will be with color SkyBlue(#2991d6)  . Font color will be White(#ffffff)  . Height will be 40px.
  • Text based secondary button will have 1px bo rder around with color SkyBlue(#2991d6)   & white (#ffffff)  . background. Text color will be SkyBlue(#2991d6)  .
  • Icon/text based primary button will have 2 section, placeholder for icon & text.Icon placeholder will have 40 px height/width with 16px icon. Background for the icon placeholder will be DarkBlue(#0c79c1)  while the text placeholder will remain the same as text based button specification. The whole button will have 1px border with color DarkBlue(#0c79c1) .
  • Distance between any near by primary/secondary buttons will be 10px.
  • Width of the button will depend upon t he text length. Text length is limited to 20 characters, anything more than 20 characters button will converted icon based button.
  • Icon/text based Button with dropdown option will have 3 section. Placeholder for Icon, text & downside arrow. Height of the button will be 24px, icon placeholder will have 24 px width with 16px icon, text placeholder will have 10px padding left/right and size of the text will be 11px. While the color specification for icon & text placeholder will remain the same as icon/text based button. The width of the downside arrow will be 14px with white background and having down side arrow icon with color SkyBlue(#2991d6)  . The same is explains in the prototype .
  • Flat button text will be bold with 16px font size. Text color will be SkyBlue(#2991d6)  .
  • Icon based button will have placeholder with 16px icon. Height & width of the placeholder will be 38px including 1PX border around with Gray (#d8d8d8)   color. Color of the icon will be NavyBlue(#120e5b)  . Background can be White (#ffffff)   or LighterGray(#f6f6f6)  .
  • Icon based group button will have 45 px height & width. Each button will be place at zero distance & can be placed horizontally. Ba ckground for each button will be white. Icon color will be SkyBlue(#2991d6)  . Each button will have 1px border with Gray (#d8d8d8)   color. This set of button in desktop on mouse over will dis play the button name as tooltip while in mobile/tablet will collapse in slider where each button will have text underneath it.
  • For any types of buttons, no ac tion will be triggered on mouse over event, it will only happened on click/press event.
  • Except icon based button se t, all other buttons will have round corner with 2px radius.
  • Action will be triggered with placeholder in Icon based buttons.
Button Design Consideration
Fig 4.1.2a above demonstrate the sizes of different types of buttons
Icon text based drop-down button
Fig 4.1.2b Parameters of different types of button set

4.1.3 Behaviour

Different types of buttons have certain behaviour when user performs any action on buttons. Below are the all common behaviour.

Normal State:

It is state behaviour where no action has been done on button. In normal state specification o f the button will remain the same as described in the section 4.1.2 design guideline.

Normal State
Fig 4.1.3a Normal state of different types of button set

Hover State:

Hover state behaviour will occur when user will move cursor over the button. It is a behaviour that will only occur in desktop version where as in mobile/ tablet there will not be hover state

  • Text based button (primary)
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Font Color: White(#ffffff)  
  • Shadow: Black(#000000)   with 30% opacity.
  • Icon/text based button

For this type of button set, icon placeholder will remain the same while text placeholder behaviour will change as below.

  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Shadow: Black(#000000)   with 30% opacity.
  • Text based button (secondary)
  • Background: SkyBlue(#2991d6)  
  • Border: SkyBlue(#2991d6)  
  • Font Color: White(#ffffff)  
  • Shadow: Black(#000000)   with 30% opacity.
  • Icon based button
  • Background: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
  • Icon Color: NavyBlue(#120e5b)  
  • Icon/text based dropdown button

For this type of button set, icon placeholder will remain the same while text & downside arrow placeholder behaviour will change as below.

  • Text placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Downside arrow placeholder
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Icon Label: White(#ffffff)  
  • Flat button
  • Text Color: NavyBlue(#120e5b)  
  • Icon based group button
  • Background: SkyBlue(#2991d6)  
  • Icon Label: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
Hover State
Fig 4.1.3b Hover state of different types of button set

Press/Click Event State

Click/press event state behaviour will occur when user will press the button. It is a behaviour that will trigger the action.

  • Text based button (primary)
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Font Color: White(#ffffff)  
  • Text based button (secondary)
  • Background: SkyBlue(#2991d6)  
  • Border: SkyBlue(#2991d6)  
  • Font Color: White(#ffffff)  
  • Icon/text based button

For this type of button set, icon placeholder will remain the same while text placeholder behaviour will change as below.

  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Icon based button
  • Background: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
  • Icon Color: SkyBlue(#2991d6)  
  • Icon/text based dropdown button

For this type of button set, icon placeholder will remain the same while text & downside arrow placeholder behaviour will change as below.

  • Text placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Downside arrow placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Icon color: DarkBlue(#0c79c1) 
  • Flat button
  • Text Color: DarkBlue(#0c79c1) 
  • Icon based group button
  • Background: DarkBlue(#0c79c1) 
  • Icon Color: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
Icon based group button
Fig 4.1.3c Click state of different types of button set

Disable State

Behaviour will remain the intact for this type of button. Below is the design specification for this type of button.

  • Background: LighterGray(#f6f6f6)  
  • Border: LightGray(#e6e6e6)  
  • Font Color: DimGray(#c5c5c5)  

Error/Warning State

Below is the design specification for this type of button.

  • Error State
  • Background: Red(#ff0000)  
  • Border: DarkRed(#cf2619)  
  • Font Color: White(#ffffff)  
Disable State
Fig 4.1.3d Disable/Error/Warning state of different types of button set
  • Warning State
  • Background: Orange(#feaa30)  
  • Border: DarkOrange(#d2881c)  
  • Font Color: White(#ffffff)  

4.1.4 Usage

Each type of buttons has specific use cases. Below are the different use cases for each type of buttons.

  • Text & Icon/Text Based Buttons (Primary/Secondary)

These set of button can be used as primary or secondary action based on the priority of call to action. Mainly these set of buttons can be used in the form design which is shows in the fig 4.1.4

Text & Icon/Text Based Buttons
Fig 4.1.4 Use of text & icon/text based button set.
  • Text/Icon based dropdown button

These set of button can be used mainly in toolbar and panel window heading where main action itself has other action choices. Mainly this set of action will be used in OPS which is shows in the fig 4.1.4a

Text/Icon based dropdown button
Fig 4.1.4a Use of icon/text based dropdown button set.
  • Flat Buttons (Primary/Secondary)

These set of button can be used in modal/non-modal dialog popup where either information needs to pass the user or need to take any feedback. Below fig 4.1.4b demonstrates the use of flat buttons.

Flat Buttons
Fig 4.1.4b Use of text & icon/text based button set.
  • Icon based buttons

These set of button can be used mainly in site header, panel window header, other component like in form where component specific action will occur & have not enough space to accommodate text based actions. These set of action will be used in OPS, Web & mobile application at places where it requires as per the design guidelines specified.

Icon based buttons
Fig 4.1.4c Use of icon/text based dropdown button set.
  • Icon based group button

These set of button can be used in OPS toolbar or can be used as a sticky in the web where sub navigation can be shown.

UI Elements

UI Elements

In a graphical user interface ( GUI ), an icon is an image that represents an application, an action, or some message with meaning for the user.

In a graphical user interface ( GUI ), an icon is an image that represents an application, an action, or some message with meaning for the user.

4.2.1 Guideline

Guideline listed as below need to be taken care.

  • An icon is usually selectable but can also be a non- selectable image. Selectable icon will always be with placeholder while non-selectable icon can have placeholder and can not be.
  • In Icons with placeholder, placeholder can have background White(#ffffff)  or LighterGray(#f6f6f6)  . Icon can be placed in placeholder sizes 45PX, 40PX & 38PX as shown in the Fig 4.2.1a
  • Various sizes of icons are defined as 16px, 24px, 32px, 48px & 64px. Only these sizes need to be used.
  • Do not the scale icons, pick the correct size as all required size are defined, if need to create a icon generate a new set of icon in each defined size with pixel perfect sharpness.
  • Selectable Icon can have color NavyBlue(#120e5b)  , SkyBlue(#2991d6)   while non-selectable icon will have color DarkGray(#5c5c5c)  . Reverse (white) can also be used.
  • Validation & message icons can be used in their respective color as described in the design philosophy section 3.7 & as shown in Fig 4.2.1b.
  • For mobile application minimum size of the icon will be 16px.
  • Icon with size 24px mainly will be used in OPS toolbar. While 24PX/32PX icon can be used web as to show the sub navigation as a sticky in left sidebar.
  • 48PX/64PX icons can be used in the Dashboard design.
Icon Placeholder
Fig 4.2.1a Different Parameter for icon placeholder
Types of Validation
Fig 4.2.1b Icons for different types of validation.
Size for icons
Fig 4.2.1c Different Sizes for icons

4.2.2 Usage

Listed below are different usage for the set of icons and its color.

  • Icon can be used in panel heading to show application specific actions. Can also be used with heading title.
  • Icon can also be used in the table to show grid specific actions, Icons can also be used in the form control.
  • Non-selectable icons can be used in the dialog popup near by title in the heading of the popup.
  • Icon can be used in user dashbord. Also can be used in the sticky sidebar & in toolbar in OPS.
  • Icon can also be used in the textfield, select menu, icons used in such element will have 8PX size.

UI Elements

Text fields allow the user to input text, select text (cut, copy, paste).

Text fields allow the user to input text, select text (cut, copy, paste).

4.3.1 Guideline

There are different types of buttons can be used which is listed as below.

  • Text fields can be single-line, multiline & can also be associated with an Icon such as search field will have search icon.
  • Text fields will be associated with label while using in form.
  • While using in touch screen device, touching a text field places the cursor and automatically displays the keyboard.
  • When the mouse and keyboard are the primary input methods, width may be condensed to accommod ate layout, while in mobile device it will take full widt h of the device.
  • Text fields will always have 1px border.
  • For multiline, textarea will be used. Label inside placed will be at 10PX margin from top and left border. Height will be fixed to 115PX.
  • Text fields height will be 35px.
  • Placeholder font size will be 14px & color will be DarkGray(#5c5c5c)   from the primary shade of it. Placeholder will always be left aligned. Left margin from the border will be 10px.
Text input fields
Fig 4.3.1 Different parameters of Text input fields.

4.3.2 Behaviour

Below are the all common behaviour for the text fields.

Normal State

Normal is a state when there is no movement of the mouse or no touch to the text field. Below are the design specification of text field for the normal state.

  • Normal State Properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font color: DarkGray(#5c5c5c)  
Normal State Properties
Fig 4.3.2 Normal State Properties
  • Normal state with success properties
  • Background: White(#ffffff)  
  • Border: SeaGreen(#45b6b0)  
  • Font Color: DarkGray(#5c5c5c) 
  • Normal state with warning properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font Color: DarkGray(#5c5c5c) 
  • Normal state with error properties
  • Background: White(#ffffff)  
  • Border: Red(#ff0000)  
  • Font Color: DarkGray(#5c5c5c)  

Focus State

When user place the cursor in text field either by mouse or by touch, on focus behaviour will occur. Below are the design specification of text field for the focus state.

  • Focus state properties
  • Background: White(#ffffff) 
  • Border: SkyBlue(#2991d6)  
  • Font Color: DarkGray(#5c5c5c)  
  • Shadow: SkyBlue(#2991d6)   with 30% opacity.
Focus state properties
Fig 4.3.2 Focus state Properties

Disable State

When user place the mouse on text field or touches it, it will stay intact. Below are the design specification of text field for the focus state.

  • Disable state properties
  • Background: LighterGray(#f6f6f6)  
  • Border: LightGray(#e6e6e6)  
  • Font Color: DimGray(#c5c5c5)  
Disable State Properties
Fig 4.3.2 Disable State Properties

4.3.3 Usage

  • Text fields can be used in the form control when it requires to submit number, text or mixed format input types. Common input types for which you should optimize include:
    • Number
    • Container number, Gate pass number, Invoice number etc

    • Text:
    • Company name, username, URL etc

    • Mixed format
    • Email address, search query etc

  • Textarea can be used when it is required to submit multiline information. Can be used in form control.
  • Textfield can also be used independent in any component as a search field when it is required

UI Elements

Label is an associate text of the form control which describe the purpose of that control.

Label is an associate text of the form control which describe the purpose of that control.

4.4.1 Guideline

Guideline for the labels are listed as below.

  • In left-to-right languages it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left of other form fields, wh ile in mobile device (responsive) labels will be placed above the form fields helps reduce horizontal scrolling for mobile device users.
  • In form control, labels outside the fields will have 12PX font size and color DarkGray(#5c5c5c)  . Label inside the fields will have 14PX font size and color DarkGray(#5c5c5c)  
  • In the mobile application, there will be no label ou tside the form, label inside the field will be considered.
  • Label should not be placed side by side in form control.
  • Labels will be right aligned to the form field & the distance between form field and label outside the form fields will be 10px for the web version while for the mobile application it will be 5px above the form field. Inside label will also be at 10PX margin from the border of form field.
  • Width of the label container will be 130px, label with more character can start with new line. Either in single line or two line, label will remain in center vertically to the form field.
Label Parameters
Fig 4.4.1 Different parameters of Label

4.4.2 Usage

  • Labels will be used in form to identify the fields & need to describe the purpose of the form control. Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, dr op-down menus etc.
UI Elements

UI Elements

Element used to navigate the content either from left-right or from top-bottom.

Element used to navigate the content either from left-right or from top-bottom.

4.6.1 Guideline

There are certain guidelines once must take care while adopting dropdown menu which are listed below.

  • Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice
  • One shall hide scrollbars if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.
  • Avoid horizontal scrolling and minimize it elsewhere.
  • Display all important information above the fold.
  • Scrollbar will have 3 sections navigation arrow box, track bar box & scroll bar box.
  • Track bar will have background color Gray(#d8d8d8)  , its width for the browser scrollbar is 17PX, while its width for the component/element scrollbar is 12PX. Navigation arrow box will have background color LightGray(#e6e6e6)  , it will have an arrow icon to navigate up/down, left/right. Size for this box for the browser is 5PX, while for the component/element is 10PX. The scrollbar box will have background color NavyBlue(#120e5b)   and its size will remain same as track bar box in both scrollbar.
Parameters of Scrollbar
Fig 4.6.2 Parameters of Scrollbar

4.6.2 Behaviour

Its behaviour on different gestures are as below.

  • User can navigate either clicking arrow or dragging the scrollbar box
  • In touch screen, user can navigate by simply sliding the screen vertically or horizontally

4.6.3 Usage

There mainly two places where scrollbar can be used.

  • Scrollbar can be used whenever needed in a browser for web application or in window for desktop application.
  • It can also be used in any component such as in panel when content is more then visible area and can be used in any element like as in select dropdown menu when there are many options to choose from.
UI Elements

UI Elements

Selection controls allow the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches.

Selection controls allow the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches.

4.7.1 Types

There are mainly three types of it.

  • Checkbox

Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

  • Radio Button

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusiv e selection if you think that the user needs to see all available options side-by-side.

  • Switch

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Different types of selection
Fig 4.7.1 Different types of selection.

4.7.2 Guideline

Below are the list of guidelines.

  • Selections element always consists a label while using in form, checkbox & radio button will have label in right side.
  • Basing on the component view, R adio button & Check boxes will be either inline (or) vertical, while Switches will remains unique throughout the application.
  • Height/width for the checkbox/radio button will be 16PX. Border will be 2PX in color DarkGray(#5c5c5c)  .
  • Width for the switch be 68px having 1px b order around of Gray(#d8d8d8)   color. On/Off section will have 34PX width. Height for the switch will be 26PX.
  • For Switch, one section will be active as default either On or off.
Different parameters of selection
Fig 4.7.2 Different parameters of selection.

4.7.3 Behaviour

Below are the list of guidelines.

  • Normal State

Checkbox & Radio button in normal state will have 2PX border around of color Gray(#d8d8d8)   and background will be in color White(#ffffff)  . For Switch background of the placeholder will be White(#ffffff)   color and border will be 1PX with Gray(#d8d8d8)   color. One section will remain active in the normal state in switch.

  • Active State

Checkbox & Radio button in active state will have no border around and background will be in color SkyBlue(#2991d6) . Additionally checkbox will have tick icon while radio button will have 8PX circle with White(#ffffff)  border of 2PX. For Switch if On section is active than it will have background color SkyBlue(#2991d6)   and if Off section is active it will have background color DarkGray(#5c5c5c)  . Clicking on ON/OFF button user can toggle the active state.

  • Disable State

In any selection, disable state will have label color DimGray(#c5c5c5) , border color Gray(#d8d8d8)  . In switch placeholder background will be LightGray(#e6e6e6) 

Different states of selection
Fig 4.7.3 Different states of selection.

4.7.4 Usage

  • Checkbox & Radio button can be us ed in the form control as and when needed.
  • Switch can either be used in form control or any oth er component when its required to toggle the settin gs for any component or features for the user either ON or OFF.
Selection Usage
Fig 4.7.4 Usage
UI Elements

UI Elements

Controls for the user to pick a time, date, time slot or color as ready- to-use dialogs.

4.8.1 Types

There are mainly three types of it.

  • Color Picker

To choose the color.

  • Date Picker:

To choose the date.

  • Time & Time Slot Picker

To choose the time.

Types of Pickers
Fig 4.8.1 Different types of pickers

4.8.2 Guideline

Guidelines are listed as below.

  • Date Picker consists of 2 major sections, navigation and dates with weekdays section.
  • Date picker can have elements like icon based button, select dropdown menu of which design specifications and behaviour will remain same as described in the respective sections.
  • In Date Picker current date always displayed with White(#ffffff)  background color and 1p x border with color NavyBlue(#120e5b)  .
  • In Date picker User can select the date range as well. Font size for the weekdays will be 10PX and color will be SkyBlue(#2991d6)  .
  • Time picker will have icon based buttons to navigate of which design specifications and behaviour will remain same as described in the button section.
  • In time picker,the font size for the parent panel where user can navigate through hour/min/sec will be 24PX & color will be NavyBlue(#120e5b)  .
  • Font size for the dates, times in the hour/min/sec child panel will be 12PX and color will be DarkGray(#5c5c5c)  .
  • The default date format will be DD/MM/YYYY. For time will be HR:MIN:SEC & for color will be rgb but If it can also be changed by changing the user preferences settings as described in the implementation.
  • User can also direct input the date, time & color details by typing in the textfield. Each picker will have respective icon box on the right side of the main textfield by clicking on it respective picker will open.
  • In the mobile device, date and time picker will take device default control where we may loose the option for range selection depending on the devi ce.
  • In the mobile color picker field will collapse to small color box.

4.8.3 Behaviour

Behaviour for the different types of pickers are listed as below.

Date Picker

Once after the user clicks on the calendar icon, the date picker appears.

  • Shows the current date as a default when opens.
  • In navigation section, month and year dropd own where user can click on the dropdown and select the required month and years. There is a forward (<) and backward (>) arrow which allows user to navigate through the months – Once the 12 months count is don e the year changes.
  • In the date section placeholder user can select the date by double clicking on it. User can also select the rang by simply first click on start date and second click on last date. In range first & last date will background SkyBlue(#2991d6)   with font color White(#ffffff)  while in between selected dates will have background LightSkyBlue(#e0f3ff)  with font color DarkGray(#5c5c5c)  . Dates outsie selected month will be in LightGray (#e6e6e6)  
  • On hover the box around date will have 1px border of color SkyBlue(#2991d6)   and background color White(#ffffff)  . Selected date will have border and background color SkyBlue(#2991d6)  .
  • User can select date by direct input and can select before/after date by simply adding numeric + or - after date. I.e. If today's date 14/10/2015 user can type 14/10/2015 +2 to select the date 16/10/2015. In such case after typing date with numeric, it will reflect the correct date.
Date Picker
Fig 4.8.3a Different states of Date Picker

Time Picker

There will be upward and downward arrow which will help the user to increase and decrease the timeline. An icon based buttons behaviour on hover/touch will remain same as described in button sections.

  • When clicked on the numbers respective section will open: On hour – There will be 00 – 23 numbers which indicates 24 hours and user can click on the desired hours.
  • On minutes and seconds – there will be 00-59 numbers which indicated 60 minutes (or) seconds and user can click on the desired minutes (or) seconds.
  • User can select time slot by direct input or can select by clicking the time slot icon, it will open a popup with list of available time slot.
Time Picker
Fig 4.8.3b Different state of Time & Time Slot Picker

Append/Truncate Value from Date & Time Picker

  • User can append value like +1,+2,+3..etc or truncate value like -1,-2,-3..etc to select a date which is next or previous to current date by typing the values in select field after the current date.
  • In the same way, user can append value like +1h,+2h,+3h..etc or truncate value like -1h,-2h,-3h..etc to select a time which is next or previous to current time by typing the values in select field after the current time. I.e. If current time is 11:35:05 user can type 11:35:05 +1 to select the time 12:35:05. In such case after typing time with numeric, it will reflect the correct time.
Append/Truncate Value from Date & Time Picker
Fig 4.8.3c Behaviour of Time & Date picker while appending/truncating values.

Color Picker

Once the user click on the icon on the right corner, the color picker will be opened

  • Color pool will have a default color section on the left which has 16 (12 standard colors + 4 black and white ) default shades.
  • User can click on any default color so that middle section will filled with entire shades of that clicked color where user can click and select the desired color. User can explore it by dragging the mouse over the middle section.
  • The bottom box will act as a color maximizer which will show the filled box with the selected color to give a enlarged look to user.
  • On the right side there is another color selection bar is there where user can select any custom shade.
  • Once the user click's on the desired color – the color picker disappears with recording of the RGB of the color noted in the text box with color picker icon.
  • If user's are know the RBG code – they can directly type of the text box and the color code will be picked automatically.
Sections and behaviour of color picker
Fig 4.8.3c Different sections and behaviour of color picker

4.8.4 Usage

  • Each picker can be used in form control or anywhere its required to pick validated date, date-range, time, time-range or color.
UI Elements

UI Elements

A notification is a message you can display to the user outside of your application's normal UI. Data validation is the process of ensuring that computer input is clean, correct, and useful.

A notification is a message you can display to the user outside of your application's normal UI. Data validation is the process of ensuring that computer input is clean, correct, and useful.

4.10.1 Types

There are mainly four types of it

  • Success Message

    When user submit the validated data, the success message will appear.

  • Error Message

    When user submit the data which is not valid, the error message will appear. User cant proceed until he corrects the validation. This type of messages can not be ignored.

  • Warning Message

    When user submit the data which is even validated but if system wants to pass any warning for the user, the warning message will appear. This type of message can be ignored, user can perform the next actions.

  • Normal Message

    Any message which system/admin wants to share with users which is not success, error & warning message.

Validation Notifications
Fig 4.10.1 Different types of Validation Notifications

4.10.2 Guideline

Listed below are the guideline one shall consider while adopting for the actual design.

  • Each type of messages has defined color and icons which one should use while designing the respective messages which are as below.
    • Success: SeaGreen(#45b6b0)  
    • Error: Red(#ff0000)  
    • Warning: Orange(#feaa30)  
    • Normal: DarkGray(#5c5c5c)  .
  • Border for the placeholder will be 1px in respective color of the message type as defined. Background will be white. Placeholder font color will be DarkGray(#5c5c5c)   and size will be 12PX.

  • When using with any form element message will displayed as tooltip in respective color of the message type.

  • There is the close button inside the box which helps the users to close the notification after the acknowledgement.

  • Any validation which occurs at UI level(without submitting the data), the validation check will be done once after the user filled the information (or) tried skipping the criteria without filling. Then when once the user try going to next field – the validation check happens and notifies the user with the error or warning

  • User can't submit the data without correcting the error message, but he can submit by ignoring the warning message.

  • Validation message can be displayed as tooltip but can also be displayed as dialog popup as described in the dialog section. When need to use popup, in such case if there is an error, modal popup can be used while in warning case non-modal popup should be used.

4.10.3 Behaviour

  • When there is any type of validation occurs, the element border will turn in respective color of the type of validation and respective icon will be placed at the right side of the element. Icon in case of textfield will be placed in the textfield element itself while in case of select dropdown menu, it will be in the right side but to the left of dropdown arrow of the select dropdown menu.
  • To see the details of the notification, the user opens the notification drawer by either clicking on the respective icon or by placing the cursor in the element. Tooltip message will appear and icon in the element will disappear & border of the elment will turn to its default value.
  • There is the close button inside the box which helps the users to close the notification after the acknowledgement or at the UI level validation when it can be closed by placing the cursor in the element again at this state until user fix the validation, the field will remain as its focus state.
Behaviour of UI side validation
Fig 4.10.3 Different behaviour of UI side validation.
Error Modal Warning Non-Modal
Fig 4.10.3a Different behaviour of validations when user triggered submit action.

4.10.3 Usage

  • Validation messages can appear in form element when the UI level validation occurs.
  • It can also appear when the data submitted and back- end level validation occurs. In such case if there is an error, modal popup can be used while in warning case non-modal popup should be used.

UI Elements

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element

4.11.1 Guideline

Guideline for the tooltip are listed below.

  • The user hovers the pointer over an item, without clicking it, and a tooltip will appear a small "box" with information about the item being hovered/clicked.
  • Tooltip occurs with a 270 Degrees V-shaped arrow pointer from the placeholder as shown in the image. Color of the arrow will remain the same as border of the tooltip. Size of the arrow will be 8PX height and 16PX width. Arrow will be placed from 15PX distance from the tooltip placeholder border as a part of tooltip. Arrow can be at top/bottom/left/right of the placeholder depending on the beahvior.
  • Placeholder will have White(#ffffff)   color and border color will be Gray(#d8d8d8)   with 1PX in size. Placeholder will have 15PX padding. Font color inside tooltip can be in SkyBlue(#2991d6)  or DarkGray(#5c5c5c)  & size will be 12PX.
  • Border color for placeholder and tooltip arrow color will change for the validation as we have specified colors for error, warning and success validation messages.
  • Text inside Tooltip can be in a single line or multiple line with single line will have maximum character 50 above that it will start in new line.
  • Tooltips usually appear either by clicking or mouse over action, tooltip appears on any action, will be visible in touch screen devices. I.e To see any validation message, user will have to trigger the respective action, while tooltip appear on hover will not be visible in touch screen.
Parameter of Tooltip
Fig 4.11.1 Parameter of Tooltip

4.11.2 Behaviour

  • Tooltip will be always in the container. If the element on which tooltip appear, is at the very bottom on the panel, tooltip will open at the topside of the element, if the element at the right side, it will open at the left side of the element as shown in image below.
Tooltip Behaviour
Fig 4.11.2 Parameter of Tooltip

4.11.3 Usage

Whenever it requires to show the information attached with any actions/label, tooltip can be used. I.e in icons based action to explain the what icon is stands for tooltip can be used.

UI Elements

UI Elements

Loaders make it easy to asynchronously load data in an activity or fragment

Loaders make it easy to asynchronously load data in an activity or fragment.

4.12.1 Types

  • Determinate

In its active state, the White(#ffffff)   color boxes will be filled with SkyBlue(#2991d6)   color as per data loads.

  • Indeterminate

It indicate that an operation is ongoing.

Progress & Loaders
Fig 4.12.1 Progress & Loaders

4.12.2 Guideline

Guideline for the header/footer are listed below.

  • It will come in the center of the frame horizontally/Vertically from where the action is performed
  • The loaders will be available in all the default sizes like & which will change basing on the screen resolution in both web and mobile.
  • The determinant loader will convert it's size basing on the screen size. The default size of the boxes will be 20PX each, while its place holder height will be 30PX.
  • In the Indeterminate If the operation is modal (blocks user interaction), and takes longer than 10 seconds, there is a provision for user to click outside and cancel the operation.

4.12.3 Behaviour

  • Determinate

In its active state, the White(#ffffff)   color boxes will be filled with SkyBlue(#2991d6)   color as per data loads.

  • Indeterminate

In its active states circle will perform circular animation until full data loads

4.12.4 Usage

  • Determinate

Use the determinate progress bar when a task is determinate, that is when it has a well-defined duration or a predictable end.

  • Indeterminate
  • Use the indeterminate progress ring for tasks that are not determinate

UI Components

UI Components

Data tables are used to organize data with a logical relationship in grids.

5.1.1 Guideline

Certain guideline must be taken care while adopting Table component which are listed as below.

  • Table will always be in panel. Panel containing table will have three major sections, panel heading, pagination section and table section. Design specification for the panel heading will remain same as described in panel component section. While pagination section will have 45PX height & content inside will aligned to panel heading title.
  • Table will have two major section, table head & grid for records. Height for the table head will be 45PX while height for the each row will be 30PX, it will also have 1PX divider with color Gray(#d8d8d8)  . Background for the record grid section will be White(#ffffff)   .
Parameter of Table
Fig 5.1.1a Parameter of Table
  • On the panel heading in right side, Grid specific icons based action can be placed, like filter, sorting etc while on the right side of pagination sections, Application specific icons buttons can come like multi-sorting enable/disable, print etc, example of the same as shown in the image below.
  • Special guideline icon place holder size for the actions on right side of pagination will be 30PX.
  • Records will have font size 12PX and color DarkGray(#5c5c5c)   while column heading will have font size 13PX and color White(#ffffff)  . Column heading & records in each cell will be left aligned and placed 10PX margin of the left divider.
  • For a column specific actions user can click on the arrow below heading of each color with background color NavyBlue(#120e5b)  , height will be 10PX and it will have the same width as column, it will have dropdown menu.
  • Special guideline for the column heading where we will have checkbox to select records and its range. In heading checkbox while on active state, its background will be in color NavyBlue(#120e5b)  .
Table & Application specific and Grid
Fig 5.1.1b Parameter of table & Application specific and Grid specific icons placement
  • User can select the raw by simply checking the checkbox and the raw background color will change to LightSkyBlue(#e0f3ff)  as shown in image below.
  • Cell record can wrap to 2 or more lines if the content is lengthy than column width, in such case height of the row will change and will take the auto height as shown in the image below.

5.1.2 Behaviour

While in smaller devices, behaviour of tables will be as follow. Other behaviour and its design specifications are explained in different use cases in Usage section 5.1.3.

  • Responsive
  • In the mobile/tablet screen, table will shrink to fit & will have auto hide the column to fit the size.
  • There will be one column added to collapse/expand the content in the hide column.
  • The same way, application specific actions & grid specific actions will collapse into dropdown menu, clicking on which different options will open. In dropdown menu both will be in different group as shown in the Fig 5.1.2.
Table in smaller devices
Fig 5.1.2 Table in smaller devices.

5.1.3 Usage

Table can be used anywhere it needs to organize the logical related data in grid, it has use cases listed below.

  • Record Editing

Record editing is possible by following ways.

  • User can edit the record for any cell by selecting that particular row by checking the checkboxes, or can directly putting cursor in the record cell, in such row will automatically selected and highlighted with color LightSkyBlue(#e0f3ff)  .
  • When user place a cursor in the cell of which record he wants to edit, that record will turn into textfield or dropdown select menu where either he can select the other record from the select menu options or either by direct input he can edit the record.
  • In the case if there is any UI level validation occurs its behaviour and design specifications will remain same as in validation section.
  • Successfully edited row background will change to LightSkyBlue(#e0f3ff) .
  • Similar way user can edit multiple record. Once User clicks on "Save" icon button in the application specific icons, all edited values are saved. While saving the data if there is any backend validation it will come in a dialog popup.
Single/Multiple Record Editing and Saving
Fig 5.1.3a Single/Multiple Record Editing and Saving
  • Single/Multiple & Range Record Selection

User can select the single/multiple or Range record row.

  • User can select the single record row simply by checking the checkbox. Same way he can select the multiple record by selecting checkbox accordingly. Selected row background color will turn to LightSkyBlue(#e0f3ff) . User can deselect the record by simply unchecking the checkbox.
  • User can also select all record by selecting the checkbox in column heading. A special guideline in this case checkbox in column heading in active state will have background NavyBlue(#120e5b)  . User can deselect all record by simply unchecking the heading checkbox.
  • In case if user need to select 1000 row, user need to click the range selection toggle button to active state. Later he can simply select the first record and last record. All in between record row will be selected.
  • In enable state, range selection toggle icon button will have color White(#ffffff)  and background will be NavyBlue(#120e5b)  , while in disable state it will have icon color NavyBlue(#120e5b)   and background color LighterGray(#f6f6f6)   or White(#ffffff)  .
Single/Multiple/Range record selection
Fig 5.1.3b Single/Multiple/Range record selection
  • Edit/Unedit/Add/Hide Column

Column can be editable/unedtiable, can be hidden, different column level actions can be possible.

  • User can make column editable/uneditable simply by selecting respective options from the column level action dropdown. Editable column heading background will be DarkBlue(#0c79c1)   while as default column heading will have background color SkyBlue(#2991d6)  will be uneditable.
  • User can also add column to left/right of the selected column by selecting respective action from the dropdown in this case a non-modal popup will open with details related to column properties to add.
  • Same way user can also hide the column by selecting appropriate options from the dropdown menu.
  • Record in the cell can be disable and it will have background color LighterGray(#f6f6f6)   & font color DimGray(#c5c5c5)  .
Editable/Uneditable, Add Column, Hide Coumn use case
Fig 5.1.3c Editable/Uneditable, Add Column, Hide Coumn use case
  • Sorting

Column can be sorted ascending/descending order. Either single or multiple column can be sorted.In case of multiple column sorting, there will be sorting order.

  • Column order will have three states. Default, Ascending & Descending. In default state order icon will have white color White(#ffffff)  . In ascending in order icon top icon will be White(#ffffff)   and bottom will be LightSkyBlue(#e0f3ff)  while in descending order it will be reverse of ascending. On loading of the grid first time, it will show the default column order
  • On first click it will be sorted in ascending order, on second click it will be sorted in descending order. On third click it will be again in ascending order and so on until the user will click on other column. When user click on other column, at that time, column order for the earlier sorting will be lost.
  • In case of multiple column order, user need to enable the sorting icon button, as shown in the image below.
Single, Multiple Column Sorting
Fig 5.1.3d Single, Multiple Column Sorting
  • In enable state, sorting icon button will have color White(#ffffff)  and background will be NavyBlue(#120e5b)  , while in disable state it will have icon color NavyBlue(#120e5b)   and background color LighterGray(#f6f6f6)   or White(#ffffff)  .
  • In case of multiple column order there will be an ordering. In this case order icon will have column sorting order number in between the top and bottom arrow White(#ffffff)  .
  • The Sort order will be maintained until user click on any column without enabling multi-sort, as soon as user disable the multiple column sorting icon button and click on the sorting, all earlier column sorting will be lost.
Multiple Column Sorting Order
Fig 5.1.3e Multiple Column Sorting Order
  • Filter

On clicking the "Filter" button, User will be able to 'add' a filter

  • When it requires user need to click on the filter icon button on the table panel heading. Icon in this case wil have white background and icon color NavyBlue(#120e5b)  . Border at the bottom for the icon placeholder will be white.
  • By clicking on the filter icon it will open a section for the batch edit as shown in the image below.
  • User can select the pre-saved filter, or can do a new custom filter search which user can save for future references.
  • Once User 'Add' a filtering parameter, various filtering attributes are available to user to choose
Record Filter
Fig 5.1.3f Record Filter
  • Batch Update

If user needs to update same column with same value for multiple records, Batch Update option is available to user as follows

  • Select multiple records that needs to be updated. Click on "Batch Update" icon button in application specific icons.
  • A modal dialog popup will appear with column details, where user can perform the appropriate actions.
  • Once user click on the update button all respective column data will be updated and dialog popup disappear.
Batch Update Record
Fig 5.1.3g Batch Update Record
  • Add Record

A new record can be added by User as follows.

  • By clicking on "Add New" icon button in the grid specific icons, a modal dialog popup will appear.
  • Popup will have all details regarding adding new record, where user can perform the appropriate actions.
  • Once user submit, data will get saved and dialog popup disappear.
Add Record
Fig 5.1.3h Add Record
  • Recap View

A recap for column records can be created as follows.

  • By clicking on "Recap" in column specific dropdwon menu, a non-modal dialog popup will appear.
  • User can also select records to see the recap for the range of selected records.
  • User can view the column record details in the dialog.
  • User can close by clicking on the close icon, or clicking on flat actions.
Recap view of Type column
Fig 5.1.3i Recap view of Type column
UI Components

UI Components

Short Description

Wizard is a step process to achieve a single goal which can be broken down into dependable sub-tasks.

5.2.1 Guideline

Certain guideline must be taken care while adopting Wizard component which are listed as below.

  • Wizard heading block should take full width of the panel in which it is placed, considering the same we've not fixed the height & width. Height as heading title can wrap in two line if too lengthy, so designer should consider the height at the time of creating actual screens. Icon in the heading block should be at 15PX margin from the left border while the title should be at 10PX margin from the icon .
Wizard Step one parameter
Fig 5.2.1a Parameter of Wizard Process
  • The task of inputting data into the system should be parted into multiple steps. Each step is presented to the user one at a time.
  • The Wizard pattern is very similar to the tab pattern. The difference between the two is the focus. In tab user can jump to each tab, while in wizard its step process where user can not jump to next step until he completes the current step he is in. By default first step will be open while other steps will be disable.
  • Designer should break the content in logical steps in such a way, so that number of steps can be minimised. Below is explanation of wizard pattern in different steps, considering a wizard of three steps.
  • First Step

By default first step will be active. In the first step, others steps will be inactive (disable). After

Wizard Step one
Fig 5.2.1b First step of Wizard

inputting data in the first step, users navigate through the wizard by clicking navigation options "NEXT". During this process data input can be saved as described in the implementations guideline. So user at least don't loose the data if any sudden issue occur. If it passes the validation, the first step successfully completed & it will lead user to second step.

  • Second Step

Now as the first step completed, icon and title for the step one will change and takes colors defined for the success, while second step will be an active & third step will still be in inactive (disable) state. After inputting data in second step, user navigate through the wizard either by clicking "NEXT" or "BACK", next will take him to third step and back will take him again back to first step. If there is any validation error, the icon and title for the 2nd step will

Wizard Step two
Fig 5.2.1c Second step of Wizard

change & takes the color defined for the error state. In this case user need to fix the error and he can't proceed to 3rd step without fixing an error. If it's a warning message, icon and title will change and takes the color defined for the warning state. In this case with user can have access to the 3rd step. If it passes the validation either by warning or successfully, it will lead user to 3rd step..

  • Third Step

Now as the first & second step completed, icon and title for the step one will change and takes colors defined either for the success or warning, while third step will be an active. After inputting the data, user will have navigation option "SUBMIT" as it's the final step, which thus indicates the completion of the wizard.

Wizard Step three
Fig 5.2.1d Third step of Wizard

5.2.2 Behaviour

Behaviour for the different states are listed as below.

  • Active State
  • Block Background: White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: SkyBlue(#2991d6)  
  • Title Color: SkyBlue(#2991d6)  
    Inactive (Disable) State:
  • Block Background: LighterGray(#f6f6f6)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: DimGray(#c5c5c5)  
  • Title Color: DimGray(#c5c5c5)  
Inactive state
Fig 5.2.2a Active/Inactive sates of Wizard
  • Success State
  • Block Background: LighterGray(#f6f6f6)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: SeaGreen(#45b6b0)  
  • Title Color: SeaGreen(#45b6b0)  
  • Error State
  • Block Background: White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: Red(#ff0000)  
  • Title Color: Red(#ff0000)  
Error success state
Fig 5.2.2b Error & Success State of Wizard
  • Warning State
  • Block Background: LighterGray(#f6f6f6)   or White(#ffffff)  
  • Icon Color: White(#ffffff)  
  • Icon Holder: Orange(#feaa30)  
  • Title Color: Orange(#feaa30)  
Warning state
Fig 5.2.2c Warning sates of Wizard

5.2.3 Usage

Behaviour for the different states are listed as below.

  • Use when the user needs to perform a task or a goal that dictates more than one step. I.e. An example is adding an image to a website which can include uploading the image and cropping the image; the image cannot be cropped before it is uploaded to a server.
  • Use when the user needs to perform a complex task consisting of several dependable sub-tasks.
  • Use when the user needs to input complex data into a system but the tasks is more easily achieved by splitting the process into a series of smaller and simpler steps.
UI Components

UI Components

Short Description

Form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.

5.3.1 Guideline

Certain guideline must be taken care while adopting Form component which are listed as below.

  • Form will always be in the panel & it will have different elements like Textfield, select menu, section control, buttons etc.
  • Bootstrap provide horizontal and vertical form layout, designer shall need to use the horizontal layout where labels are right aligned and floated to left to make them appear on the same line as form controls. There are ceratin markup changes in the horizontal layout which UI developers need to take care.
  • In the form, labels will be right aligned and placed at the left & inline to each element in the desktop, while in mobile labels will take place at the top of each element & left aligned.
  • Depending on the complexity of the form, designer need to group the related elements together and then need to decide number of columns for the grid. Each form element will be placed in the column.
  • In the same column, 2 elements with label should be ignored, i.e. Any label should not be in between two form elements in same column.
  • In the form, call to action will be placed at the bottom and will be in the center of the form. Either single call to action or grouped with primary and secondary.
  • Bold label will indicate the mandatory field in the form control.
  • In the form each element will be placed with 5PX distance from each other. Only checkbox and Radio buttons will have 10PX distance.
  • In the form, UI level validation will be considered as shown in the Fig 5.3.1b, while submitting the form, backend level validation will come in Dialog popup.
Parameter of Form Component
Fig 5.3.1a Parameter of Form Component
Form showing UI level validation
Fig 5.3.1b Form showing UI level validation.
UI Components

UI Components

Short Description

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets

5.4.1 Guideline

Certain guideline must be taken care while adopting tab panel which are listed as below.

  • Present tabs as a single row. Tab labels should be in one line. Character limit is maximum 40 character, more then that will truncate and it can be shown as heading in the active tab. As shown in the Fig 5.4.1b.
  • Tabs height should be 30PX. Labels will always be in center vertically.
  • Group tabs together hierarchically. Connect a group of tabs with its content. First tab will act as active as default.
  • Keep tabs adjacent to their content. It helps maintain the relationship between the two with less ambiguity.
  • Distance between left/right border of the tab panel and label will be 15PX respectively.
  • Label color will be DarkGray(#5c5c5c)   and border color will be Gray(#d8d8d8)  . Background will be LightGray(#e6e6e6)  . Labels font size will be 12PX and style Bold.
  • In smaller screens it will act as an accordions with the same design specifications.
  • Tab place holder as default will have background White(#ffffff)  and border will be Gray(#d8d8d8)  .
Parameter of Tab
Fig 5.4.1a Parameter of Tab
Character length of label
Fig 5.4.1b Character length of label

5.4.2 Behaviour

Behaviour of tabs in different state are listed as below.

  • Border color for the placeholder will remain same across all behaviour state.
  • Normal State

As described, each tab's label color in normal state will be DarkGray(#5c5c5c)   and background will be LighterGray(#f6f6f6)  . It will have 1PX border will color Gray(#d8d8d8)  .

  • Active State

In active state the open tab matches the background color of the container, each tab's label color in active state will be SkyBlue(#2991d6)   and background will be White(#ffffff)  .

  • Hover State

Just a label color will change to SkyBlue(#2991d6)  .

  • Disable State

Label color will change to DimGray(#c5c5c5)   & background will be LightGray(#e6e6e6)  .

Different behaviour of Tab
Fig 5.4.2 Different behaviour of Tab

5.4.3 Usage

When its required to put different related informational pages in single place, A tabbed document interface (TDI) or Tab is a graphical control element can be used. It allows multiple document or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents.

UI Components

UI Components

A panel is a representation of what information will be sent to a user's display screen in given circumstances

5.5.1 Guideline

Certain guideline must be taken care while adopting tab panel which are listed as below.

  • Panel will act as an actual work place/container where all information will be displayed. Panel will have 2 section, header section and placeholder/Container section for the information.
  • Header section will have height fixed as 38PX. Background will be LighterGray(#f6f6f6)   or White(#ffffff)  . Border color will be Gray(#d8d8d8)   & size 1PX.
  • Title in the header section can associate with an icon which will be non-clickable and color of the icon will be DarkGray(#5c5c5c)  . Title font size will be 15PX, style Bold & Color will be NavyBlue(#120e5b)  .Title will be placed 15PX distance from the border.
  • Header section can have an icon based action for the same design specifications as described in the button section. In the header it will be in right side of the section.
  • Container will have background white and 1PX border around with color Gray(#d8d8d8)  
Parameters of Panel
Fig 5.5.1 Parameters of Panel

5.5.2 Behaviour

  • The icons in the right corner-minimize, maximize, move or component specific icons etc its behaviour as described in the respective sections.
  • Active State: The panel will have shadow with 10% transparency of color Black(#000000)  for user to know in which panel they are active when there are more than one panel in the same page.
Behaviour of panel
Fig 5.5.2 Behaviour of panel

5.5.3 Usage

  • The panel is the most important component. It will be used in web and OPS to display what information will be sent to a user's display screen.
UI Components

UI Components

Displays collapsible content panels for presenting information in a limited amount of space.

5.6.1 Guideline

Certain guideline must be taken care while adopting Accordion Component which are listed as below.

  • The accordion is a vertically stacked list of panels, such as open panel and closed panel group. Each panel can be "expanded" or "stretched" to reveal the content associated with that item. Click headers to expand/collapse content that is broken into logical sections, much like tabs.
  • Each panel will have 2 sections same as in panel design header & container section.
  • Title in the header will be placed 15PX margin from the left side border & container wil have 15PX padding from all four side.
  • Label can be in one line or max 2 line. For the single line, character lenght of the lable should be 50 character, anything more will wrap the text and label will start from new second line.
  • Lable height in case label in one line will be 30PX. For the label in two line, height will adjust accordingly. It can be achived using min-height CSS feature.
Parameter of Accordion
Fig 5.6.1 Parameter of Accordion

5.6.2 Behaviour

Certain guideline must be taken care while adopting Accordion which are listed as below.

  • Normal State

In normal state, header section will have background color LighterGray(#f6f6f6)   & border 1PX with color Gray(#d8d8d8)  . The container section will not be visible. It will have icon based action on right side pointing downward side. Title will have font size 12PX, style bold and color DarkGray(#5c5c5c)  .

  • Hover State

When user mouse over on closed panel header, the only behavior change is Its title color will change to SkyBlue(#2991d6)  .

  • Active State

When user click on header section panel will be expanded and open panel, header section will have background White(#ffffff)   and border 1PX with color Gray(#d8d8d8)  , it will have icon on the right side pointing upward side. Conainer section will have background White(#ffffff)   & 1PX border with color Gray(#d8d8d8)  . The title will have font size 12PX, style bold and color SkyBlue(#2991d6)  .

  • Disable State

Disable panel will have background color LightGray(#e6e6e6)   & lable color will be DimGray(#c5c5c5)  . Border will be 1PX with color Gray(#d8d8d8)  .

Different state of Accordion
Fig 5.6.2a Different state of Accordion
  • Responsive Behavior

In the mobile, there will not be hover state, while for other states design specification will remain same as in web desktop. Only behavior it will srink and fit to the size of the device, as shown in the Fig 5.6.2a.

Responsive behavior
Fig 5.6.2a Responsive behavior

5.6.3 Usage

  • In a page that's broken into dozens of paragraphs, links, images, or just too many blocks of co ntent... accordion menus to be used when have a less space.
  • In navigation where if categorized modules have sub modules which needs to be displayed on th e same page, accordion can be used as open/close men u.
  • Accordions are more suitable when people need onl y a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
  • Another situation in which accordions are helpful is when the information is restricted to very small spaces, such as on mobile devices. Tab on the desktop can act as an accordion in the mobile devices.