5.7. Interactions
Replace infinite scrolling
Infinite scrolling enables a user to scroll indefinitely on a page. This could increase the time spent on a page and therefore its weight and the amount of consumed resources. This mechanism is used in captology to capture the attention of users. Article 20 of the proposed law written by the French Senate (French) actually plans to ban this technique.
Example of infinite scroll
When you search for pictures on Unsplash.com about climate marches, in just a few scrolls, the page weight quickly reaches 25 MB (which does not include the download of pictures!). Scrolling is so simple that it is hard to realize how many pictures are loaded and when to stop. We keep scrolling for a better picture...
The recommendation is to replace as much as possible an infinite scroll by an action. An action might be a pagination, or a “See more” button.
It is also important to think about the right number of elements to display by default. Avoid frustrating users with too many clicks. Find the right balance!
Avoid auto-completion
Auto-completion and suggestion mechanisms require a lot of requests to the server.
Example of auto-completion
The Gmail default option “Smart compose” proposes “smart” suggestions to build the message. These tools contribute to intellectual laziness, and are energy-consuming.
To conserve energy, avoid these tools or use the already available help techniques (error prevention, examples, input formats…). If their usage remains relevant in your context, it is also possible to limit them, for example by proposing suggestions only after a certain amount of characters typed.
Notifications
The line between keeping users informed and continuously soliciting is a tight one to walk. Again, eco-design and ethics share common recommendations about notification. You must honestly ask yourself how useful and frequent notifications need to be.
Some practices to consider:
- Think about the different notification formats and how urgent they need to be
- Enable users to personalize their notifications, like who, when, and how they want to receive notifications
- Avoid useless confirmation emails (ex: after unsubscribing from a newsletter)
- Replace a confirmation toaster by a change of state. For example, replace a toaster showing a new element by a new focus state on the new element.