How to build responsive apps?

How to build responsive apps?

Category: App Development
March 26th, 2014 By: Stefan von Gagern
A smoothly operable interface is a major success factor for apps. A few clever tricks can help you deftly conceal limits of the technology, such as slow processors and 3G data speeds. To see how this can work, we take a look behind the scenes at the photo-sharing app from Instagram.
How to build responsive apps?


When an app freezes up a couple of times, that's often enough to make a bad impression. The frustrating thing is that apps that seem to freeze or stumble often have well-programmed, optimized source codes. "Even if you tune your application code for optimal performance, it’s entirely possible for your application to appear slow to the user“, says the chapter "The Perception of Speed" in the Apple Developer Center. Clean code is mandatory, of course, and good to have, but making the program responsive to the user is the second major discipline.

Speed as a success factor

The responsiveness of an app, or the speed with which it responds to the user, is essential to the overall impression. The unbelievably fast speed with which photos are uploaded, for example, is surely a major factor in making Instagram what it is today: the most successful mobile photo-sharing service. Given that there are tons of photo-shooting apps with a few effects and upload functions out there, why is this the case?

Users are impatient. Computers do nearly everything instantly – as soon as the Windows hourglass or OS X spinning wait cursor appears for a few seconds, stress levels rise. Users see no reason why they should be any more patient on mobile devices – even though the processors are weaker and 3G connections much slower. So how can you offer a nearly equivalent or at least similar user experience? The solution lies in a few small tricks in app programming, in fact, a few "dirty tricks". In his presentation Secrets to Lightning Fast Mobile Design, Instagram co-founder Mike Krieger reveals several examples that quickly illustrate how to give mobile apps a smooth feeling.


Fill gaps cleverly

The Like Button
At Instagram, the confirmation is displayed even before the clicked "Like" is uploaded to the server. The result: it feels fast. (Source: Mike Krieger speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design)

To summarize, the basic trick lies in optimizing the collaboration between development and design. Both ensure, as Krieger says, that "mobile experiences fill gaps while we wait", because "no one wants to wait while they wait". Users should always feel active and productive when using an app. This is achieved, for example, by showing a like button as clicked, although the request is still running in the background. Instagram uses this same trick with comments, which already appear as posted although they have not even been uploaded yet. If something goes wrong during transmission, the app can be show an error message with a new prompt. But up to this point, the app is "optimistic", always assuming success and displaying it immediately.

Move bits and bytes unnoticed in the background

The central feature of Instagram is the image upload. Many people ask how it works so blindingly fast, without any perceived waiting time at all. The secret does not lie in sophisticated compression algorithms or similar technical revolutions, but instead in the time of the upload. "Move bits when no-one's watching“, says Krieger. While other photo apps don't start uploading until the user explicitly starts the upload, Instagram starts uploading the image in the background, while the user is still selecting a filter.

Start the upload
Why not start a big upload when the user is thinking about which filter to use? (Source: Mike Krieger speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design)

Another amazing Instagram feature is that it displays your most important friends' photos instantly when you start the app. How is that possible? Instead of downloading photos in sequence, the app goes by priority. If a lot of friends like a picture, it is loaded sooner than a picture that the same user has just taken. With this approach, important content is loaded unnoticed in the background and is available immediately when the app is started – even if the connection is poor. Another clever trick is responsible for the fast login: why wait until a user taps Send if the data from the input form can already be transferred? Users are always occupied, since there are nearly no breaks for loading.

Optimize the code for the operating system

ANR - Application not responding
The worst case in an Android app when it comes to responsiveness: the ANR dialog. (Source: developer.android.com)

Exploiting the special features of the specific platform is just as important as design tricks. Fast apps should be optimized and adapted. The worst case for responsiveness on Android is the ANR ("Application not responding") dialog, which you should avoid at all costs. The system indicates when an application cannot respond to the user input. There are always situations in which the system is busy, for example, for I/O operations such as network access. The trick here is to outsource the work: instead of placing the load in the UI thread, create a new thread where this work takes place. The UI thread then continues and prevents the system from identifying a potential code freeze. Google has dedicated an entire chapter on avoiding ANRs at its Android developer site. For Android apps, Developer Garden offers the App Monitor, which lets you monitor response speed and memory use, helping you to optimize your apps.

Apple has documented several tips for iOS developers. They recommend setting firm targets for performance, for example, that the app loads and displays the first screen after just one second. You can then measure the performance of the app and optimize it to achieve these targets.

Conclusion: "Perceived" speed is worth it

The Instagram success story proves: the perceived speed for app users can make the difference between success and failure. This requires optimized collaboration between developers and interface designers – and the willingness to continue optimizing for a fluid app experience even after the initial release.



About the author
About the author

Stefan von Gagern works as a freelance journalist in Hamburg. Since 10 years he covers web and mobile technologies and –development. He also works as a consultant, helping companies to build websites, mobile and social media. At Kiel university of applied sciences he teaches media conception. In his free time the gadget fan loves to write music as a singer/guitar player in bands and his home studio.

Contact: Homepage | Twitter

Responses to “How to build responsive apps?”


  1. Massimo Castelli says:
    NEW API: INTEGRATE THE AUTOSCOUT24 SEARCH INTO YOUR APPLICATIONS FREE OF CHARGE
  2. Report this comment

 

Login to comment

Join our RSS feed!


Evangelists News

Following articles are content of the authors personal site and do not represent the thoughts, intentions, plans, or strategies either of Developer Garden or of Deutsche Telekom AG. They reflect only the authors own personal position and the minds of those who have posted comments.

    • Hardware and Software is getting more and more available and usable for everyone: Both in terms of price and complexity. Thanks to that, a growing...
    • Ideen treiben die IT-Industrie in Soft- und Hardware. Am Ende wird jedoch der Nutzen dieser Ideen hinterfrage, egal ob es sich um bestehende oder...
    • Computer durchdringen immer mehr Lebensbereiche. Dabei bleibt oft die eigentliche Frage des Nutzens auf der Strecke. Doch wie findet man einen...