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, table but one should avoid scroll bar if it can be achieved by using the browser scroll bar..