Provide positive feedback for the user's successful operation

Hot weather, home in the window to pull curtains while watching meow playing treasure side do blog, this scene reminds me of Alare family. Take me down to the Paradise city where the grass is green and American are pretty.

Afternoon Tea general article, about the operation of the response, positive feedback, customer satisfaction, happy class. Enter the body, no pressure.

We like to tell users what they did wrong, we prepared various error prompts, from the phone number input format error, to login failed. But what do we do with those successful operations of the user? Have you helped them celebrate and told them, "Hey, you're doing the right thing"?

Positive feedback is a key factor in improving user experience pleasure, and it is important that we let users know that the actions they are performing are correct. In this article, we will be together to understand why positive feedback is not dispensable, as a designer, we should at what time, how to use it in the site.

Why positive feedback is so important

Ever wonder why most people don't like the virtual keyboard on a touchscreen device? The main reason I'm afraid is that the feedback it provides is difficult to match the physical keyboard. No denying that the designers of touch-screen operating platforms did their best, for example, the visual effects of solid texture, the sound effects of touch keys, and the amplification pop-up prompts, these solutions have a positive effect on the user's actions, but they do not achieve the positive feedback effect of the entity buttons. Because no matter what, the virtual keyboard can not simulate the touch of the physical keyboard.

This is an annoying and helpless reality, it also from a side to explain the importance of positive feedback for the product. For a virtual keyboard, lack of real and strong positive feedback results in the user's difficulty in generating enough experience satisfaction.

In fact, most users are always hard to produce real satisfaction, whether they are limited by their own skills, or the product itself is really problematic. They worry about whether they've done something wrong, and they want to know if the site really knows what they're doing. Many times this is because they do not really understand the site's operating mechanism caused by the result is that once there are problems, they will first blame themselves.

Through the positive feedback mechanism, we can gradually help users to dispel these concerns, help them build confidence, let them feel that everything is going smoothly. This is especially important for users who lack confidence in their ability to manipulate computing equipment. Such users may not really have a real lack of operational skills, but in many cases they have doubts about their judgment because the system has not made sufficient positive feedback.

The positive feedback mechanism not only improves the user's experience satisfaction after making the right actions, but also eliminates unnecessary concerns and prevents the user from doing the right thing and then undoing the behavior of the person who is worried about his or her actions. For example, the transaction process in the network shopping, after the user submitted the order, if the system processing time is long, resulting in subsequent page loading is slow, and this does not have any feedback prompts, then the user is likely to think that their order has not been submitted successfully. In this case, you can provide some positive feedback to the user in the course of the page loading, such as telling them that "the system is processing the order, please wait" class, which prevents the user from clicking the Back button because of the unknown truth.

Think about it, if the user is "confused" and "suspicious" and then rerun the shopping process, including the selection of goods, fill out a variety of forms ... There is enough pain in the egg. Regardless of how well the design has been in the previous steps, the overall experience satisfaction of the shopping process will be greatly reduced, and the user is likely to leave. What about the conversion rate?

When

need positive feedback

Where users enter content is a key point, including registration, login, purchase, comment, update status, etc., and interactive links with the content of the data are all needed to focus on. Especially for fields such as user name, mailbox, password, postcode, positive feedback from the system can help users to dispel the doubts of data manipulation skills.

In addition to entering data content, clicking on a link is also an important interaction point. If you pay attention, you will find that most websites today do not give positive feedback on the user's successful click of the link. After the user clicks on the link, the browser itself does bring a certain amount of feedback, including the address bar and the relevant changes in the tab bar, but the user to perform the click, attention in a short period of time is still concentrated in the link position, so the link itself set a certain response rules is more effective practice. In this respect, smashing magazine is a good example, when the user clicks on a text link, the a:active rule in CSS will set the background color of the link text, the user can be very intuitive to feel the successful click of the link.

The problem of inconsistency between feedback and attention focus is not only in the link, but in many cases, the user's actions lead to the change of content or interaction elements in another place, which makes it easy for the user to ignore the results of the operation. A common example is the process of adding a product to a shopping cart, the user's focus here will be on the "Add To Cart" button and on the nearby merchandise information, so the most direct and effective feedback to add success should be in this position, for example, near the button, or directly on the product picture.

