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 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’ looks rather cold and dull, a watch immediately captivates us with its beauty, craftsmanship and human touch.
[caption id="attachment_4708" align="aligncenter" width="1280"]
Clockwork architecture drawing[/caption]
It wasn’t until I was twelve 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.
"Time is the most valuable and limited resource we have. That’s why good design is about saving time."
Time in the digital age
Designing digital experiences comes with an ingrained obsession. The obsession of 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 8 million searches (and ad displays) when page speed decreases by just four tenths of a second — scary shit!
So what do we do?
We create performance budgets, cut the mustard, run image optimizations, minify our JavaScript and CSS and cache our assets on servers located in the most exotic places around the globe.
There is a caveat though. First of all, faster doesn’t necessarily equate to better experience. Secondly, perception of time is highly subjective, or as Einstein aptly put:
“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. There are many other, less hormone involved examples that come to mind.
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.
During holidays, time perception changes dramatically. The disproportionate amount of new impressions changes the way we feel about time. It’s why the first few days usually seem “slower” while days in a later stage fly by.
"Perception of time is highly subjective."
Time Interaction Design
Time is a crucial part of interaction design. At the end of the day, the absolute minutes and seconds users have to wait won’t really matter though. It’s about how people experience and remember them.
The case of Amazon sheds some light into it.
A study by UIE 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. This is huge! They found more along the way…
When users accomplish what they set out to do on a site, they perceive that site to be fast.
How is this possible?
We do not encode time in absolute terms. It highly depends on an individual’s emotional state and context. When we feel pleasure and progress as a result of an activity, we barely notice time. The same applies to user interfaces. Well designed interfaces feel faster even though they might actually be slower.
"When we feel pleasure and progress as a result of an activity, we barely notice time."
Let’s see what kind of design strategies we can use to alter time perception and potentially create more fluid experiences.
[gallery link="file" columns="1" size="full" ids="4709"]
1. Keep Users Engaged
Have you ever been to Manhattan? When you’re standing at a crosswalk, you’ll 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 level of frustration and stress of the pedestrian.
There is something most people are not aware of though:
About 90% of the crosswalk signal buttons in Manhattan do nothing
Why are these buttons still there then? Why didn’t the city get rid of them if they don’t actually work?
The answer highly 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 expected.
Keeping people engaged is one of the oldest and most efficient strategies to cut waiting time. 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.
"Keeping people engaged is one of the oldest and most efficient strategies to cut waiting time."
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:
[caption id="attachment_4714" align="aligncenter" width="480"]
Internet Explorer Windows 98[/caption]
The vast whiteness introduced a moment of self reflection, emptiness and uncertainty.
A small change introduced in later versions changed this. By keeping the current site open until the new page was loaded made people believe that the web site was loading faster, simply because people were able to keep engaging with the currently shown content.
Disney Land is well renown for creating their waiting lines as pleasant as possible. Borrowing basic principles from architecture, they make sure people at the beginning never get demoralized by seeing the end of the line. You move through the different stages of the waiting line while always discovering new stuff. Some people go as far as saying people in Disney Land aren’t queuing in a line, they are delighting in a line.
Takeaway: The buttons we discussed before 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.
"If we want to create smoother experiences, we need to stop seeing technology as our one and only savior."
[gallery link="file" columns="1" size="full" ids="4715"]
2. Perform Actions Optimistically
Todays web and mobile apps are packed with microstates. Whether it’s a like button on Instagram or sending tweets on Twitter, our apps need to constantly be in touch with our servers.
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 a bit 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 in life.
Whenever possible, we want to be in the sweet 100 milliseconds range. A design strategy pioneered by Mike Kriege, which he calls “performing actions optimistically”, tries to address this.
Instead of showing a loading indicator when liking a photo on Instagram, it instantly animates the 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.
Takeaway:
Design and create more optimistic user interfaces that enhance flow by providing instant feedback on the UI.
[gallery link="file" columns="1" size="full" ids="4716"]
"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.
[caption id="attachment_4719" align="aligncenter" width="700"] Branded interactions in mobile apps[/caption]
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 critical details. There are enough articles about animations out there, so I don’t want to go into details 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 every single time, it could potentially become pretty annoying. When used in a smart way though, this kind of animation can get us some extra time while loading new content from servers.
"We can use animation to decrease perceived waiting time."
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.
[gallery link="file" columns="1" size="full" ids="4721"]
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 its negative emotions. The result: we get 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 and fancy spinners you’ve become aware that this guy is about to eat your time like a starving, fat Pac-Man
"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." – Luke Wroblewski
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 we’ve discussed earlier. Imagine how annoying it would be if you had to wait every single time you hit the fav button till 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 micro states. 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 full screen spinners that block the UI state of an app.
[gallery link="file" columns="1" size="full" ids="4722"]
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 humble and peaceful person into the most insidious troll. Let’s avoid this by helping people to make better use of their time.
"...setting the wrong expectations can turn the nicest person into an obnoxious jerk."
Progress Bars
An indispensable tool that comes to mind when looking for means to communicate progress is quite obvious: the good’ol progress bar. It turns out there are better and worse 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 start blazingly fast and then suddenly stop at 99% for an unproportionate amount of time? 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 surpising. 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…
Speeding up progress bars
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 is what they’ve found.
Frequency and rhythm variations are known to affect peoples’ perception of time. The study found that a blinking progress bar feels faster than a static one. The temporal illusion got 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.
"Frequency and rhythm variations are known to affect peoples’ perception of time."
Other studies 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 Kahnemann.
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.
Countdowns / ETA
While the progress bar is a higly visual tool to communicate progress, it’s often not enough. Particularily longer waits demand a more precise indicator. Enter the countdown.
The infamous study about waiting lines by David Maister showed that knowing about the estimated waiting time can make it 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.
[gallery link="file" columns="1" size="full" ids="4725"]
6. Load Content Progressively
A few months ago, I was visiting 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 just 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 due to renovation. It was covered by 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 years, there were lots of ongoing debates whether you should use progressive image rendering or stick to the default “baseline” rendering approach. The difference is mostly how the images are loaded:
[caption id="attachment_4726" align="aligncenter" width="921"] Progressive (left) vs baseline loading.[/caption]
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 their posts. A post that hadn’t loaded yet, used this placeholder:
[caption id="attachment_4727" align="aligncenter" width="768"] Facebook content placeholder by George Philipps[/caption]
This placeholder sets expectations. When you visited facebook.com, the experience seemed smoother because there is already something there. Once a posts content is loaded, the placeholder gets replaced with the actual content.
Pinterest followed 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 prioritise assets that are positioned above the fold higher, then the ones that are at the bottom of a website.
Takeaway: Load content progressively so the basic experience is available as fast as possible.
Tick. Tock.
Our perception of time, and every 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 a little more snappy, seamless and captivating.
Time is valuable and the most precious gift there is. Let’s make the best out of it.
Image courtesy to:
Marcelo Guerra
History in photos
New old stock photography
NCPR
This post was originally published on Adrian's Medium profile.
The post The Illusion of Time appeared first on Marvel Blog.