Scrollbar

Angular

See content

A scrollbar allows the user to scroll a page to see more content.

Usage

There are four essential usability guidelines for scrolling and scrollbars:

  • Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.

  • 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.

  • Comply with GUI standards and use scrollbars that look like scrollbars.

  • Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling. Plus, they allocate only 20% of their attention below the fold.

Source 'Scrolling and Scrollbars' by Nielsen Norman Group

Anatomy

  1. Handgrip: Indicate the user his position on the page et allow him to scroll up and down.

  2. Gutter: Indicate the size of the scrolling and the scrolling axe.

  3. Arrow buttons: On click, the user can scroll to the top or the bottom. They are optional.

Placement

When you need to scroll vertically, put the scroll bar on the right on the scrollable element. If you need to scroll horizontally put the scroll bar on the bottom of scrollable element.

Do's & Don'ts

Do

The user must be able to scroll using the up arrow and down arrow key.

Don’t

Do not hide the buttons that allow the user to scroll up and down.

Do

To avoid horizontal scrolling, if there are too much visible columns, add a column option. It will help the user to custom the table view and to pick or untick some columns.

Don’t

Avoid horizontal scrolling on web pages and minimize it elsewhere.

Do

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.

Don’t

Do not put a scrollbar if there is no additional content.

Do

Always use a slider (also named elevator or thumb) with contrasted color.

Don’t

Do not remove the slider (also named elevator or thumb) from the scrollbar, or add on the slider, a color that is not contrasted compared to the gutter.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.