Distance is only one aspect of the problem; If the user's interaction triggers a change in the small details of the interface, it is still not safe to say that the feedback is close. In this case, it is best to provide more visible and eye-catching feedback on the visuals to ensure that the user can notice it at the first time.

How to implement positive feedback

When a user makes a mistake, we usually throw an error message up as a hint. Similarly, for positive feedback, this is also a feasible approach. But I think it's important to be careful when using text messages to provide positive feedback, because text forces users to turn their attention around, read and think, and this process can greatly reduce the flow of tasks. The role of positive feedback is to encourage users to move boldly, rather than creating fetters.

In some cases, the use of text information to provide positive feedback is indeed very effective. For example, after the user clicks the Add to Cart button, we can change the button's caption to "continue adding." This change on the one hand allows the user not to shift the focus of attention can immediately know that his previous add action has indeed succeeded, but also to encourage users to continue the relevant operations.

Visual Feedback

We can use the attributes of visual elements to replace text as a form of positive feedback, including graphic images, style, color, size, and so on. For example, the preceding link is clicked to present a high contrast background color, or the form field is correctly filled out after the next output to tick icon, and then, for example, when the content of a page is updated, use the background color and so on to highlight this part.

Another typical example is the state change of the mouse pointer. When a user points the mouse to an interactive interface element (such as a link or button), they expect the pointer to become a hand. Users are likely to be confused if the system does not provide feedback that meets the expectations of the user. Many times, the interface of clickable elements are not links or buttons, they are through the cooperation of JS to achieve interactivity, in this case to remember in the style sheet in the Cursior property manually set to pointer, so that they can simulate the link or button elements in the mouse hover when the pointer state.

provides feedback through animation effects

Of course, animation itself is also a form of visual expression. Nowadays, many websites use some exquisite animation effect to attract the user's attention to the wrong place, such as login to WordPress admin backstage, if the username or password input is incorrect, the whole form will show "jitter" effect, prompting the user to input error. In the same way, we can also apply the animation effect to positive feedback.

A more common example is the anchor link jump within the page, which includes scrolling down to browse the content or back to the top of the page. By default, anchor jumps do not have any animation transitions, the page is only very abrupt move to the specified location. Nowadays, we can see the jump with smooth scrolling effect in more and more websites, some will highlight the specific content after the page reaches the target position. This change makes the whole interaction more user intuitive and can clearly present the results of the interaction to the user.

We can also use the animation transition effect in the shopping website to add the product to the shopping cart interactive link, for example, after the user clicks on the "Add To Cart" button, the interface element of the shopping cart will be unfolded to show the new product that has just been added, or to "fly" the product into the cart in an animated way. These methods can seize the user's eyes, the operation of the success of the information accurately and reliably communicated to the user.

I believe that the animation transition effect is still not fully utilized in the form of information feedback, which still need us to continue to explore and practice in more products.

provides feedback via sound effects

Students using the iphone or ipad, do you expect to be "swish" after sending short messages or emails? This is a good example of providing positive feedback through sound effects. Whether you're using a desktop device or a mobile device, we all rely on sound feedback, such as clicking on a button or tapping a virtual keyboard, so that the system's true sound effects allow us to continue typing with confidence.

So why is the use of sound feedback on the site very low? In addition to file size factors, whether there are other reasons?

Perhaps because the use of sound is too annoying in the Web site? Once upon a time, large and small sites will use boring audio loops or background music, some can not even cancel the playback; In other words, previous sites have been littered with bad visual design and animation effects, but this has not prevented us from gradually refining these approaches and applying them to the right places.

Some people may think that browsing the site usually happens on the desktop, which is the platform we usually use at work, so using sound feedback can cause a certain amount of interference. But the sound effect we're talking about is actually the same as the small beep tones of the operating system itself, all in order to feed back information to the user during the interaction.

A click action that can touch the sound feedback can be very effective in letting users know that they have done their work correctly and effectively; in the shopping website, opening the Register's sound effect can be applied to the user to add goods to the shopping cart. Sound feedback is a powerful communication tool, but we haven't fully applied it in the right place.

Summary

Regardless of the form of audio, visual elements, animations, or copywriting, we should provide more positive feedback for the user's interactions, which can increase their satisfaction and make them more confident and efficient in accomplishing their goals in your site.

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://www.smashingmagazine.com/2012/07/17/are-giv ... Translator Information: c7210-Interactive design and code players, is now working in the public comment network user Experience Design Group (DPUX)