The “Psychological” Speed of Mobile Interfaces
One of the most important considerations when building mobile experiences is the responsiveness of the interface. The mobile user has little patience when using your app. If they have to wait too long for content to load, they are unlikely to stick around.
So how do you make your app faster? Here are some interesting techniques that your favorite apps use and you should be aware of.
When you post a photo to Instagram, the photo starts uploading in the background as soon as the user takes the photo or loads it from the camera roll. The app takes advantage of the fact that the posting process on Instagram takes several steps (scale & crop, add filters, caption, etc). While the user is going through these steps, the photo is being uploaded in the background. There’s no progress bar showing or uploading message, etc.
By the time the user posts the photo and returns to their feed. They’re likely to see something like the image to the left. At this point the app is “Finishing up” the posting process and will immediately proceed to show them the photo they posted.
The user was distracted by going through a series of steps while the photo was being uploaded. When the steps finished, the photo was already uploaded. This gave the user the illusion of speed, while in reality, the photo didn’t upload any faster than usual.
It’s interesting that such a simple user experience decision can have such an impact on the success of a product. Photo sharing apps before Instagram had a very similar photo posting process but didn’t typically start the photo upload until the user finished the process. This simple change made Instagram feel many times faster and was instrumental in pulling users from other apps.
Messaging is another mobile experience where speed is of the essence. Let’s compare the approaches of Whatsapp and iMessage in how they inform the user that a message has been sent and delivered.
Whatsapp uses a green checkmark to indicate that a message has been sent and another green check to indicate that it’s been received.
What the app does brilliantly is to show you the first checkmark immediately. The message may not have been fully uploaded to the Whatsapp servers, but Whatsapp assumes it will get there and shows the user an immediate positive indicator. This makes the user feel like Whatsapp is really fast at sending messages.
iMessage takes a very different approach that doesn’t create the same positive feedback loop.
When a user sends an iMessage, the blue progress bar moves across the screen as the message is being sent. This sometimes takes a while depending on the user’s network connection. If they happen to be sending an image, then the progress bar will move even slower.
Why is this a worse experience? The user will inevitably be watching the progress bar as it goes across the screen and if it moves slowly, the app’s sense of speed will be lost. In the long run that may impact how the user feels about this app. In practice, Whatsapp and iMessage probably take around the same approximate time to send a text message or image message.
The way that each app communicates the status of the message can have a large impact on perceived speed of the app.
There’s a variety of conventions that mobile UI designers and developers use to indicate that content is loading in an app. Typically they tend to use some type of spinner or progress bar to show that something is happening while the user is waiting for content to load. If the user gets stuck on this experience for a little while, it can be really frustrating. Like watching an hourglass go down.
Recently some apps have begun to use a new approach which makes the loading content experience feel faster and less anxiety provoking.
These apps (see FB Paper) example to the left) show a “skeleton” on the app before the content loads as to indicate where the content will appear and in what layout and format. Almost like a stand-in blueprint or wireframe. When the content loads it’s a seamless transition and feels very smooth and natural.
Pinterest uses a similar approach in their mobile app and website. But they take it a step further. They analyze the image for every post and figure out what the primary color in that image is. They store this value on their server and when the app loads the content, the transition between the colored box and the actual image is very smooth. This also gives the illusion that the images are loading faster.
As mobile designers and developers we need to use everything in our arsenal to create a fast, fluid and useful user experience. This will only become more critical as computing moves from mobile devices to wearables where the constraints are even tighter.
For more thoughts on product design and user experience, follow me on twitter — @ozlubling.
