Stop Getting In My Way! — Non-blocking UX
The best UI is no UI at all! Users aren’t using your app so that they can admire all of your amazing GUI design. They’re there because they want to get stuff done. Whether it’s read an article or publish content, the speed with which users can interact with your application will be one of the major deciding factors for user satisfaction.
An optimistic UI update is one that assumes the requested operation will finish successfully
This simple brainstorming session isn’t here to break any new ground. Awesome tools such as Medium already make non-blocking UI a core part of the user experience. Instead this mini-article’s goal is to refresh my own thinking with regard to creating a UI that gets out of the way, while still communicating all it needs to to the end user.
I hope you find it useful!
If you liked this article you may be interested in a recent article about
effective prototyping.
Image Upload Case Study
The following example demonstrates a workflow which is still all too common. The user needs to wait for a potentially long running network request to succeed before being allowed to continue working with their document.
Click here to interact with a live version of this demo.
Optimistic UI Updates
An optimistic UI update is one that assumes the requested operation will finish successfully. Instead of waiting for the image to upload, and then updating the UI, we can instead assume that the upload will succeed and immediately update the interface.
Of course the danger here is that a network request such as a file upload can fail, especially when accessed via cellular network. The solution here is to test for successful completion and then roll back changes after notifying the end user of the problem.
This certainly adds complexity for the development team, however the improvements to the end user’s experience far outweigh the burden of additional development time.
A Potential Optimistic UI Implementation
The following is just one way in which an improved user flow could be implemented.
Click here for a live version of this demo.
There is an immediate improvement in regard to user flow with this example. Instead of waiting and watching a progress spinner the user can get on with editing the document as the image uploads. Using a progress bar that is visually close the image being uploaded gives the user a good indication of what the application is doing.
We can further make a small improvement though, by more explicitly communicating to the user that an event has occurred.
Click here for a live version of this demo.
The success notification isn’t strictly necessary, but striking the correct balance between under and over communicating is difficult and you should always resort to user testing to determine where that balance lies.
Conclusion
Start considering non-blocking options for all of your UX/UI design. Your users will love you for it!
If you have any comments then please share them!
If you liked this article you may be interested in a recent article about
effective prototyping.
