Back in 2012 (before the Facebook acquisition) Instagram's flow for uploading images felt like magic.
The user selected a picture to upload, applied some filters, and when the "Next" button was pressed, there was no loading time to the next page. There was nothing crazy up until this point, but when the user tapped the "Publish" button after adding a title, location, and hashtags, there was once again no loading time.
The picture with all the data was instantly online. No waiting for the image to upload, no waiting for the post to be online. No waiting time at all. None.
The best analogy I could find to explain this was this case study from the Houston Airport.
Houston Airport
The Houston Airport was receiving a high number of complains about long waits at the baggage claim. In order to try to fix this problem, they increased the amount of baggage handlers. Naturally, the average wait fell to 8 minutes total. The problem is, they still received a high number of complains about waiting times.
They conducted an on-site analysis and this is what they found. After offboarding the airplane, people walked an average of 1 minute to the baggage claim area, and waited an average of 7 minutes for their luggage. That's around 12% of the time walking and 88% of the time waiting.
The solution was to move the baggage claim area to a more distant location. The total amount of time spent was exactly the same, but now people spent more time walking than waiting.
It now took nearly 6 minutes to walk to the baggage claim, and only 2 minutes to wait for the luggage. This meant that people spent around 75% of the time walking and 15% of the time waiting.
The complaints about waiting times dropped to near zero, and the conclusion was that waiting is torture. The problem is the time people spend waiting without doing anything.
Source: Why Waiting Is Torture
Instagram flow
Going back to the Instagram example, a similar solution can be found. The picture starts uploading to the server the moment it is selected. In the meantime, the user is busy applying filters, and later adding a title, location and hashtags. Everything is uploaded asynchronously.
The moment the user taps "Publish", all the data is already on the server, so the UI can just display a success message right away.
Source: The 3 White Lies Behind Instagram's Lightning Speed
Technical side
Optimistic UI is about providing instant visual feedback to the user, without making them wait for a server response. In simple terms, the app makes it look like it's always working, even when it's not.
An example of an interaction that does NOT follow this pattern is something we see often. After clicking a button, its state is changed to disabled or it shows a loading spinner to make the user wait. After getting a response from the server, some feedback is given to the user:
The thing is that any request to a server will probably be ok the mayority of times. The UI could assume that a positive response will come and switch instantly to the final state. In the case of getting an unsuccessful response (the big minority of times), the UI could handle the failure elegantly.
On an optimistic UI, the button gives instant positive feedback. At the same time, it sends the request to the server and ONLY provides feedback to the user if something went wrong. This way the user doesn't have to wait for something that will be positive in most of the cases.
