Interactive design of web site feedback

The excellent design comes from life, then we start from life, we design a product according to the user life situation, we do not need to cultivate the user's habits, users can use your product for the first time to achieve their goals, and do not need other people's guidance. For example, in the process of designing the first imac, Jonathan and his team traveled to Japan to consult with a person in the Japanese confectionery industry on how to maintain a consistent half transparency while producing a candy-coloured computer shell.

In the following we will talk about the importance of feedback interaction design for web design, before we need to understand the relevant concepts:

What is feedback?

Wikipedia explains that feedback is one of the basic concepts of modern science and technology. In general, the feedback concept in cybernetics refers to the process of returning the output of the system to the input and changing input in some way, which in turn affects the function of the system, and then returns the output to the input and compares it with the input quantity through the appropriate detection device.

What is interactive design

Interactive design, also known as interactive design, (English interaction Design, abbreviated IXD or IaD), is the domain of designing and designing the behavior of artificial systems. Artificial objects, i.e., artificial objects, such as software, mobile devices, artificial environments, services, wearable devices, and the organizational structure of the system. Interaction design is the interface that defines the behavior of the human creation (the "interaction", that is, the way artifacts are reacted in a particular scenario). Interaction Designers first Conduct user research related fields, as well as potential users, design the behavior of human creations, and evaluate design quality from the aspects of usefulness, usability and affective factors (usefulness, usability and emotional).

In combination with the above concepts, feedback and interaction means that the user can always know what is happening through appropriate feedback and interaction with the program, not just a warning when something goes wrong. For the moment, we split the feedback into 2 types: one positive feedback and the other negative feedback. To the website user, the feedback belongs to the type of hint information, from the user registration account input error prompts, to exit the success of the hint, all belong to the category of feedback interactive design.

Feedback-interactive design is so important

Let us imagine the life of several scenarios, if you need to take the subway to change, at the moment if the subway does not transfer the indicator logo, people will not touch the four cardinal point, very easy to confuse, do not know which channel is the correct transfer channel. Subway builders change channels to add eye-catching text, very intuitive clearly let you know which channel the correct transfer route.

(London: Subway replaced by signage)

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.

(a website shopping cart)

To install software as an example, usually the software file is larger, the installation file loading time will be a little bit longer, the software interface without any feedback prompts, imagine you in the scene, is not very easy to feel irritable, because the installation software process is user-led, The user installs the software purpose is to complete his own goal, but at this time the interface does not have any prompt, the user suddenly loses the control to this, causes the target interruption cannot complete. At this moment the user closes the software reinstall, if a long time has not responded, users will choose to leave.

What methods do we use to avoid or completely solve these problems? We mentioned two mechanisms, respectively, "positive feedback and negative feedback." "We are not able to install the process of the interface to add an installation progress bar, the value and progress at the same time change, so will not deviate from the user control range, such as the installation progress bar, the Mailbox form account input correct, interface feedback to the user of the state of the tick, called positive feedback.

(Photoshop Installation Progress Note)

(Serial number input correct tick state)

Through the positive feedback mechanism, we can gradually help users to dispel these concerns, help them build confidence, and let them feel that everything is going on smoothly, preventing the user from doing the right thing, and then undoing the action for fear of being wrong. 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 own judgment because the system has not made sufficient positive feedback. We need to use these two mechanisms to eliminate the concerns of large and small users.

In the case of several negative feedback mechanisms, we are here to imagine a situation. The above case, the software installation completed, told you to fill out the serial number does not conform to the specification, and the previous number you have completed has not been saved, you need to re-enter. The user will have a larger gap at the moment, because do not work, in fact, we can completely user input sequence number in the process, real-time matching, if the serial number error, we have to pass the error prompts, the first time to tell users you fill out the serial number is incorrect, timely help users to correct errors.

Through the negative feedback mechanism, we can also accurately help users reduce the wrong operation, to ensure that the first time to inform the user's operation is incorrect, timely correction, has reached the user's input to meet the needs of the site itself. Let the user feel everything is going smoothly, this point, for the Internet expert users, the mainstream and rookie-level users are particularly important. Expert user characteristics get used to a website that usually does not look at the text you provide explaining the use of help and want to reach your goal as soon as possible through the website. For example, download information.

An excellent case of feedback interactive design

Positive feedback mechanism

