Tips to guide users through the key colors + make the progress bar "fast"

Today, share two tips, the first to teach you how to use the button color contrast to guide the user, the second is to make the progress bar look "faster" method. From the user's point of view, these two are not only delicate and thoughtful, but also can improve the use of pleasure. Thank you in particular for the translation of your portrait at @ Reed Chau.

　　First, how to guide the user through the contrast of the key color

Have you ever had an accident when the button was wrong? When the user is not properly booted, the wrong decision is made on the modal window. Many modal windows will bounce out without a clear distinction between different actions.

A clear color contrast between keys can lead the user to the right choice. Clear action instructions can confuse users and reduce their efficiency. It may even lead them to make bad choices that have adverse effects.

　　Positive, neutral and negative actions

All keys are subordinate to three categories:

1 Front--change, send, add information

2 Neutral-do not change, return to the screen (such as "Cancel")

3 Negative--delete, reset, block information

Several buttons on a modal window usually integrate several actions. In order for the user to recognize the difference between them, the color contrast of each button is a topic we can not ignore.

　　Positive behavior requires the highest level of contrast

The most common type of modal window is the positive action. Users need to know that the behavior can help them accomplish their tasks. You should give this type of action the highest color contrast to help users achieve their goals. Any other neutral or negative action buttons placed next to it should have a lower color contrast.

To achieve the highest contrast, fill in a cool and white text with your positive action buttons. The so-called cool colors are blue, green and purple and so on those who look more soothing color. And this kind of solid color white text will be more overhangs than ordinary black word.

The neutral or negative action beside the positive action key should not be filled with color. If you do that, the color contrast between all the keys will be too close. Conversely, if you just let them display a border, you can better highlight the positive behavior buttons.

　　When negative behavior keys have the highest contrast

Negative actions should not have a higher contrast than positive action. Positive actions tend to be more frequent and more secure, and for negative buttons, we want to make sure that the user doesn't go wrong because of delays. But if only negative and neutral actions exist, we should give a higher contrast to negative actions.

In this case, you should fill the negative action keys with warm colors. The so-called warm color refers to red, orange, yellow and other slightly dazzling colors. When the user sees it, they will naturally understand to think twice before clicking.

　　Give neutral action the lowest contrast

Neutral action will never exist alone in a modal window, and it will always appear in pairs with positive or negative actions. It should be given a minimum color contrast to not interfere with the other two.

A black border is sufficient for user identification. No fill color lets the user's attention not move away from positive or negative actions.

But note, do not gray border + word, or users will probably mistakenly think that this is a disable button. They also need to distinguish between the key and the background.

　　Conclusion

If the color contrast is clear, positive, neutral and negative actions can appear together. The clearer the contrast between them, the quicker the user can complete the task. Colors play a very important role in the interface-not just the beauty of the page, but also a powerful tool to guide the user's actions.

　　Second, let the progress bar look "faster"

In today's fast-growing era, letting users wait too long is an absolute user experience problem for your application load. If users feel that your application is loading too slowly, they will lose patience and then spend their time in other places (competing applications). Now some technical means can speed up the load time, some rich applications because the volume of the relationship to the ideal state of operation has to let the user wait for a while. When you try to optimize your application and find that it is still not fast enough, there is a way to speed up the user's perception of time and then let them feel that your application is faster than it actually loads.

When an application is loading, the user usually sees a progress bar. This gives them an intuitive visual reminder of when the load will be completed. The animation effect of the progress bar will affect the user's perception of the load time.

　　Use the reverse padding

According to research, the reverse (the progress bar in the opposite direction) of the progress bar appears to be faster than the forward progress bar. The results show that "the effect of behavioral perception is not absolute, but will change with the current visual situation," and it also creates an illusion that the rate is increased and affects our perception of progress time.

That part of the blue is what I'm talking about. Fill, let it travel to the left when loading it will give the impression that the whole load is faster.

　　Refresh rate Accelerated

Another way to make progress look faster is to increase the refresh rate: if you've actually seen the progress bar, hopefully you'll understand what I'm talking about. After the same research, it was found that those fast-moving strips were more likely to feel shorter. The frequency here is like the beat of a song. The more the Beats, the faster the music will play. When the fill of a progress bar is constantly being refreshed, it is as if the tempo is being calculated.

Let's go.

The discovery also has implications for the more subtle activity indicators (the ones that are loaded above). The indeterminate activity indicator and the progress bar are very similar except that they are radial and non-linear. Nor can they indicate when the process will end, but more often it is used to tell the user that the process has begun, but does not describe its extent further. If your application uses an activity indicator, you can make the user feel faster to load by increasing the speed at which it rotates (or the refresh rate, a meaning). The more circles your activity indicator rotates in the same time, the faster your application looks for the user.

　　Accelerate the process and avoid the last minute stop

Another study found that the accelerated progress bar was far more popular than the deceleration of the progress bar. This means that the progress bar, which speeds up at the end of the process, is much faster than the progress bars that somehow slowed down or froze at the last minute. If your progress bar may appear in the middle of a stop problem, then you can let it at the beginning of the slow, and then at the end of the acceleration, to give the user a quick closure of the feeling. The user's tolerance to stop/slow at the start of the progress is much higher than the stop/slow rate at the end.

Prefer to be slow at the beginning rather than stuck at the end. Thunder 99.9% stop Laughing without words

　　The time of the progress bar is relative

Clever little tricks can make your progress bar look faster than it actually is. This can be a good solution after you've exhausted all the possible ways to optimize your application. Many feature-rich applications that require long time to load can benefit from these technologies. For the user experience, perception means everything. If your application looks and feels faster for the user, it's probably true.