Lead: Femi Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
Scroll is a user interaction component used to allow for the reveal of extra content which would otherwise be unable to be displayed within the existing UI real estate. They can be used within containers of the page layout and also within individual components.
Types
<<use this section only if the component has several types that each requires its own page e.g. table, collapsible table>>
<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>
| Type | Usage |
|---|---|
| Fixed Scroll | When a fixed amount of content is loaded into a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable the remaining content to be moved into view. |
| Infinite Scroll | When a large undefined amount of content is available for a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable more content to be continually loaded into view. |
| Fixed Scroll + Pagination | When a large defined amount of content is available for a viewable container or component that is not large enough to display all at once, a list of page numbers is shown to enable discreetest discreet pages of content to be loaded into the scrollable view. |
Usage & Behaviour
<<use a visual for each sub-section>>
Use the appropriate type depending on usage types defined above. All default browser scroll behaviours are should be enabled by default. Operating sytem and browser defaults such as scroll inertia, scroll wheel support, gesture support and any user customisations should all behave as factory designed.
General guidelines
<<describes the component, use sub-section when they are relevant to the components>>
...
| title | Example for heading in general |
|---|
<<use heading 3>>
...
There are five essential usability guidelines for scrolling and scrollbars:
- Always 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 the default operating standards in order to maintain platform familiarity.
- Avoid horizontal scrolling as much as possible to improve user efficiency.
- Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
...