Lead: Femi Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
...
For best results, follow all the usage guidelines in this document. Further suggestions:
- Avoid scrolling within scrolling. Users are often perplexed by inline scroll areas because they introduce nested scroll panes, with any inline scrollable areas being placed within a larger scrollable area. This should be avoided as it causes significant cognitive load for the user. They have to keep track of the relationship between the scroll areas because they are interrelated; for instance, the state of the page scroll area may cut off part of an inline scroll area.
Make sure the browser back button works properly. When users follow a link, and then click the Back button, they expect to return to the same spot on the original page. Traditionally, using a browser’s back button will set the scroll position back to the previous position rather than to the top of the page. However, some modern development frameworks do not offer this functionality by default. Losing their previous position forces users to scroll through content they have already seen and manually find their previous position. Try to always make sure this feature is enabled.
- Avoid scroll hijacking. Applications that implement scroll hijacking take control of the scroll and override a basic function of the web browser. Scroll hijacking is best avoided because the user no longer has full control of the page scroll and thus is unable to predict its behavior. The user’s expectation of an application's scrolling interaction shouldn’t be destroyed for the sake of narrative experience.
Use sticky navigation. Long scrolling can make navigation problematic. If the user loses visibility of the navigation menu (for the container, table etc.) when they scroll down, they will have to scroll all the way back to the top to perform an action. Instead, use a sticky (persistently visible) navigation menu to make moving around the app fast and easy.
- Avoid horizontal scrolling. To improve user efficiency it is best to limit scrolling to the vertical axis only.
Provide visual feedback when loading new content. When using infinite scroll, it needs to be clear to the user that content is being dynamically loaded. Use a progress indicator to show that new content will soon appear on the page.
Accessibility compliance
In general each component should be A11y complied, please follow the 3 guidelines linked below.
...