Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what needs to be paid attention to in summarizing the interactive design on the web side of the website". In the daily operation, I believe that many people have doubts in summing up the problems that need to be paid attention to in the interactive design on the web side of the website. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "summing up the interactive design on the web side of the website." Next, please follow the editor to study!

1. Overwhelming innovation

Web designers are very creative. We hope to express ourselves through our works. We are always looking for innovative design methods to stand out. But when it comes to interaction design, innovation is not always a good thing. It may even have a bad impact on your website. Users yearn for something they are familiar with, and they always follow certain modes of operation.

Randy J. Hunt,Etsy 's creative director and Product Design for the Web author clearly stated: "Hey, designer: stop TM being smart." In the article, he explained in detail why he should not be too creative in web design.

Take the Iotorama website as an example. It is beautiful and the music is affectionate, but looking at the ball moving all over the screen, users don't know what to do. Don't get me wrong, this project is excellent and super creative! I like this bold idea, but it's not intuitive at all.

There is another example. The creators behind the Safety on the Slopes project came up with an ingenious interactive graphic to warn users of the dangers of winter sports. Very innovative, but also intuitive, interesting and impressive.

2. Confusing navigation

The "Don't be smart" rule can also be applied to navigation. Some designers try to use eclectic names to seek novelty. Chijoff sites, for example, let users not know exactly what they offer and how to hire them. It will take a while to understand that "co-creation" pages are actually synonymous with "services". Even after reading the whole page, the user still doesn't know what to do. There is only a small registration form at the end of the page to get the latest industry news and tips! There is no form on the contact page, only a zip code and email address. It is very difficult for people to contact or hire them.

Can you guess what "Universe" means on the Maison Margiela website? It actually links to their Facebook home page. Who would have thought?

Instead, look at legworkstudio's website. Its creativity and excellence are shocking. The navigation is clear and unambiguous. Users will never get lost.

3. be

For a time, websites tried to put everything possible on the table. Those days are gone, but many websites still make this mistake. Take a look at this online mall:

Designers try to stick to a single color scheme, but a large number of color blocks, logo and fonts with different colors are enough to make users stumble on this page. The search box has an eye-catching copywriter: "so, what do you want today?" But the look and feel of the entire layout is very outdated

EBay is one of the major online retailers and has done a good job in this regard. Instead of filling the page with product pictures, promotions and calls to action, keep it clean and concise, highlighting what they do want users to focus on first, with clear tips on what to do next.

4. Pay attention to the contrast, big brother!

Contrast is one of the most important ways to create visual levels and draw users' attention to specific elements. In web design, contrast means not only the use of colors, but also size, shape and location.

This website is the most simple and vivid example. They are consistent, but the overall background and buttons are not attractive enough, especially on the order button.

Compared to this. The choice of color is very close, but the result is completely different. Moreover, the innovative rolling effect smoothly introduces the new function of the product-reflective material. It's cool, right?

5. Ignore form style

Form design is the most basic part of the user experience. Every website has a goal-whether it's setting an example, selling products directly, or providing information. Unfortunately, many websites have glossy home pages, but prefer to bore users to death with long forms and complex CAPTCHAs. Unless users have a strong pilot motivation, they will leave.

With an effective cross-browser solution like JCF, it's time to forget the ugly default form elements and move to a more immersive user experience.

Another irritating thing is that the form requires too much information or fails the perfect test. For example, sketchybusiness.io 's form highlights all blank boxes, even non-required items.

If you look at sketchybusiness.io 's form, you will definitely love its mouse-over and button-down state. Moreover, the "Don't be shy" hint of copywriting adds a touch of cordial humor.

Finally.

Don't be too lazy to test! What is important to you may not be important to the customer. Where do they have problems and get stuck? Is it navigation, strange visual difference scrolling, or video loaded for a long time? One of the biggest benefits of user testing is that you can observe from the user's point of view, pay attention to their needs, and make improvements. Don't restrain your creativity. Keep in mind that website visitors may feel confused and frustrated.

What's the worst interaction design mistake you've ever seen? You can share your thoughts and stories in the comments.

What should be paid attention to in interaction design

1. You can understand it at a glance.

This is easy to understand, which is to let users understand the function of the product intuitively, but in fact, this concept contains too many things. Here are two common points.

Graphics: compared with the text, the information carried by the picture is more intuitive, but also more able to render the atmosphere, leaving a deeper impression on the user. It is common in a variety of small icons, such as download buttons, which are usually represented by a downward arrow. For important buttons, they will generally be graphical, even if they do not use small icons to assist expression, they will use "color blocks" to say "text" graphics.