When users interact with data content content, they need positive feedback, such as registration, login, validation, tweet forwarding, and so on. Special users in the use of the payment class product transactions, we have to ensure that the user input information is consistent with the standard, is correct, so we have to implement the correct user guidance.

(Google registration of the interface form of the message)

Link to move and move out: Website product characteristics are different, the length of the entire page will be displayed in a screen, without affecting the visual premise, we need to a module weakening or hardening. For example, the site footer, the user clicks relatively low, we will weaken the display, when the mouse moved into the product module, the module color will deepen. In this regard the Twitter product is a good example, the default footer gray font, will not be distracting, when the user mouse into the module, the system to determine the user may need to understand the site through the footer information, text area color value change, from gray to black. In the visual presentation of the way, positive feedback can let our users experience a higher level, the more powerful.

Button's prompt status: the difference between the state of the button that is not clickable when the content is empty and the button with content. button is grayed out content is not published

(Google Plus current status is not published content)

(When there is content, the button is lit and the content can be released normally.)

Loading process: The function of pulling the page automatically, will load more content, if there is no loading. And so on, tell the user what you see is loading, rong please wait a moment. Users will be confused before, but also easy to cause users mistakenly think that their operation is wrong, easy to undo the previous operation. In addition to text prompts, the Google plus approach adds dynamic effects to the loading sphere, informing the user that what you are waiting for is loading.

(The effect of the ball injection during the Google plus loading process)

(Link: User-clicked link State)

Negative feedback mechanism

On the road of life, everyone will inevitably make mistakes, the important thing is how we correct our mistakes. It is also important for users of web sites to help them correct errors in order to keep them from going wrong. In the above we give a serial number case to do as a negative feedback mechanism of the case, in order to let everyone understand more thoroughly, here in a few cases, deepen the impression.

Text beyond hint text: for example, when you publish content on Twitter, when the text is more than 140 words, Twitter in the first time with a red negative number on behalf of the word you have exceeded, the button is gray, not clickable, I hope you do cut in time.

(Twitter text goes out of the alert state)

(watercress: Do not conform to the Specification form field tips)

Several methods commonly used in feedback interaction design:

Using vision to provide feedback interactive design

We can change the visual rendering effect and visual element properties of the interface to change the form of feedback. For example, in the mouse move into the picture to increase the floating layer, change the style style, increase the effect of the picture circle, or the color and size of the page, and other ways to implement positive feedback. Mentioned above is the background color of a high contrast before the link is clicked and after being clicked. Google plus the process of injecting water during the loading process, or the status hint icon given when the user fills in the correct form when registering. For example, the footer module in Twitter, the mouse into the text by changing the color and other ways to highlight.

In a very typical example, the state of the mouse pointer changes. The operator (user) moves the mouse to the text area where the text can be entered, and the pointer changes to the ID of I, meaning that the word can be lost. Another example is the state of the mouse pointer changes, when the user points to an interactive interface elements, such as links or buttons, they will want the button into a hand, the link into a hand shape, and increase the underline, to feedback and tell the user link and text differences. If the system does not meet or meet the user's expected feedback, then the user is likely to be confused, even puzzled.

Provide feedback using animation effects

In fact, the animation itself belongs to the visual performance of a way, such as login WordPress admin backstage, username and password error, landing box form will show the effect of jitter. Prompts the user for a user name or password error. Depending on the visual performance of the animation, the animation effect can also be applied to the feedback

For example, the anchor link in the page jump, when the system defaults, the anchor jump does not have any animation over the effect, the page is only very abrupt move to the location specified by the anchor, and nowadays, we can in many excellent user experience of the site to see a link with smooth scrolling effect of the jump. Some sites highlight the location specified by the anchor point after the page has reached its destination. This subtle change makes the entire interaction more consistent with the user's direct approach. At the same time, it is clear that the results of interaction are presented to the user.

Full Text summary:

For example, "feedback and interaction" in the third paragraph of the article means that the user can always know what is happening through appropriate feedback and interaction with the program, not just a warning when something goes wrong. For the moment, we split the feedback into 2 types: one positive feedback and the other negative feedback. To the website user, the feedback belongs to the type of hint information, from the user registration account input error prompts, to exit the success of the hint, all belong to the category of feedback interactive design. "Through positive feedback and negative feedback, we can clearly let users know what's going on. Help users to dispel doubts, so that users to complete their goals as soon as possible, but also to make our website more user-friendly, more user-friendly.

Product Manager Portal: http://www.pmtoo.com/ucd/2012/0808/868.html