Lead: Femi Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
...
<<use Click target to describe the interaction>>
Best practices
<<e.g. Slider should display a .label its on>>For best results all default browser scroll behaviours are 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. For more best practices, see below.
Avoid scroll hijacking - Aplications that implement scroll hijacking take control of the scroll and override a basic function of the web browser. Scroll hijacking is bad because the user no longer has full control of the page scroll and unable to predict its behavior. User’s expectation of a website’s scrolling interaction shouldn’t be destroyed for the sake of narrative experience.
Make sure 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. But if the user’s position on the page is not maintained, using a browser’s back button will generally reset the scroll position to the top of the page. Losing their spot on the page forces users to have to long scroll through content they have already seen. Users get frustrated quickly by not having a proper “back to position” functionality.
Use sticky navigation - Long scrolling can make navigation problematic for users: if the navigation bar (container menu, table menu etc) loses its visibility when users scroll down, they will have to scroll all the way back up when they’re deep within the page. The solution for this problem is a sticky navigation menu: it’s best to keep the navigation persistently visible, so that navigating to different areas of the app is fast and easy for usersLayout cutting off to avoid fake page bottom
- Avoid fake bottom - Design shouldn’t look like there’s nothing to scroll. Instead, give users a clue that there is more content below the fold, and that the end of the visible content doesn’t equal the end of the page or pane. One of the useful practices for scrolling is to make your content above the fold look incomplete by cutting images and titles. In this case users will intuitively want to scroll to see the rest of the visible part, and then they will be encouraged to keep on scrolling further until they hit the real bottom of the page.
Provide visual feedback when loading new content - Visibility of the system’s status remains among the most important principles in user interface design. When using infinite scroll in were your app dynamically loads content, users need a clear sign that the applicatication is doing this. Keep them informed; use a progress indicator to show that new content is loading and will soon appear on the page.
Design
| Zeplin link | Screen thumbnail |
|---|---|
 |
...