Text: just said that graphics, in fact, does not mean that the text can be replaced by graphics, the existence of text is still very necessary, especially some "unique" function buttons, users have little contact, there is no relevant understanding experience, it is difficult to be graphical. In most cases, the text will not be deleted, but will be retained to supplement the description of the graphic content. Another common problem with text is that there are so many words that users do not have the patience to read them, or do not understand the core of the expression after reading them. In the design, the text should be deleted and then deleted, and the "introduction paragraph" should be changed into "product slogan", which will help users to better understand the product. The use of words is also very important, if the product positioning is used by professionals, then you can use some technical terms, if not, please "popularize" various professional terms.

This point, more inclined to the surface form of the product, which requires interaction designers and visual designers to cooperate, put the product page, need to highlight the focus, more visual designers to communicate well. This step is also the result of feedback from visual effects that users feel that the product is easy to use or not.

2. It's right to use it.

This can be said to be a "at a glance" skeleton, more related to the framework of the product, so that the product in the eyes of the user is the same as the product designed.

Induction: similar functions are grouped together, which is like the navigation of e-commerce websites, classifying all kinds of goods. Here, the interaction designer needs to organize the framework of the product according to the requirements file, and then group the same type of functions together. It's easy to sum up, but there are many factors involved. Often see some products, the same function, repeated on the same page, this practice is not necessarily unreasonable. For example: login function, a page often has multiple entries, is generally reasonable. At work, the most common encounter is that the product manager wants to highlight a new product. It is clear that the product function should be placed on page A, but the product manager asks to go to page B to promote it. At this time, we should pay attention to whether this position is reasonable. (if you want to start the discussion here, you can write a separate article. Here is a simple example: in e-commerce, if you put the "mobile phone case" on the "mobile phone page" to promote it, it is not necessarily the wrong frame here. If you put the "mobile phone case" on the "computer page" to promote it, there will be something wrong with the frame here. )

Consistency: this is one of the most basic knowledge of interaction design, to ensure the consistency of various elements of the product, do not let users confused. For example, the consistency of the title, the same function, here use A to express, to another page, also use A to express. Here to ensure that users will not be confused in the process of use of the foundation. In addition to the consistency of the product itself, there are some interesting aspects that can be discussed in the industry to which the product belongs. For the peers of the product, especially the leaders in the industry, what their design is like, it needs to be understood by the interaction designer. Because users have been using these products for a long time, they will develop some operating habits, such as many information APP, and the drop-down represents a refresh page. If you design information software without this feature, it will have an impact on the user experience.

To put it bluntly, it is to build a reasonable structural framework, which is also one of the core of the work of interaction designers. To ensure the smooth operation of users, it depends on it. However, the title here is "right for use", in fact, it is not too strict, because the product generally allows users to "try and make mistakes", and users can learn to use the product through wrong operation. This leads to the next bit of feedback, of course, this mistake can not be a "fatal mistake".

Don't be in a daze

This point is mainly about "feedback", feedback is also a basic knowledge of interaction design, involving a wide range, but the core is to let users not be in a daze, understand the current operation, know how to operate.

Feedback reminders of various wrong operations, which requires interaction designers to discover that a product can exist in a variety of situations, to put it simply, is to find fault, not too little. For example: what if I leave a message with more than 100 characters? At the extreme, there is not enough server space to save the message. If users continue to leave messages in a short period of time, what if the server is overloaded? These situations need to be considered by the interaction designer, and of course some involve the content of development and programming, which needs to be communicated with the relevant technicians. After consideration, you also need to give appropriate visual reminders, such as "you have just left a message, we will reply as soon as possible, if you need additional content, please try again in 30 seconds."

Waiting for a long time is unbearable for most users, and users will not continue to wait without a proper reminder. For a long wait, it is best to have a specific countdown rather than a simple progress bar. For short waits such as 1-5 seconds, sometimes using a pure progress bar will bring unexpected gains. For example, in the jump process of the game, because you need to wait to read the data, and this process takes about 2-3 seconds, at this time, if you use the method of reading seconds, users are easy to be irritated, especially when repeated operations are needed, it is easy to make users feel that the game is not optimized well. Why do you have to wait for 2-3 seconds? If you use the progress bar, users will blame their low device configuration for the slow loading of the game.

Compared with the product guide, navigation not only tells the user what is there, but also undertakes the user's guide function to tell the user where the current location is and don't let the user get lost. This is also one of the foundations of interaction design, appropriate guidance, do not let users in a daze.

Although feedback also belongs to the surface layer, this part of the work is one of the key points of interaction.

At this point, the study on "summarizing what needs to be paid attention to in web-side interactive design" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.