Take Sina Weibo as a case: initial experience of website Interaction Design

 

　　

 

In early September, I went to the Sina Weibo UDC department for an internship in interactive design. During nearly four months of study, I had a deep understanding of the Interactive Design Industry and realized some specific responsibilities of the Interaction Designer. In view of the fact that most of the previously accepted knowledge is from books or online articles, there are not many opportunities to participate in the project during the school period. Therefore, I have summarized this internship: on the one hand, I hope to spur myself, on the other hand, I hope to help students who have just entered the interactive design industry adapt to work more quickly and learn interactive design better.

I personally think that for designers who have just entered the interactive design industry, the effective methods in their work and learning process can be divided into the following four parts:

　Part 1: Understand your products

The details of a project, including how it starts, how it ends, what stages are in the middle, and what role should the interaction design work be in during the whole process, should begin with understanding the product. How can we understand our products? You can do this in the following ways:

　　

 

1. Multi-identity, multi-role Product

For example, if you try to use WeChat as a newbie, the guiding tips are the most basic and comprehensive. You can use the product as a user with an account registered for 3-6 months, the guidance and text prompts are different from those of new users. The prompt layer involving operation permissions is more obvious, the operation tips of the bar master and the expert identity are different from those of normal users in terms of content and form. Using multiple roles to use the same product helps us quickly understand the product.

　　

 

2. Sort out the product logic, understand the product architecture, and have a macro understanding of the internal logic of the product and the relationship between the product and the product.

Mature products have a lot of content and rich layers. New users can easily understand the structure and component details of a single page in an isolated manner when using the product. They lack comprehensive and in-depth thinking about the product. A complete review of the product structure helps us understand and master the product as a whole and prepare for the optimization solution.

　　

 

Weibo help center Product Structure

When I got in touch with Weibo help products, I sorted out the site structure and product logic of the Help Center products, I raised a question about the importance of the page level of the service wizard-"The structure of the Service wizard product is relatively simple, there is little content, you can consider reducing the level of this product", maybe not necessarily accurate, this example only shows that by combing the product structure, new users can quickly grasp the product logic and understand seemingly complex products at a macro level.

3. Summarize the shortcomings of experience

One of the features of Internet products is rapid iteration. product launches in each phase are more or less lacking in experience due to decision-making and time. After the previous two steps, we have gained a better understanding of the product itself. When we participate in the Problem Analysis on the page, we can also avoid some questions arising from the lack of understanding and accurately find out the product experience deficiencies. In addition, problems with online products should also follow the corresponding Interactive Design Principles: consistency, simplicity, smoothness, and timely feedback. Taking the "experience consistency" Interaction principle as an example: good product consistency can reduce user learning costs and cultivate good user habits. On the one hand, the product experience is consistent, the component form in the system is consistent with that of other components, and the trust between the product and the user is established; on the other hand, it is manifested in the same experience between products, extending the same experience to multiple independent systems and following the common design standards to avoid discomfort or strangeness to users.

Through the above three points, we can smoothly understand the product positioning and framework logic, find the points that can be optimized, and then complete the product experience. After proper induction and summarization, we can also prepare a complete experience report to prepare for the second iteration of the product.

　Part 2: Communication with multiple participants

Unlike the product manager, the interaction designer focuses on the ease of use, smoothness, and operating experience of the product. From the perspective of Requirement documents, the product team is more like proposing the concept of product design from a macro perspective, while the interaction designer starts from more details, to improve the user experience of the product. The two different starting points determine that only product managers and Interaction designers can cooperate well and communicate with each other in order to accurately convert product policies into product prototypes, this provides an accurate reference for subsequent work. Therefore, demand communication is an essential skill for Interaction designers. As a newcomer, you should pay attention to the following points during communication:

