Introduction to Optimistic UIs

What is Optimistic UIs?

There are user actions in websites and mobile apps that need to interact with server api and this process can have some time delay. Instead of waiting for a response from the server to update the status of the action, Optimistic UIs will first assume the action will have a successful response and update status immediately to the user. After that, it will make connections with the API and notify errors later if they occur.

Optimistics UIs are very popular and you can find them everywhere from Facebook Like button, Instagram Save button, iMessage, Messenger or auto save in Google Docs, etc. This practice is usually performed so clever that users barely notice it

Why should we use Optimistic UIs?

This practice is very simple but can help improve user experience significantly in your applications

  • Make users feel that your app run quick and smooth

Apps with so much icon loading will make users frustrated when using your app. Therefore, it’s necessary to find a better way to handle it.

Here are some examples

Example 1: Like button

Approach 1:

  • User click button

Approach 2:

  • User click button

Approach 3:

  • User click button

Method 1

Method 2

Method 3

Example 2: Send chat message

The left picture use normal practice while the right picture use Optimistic UIs :

Note:

Always expect to handle error:

Although we expect the action will have a successful response, there is always a chance that error will occur. The root cause can be either from the server or client side. We can have a retry strategy to try calling the Api several times after a fail request. If the retry strategy still does not work, you can display the appropriate error message for users.

When shouldn’t you use Optimistic UIs:

Any action that needs to wait for server response to be able to go to the next step is not suitable for Optimistic UIs. Some examples are login, make a payment, or change password