How to update stale page content without interrupting user

Question

I have a mobile application that supports offline usage, but can also work online. There are several pages of content (mostly long lists of items) that are loaded from server when user visits specific page and connection to server is available. The data is then cached and next time it is displayed using SWR strategy: we display stale cached data (if available) when user visits the page, then load the fresh data from the server and update the page.

Now my question is: how to better update page content so that the user is interrupted as little as possible? What are some known approaches? There are only two solutions I can think of right now, and both have their limitations:

1. Just replace the content of the page when it arrives. Downside: user may be in the middle of scrolling the list and the refresh will be very unexpected at this point
2. Show a message that new data arrived and allow a manual refresh. Downside: user may be dissatisfied that he has to manually refresh all the time

I know the answer heavily depends on the type of data displayed, how it is displayed, how often it changes, etc. But I wanted to know some basic rules how to decide what to do in which of the cases for the least possible user interruption.

In my specific case there are lists that are updated infrequently like something set up by admin users in an admin tool, and there are lists updated more frequently, like some end-user generated data. There often may be content created by one user and visible to others.

Answer 1

There are several approaches to updating page content with minimal user interruption, depending on the type of data and frequency of updates. Here are some suggestions:

Progressive updates: Instead of completely replacing the content, you can use progressive updates that gradually update the page without disrupting the user. This approach is particularly useful for frequently updated lists, where small changes can be smoothly incorporated into the page without reloading the entire page.

Background updates: You can perform the updates in the background and allow the user to continue using the app without interruption. Once the updates are complete, you can display a notification to inform the user that the data has been updated.

Manual refresh: As you mentioned, you can allow the user to manually refresh the page when they want to see the latest updates. This approach can be suitable for infrequently updated lists where the user is less likely to be disturbed by a manual refresh.

Predictive updates: You can use machine learning algorithms to predict when the data is likely to change and proactively refresh the page. This approach can be suitable for real-time data that changes frequently and requires up-to-date information at all times.

I hope this was helpful.

Answer 2

Without some user testing it's difficult to know the right answer. Is it important for the user to view the latest data or existing content provides enough context for their purpose? You could solve this by just providing both options. Implement the show update message and have a message of this sort: "Do you want to us to update content automatically next time?"