1. Actively participate in communication and discussion of project requirements (related to yourself. For interns, communication at work should begin with understanding the requirements and ensure that they are consistent with the product manager's understanding of the requirements, so as to avoid repeated modifications to the prototype diagram and visual solution and increase the workload.

2. You must have your own judgment on the requirements. In addition to having a professional understanding of the requirements, it can also help product managers to clarify their ideas, determine different roles and scenarios, and accurately sort out the information architecture and task process. For example, when the requirements of product strategies or marketing solutions conflict with the user experience, the designer has the responsibility to propose better design solutions.

3. Each communication must be effective and feasible. Differences of opinion must be resolved in a timely manner during requirement communication and solution communication. This requires both parties to understand the real purpose of the requirement and grasp the essence of the problem-requirement and user experience, finally, a corresponding solution is provided.

　　Part 3: provide a complete design plan

The reason why we proposed "integrity" and did not put forward "excellent" is that the output of the excellent interactive design scheme is a long process, and we need to constantly accumulate design theories, continuous access to excellent design cases, continuous participation in actual projects and completion of basic needs. As an intern, providing a complete design scheme is the basis for proposing an excellent design scheme, cultivating good habits and achieving twice the result with half the effort.

　　

 

1. design to solve the needs as the starting point

As a newbie in interaction design, after receiving the demand and creating a solution, I added several features to my own solution, especially when my competitors were not doing this, but ignored the nature of the demand, the designed solution not only fails to solve the demand, but also brings unnecessary and cumbersome operations to the demand itself. It is like when you sell a microwave oven to others, what others want to buy is actually just a hot steamed bread. In addition, there is often a phenomenon-the good features you think are put in the product, which may bring a bad user experience.

2. develop a good habit of correctly writing interaction documents to describe specifications

A complete interactive document shall include the naming, content, explanation and delivery of the document. The content of the document mainly includes updates, website maps, key task processes, line charts, instructions, and interaction specifications. The accurate Writing of interactive documents enhances our ability to think about the design. It not only facilitates the demand side to quickly understand the prototype and participate in the discussion, but also facilitates others to view the project progress and final output results.

　　

 

Interaction document Specification

3. Focus on details, mainly the details of the Interaction layer and the details of the line Diagram Drawing Layer

For example, at the interaction layer, when the mouse is placed on a variety of hover states in the text, whether the various States match the expected scenario; a prompt in a certain place is a background mask-style bullet layer, it is also a bubble reminder layer; whether the button text should be canceled or ended; feedback on the effects of hovering the mouse, whether it should appear after clicking, and so on. These are interaction details that need to be considered. On the line diagram layer, the line spacing is large, whether the font size is uniform, whether the first and second link colors are clearly segmented, and whether the spacing between modules is reasonable, border color depth, Border Width consistency, and so on, all reflect the designer's rigorous logic thinking. It is not hard to see that developing a good habit of focusing on details is the basis for improving interaction skills!

　　

 

Button hover status

4. Maintain a unified User Experience

We need to pay attention to the consistency of online product experience when designing solutions for our needs. For example, if we first knew about our products, the same product brand must be effectively controlled in terms of experience differentiation, avoid exceptions. Of course, the demand is not only to optimize existing products, such as new features, adjust product design strategies, and at the same time, innovate according to requirements, we also need to pay attention to the consistency between the component style in the design process and the existing product experience, such as the prompt layer, button form, and module style on the right.

Of course, with the improvement of the design scheme capability, we can make reasonable, complete, or even excellent design schemes in the most appropriate and efficient way through our own thinking.

　Part 4: Follow up on product requirements

A qualified interaction designer needs to work with the product manager to follow up product requirements. In the requirement input stage, the designer can work with user researchers to understand user characteristics and usage behaviors; in the confirmation stage of the demand, the designer can take the initiative to raise questions and reshape the demand. In the design stage of the demand, the design scheme will be modified or improved by different functional designers, interaction designers need to follow up on the communication and design of the scheme, maintain technical communication with visual, front-end, and structural engineers, ensure that the scheme is feasible, and ensure that the scheme is optimal in terms of user experience, make the solution truly restored. In addition, after the product is launched, the designer needs to participate in online product testing and prepare the next iteration ......

Conclusion

The internship was not long enough. I thought about some detours I had taken during the internship and summarized these contents. I hope I can better constrain and guide myself in design, we also look forward to providing complete and excellent solutions to solve more practical problems in the future.

(For Original Weibo UDC blog posts, please indicate the source and welcome to subscribe)