Using optimistic UI to delight your users

Defining and creating UI elements by using the optimistic approach can lead to a much better experience for your users.

A couple of weeks ago, we got a new feature request from our client for the pvtistes app. The app is full of user interaction with comments, forum, events and travel stories just being some of the examples. The users can comment on various types of content in the app and each comment can be replied to. Our job was to add the ability for users to like both comments and replies. Let’s take a look at the updates we need to make to the existing app.

The anatomy of a like

Our design team has cooked up a new design for the Comments screen, so let’s observe the changes we need to implement in the app. We should:

• Add the Like button next to the Reply button
• Add the Likes Counter button
• Add the Comments counter
• Update some colors

We will focus only on the first two since the other changes are not relevant for this topic. There are additional requirements we have to fulfil:

• The Like button has two states, “liked” and “not liked”
• The Likes Counter button is shown if at least one user liked the comment
• If a user likes a comment, the Likes counter should increase
• If a user unlikes a comment, the Likes counter should decrease

This is looking good so far, but we also need to make an appropriate API call to our backend server when a user likes/unlikes the comment. We need to insure consistency of data as well as creating a fluid experience for our users. We can take two rather different approaches in achieving this.

1. The standard approach

When a user taps the Like button, it triggers an API call to our backend. Once we get the response, we can check if it succeeded and if it did, we can update the UI accordingly. This approach ensures that the UI is always consistent with the data on our servers. But the big downside is that the user has to wait for the request to finish to actually see and “feel” the like.

This is how it would look:

It is not ideal from the user’s perspective, but fortunately we can make it better.

2. The optimistic approach

Optimistic UI aims to show the final state of the UI before an operation is actually finished. This will appear snappier and more fluid to the user. One of the most prominent examples are chat-based apps, like Messages, Whatsapp and Facebook Messenger. When you send a message, it is immediately shown in the chat, even though it is not yet sent through the network. It may take some time to send it, especially if you have a slow internet connection, so you’re shielding the user from “the waiting experience”.

In our case, we want to update the state of the buttons immediately and not wait for the API call response.

This looks way better than the previous approach:

However, there are certain tradeoffs we need to be aware of. If the request fails, we need to rollback to the previous state because otherwise the user would remain in a non-consistent state. This requires an extra set of logic and state in our app, so we should be aware of this before diving into implementation.

This is what our rollback implementation looks like:

Final thoughts

Optimistic UI is a great way to improve the experience of your users and is especially useful in modelling user interactions. The main advantages are:

• The interaction appears fast to the user
• The user is not blocked by waiting and can continue interacting with your app straight away
• The user is not distracted from the content of your app by a loading indicator

That being said, it is not always the best solution. If the operation has a good chance of failing then you’re probably better of using the standard, more consistent, approach.

Also, if your operation is going to take some time, you can take the hybrid approach and show some sort of indicator, so the user knows that something is still going on and is not surprised by some sudden error. If you’re sending a video, show it straight away but keep the progress bar until it is actually sent.

What is your take on optimistic UI? Let us know in the comments below!

_____

We are available for new projects and partnership opportunities. Contact us & let’s discuss your idea!