My grandfather was a watchmaker. When I was a child, I often sat near its huge wooden table, and observed how it projects and collects a clockwork from tens of fancy parts. Always admired me how many patience, persistence and accuracies it puts in each nuance of its creation.
Drawing of the scheme of a clockwork
When you see the clockwork course for the first time, it seems magic. Contents of the computer look quite cold and sad whereas hours instantly captivate us the beauty, skill of execution and human warmth.
Only when to me it was performed twelve, the grandfather, at last, handed to me hours. Having put on them my wrist, he said what I will never forget:
"Remember, time is the most valuable present from all."
Perhaps, it is not so dramatic as the last words of the uncle Ben from the Spiderman, but since then I began to perceive design differently. Time — the most significant and limited resource which we have. That is why good design — about saving of time.
Time in a digital century
Design of digital interfaces brought us the obsession which firmly sat down at consciousness. Obsession speed and performance. Amazon considered that increase in load time only for one second can cost it sales for 1 600 million dollars a year. Google loses about 8 million requests (and advertizing demonstrations) when the speed of loading of the page decreases all on the four tenth seconds — the most complete sediment!
And what we do?
There is one but. First, the fast interface not necessarily means good. Secondly, the perception of time is very subjective, or as Einstein noticed:
"The hour spent in park on a bench near the nice girl flies by as a minute, and the minute spent on a hot frying pan seems hour."
You remember your last unsuccessful appointment? Time suddenly begins to go painfully slowly, and you can think only of why you do not stay at home in a convenient couch now and do not watch the last season of the Game of Thrones. There are much others, it is less than examples connected with the sexual relations which occur.
When you look at the watch, you can feel literally how time is slowed down. Sometimes even it seems that time for second stopped.
During issue the perception of time changes cardinally. The excessive amount of new impressions changes how we feel time. That is why the first few days usually seem "long" whereas the next days fly by.
Time <> Design of interaction
Time — decisive part of design of interaction. Eventually, absolute value of minutes and seconds for which the user had to wait actually is not important. Only how the person transferred matters and remembered this time.
In the researches UIE compared perception of speed of loading of web pages. They found out that Amazon evaluate as faster with the average time of loading of 36 seconds in comparison with About.com with the average time of loading of 8 seconds. It is amazing! In process they learned something else …
When people manage to make on the website that they wanted, they consider this website fast.
How it is possible?
We do not perceive time in absolute values. It strongly depends on an individual emotional status and a situation. When we feel well and we see results of our actions, we hardly notice time. It can be applied also to user interfaces. Well designed interface seems to faster even if actually it is slow.
Let's look what acceptances we can use in design to change perception of time and in the long term to make the interface causing less than friction.
Crosswalk of Manhattan. Photo of the 60th
You were on Manhattan? When you stand at the crosswalk, you become the eyewitness of an amazing pattern in behavior of people. People persistently press on a signal button in hope to reduce a waiting time. Frequency of clicking this button usually increases in proportion to the level of frustration and a stress of the pedestrian.
Here about what most of people do not know:
About 90% of signal buttons at crosswalks of Manhattan do not do anything.
Why these buttons still there? Why the city will not get rid of them if they actually do not work?
The answer strongly depends on how we understand the word "work". When people are busy with something, the waiting time seems to them less, than it is actually. These buttons perfectly work. Simply not as we expected.
To occupy with something people — one of the most ancient and most effective methods to reduce a waiting time. That is why at us in elevators mirrors hang, in receptions logs of society column and the book lie, and we always check our phones as soon as "experience of waiting" begins to come nearer.
What into the account a web?
In old kind times when people used Internet Explorer for search on the Internet, we always had to look at an empty canvas, the new page will not be loaded yet:
Internet Explorer Windows 98
The huge white cloth gives the moments of a heart-searching, emptiness and uncertainty.
The little changes provided in upcoming versions corrected a situation. The current page ceased to be closed, new will not be loaded yet. And people began to think that the website is loaded quicker, they could occupy themselves with content opened at present.
Disney Land is known for creation of the most comfortable queues. Having borrowed the basic principles from architecture, they made everything that people at the beginning of queue did not decide not to stand, having seen its end. When you with queue pass different sections of a way, you every time find something new. Some even say that people in Disney Land do not stand in a queue, and enjoy queue.
Output: Buttons which we discussed earlier work, from the point of view of perception. However, not the technology, but psychology works here.
If we want to create the interface during the work with which there is a smaller friction, then it is necessary to cease to see the only rescue in technologies. Let's make a waiting time shorter, offering people informative content, like hints, links, quotes, etc. that this time was more intelligent.
2. Make operation execution optimistical
The worker of the railroad is optimistical concerning the drink
Today the web and mobile applications are typed by microstatuses. Whether it be the like button in Instagram or sending a tweet to Twitter, the application needs to be constantly in contact with our servers.
Each operation which demands interaction with a backend potentially causes a delay. Let's look how it is possible to get rid of it and to force our applications to seem a little more smart.
The research originating in 1968 shows that we perceive answer time in three different categories:
Any answer quicker than 100 ms is perceived as instant. The majority of the mobile websites have the irritating response delay in 300 ms. These additional milliseconds can cardinally change our perception to interface speed.
The user saves a flow status, working with the application, but loses feeling of control which he feels when elements answer instantly.
Represent an absolute limit after which the user begins to think of meaning of life.
Whenever possible, we want to get to a pleasant zone of 100 milliseconds. The design strategy based by Mike Krieger which he called "optimistical execution of operation", is urged to solve this problem.
When the user puts photo like in Instagram, the indicator of loading does not appear. Instead the heart icon instantly starts moving while on a background contact with the server is performed. Such interface causes much less friction — the user will be disturbed, only if operation is interrupted.
Twitter use a similar technique.
So function of like looks on Twitter
Output: Project and create more optimistical user interfaces, it will strengthen a stream status due to instant back coupling from system.
3. Create dynamic interfaces
The first picture of the movement made in 1878
The movement became a key component in modern design of interfaces. If time and space — integral parts of design of interaction, then the movement — a key to their expression. We cannot perceive the movement as something decorative any more. Animation — incredibly powerful tool that the user's message through the interface to tell it a story, to strengthen a flow and to create interaction patterns.
Branded solutions in mobile applications
When business reaches animation, time becomes critical. Make animation too long, and the user will feel that he is forced every time to watch at your "feature". Make it too fast, and they can miss important parts. There are many other articles on animation therefore here I do not want to go into details.
However, in the context of perception of time, there is a key moment which we should consider. We can use animation to reduce a subjective waiting time. Pay attention to an example below:
This animation rather slow, isn't it? If we have to watch at it every time, over time it can fairly bother. On the other hand, at competent approach, this type of animation can give us a little extra time while new content is loaded from the server.
Slow animation can switch attention from waiting to direct work with the application. A key factor which we still will face.
Output: The more attention we pay to the fact of waiting, the it longer. In a magic way, we can use the movement to intercept attention of the user and to switch it to the fact that it is necessary for us.
4. Avoid modal indicators
The thrown water-mill
You sometime reflected why always it seems that your queue in shop moves more slowly? It is all about the relation.
We meet painfully slow queues everywhere. Then we shares with others this supervision when from time to time we go to drink after work. The more we speak about it, the big importance is purchased by reminiscence. Next time in a similar situation we immediately recollect this moment, and at the same time and all negative emotions, related. Result: we have prejudices, and it seems to us that a certain event happens to us more often than with others.
It is applicable also to loading indicators, and to indicators of other statuses.
It is not important as far as they are beautiful. After viewing of thousands of color and fancy indicators, you begin to perceive these pieces as something, the eating your time as if hungry, fat Pekmen (<)…
Though the indicator of loading is put with good intentions, the end result can be bad, the indicator pays attention to the fact of what it is necessary to wait for.— Luke Vroblevski
It is necessary to understand that indicators — it is not always bad. But the situation described above meets regularly. Let's consider two approaches for design of the application chat.
Every time when the user clicks sending, he receives a modal window on all screen which says that the message was just sent.
Approach of B
Every time when the user clicks sending, is attached to the message the small indicator. As soon as the message is sent, the indicator will disappear.
What approach is better? The answer is obvious? Whereas approach And creates friction, forcing the user to watch at the indicator every time after sending the message, approach of B strengthens a flow.
Compare it to the mechanism of putting down of likes on Twitter which we discussed earlier. Provide, as if irritated if it was necessary to wait after each clicking of the button of like until the server processes request. You would cease to use this function at once.
However, it concerns not only applications chats. It is applicable to all types of interaction in which there are microstatuses. Approach of B, undoubtedly, better, nevertheless people still often select approach And because it seems more simply in implementation.
Output: Use indicators reasonably. Try not to use indicators on the full screen which block interaction with the application.
5. Warn about long waiting
People in happy waiting
From time to time, long expectations are inevitable. As we project them, strongly influences how people perceive them.
For example, come into restaurant. If at this restaurant it is necessary to wait, then you pay attention to several factors:
- I was serviced at once? How soon paid attention to me?
- Whether I how many it is necessary to wait and whether I consider this time acceptable know?
- First of all, whether I for what reason I should wait know?
- I am serviced in turn, or I should wait longer than others?
- Whether there is in air a tasty aroma of food?
All these factors create a set of the expectations laying the foundation for impressions which will remain later. Actually, creation of false expectations can can turn the most pleasant person into the disgusting boor.
The same is applicable also by didzhital-Wednesday where the small oversight as the wrong color at the button, can turn in appearance the modest and quiet person into the most artful troll. Let's not lead up before and we will help people as it is possible to use their time better.
The only tool which comes to mind when we look for methods to show progress, it is obvious: old kind indicator of loading. It appears, some indicators can be better or worse, than others. So, when the indicator of loading is bad?
In sum, when he lies.
You remember procedure of installation of old Windows applications which began incredibly quickly, and then suddenly stopped for 99% for not a comparable interval of time? If you from the very beginning knew, what is the time procedure will borrow actually, you would descend for coffee better. But is not present.
The displayed progress created false expectations. Instead of tightening tasty latte, you stuck to the screen, hopelessly expecting when this 1% reaches the end. Not especially pleasantly.
It is not a new phenomenon. Indicators of loading lied to us decades, and will surprise nobody with it. But development of the indicator in itself which will reflect real system status is extremely complex challenge.
Or perhaps we incorrectly use loading indicators. Perhaps we should think at first why they are necessary. Perhaps their purpose never was to give us reliable information. And their real advantage is in creating the correct expectations and to give to people visually attractive method to watch alleged progress.
To reach one of methods of it — to be convinced that the indicator moves with constant, predictable speed. But there are also others …
The accelerating loading indicator
Time is subjective. What if we can change perception of speed and time by means of several simple design changes? We will enter them? In research which was conducted by Chris Harisson there is an answer to this question. Here what was succeeded to find out.
The loading indicator in Chris Harrison's research
It is known that frequency change and a rhythm influences how the person perceives speed. During researches found out that the flickering indicator of loading seems quicker, than same motionless. This temporary illusion even amplified when added the strips moving in an opposite direction. Each of them can make the felt speed of loading up to 11% faster.
Other researches showed that users are rather susceptible to change of speed. They prefer indicators which move quicker at the beginning and at the end of procedure that the peak — the end" Daniel Kahneman answers the rule of estimates ".
Someone can object that this method — deception and manipulation. I would tell, it is advantageous. As well as traffic light signals at crosswalks of Manhattan, these design changes reduce a subjective waiting time and improve interaction in general.
Try this simple cunning: next time, when you will load the huge file on your computer, increase a loading window. Than it is wider, loading as the indicator needs to overcome bigger distance will quicker seem to those.
Countdown / the Expected load time
Though the loading indicator — very visual tool for display of a status, but often is not enough of it. Very long loading demands more detailed indication. Use a countdown.
Well-known research on David Maister's queues showed that if the presumable waiting time is known, then it seems less. On the other hand, unreliable information can yield opposite result:
"[…] The operator who every time repeats that there were "only several minutes" only rubs salt in the wound if waiting does not stop after that. Buyers not only are forced to wait, but also deceive them."
Users can receive big advantage if they see back coupling at long waiting. It allows them to be engaged in another matters and to return to work later. Besides, accuracy is not so important as it is possible to think. The speech giving to the user a general idea, what is the time will occupy all process. It will last one or two minutes or more than 10 minutes?
Output: Accelerate your indicator of loading and be convinced that you not one of 99% of liars. Take advantage of a countdown to long waiting that users could as it is possible to use the time better.
6. Load content gradually
Builders on the Golden Gate Bridge, San Francisco 1935
Several months ago I was in London at conference. Coming there, I surely come into one of my favourite cafes: Joe &the Juice. I just like its atmosphere. Quiet music, is enough place for work, freshly squeezed orange juice, good espresso and, at last, the fine Slayer 3-group coffee machine.
Alas, this time my visit took place a little differently. It was the second half of solar Friday, and, to my chagrin, the institution was closed on repair. It was curtained by a huge cloth with a text "We changes for you". I am sure, you met similar. The sense is in creating waiting and to inform people that something new will appear soon.
In recent years there were many long disputes on whether it is worth using progressive image compression or to return to the "standard" method which is not demanding special work with the picture. A difference generally in how the image is loaded:
Progressive loading (at the left) and standard
The progressive image is loaded step by step, from pixels and blur to the accurate picture, standard images are loaded linearly from top to down. The main idea of the progressive image — to improve the interface the fact that the image already takes the right place as a stub which shows to the user that something occurs.
It belongs not only to the image. Facebook uses the main idea of progressive compression and applies it to posts. Instead of a post which was not loaded, displayed here such pleyskholder yet:
Pleyskholder for content of Facebook from George Filipps
This pleyskholder creates expectations. When you come on facebook.com, the interface causes less friction because on the screen already something is. If contents of a post were loaded, the pleyskholder is replaced with real content.
Pinterest apply the similar principle. They show the dominating color of the image until it completely is loaded.
Transition from lack of content to real content smoother and, in general, seems quicker.
In the same way, we have to give a priority when loading to objects which are located within the first screen, in comparison with those which stand in the bottom of the page.
Output: Load content gradually — the main interface will be available so quickly as far as it is possible.
Our feeling of time and any other impressions which are received by people at communication with products which we published are created by a set of factors. We can not know about them even. Until technologies completely do not eliminate waiting, we can derive benefit from our subjective perception of the world and do interfaces which we design, a little more live, fascinating and not defiant friction.
Time is valuable, and time — the most expensive gift. Let's use it as it is possible better.
This article is a translation of the original post at habrahabr.ru/post/271091/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: firstname.lastname@example.org.
We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.