Briefly about the optimistic UI. Optimistic interfaces in pictures

    Not so long ago, an article by Denis Mishunov appeared on the Smashing Magazine website, with a translation of the code you can find on Habré .

    Following this article came another one - “ Optimistic UIs in under 1000 words ”, written by Igor Mandrigin, in which he addresses the same topic, supplementing it and illustrating with a large number of examples. We bring to your attention a translation.



    Briefly about the optimistic UI. Optimistic interfaces in pictures.

    Let's talk about optimistic UI design today.

    In what sense is optimistic?

    Optimistic interfaces do not wait for the operation to complete. They immediately go to the final state, showing fake information while the operation is still in progress. In words, all this sounds rather confusing, so let's better turn to the first example. For clarity, take a fictional messenger and call it Cotton Candy. There are two approaches to presenting the process of sending a message:


    Not optimistic (left) versus optimistic (right)

    So, an optimistic UI design shows the final state before the application actually completes (or even starts) the operation.

    That is, it's just a trick. Why then do you need it?

    The idea behind the intricate name is very simple. However, this can have a huge impact on the experience of your users (or “satisfy the customer” if you are Apple). Firstly, it creates the feeling that the application is running faster, as if "speeding up" your application. The user can do something else while the application uploads a funny photo with a cat or sends an ironic comment to the discussion. Secondly, it simplifies the interaction with the interface, removing unnecessary states and distractions. The application looks simpler and more accessible. Yes, and UI designers will have to bring fewer screens to the state of Pixel-Perfect.

    Life examples

    The optimistic interface is often used in instant messengers and social applications. Messages for iOS or MacOS resort to this concept when a user sends a message.


    Immediate interface update in Messages on Mac.

    Instagram uses a similar solution to add comments:


    Comments on Instagram. Pay attention to the progress indicator on the right.

    Let's look at an example of another plan: the Audible app is an audiobook player for iOS. As soon as a small fragment of the recording is loaded, the user can immediately start listening, while the rest of the track is loaded.


    As soon as part of the book loads, “Ready to play” appears. Optimism in its purest form.

    Another example is Trello: when a user moves a map, it moves immediately, the interface does not wait for the server to finish its work.


    Optimistic UIs are key to Trello's fluency
    Optimistic interfaces - a key feature of Trello convenience.


    Medium uses a similar technology when a user attaches a picture to a post.
    Surely, such a chip applies to your product.

    Progress

    Sometimes, immediately showing the final state is not enough. The user will feel less perplexed if you delicately let him know that the process is going on. This is especially important when an error occurs. But error messages are a separate topic, we will talk about them later.

    Of course, the longer the operation takes, the more noticeable the indication should be. When a user puts a like, the indication is not necessary, but when loading your favorite photo, a demonstration of the indicator will definitely be useful. Some applications show progress indicators next to the already updated part of the interface.


    Displaying progress next to a message

    Another way is to add a small icon or shortcut showing the status of sending a message next to it.



    Status Icons (Facebook Messenger)

    Messages on iOS also give a status indicator on top of the window. Especially it catches your eye when you upload a funny photo with a cat (one or many).


    Indication of progress in the Messages application in iOS

    Error messages
    And if something went wrong? When designing an error message, pay attention to the following:

    1. Visibility . The notification should be clearly visible so that the user could not miss it in any way (especially in those cases when downloading data).

    2. Causality . The user should be clear which of his actions caused the error. After all, the interface has already been updated, which means that the operation is perceived as completed.

    Error messages are the most difficult task for an optimistic interface designer.

    The simplest solution is, of course, the Good Old bLocking Error Message (GOLEM) - a good old blocking window.


    GOLEM in action!

    It goes well with the first point. The dialogue window in the center of the screen is very difficult not to notice, but it roughly blocks all further interactions with the application. But this decision does not correspond to the second point: the user does not associate the error with what he did before. A dialog box appears on the screen completely unexpectedly, and even with such formidable text.

    Another common solution is to show a button or icon next to a message that could not be sent.


    Whatsapp, don’t!

    When the user clicks on it, we show the GOLEM dialog or try to repeat the action without a dialogue.


    The GOLEM dialog is called by clicking on the error indicator (Messages application in iOS)

    Here, on the contrary, everything is in order with cause-and-effect relations (point 2), but, unfortunately, it is not noticeable enough. If the user has already switched to another screen or scrolled the correspondence, leaving a message outside the screen, he will not see alerts.

    The Messages app on iOS solves this problem by adding additional indicators to more obsessively report the status of the error. The indicator is displayed directly on the application icon, so the user will notice it, even if it completely exits the messenger.


    Messages hints to us that something went wrong.

    To reduce the need to show the error status and not to frighten the user, sometimes it is enough to repeat the operation several times.

    Conclusion

    An optimistic UI can make working with your application faster, easier and more enjoyable for users. This is also a great way out if your servers are rather slow (and the admin quit last week). But at the same time, optimism in optimistic interfaces should be justified.

    If your servers are completely unreliable (damn this admin), an optimistic interface can do much harm. The endless queue of error messages will annoy users, and notifications noticed on time can lead to loss of entered data.

    So take all these considerations into account and use this solution wisely!

    Also popular now: