Blog

Improving Optimistic UI with CouchDB

It’s okay to trick your users… sometimes.

That’s the philosophy behind optimistic UI (user-interface), a new-ish design paradigm that’s taken hold in apps and websites all over the web. It has to do with optimizing how quickly your app responds to user input and making sure that your user isn’t bored while stuff goes on in the background. That’s exactly what it comes down to: updating your frontend before the backend is finished working.

The idea is that instead of making users wait while your server-side or API is working, you just make it look like the change has occurred. So you aren’t necessarily tricking your users, just updating their screen on the assumption that your service will work.

In order for optimistic UI to work, you need to have a high degree of confidence in your backend. As long as you are ~99% percent sure that your API call will not fail or that your server-side calculations will pass, there’s little danger in preemptively giving users a success message. If your servers are slow but reliable, optimistic UI is perfect for you, because it allows your users to move on while your backend works.

Examples of optimistic UI abound. A good one to mention is Facebook’s post “reactions.” When you click “Like” or “Wow!” for instance, that click is sent to the Facebook server where the request is processed, and that may take time. But you, as the user, see the change immediately. It’s ok for Facebook to “lie” to you like that, because the rate of failure is low, as are the consequences. Nothing terrible will happen as a result of your latest “Wow!” not posting.

Facebook's Reactions, optimistic UI, Cuttlesoft

Here at Cuttlesoft, we love anything that adds a better experience for our applications’ users. That’s why our engineers came up with a way to make optimistic UI possible even when a user’s device is offline.

I chatted with our CTO Emily Morehouse-Valcarcel about using CouchDB to improve user experience with optimistic UI.

Nick: What is CouchDB and what is it used for?
Emily: CouchDB is essentially a NoSQL database that we use to accomplish offline-first mobile applications. CouchDB has a sister product called PouchDB that allows for the syncing of databases in an extremely efficient manner. We use it for a few different existing products that require offline use, like our FRLA mobile app.

How can it be used to improve optimistic UI?
Optimistic UI is all about letting the user continue through their set of actions without necessarily depending on API calls being successful or having a strong enough signal to upload something. So in using an offline-first database or a database that can handle syncing in the background, you can essentially take a user’s action, update the database, and then whenever the user’s device has a strong enough connection again, it automatically syncs everything up in the background.

You no longer have to worry about ‘what will happen if this call doesn’t go through,’ or ‘how often should I retry this in the background,’ because you just put it into the database and it handles it for you.

So it basically changes the local database, and then once online it syncs up?
Right. Using it in an optimistic UI is where it becomes really interesting. Having a local cache of information to use your app offline is one thing, but actually being able to use your app when there’s no connection to the fullest extent that it can, and then having it be a seamless process to hop back online is a great user experience.

One of the other great things is that CouchDB has event listeners. So, say I added a comment on a photo while I was offline, the app can just have a small spinner to delineate to the user that this hasn’t been completed but it will be completed. Messaging is another good example. When you send a message, it won’t actually say “Delivered” until it’s completed. There are listeners in CouchDB that will tell you as soon as the database is synced up, and then the app will say that the message was delivered.

Ultimately, CouchDB gives you optimistic UI’s benefits without the danger of failed API calls breaking your app or bad connections tripping up your user. Every bit helps when improving UX, and CouchDB + optimistic UI removes a lot of frustration.

Interested in learning more about optimistic UI? Smashing Magazine has a great post about optimistic UI, as does UXPlanet on Medium.

Want more Cuttlesoft? Sign up for our newsletter: