UI Techniques to Boost Perceived Performance in Mobile Apps

Mobile apps must be snappy and playful. To fall in love with your mobile app, users need to perceive it as fast, responsive and bug-free. Perceived performance measures how fast a user thinks your mobile app is. In this article, I'm presenting a handful of UI techniques that will make your mobile app feel more performant to the end user.

Perceived performance tends to be overlooked by most app developers, especially for the first few releases of a new mobile app. Web developers who just switched to mobile development don’t even consider these aspects. In general, perceived performance is treated as a second-class citizen, or it is not considered at all.

Perceived performance improvements can take your app from being “just fine…” to being “amazing!“.

Compared to the traditional website, there are a lot of things that can go wrong in a mobile app, such as slow Internet connections, network failures, exceptions on the server, lack of certain data, switching between Wi-fi and 3G, going offline, etc.

On web, the browser usually takes care of handling all these unfortunate states, through techniques such as refreshing the website, showing loading spinners, showing error messages, etc. In mobile apps, the responsibility for improving the perceived performance goes to the developer.

Loading States

Loading states help users visualize the fact that there is some action going on in the app, for which they need to wait. Not using a loading state for an expensive background operation can create the impression that the app has frozen, which is suboptimal UX that will just annoy users.

The most popular expensive operations that require loading states are network requests and image downloads. Here's how we treat loading states in mobile development:

Skeleton Views – Skeleton views create an effect of speed and reliability to cover for slow networks or heavy computational tasks. Skeleton views serve as content placeholders until the real content is ready, by taking the shape and format of the expected content. Pair them with an animation for a sensational effect – perceived performance will skyrocket.

Progress HUD – This is a toast-like unit that takes over the screen while a network request is executing. The goal is to inform the users that something is going on and they have to wait until that finishes. You can also use it as a progress bar (for tasks such as image uploads, for example). Without something like this, the screen looks frozen and the app broken, resulting in a poor UX.

Image Source

Spinners / Activity Indicators – These are UI components that come in different flavors, but both iOS and Android have some standard units for them. They generally indicate that there’s something loading. Their native look and feel can be a big advantage, given users are already familiar with them. But they can also feel boring, since all apps use them. As a general rule, make sure you never display more than one spinner at once, otherwise the UI would be a mess.

Image Placeholders / Dominant Color – Downloading images is the most expensive networking operation that a mobile app has to do. On slower networks, high-quality images take forever to load. A beautiful visual way to improve the perceived performance in these cases is to display an image placeholder, until the download finishes. The placeholder can be a simple grey rounded rectangle, which is easy to implement in most platforms. A great way to make the app design more beautiful is to actually display that placeholder in the dominant colors that the downloading image is colored with. This is harder to implement though – Instagram app does this really amazingly.

Progressive JPEGs –  As mentioned above, downloading high resolution images can be extremely slow. Progressive JPEGs are a great way to overcome this limitation and boost the mobile app perceived performance tremendously. The image is basically downloaded progressively, starting with a lower quality photo, that can be downloaded & displayed faster.

Image Source

Empty States

Empty states are screens that lack the information they were primarily designed for. A good UX treats these empty states gracefully. Beautiful empty states are boosting the perceived performance of your mobile app, making it more lively, fancy and positive. They also inform the user precisely with what’s going on, and therefor reducing frustration.

Empty states represent a huge growth opportunity as well. Take advantage of empty states, by promoting important critical actions to the user, such as adding friends, writing a post or taking a photo, which can improve your app retention greatly.

Haptics Feedback

Haptics is a technology that allows users to receive tactile information through one’s sensations. Mobile phone vibration is the most popular form of haptics feedback technology.

Put it simply, you can improve the perceived performance of specific actions in your app, by generating vibrations to the user. This results in a greater user experience and gives the user a subtle sense of satisfaction, making your app more snappy and enjoyable.

Use haptic feedback vibrations for actions that are important in your mobile app. Don’t abuse it. Generating haptics feedback for too many actions would easily frustrate your users, and you’ll end up with the opposite effect. Keep in mind that haptics feedback also drains the device battery faster.

For example, at Instamobile, we use haptics feedback for actions such as follow/add friend (in social network apps), add to cart (e-commerce), swipe right (dating), send message (chat), etc.

