You can take any user interface in the world, and whether it’s gorgeous and intuitive or ugly and clunky, there’s one unifying factor that will right pretty much any wrong: speed. Think about it. The load screen, the spinning beachball, the three-seconds of stutter before your click registers as a click--those are the worst experiences you’ve ever had with any user interface. And they’re all related to core responsiveness.
"These tricks give Instagram users a feeling of constant responsiveness."
This principle has led us to build faster and faster computers and faster and faster data networks, to cut the lag time behind multitasking and enable computers to wait on users rather than users on their computers. Almost everything on a modern computer happens instantly. It’s great. But what about mobile phones? How do you give this instantaneous experience when tethered to a shoddy 3G connection?
If there’s one company who could tell you, it’d be Instagram. And what do you know, Instagram’s co-founder Mike Krieger lifted the curtain on three of their backend (and UI) tricks that give the Instagram user a feeling of responsiveness, even when someone’s phone is trapped on a lousy connection. The ideas aren’t just clever; they’re so logical that you don’t need to be a coder to appreciate them:
Instagram Always Pretends To Work
What Instagram labels as “optimistic actions” really boil down to something far simpler: Always make it look like the service is working, even when it’s not. In your Instagram feed, this idea plays out to the “like” button. Have you noticed that whenever you click it, even deep down in a subway, that like button lights up? If your connection is broken, of course you can’t upload the bits of data to a central server to inform a friend that their photo of last night’s dinner was simply divine. But registering the action gives positive feedback to the user. It’s a lie, sure, but it’s a white lie. No one gets hurt banging their heads in frustration, and the like can always be uploaded later.
Loading Content Based On Importance, Not Order
When you open Instagram, you’ll spot content downloading incessantly. Even still, how can a spotty connection build a list of all your friends’ photos instantaneously? Instagram loads content, not by chronological order, but by importance. If a lot of friends have liked something, that photo will be loaded before a more recent shot by the same person that no one cared about. A user will eventually want the option to see everything, but in a pinch, they’ll have access to the content most important to everyone they know. It keeps the social service social.
Anticipating The User’s Every Move
Now if there’s any single slap-yourself-in-the-head lesson to be learned from Instagram, it’s that there’s no reason a computer should ever be waiting for the user to hit “submit” to start the data upload process. Instagram hides data transfers in screens that most people would call stagnant. For instance, when you’re captioning a photo for upload, Instagram will already be pulling potential stores and restaurants that match your GPS location for checking in, and they’ll have been uploading the photo itself (though not sharing it) since you selected a filter. This cuts down, or even eliminates, all possible lag time on the next few screens that the user visits. Just because you need a few moments to think of a funny caption doesn’t mean that your cell phone can’t tackle a few other jobs while it waits.
It just goes to show, still waters run deep. The simpler a UI feels on the surface, the more engineers that are swimming underneath, keeping it all afloat.
"These tricks give Instagram users a feeling of constant responsiveness."
This principle has led us to build faster and faster computers and faster and faster data networks, to cut the lag time behind multitasking and enable computers to wait on users rather than users on their computers. Almost everything on a modern computer happens instantly. It’s great. But what about mobile phones? How do you give this instantaneous experience when tethered to a shoddy 3G connection?If there’s one company who could tell you, it’d be Instagram. And what do you know, Instagram’s co-founder Mike Krieger lifted the curtain on three of their backend (and UI) tricks that give the Instagram user a feeling of responsiveness, even when someone’s phone is trapped on a lousy connection. The ideas aren’t just clever; they’re so logical that you don’t need to be a coder to appreciate them:
Instagram Always Pretends To Work
What Instagram labels as “optimistic actions” really boil down to something far simpler: Always make it look like the service is working, even when it’s not. In your Instagram feed, this idea plays out to the “like” button. Have you noticed that whenever you click it, even deep down in a subway, that like button lights up? If your connection is broken, of course you can’t upload the bits of data to a central server to inform a friend that their photo of last night’s dinner was simply divine. But registering the action gives positive feedback to the user. It’s a lie, sure, but it’s a white lie. No one gets hurt banging their heads in frustration, and the like can always be uploaded later.
Loading Content Based On Importance, Not Order
When you open Instagram, you’ll spot content downloading incessantly. Even still, how can a spotty connection build a list of all your friends’ photos instantaneously? Instagram loads content, not by chronological order, but by importance. If a lot of friends have liked something, that photo will be loaded before a more recent shot by the same person that no one cared about. A user will eventually want the option to see everything, but in a pinch, they’ll have access to the content most important to everyone they know. It keeps the social service social.Anticipating The User’s Every Move
Now if there’s any single slap-yourself-in-the-head lesson to be learned from Instagram, it’s that there’s no reason a computer should ever be waiting for the user to hit “submit” to start the data upload process. Instagram hides data transfers in screens that most people would call stagnant. For instance, when you’re captioning a photo for upload, Instagram will already be pulling potential stores and restaurants that match your GPS location for checking in, and they’ll have been uploading the photo itself (though not sharing it) since you selected a filter. This cuts down, or even eliminates, all possible lag time on the next few screens that the user visits. Just because you need a few moments to think of a funny caption doesn’t mean that your cell phone can’t tackle a few other jobs while it waits.
It just goes to show, still waters run deep. The simpler a UI feels on the surface, the more engineers that are swimming underneath, keeping it all afloat.
No comments:
Post a Comment