For the demos, I am using
1. Start to consider stalled states
Users interpret loading states as ‘there is going to be a delay’.
In todays web, more and more people are using our apps on slower connections and mobile devices. We need to make sure we focus on the user experience of users with slow network connections. This is particularly relevant as more of the developing world joins the internet.
One approach is to start thinking about stalled loading states.
Stalled states are where the request has taken more time than our users expect for it to complete.
The benefits of using stalled loading states are that we can:
- Let the user know the update is still processing
When an app fails to notify users that it’s taking time to complete an action, users often think the app didn’t receive the request, and they try again.
- Remove necessary loading UI messages for fast network connections
Updates that take less than a second may be able to omit loading messages as they can add unnecessary visual noise.
2. Batch relevant UI updates together
When many UI updates finish around the same time, it may be worth batching their UI updates together to promote a more stable UI.
Some updates require us to stitch multiple requests together to populate all the data we need. We should be batching these updates together where it makes sense. Frameworks such as React are adding features like time-slicing to make this easier.
The benefits of batching UI updates are:
- Overall more stable UI
- Reduces visual noise of updates
Thanks for reading!