My grandfather was a watchmaker. When I was a child, I used to sit next to his huge wooden desk, watching him design and assemble clockworks made of dozens of finicky pieces. The amount of patience, determination, and precision he put into every facet of his designs was something I have always admired.
Watching a running clockwork for the first time felt like magic. While a computer's insides’ look rather cold and dull, a watch immediately captivates us with its beauty and craftsmanship.It wasn’t until I was 12 when my grandfather finally offered me one. As he put it on my wrist, he said something I’ll never forget: "Remember, time is the most precious gift of all."
Maybe not as dramatic as uncle Ben’s last words in Spider-Man but it made an impact in the way I think about design ever since. Time is the most valuable and limited resource we have. That’s why good design is about saving time.
Designing digital experiences has an element of obsession ingrained. We are obsessed with speed and performance. Amazon calculated that an increased loading time of just one second could cost it $1.6 billion in sales each year. Google loses about eight million searches (and ad displays) when page speed decreases by just four tenths of a second. Scary shit. So what do we do?
There is a caveat though. First of all, faster doesn’t necessarily equate to a better experience. Secondly, perception of time is highly subjective. As Einstein aptly put it: "An hour sitting with a pretty girl on a park bench passes like a minute, but a minute sitting on a hot stove seems like an hour."
Remember the last time you were on a bad date? Time suddenly runs painfully slow and the only thing you can think of is why you’re not sitting on your comfy couch back home, watching the latest episode of Game Of Thrones. When you stare at a watch, you can literally feel how time slows down. Sometimes it even feels like the watch is stopping for a second.
Time is a crucial part of interaction design. At the end of the day, the absolute minutes and seconds users have to wait don't really matter. It’s about how people experience and remember them.
Take the case of Amazon. A study by User Interface Engineering compared the perceived speed of web pages. They found that Amazon was rated faster with an average download time of 36 seconds than About.com with an average download time of 8 seconds. UIE concluded that, "When users accomplish what they set out to do on a site, they perceive that site to be fast."
The same applies to user interfaces. Well-designed interfaces feel faster even though they might actually be slower. Here are some design strategies for altering how users perceive time and creating more fluid experiences:
1. Keep Users Engaged
In Manhattan, when you’re standing at a crosswalk, you witness a remarkable pattern in human behavior. People avidly push signal buttons, hoping to reduce waiting time. The frequency of pushing these buttons usually increases proportionally to the pedestrian's level of stress. But about 90% of the crosswalk signal buttons in Manhattan do nothing. Why are these buttons still there? Why didn’t the city get rid of them if they don’t actually work?
The answer depends on what we mean by "work." People engaging with something often perceive waiting time to be shorter than it actually is. These buttons work fine. Just not in the way we expect.
Keeping people engaged is one of the oldest and most efficient strategies to cut the psychological effects of waiting. It’s the reason we have mirrors in elevators, why there are gossip magazines and books in waiting rooms, and why we always feel inclined to check our phones as soon as "waiting experiences" are about to come up.
What about the web? In the good old days when people used Internet Explorer to browse the web, we always had to look at a blank canvas until a new page was loaded:
The vast whiteness introduced a moment of self-reflection, emptiness, and uncertainty. That changed in later versions. Keeping the current site open until the new page loaded made people believe that the web site was loading faster, simply because people were able to keep engaging with the existing content.
Disneyland is known for making lines as pleasant as possible. Borrowing basic principles from architecture, the park makes sure people never feel demoralized by a long line. You move through the different stages of the line while always discovering new stuff. Some people go as far as saying Disneyland visitors aren’t queuing in a line, they are delighting in a line.
The takeaway: The buttons discussed above do work from an experience point of view. It’s not technology at work, though, it’s psychology. If we want to create smoother experiences, we need to stop seeing technology as our one and only savior. Let’s make waiting times shorter, offering people valuable content like tips, links, quotes etc. to make their waiting time more meaningful.
2. Perform Actions Optimistically
Today's web and mobile apps are packed with microstates. Our apps need to constantly be in touch with our servers, whether we're hitting "like" on Instagram or sending a tweet. Each interaction that needs to communicate with the backend introduces a potential delay. Let’s see how we can get rid of this and make our apps feel snappier.
Research going back to 1968 suggests that we perceive response times in three distinct categories:
- 100 Milliseconds. Everything below a 100ms feels like reacting instantly. Try it on your phone. Most mobile websites have an annoying click delay of 300ms. These additional milliseconds can make a critical difference in the way we feel about an interface’s speed.
- 1 Second. The user is kept within the flow of the app but loses the sense of control he has from elements reacting instantly.
- 10 Seconds. Represents the absolute limit until a user starts thinking about existential questions.
Whenever possible, we want to be in the sweet 100 milliseconds range. A design strategy pioneered by Instagram cofounder Mike Krieger, which he calls "performing actions optimistically," tries to address this.
Instead of showing a loading indicator when you like a photo, Instagram instantly animates a heart icon while server communication is happening in the background. This makes the experience much smoother since users only get interrupted if an operation fails. Twitter uses the same technique.
Takeaway: Design and create more optimistic user interfaces that enhance flow by providing instant feedback on the UI.
3.Create Transitional Interfaces
Motion has become a key ingredient of modern user interface design. If time and space is an inalienable part of interaction design, motion is the key to expressing it. We can’t think of motion as an embellishment anymore. Animations are an incredibly powerful tool to guide users through an experience, tell stories, enhance flow, and create branded interactions.
When it comes to using animations, timing is critical. Make it too long, and users will feel forced to watch your gimmick every single time. Make it too fast, and they might miss out on critical details. There are enough articles about animations out there, so I don’t want to go in depth here. However, in the context of time perception, there is a critical element we should take into account. We can use animation to decrease perceived waiting time. Check out the example below:
This animation is rather slow, isn’t it? If we had to look at this animation a lot, it could become pretty annoying. When used in a smart way though, such an animation can give us some extra time while loading new content from servers. Slower animations can move the focus away from the waiting to the experience of using the app. A critical factor we’ll come across again.
Takeaway: The more conscious we experience waiting time, the longer it becomes. Just like a magician, we can use motion to grab users' attention and shift their focus on the things we want.
4. Avoid Modal Spinners
Did you ever wonder why you always feel like you’re in the slowest line when queuing up in a store? The reason is significance.
Every now and then we face a painfully slow queue. We then tell others about our experience during the occasional after-work drink. The more we talk about it, the more significant the memory becomes. The next time we’re in a similar situation we immediately recall this moment and with it, all of the negative emotions. The result: we become biased and think this happens to us more often than it does to others.
The same applies to ajax spinners and other activity indicators. No matter how beautiful they are, after seeing thousands of colorful, fancy spinners, you’ve become aware that this guy is about to eat your time like a starving, fat Pac-Man (<). As Luke Wroblewski has said, "While the intentions behind progress indicators are good, the end result can actually turn out to be bad because by definition they call attention to the fact that someone needs to wait."
To be fair, spinners aren’t always bad. It’s the way we use them which often is. Consider these two approaches for designing a chat application.
Approach A: Every time the user hits the send button, he gets a fullscreen modal spinner showing him that a message is currently being sent.
Approach B: Every time the user hits the send button, a small spinner is attached to the sending message. As soon as the message has been received by the server, the spinner disappears.
Which approach is better? It’s pretty obvious, right? While Approach A creates friction, forcing the user to watch the spinner every time he sends a message, approach B embraces flow. Compare this to the fav-functionality of Twitter. Imagine how annoying it would be if you had to wait every single time you hit the fav button until the server fully processed your request. You would immediately stop using the feature.
This doesn’t just apply to chat applications though. It applies to all kinds of interactions involving microstates. Approach B is obviously better and yet people still often go for Approach A since it seems easier to build.
Takeaway: Use spinners reasonably. Avoid fullscreen spinners that block the UI state of an app.
5.Communicating longer waits
Every now and then, longer waits are unavoidable. The way we design them greatly impacts how people experience them. Take visiting a restaurant as an example. In the case of waiting at a restaurant, there are several factors at play:
- Am I served immediately? Did I get noticed early on?
- Do I know the expected waiting time and feel it's appropriate?
- Do I understand why I have to wait in the first place?
- Am I dealt with honestly or do I have to wait longer than others?
- Is there a delicious food scent in the air?
All these factors create a set of expectations paving the scene for the experience that follows. In fact, setting the wrong expectations can turn the nicest person into an obnoxious jerk.
The same applies to the digital landscape where a small faux-pas like using the wrong color for a button can turn a seemingly peaceful person into the most insidious troll. Let’s avoid this by helping people to make better use of their time.
An indispensable tool that comes to mind when looking for a means to communicate progress is quite obvious: the good ’ol progress bar. It turns out there are good and bad progress bars out there. So when is a progress bar bad?
In short, when it lies.
Remember the setup procedure of old Windows applications that starts blazingly fast and then suddenly stops at 99%? If you had known from the beginning how long the whole procedure really takes, you would have grabbed a coffee instead. But you didn’t.
The communicated progress set the wrong expectations. Instead of sipping that delicious latte, you were sticking to your screen, desperately waiting for that last 1% to finish. Not very delightful.
This isn’t a new phenomena. Progress bars have been lying to us for decades, and it isn’t exactly surprising. Constructing progress bars that truthfully reflect the state of a system can be an insanely complicated task in its own right.
But maybe we got progress bars wrong. Maybe we need to rethink why they are here in the first place. Maybe their purpose never was to provide us with accurate information. Maybe their real benefit lies in building reasonable expectations and giving people a visually engaging way to observe estimated progress.
One way to achieve this is by making sure that progress bars are moving at a regular, predictable speed. But there is more to it.
Time is subjective. What if we could change the perception of speed and time with a few simple design adjustments? Would we get away with it? A study conducted by Chris Harrison tried to answer this question. Here are the findings:
Frequency and rhythm variations are known to impact peoples’ perception of time. The study found that a blinking progress bar feels faster than a static one. The temporal illusion became even more intense when they added ribbings moving in the opposite direction. All of which can make the waiting experience feel up to 11% faster.
Other studies have found that users are quite susceptible to priming. They prefer progress bars that are faster in the beginning and at the end of a procedure, which coincides with the peak-end rule by Daniel Kahneman.
Some might argue that these kind of adjustments are deceptive and manipulative. I’d say they’re beneficial. Just like the crosswalk signal buttons in Manhattan, these design adjustments cut perceived waiting time and improve the overall experience.
Try this simple trick: next time you move a huge file on your computer, resize the progress window. The wider it is, the faster it will feel since the progress indicator needs to cover a bigger distance.
While the progress bar is a highly visual tool to communicate progress, it’s often not enough. Particularly longer waits demand a more precise indicator. Enter the countdown.
A famous study by David Maister showed that estimated waiting time can make a line feel faster. On the other hand, getting wrong information can cause the opposite: "[…] The pilot who repeatedly announces 'only a few more minutes' adds insult to injury when the wait goes on and on. Not only are the customers being forced to wait, but they are not being dealt with honestly."
Users can greatly profit from feedback displays for longer waits. It allows them to do other things and come back later. Again, precision isn’t as important as one might think. It’s about giving users a rough idea how long the whole thing will take. Will it take a minute or two, or more than 10 minutes?
Takeaway: Speed up your progress bars, and make sure you‘re not one of the 99% jerks. Take advantage of countdowns for longer waits so users can make better use of their time.
6. Load Content Progressively
A few months ago, I went to London for a conference. Whenever I go there, I make sure I pay a visit to one of my favorite coffee places: Joe & the Juice. I love the atmosphere there. Chill songs, enough space to work, freshly pressed orange juice, good espresso, and, obviously, the beautiful Slayer 3-group coffee machine.
This time, my visit would be a little different though. It was a sunny Friday afternoon and to my disappointment, the shop was closed for renovations. It was covered by a huge drape reading "We are renovating for you." I’m sure you have seen similar ones. The point is to build anticipation and let people know that something new is coming.
Over the past few years, there were lots of debates about whether you should use progressive image rendering or stick to the default "baseline" rendering approach. The difference is mostly how the images are loaded:
While progressive images load in different stages, from pixelated and blurred to sharp, baseline images load linearly from top to bottom. The basic idea of progressive images is to improve the user experience, as the image already takes its place, and just like the cover, let’s the user know what’s happening.
It’s not just images, though. Facebook took the basic idea of progressive image rendering and applied it to its posts. A post that hasn’t loaded yet, uses this placeholder:
This placeholder sets expectations. When you go to Facebook.com, the experience seems smoother because there is already something there. Once a post's content has loaded, the placeholder gets replaced with the actual content.
Pinterest follows a similar strategy. They show the the most dominant color of an image until it’s fully loaded.
The transition from no content to the actual content is more seamless and seems overall faster. Similarly, we should prioritize assets that are positioned above the fold higher, then the ones that are at the bottom of a website.
Takeway: Load content progressively so the basic experience is available as fast as possible.
Our perception of time, and each experience people have with the things we put in this world, is shaped by various factors we might not be aware of. As long as technology doesn’t fully eliminate waiting, we can take advantage of our subjective perception of the world and make the experiences we craft snappier, seamless, and captivating.
Time is valuable and the most precious gift there is. Let’s make the most of it.
This article was adapted with permission from the author. Read the original here.