UI Elements

UI Elements

Navigation helps users to navigate between different parts of the app.

Navigation helps users to navigate between different parts of the app..

4.15.1 Guideline

There are certain guideline once must take care while adopting navigation structure & design which are listed below.

  • Navigation through your app should be intuitive and predictable. User should be able to figure out how to move through your app with ease.
  • App's structure should be organized according to the content and tasks you want users to see.
  • Determine the most prominent and frequent use cases. Sort use cases according to high, medium, and low priority levels. Items with high priority levels and most frequently used should be the most prominent in the UI.
  • The text size for the web navigation is 14PX, the font color will be DarkGray(#5c5c5c)  . The main navigation text links will be in capital letters. Each link will contain an icon image with around round place holder for an icon. Each link will be divided with 1px border divider with color Gray(#d8d8d8)  .
  • Navigation placeholder for web will have background color Gray(#d8d8d8)   & 1PX border with color Gray(#d8d8d8)  .
Different types of Navigation
Fig 4.15.1 demonstrate the different types of Navigation
  • Distance between an icon placeholder and border of navigation will be 20PX and between an Icon placeholder and link will be 10PX for the web.
  • Icon place holder wil have 1PX border with transparent background. Color for the border will be DarkGray(#5c5c5c)  . The size will be 24PX.
  • OPS navigation font size will be 14PX having letters in title case. Color for the font will be DarkGray(#5c5c5c)  . Each link will be divided with 1px border divider with color Gray(#d8d8d8)  .
  • Navigation placeholder for OPS will have background color Gray(#d8d8d8)   & 1PX border with color Gray(#d8d8d8)  .
  • Distance between navigation placeholder and link in OPS will be 15PX.
Navigation Consideration
Fig 4.15.1 demonstrate the different types of Navigation

4.15.2 Behaviour

Behaviour for the navigation are listed as below.

  • Normal State
  • For web & ops, navigation placeholder will have its default properties. Font size and color will also remain the same as in default navigation.
Behaviour of Navigation
Fig 4.15.2 Behaviour for the navigation
  • Hover & Active State
  • We’ve considered the hover/touch & active state properties for navigation will remain the same.In hover & active state border and background will change to SkyBlue(#2991d6)  , while font color will change to White(#ffffff)   for web and OPS, while in web an icon color and border color of placeholder for an icon will change to White(#ffffff)  .
Hover & Active State
Fig 4.15.2 Hover & Active State
  • Responsive Behaviour

In mobile/tablet, the navigation menu will collapse and will look like as in image below. The properties will remain same as in different state of the web navigation.

Responsive Behaviour
Fig 4.15.2 Responsive Behaviour

4.15.3 Usage

Its usage are listed below.

  • Can be used in the header which will remain in all pages for the web app.
  • Can be used in the header in OPS.