Multi-case discussion on website feedback Interaction Design

The outstanding design comes from life, so let's start from life. We design a product based on the user's life scenarios. We don't need to cultivate the user's usage habits, you can use your product for the first time to achieve your goals without the guidance of others. For example, when Apple was designing the first generation of iMac, Jonathan and his team went to Japan and asked people in a Japanese candy industry how to make the computer shell of candy color, maintain its consistent transparency.

　　

 

In the following sections, we will talk about the importance of feedback interaction design for website design. Before that, we need to understand the related concepts:

　　What is feedback?

Wikipedia: feedback, also known as feedback, is one of the basic concepts of modern science and technology. In general, the concept of feedback in the control theory refers to the process of returning the system output to the input end and changing the input in some way, thereby affecting the system functions, the process in which the output is returned to the input end through an appropriate detection device and compared with the input.

　　What is interaction design?

Interaction Design, also known as Interaction Design (IxD or IaD), is the Design field that defines and designs the behaviors of artificial systems. Artificial things, that is, artificial things, such as software, mobile devices, artificial environments, services, wearable devices, and the organizational structure of the system. Interactive design is to define the Interface related to the behavior (the "interaction", that is, the reaction mode of a human product in a specific scenario) of the man-made thing. Interaction designers first conduct user research in related fields, as well as potential users and designer creations, and evaluate the design quality in terms of usefulness, availability, and emotional factors (usefulness, usability and emotional.

In combination with the above concepts, feedback and interaction mean that users can always know what is happening through appropriate feedback and interactions with programs, instead of displaying a warning when something goes wrong. Feedback is divided into two types: positive feedback and negative feedback. For website users, feedback is a type of prompt information. From incorrect user registration account input prompt to successful exit prompt, it is within the scope of feedback interaction design. Www.pmtoo.com

　　Feedback interaction design is so important

Let's imagine several situations in our lives. If you need to change to another place on the subway, if there is no change indicator at the moment, it will be hard to get to the southeast and northwest, which is very easy to confuse, I don't know which channel is the correct transfer channel. The subway builders add eye-catching text on their respective channels, allowing you to know which channel is the correct transfer route.

　　

 

(London: Change the subway to a signboard)

Taking the transaction process in online shopping as an example, after the user submits the order, if the system processing time is long, resulting in slow loading of subsequent pages, and there is no feedback, the user may think that his or her order has not been submitted successfully. In this case, you can provide some positive feedback to the user during page loading, such as telling them that the system is processing the order. Please wait, this prevents users from clicking the back button because they do not know the truth.

　　

 

(Shopping cart for a website)

Taking software installation as an example, the software file is usually large, and the loading time of the installation file will be a little longer. There is no feedback on the software interface. Imagine what you are in, is it very easy to get upset because the software installation process is dominated by the user. The user installs the software to fulfill his own goals, and there is no prompt on the interface at this time, the user suddenly lost control of this, resulting in the failure to complete the target interruption. At this moment, the user closes the software and re-installs it. If the response has not been responded for a long time, the user will choose to leave.

How can we avoid or completely solve these problems? We mentioned two mechanisms above: "positive feedback and negative feedback ." Can we add an installation progress bar in the installation process interface, with both the value and progress changing, so that it will not deviate from the user's control scope. For example, when the installation progress bar and email form account are entered correctly, the status of the check prompt returned by the interface to the user is called positive feedback.

　　

 

(Photoshop installation progress prompt)

　　

 

(The status is displayed when the serial number is entered correctly)

Through the positive feedback mechanism, we can gradually help users dispel these concerns, help them build confidence, and make them feel that everything is going smoothly, prevent the user from revoking the previous behavior due to fear of incorrect operations after doing the right thing. This is especially important for users who lack confidence in their computing device operation capabilities. In fact, these users may not really lack operation skills, but in many cases, the system does not make enough positive feedback, causing them to have doubts about their own judgment. We need to use these two mechanisms to eliminate the concerns of large and small users.

Let's look at a few cases of negative feedback mechanisms. In the above case, the software installation is complete, and you are notified that the serial number you entered does not comply with the specifications. The serial number you entered is not saved and you need to enter it again. There will be a big gap in the user's mind at the moment, because it is useless, in fact, we can be users in the process of entering the serial number, real-time matching, if the serial number is wrong, we need to pass the error prompt, inform the user of the incorrect serial number and help the user correct the error in time ..

Through the negative feedback mechanism, we can also help users Reduce incorrect operations accurately, so as to ensure that users are notified of incorrect operations in the first time and correct them in time, your input meets your website's operational needs. It makes users feel that everything is going smoothly. This is especially important for Internet expert users, mainstream users and cainiao users. An expert user's characteristics are used to a website. Generally, they do not read your text instructions for help and want to achieve their goals as soon as possible through the website. For example, download a document.

　　Excellent cases of feedback Interaction Design

Positive feedback mechanism

When a user interacts with the data content, positive feedback is required, such as registration, login, verification, and Weibo posting and commenting. Special users must ensure that the information entered by users is correct when using Payment products. Therefore, we must implement correct guidance for users.

　　

 

(Prompt information in the form of the Google registration interface)

Link transfer and removal: Different website product features, the length of the entire page will be displayed on a screen, without affecting the visual, We need to weaken or strengthen a module. For example, if the proportion of user clicks on the website footer is relatively low, we will weaken the display. When the mouse is moved to the product module, the color of the module will deepen. In this regard, twitter is a good example. The gray font on the webpage is not overwhelming. When the user moves the mouse into this module, the system determines that the user may need to know the website information through the footer. The color of the text area changes from Gray to black. In terms of visual presentation, positive feedback can bring a better user experience.

　　

 

Button prompt status: the status of a button that cannot be clicked when the content is empty is different from that of a button with content. The button is gray and cannot be published.

　　

 

(Content cannot be published in the current status of google plus)

　　

 

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

Loading Process: The drop-down automatic page turning function will load a lot of content. If there is no such words as loading..., tell the user that the content you are reading is loading. Sorry, please wait for a moment. The user may feel confused before, it is easy to cause the user to mistakenly think that his operation is wrong, it is easy to cancel the previous operation. In addition to text prompts, Google plus's practice adds a dynamic effect to the Loading ball, informing users that the content you are waiting for is being loaded.

　　

 

(Effect of ball water injection during Google plus loading)

　　

 

(Link: the status of the link you have clicked)

　　Negative Feedback Mechanism

On the road of life, everyone will inevitably make mistakes. What matters is how we correct our mistakes. For website users, it is equally important to help them correct errors so that they do not continue to make mistakes. We have mentioned a serial number case above as a negative feedback mechanism. In order to give everyone a better understanding, I will give you a few cases here to deepen my impression.

The text exceeds the prompt text. For example, when the text in Twitter is more than 140 words, TWITTER uses a red negative number to represent the words you have exceeded, and the button is gray, you cannot click it. I hope you can delete it in time.

　　

 

(Twitter text exceeds the prompt status)

　　

 

(Douban: Prompt for non-conforming form fields)

　　Frequently Used feedback interaction design methods:

Feedback interaction design with vision

We can change the visual presentation and visual element attributes of the interface to change the phenotype form of feedback. For example, you can move the mouse over an image to add a floating layer, change the style, increase the effect of image labeling, or adjust the color and size of the page to implement positive feedback. As mentioned above, a high-contrast background color is displayed before or after a link is clicked. The water injection process during the Google plus loading process, or the status prompt icon provided when the user is correct during registration. For example, in the footer module of Twitter, place the cursor to highlight the text by changing the text color.

In a typical example, the status of the mouse pointer changes. The operator (User) moves the cursor to the text area where the text can be input. The pointer changes to the I icon, meaning that the word can be input. For example, if the status of the mouse pointer changes, when the user points the mouse to an interactive interface element, such as a link or button, they want the button to become a hand shape and the link to become a hand shape, add underscores (_) to indicate the differences between the link and text. If the system does not provide feedback that meets the user's expectations, the user may be confused or even puzzled.

　　Provide feedback using animation Effects

In fact, animation itself is a way of visual display. For example, when logging on to the WordPress management background, the user name and password are incorrect, and the login box form will show jitters. An error occurred while prompting the user to enter the user name or password. Based on the visual performance of the animation, you can also apply the animation effect to feedback.

For example, when the anchor link in the page jumps, by default, the anchor jump does not have any excessive animation effect. The page just suddenly moves to the position specified by the anchor, we can see smooth scrolling links in many excellent websites that focus on user experience. Some websites highlight the position specified by the anchor after the target is reached on the page. This subtle change makes the entire interaction method more consistent with the user's direct. At the same time, the interaction results can be clearly presented to users.

　　Summary:

For example, in the third section of the article, "feedback and interaction means that users can always know what is happening through appropriate feedback and interactions with programs, instead of displaying a warning when something goes wrong. Feedback is divided into two types: positive feedback and negative feedback. Feedback is a type of prompt information for website users. It is a type of feedback interaction design from the error prompt of user registration account input to the prompt of successful exit ." Through positive feedback and negative feedback, we can clearly let users know what is being sent? It helps users eliminate their doubts, so that users can fulfill their goals as soon as possible, and also make our websites easier to use and more humane.

Article Source: Product Manager portal http://www.pmtoo.com/ucd/2012/0808/868.html