Animations

Animations are part of the core mobile experiences. You must apply them in your mobile apps for any visual transition. Animations are a key differentiator factor between native mobile apps and their web counterparts.

To improve the perceived performance of your mobile app, try replacing standard UI components, such as activity indicators, progress bars or HUDs with cool and interactive animations.

Even if you still go with the standard, more traditional design units, you can still leverage the power of animations, by smoothing out their transitions, such as by fading in/out or translating.

Animations are easy to create nowadays, with powerful tools such as Lottie, and by amazing native support (in all mobile app development languages, including the cross-platform ones such as React Native, Kotlin or Flutter).

Success & Error Messages

It goes without saying that users need to see feedback for their actions, especially for those that take a lot of effort. Communicating clearly to users what went wrong and why (via error messages) reduces their frustration. Informing them when something went well (via success messages) gives them a positive sense of reward.

There are a several standard mechanisms to improve the perceived performance via success and error messages, such as:

• Alert views / Dialogs
• Feedback HUD
• Toasts

I generally recommend using dialogs for error messages, and a toast or a feedback HUD for success messages. A success message usually doesn’t need a call to action, so you literally save your users a click, improving the user experience in a subtle way.

Optimistic Updates

Optimistic updates are UI updates that behave as though a change was successfully completed before receiving confirmation from the server that it actually was. It’s being optimistic in the sense that the app will eventually get a confirmation from the server rather than an error.

This makes the user experience way more responsive. Think about the Like button of a social network app. In 99.99% of cases, the like action succeeds, but a roundtrip to the server takes more than 1 second in average.

For example, you can use optimistic updates in a dating app to let the user swipe the cards left or right before getting the response from the server whether has been a match or not. In our social network app, we update the UI of the Like button instantly when it's pressed, even though the network request to Firebase might take a while. We only update it back if the request doesn't succeed, but that only happens in 0.001% of the cases, so users have the perception that the Like happened instantaneously.

Optimistic updates are massively improving the perceived performance of your mobile apps, by creating the impression that user actions are executed instantly, rather than waiting for a server roundtrip to get the real confirmation.

Offline Mode

Another amazing way to boost the perceived performance in mobile apps is to add support for offline mode. This is extremely helpful for apps that are used by users who are in transit, commuting, taking the subway, etc. Again, this is not something applicable on the web, so most developers tend to overlook such as killer mobile feature.

There are three things that we need to consider and implement when thinking about offline mode in mobile apps:

• Inform the user that they went offline – this can happen all the time while in transit. You can simply show a banner or a toast letting the users know they ran out of Internet connection.
• Reading in Offline Mode – Allowing users to consume data in your app while in offline mode can be extremely convenient. Imagine use cases such as reading tweets or articles, browsing Instagram photos, or watching Netflix movies while in offline mode. Pretty cool, right? Users will love your app.
• Posting in Offline Mode – The lack of this feature can be a huge anger generator for your users. Imagine writing a long post or editing a photo, just to find out you ran out of data and you can’t actually post it / upload it in the app. All your work is gone, and you need to start over when you get Internet. Pretty frustrating, right? Cache everything locally, and flush the content to the servers when there’s network connection again.
• Auto-Retry Mechanism - Network failures happen all the time, for a variety of reasons. Before displaying error messages to the users, consider an auto-retry mechanism, that takes place in background without interrupting the user activity. This can reduce the error messages shown to the users drastically, and therefore improving the perceived performance of your app.

Splash Screen

This an amazing, quickly to implement trick of improving the perceived performance of your cold start massively. Straight from the Apple’s Guidelines on the launch screen:

Design a launch screen that’s nearly identical to the first screen of your app.If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app.

An app with a splash screen designed this way feels like loading twice as fast to the end user, so take advantage of this tip to quickly improve your perceived cold start times.

Conclusion

Building great mobile apps is much harder than building regular websites, for a variety of reasons. As a mobile developer and designer, there are way more aspects that need to be considered in order to make apps feel snappy and highly performant.

Perceived performance is the best indicator of how well executed a mobile app is. It affects growth, retention, user happiness and in the end, your success.

If you enjoyed this article, please share it with your community on social media and blogs.