There’s no better way to alienate your users more than to make them wait. And while your technological hands might be tied, your UX ones most certainly are not. We looked at what companies are doing to connect their users quickly and painlessly to the information that they want, to see what we could learn about improving perceived performance. Learn everything about with the following UX design tips:
1. Chrome’s Prerendering
Have you ever noticed how certain pages will load really quickly when you’re browsing the internet, for no obvious reason? Well, there is an obvious reason actually. It’s called prerendering and frankly, it’s pretty awesome. To take the example from Google themselves, let’s say you’re reading a blog. A lot of people will click ‘next post’. So said blog can tell Google ‘hey, get the next page ready!’ before you even click it. That way, when you do eventually get around to moving on, it’s already prerendered, and loads instantly. The same thing works to really quickly load pages you visit a lot based on your local history. Pages you visit a lot, like Facebook or Placeit, will load really fast.
What We Can Learn
While pretending seems like a tech advance to increase speed, it’s really not. The core idea can be replicated anywhere – know what your users want, and work to provide that before they ask for it. Which, actually moves us nicely along to our next tactic.
2. Work Ahead of the User
Instagram is just superb at doing this. They’re famous for their awesome user experience – but how do they actually do it?
They work in advance using what they call optimistic actions.
One example is that whenever you pick a photo to share, as soon as you pick it, it uploads it. Now, as you go through thinking of something clever to write or organizing what hashtags to use, Instagram works to get it ready to share. When you’re finally all set to go, Instagram is already there.
Another optimistic action they use is the like button. The visual feedback to liking something isn’t tied to the data being uploaded to servers. Rather, it’s built into the UI of Instagram. What this means is that you can like something, no matter where you are and no matter what your coverage situation is – it’ll just be updated the next time you connect. But you still get the visual feedback! It’s a really simple way to tell a user ‘yes, we know what you’re trying to do and we’ll get on it as soon as we can’
What We Can Learn
In an article all about Instagram’s sneaky UX maneuvering, Mark Wilson summarized it best:
“There’s no reason a computer should ever be waiting for the user to hit “submit” to start the data upload process.”
People can probably guess what their users want. Help your programs make that leap as well.
3. Filler Content & Progressive Image Rendering
I combined these techniques because they spring from the same well–load something so that the user isn’t looking at a blank screen.
Filler content is when you load a shadow of what the final product will be. They’re a little bit like wireframes – a shell of what’s going to be there but isn’t there quite yet. Facebook tends to use filler content a lot with slower connections, and in that circumstance, it provides visual feedback to the user – yes, your content is on its way, it’s just taking a second to get there.
Progressive image rendering is something everyone has seen, even if you don’t know it. It’s when an image is loaded blurrily, and then becomes clearer as it finishes up. Like when you’re scrolling through Facebook pictures, and they’re all grainy and terrible for a second before they become crystal clear. (The alternative method is called the baseline, and it’s when an image loads in perfect quality, but only a little at a time. It’s insanely frustrating to watch.) This image from Six Revisions makes it really easy to understand.
Like filler content, progressive image rendering:
- Makes it clear something is happening
- Gives users a rough idea of what that something is going to be (Do I want to see a picture of a flower? Definitely! I’ll stick around for it to load properly.)
What We Can Learn
A blank screen is infuriating and doesn’t give the user any feedback whatsoever. Even if we can’t provide the complete experience, that’s no reason to leave people hanging. By giving a taste of the final product, or a shell or container that the final product is going to fill, reassures the user that they’re doing everything correctly, making the wait just that little bit more bearable.
4. Give the User Something To Do
It’s a little like Instagram with uploading pictures while you’re thinking of tags – if people have something to do sitting in front of them, they’re much less likely to be grumpy that they’re waiting. For example, YouTube had (I couldn’t get it to work so they may have gotten rid of it) an Easter egg built into their loader. Instead of just waiting for a video to load…
You could play snake instead!
Simple, easy, and super fun, it was a great way to stop people thinking ‘gee, I probably don’t need to see the cutest cat ever fall off a couch.’
What We Can Learn
It doesn’t have to be hard to engage users while they wait. It can be as easy as the simplest game ever made. It’s the same reason that people always read the worst magazines in a doctor’s office – they’re waiting for anways, might as well read Readers Digest from 1996. If you can give folks just a mackerel of entertainment, they’ll stick around while your back end does its thing.
5. Make Buttons Respond Super-Fast
It’s so simple it’s crazy. Here’s the situation. Buttons on apps or on websites have a slight delay built into them, about 300ms. And this is a great idea – it’s there so that the device knows that we meant to push the button, and weren’t just cleaning melted ice cream off our screen. However, from the graphic before, we know that 300ms is a long time for a user to perceive that they’re waiting (which they are, but it’s for their own good).
Image courtesy of Dribble
All you have to do is make the button look pressed as soon as it’s pressed. Some form of visual feedback is all it takes to let the user know before the 300ms wait that whatever they wanted to do has started, and it’s underway. THEN you can have the 300ms delay, to make sure that they wanted to do that. So simple, so effective.
Wrap Up
Perceived performance is incredibly important for user experience, maybe even more so than actual performance. These are just some of the tactics that designers and developers can use to keep the user in the loop as to what’s going on behind the scenes and keep them busy while your products work away in the background.