Being optimistic in UI

Optimistic UI (User Interface) is not a new thing (games developers work with the idea of client-side prediction for a long time), but the concept has been gaining a lot of attention lately.

The idea is simple. Based on a user action, an interface is updated, even though a request to the backend may still be pending. In the end, an optimistic UI is nothing more than a way to manage perceived performance and avoid loading states.

The workflow can be straightforward in React.

1. Capture a user action (click a button, for example).
2. Update the local state, which updates UI.
3. Send the request.
4. Get a response.
5. If negative, rollback update the local state (step 2).
6. If positive, do nothing or confirm step 2.

Eliminating small lags from the UI interaction seems to create a faster and much more responsive perceived user experience. However, there are some drawbacks involving optimistic UI.

First, optimistic UI is not a one-size-fits-all solution. One crucial point is that if there is a failure in the server (false positive, the UI update should be reverted graciously, and this is difficult to achieve if the action triggered by the user plays a role in the application's routing.

Plus, since there is the risk of false positives, optimistic UI doesn't seem a good idea for checking for an air flight or a cash transfer experience. Imagine saying to the user that this cash transfer was reverted.

On the other hand, for actions that are not so important (like a post or posting a quick message, for example), optimistic UI seems OK.

The second point is that optimistic UI works better with actions that generate boolean values (true or false, yes or no), things that, in case of false positive, can be easily reverted.

In my experience, the most critical point of the technique when something didn't go well is making it noticeable. Handling UI errors is very important. The interval between the action and the error message couldn't be more than two seconds.

I created a small app that shows how optimistic UI can be implemented. As soon as you answer one of the questions, the UI is updated, even though the request is still pending. The app can be seen here, and the code is here.

This post is part of a series about UX and UI engineering.

Photo by Brooke Cagle on Unsplash