The interaction flow is the core of the front-end application or product, it doesn’t change with the development of front-end technology, and it is the intersection of multiple teams working together within the company.
Maybe you don’t know what I mean by this, but let’s figure it out.
What is interaction
The process of presenting information to the user, then listening for events on some element, triggering those events by the user through some action, and then displaying more information on the page is called interaction.
Multiple interactions are connected in series to form an interaction flow, and the functions of front-end applications are accomplished through different interaction flows.
For example, baidu homepage will display the search box, click the search box, enter the content will appear some search prompts, after pressing Enter, the webpage will appear the search results. This is the interactive flow of the search function.
The front-end technology is changing, but the interaction flow of front-end applications is not.
Interaction is a constant in front-end development
Back in the jquery era, we would fetch data from the server via Ajax and render it into the DOM through the template engine to present the information to the user on the web page and bind events to some elements.
The user triggers these events by doing something, and the web page then modifies the DOM to display more information, perhaps asynchronously fetching data from the server and rendering it to the DOM.
In the MVVM era, data and DOM were separated, and we only needed to describe the binding relationship between DOM and data through a Template or JSX DSL, and then only care about the data.
Retrieving data from the server, the front-end framework automatically renders the corresponding DOM, presents the corresponding information to the user, and binds some events. The user then triggers these events through behavior, and the web page either changes the data to change the view, or gets the data from the server through some asynchronous process that automatically updates the view.
As you can see, all MVVM does is separate the data from the DOM, improving development efficiency and code maintainability, but the interaction flow of the front-end application remains the same.
As the front-end technology evolves, it is the development model that has changed, but the interaction process that has not.
Since interaction is at the heart of a front-end application, what is good interaction?
Good interactions are the result of multiple teams working together
One of the reasons I chose to do the front end is that the front end can do a lot of cool special effects, I believe many friends also think the same way. But after work, we find that this is not the case, we may make the page is very concise.
I spent some time in Baidu Search, when I was maintaining baidu PC home page and search page, there are very good designers, but the whole day and they are the number to 13 pixels, this text to 12 pixels, such details, not so high.
Why is that? Because the main purpose of product interaction design is to promote the realization of product core logic.
Like a news stream product, the core purpose is to keep users looking at more information and spending more time on it. The interaction should be made automatic scrolling infinite loading, and the font, layout and so on to make the user look more comfortable, recommended content if the user likes.
Just like e-commerce products, the core purpose is to let users place orders. It is necessary to display products comprehensively through pictures, texts, videos, live broadcasts and other forms, and make the purchase button big and eye-catching enough to guide users to place orders. And the following recommended products are also likely to be of interest to users.
As you can see, the entire interaction flow is designed to fit the core functionality of the product and is the result of multiple teams: The product team is responsible for the design of the overall layout and interaction flow, the UI team is responsible for the style, the algorithm team is responsible for the personalized recommendation of the content, the development team is responsible for implementing them, the operation team is responsible for the maintenance and update of the content, and the growth team is responsible for analyzing the traffic conversion rate of each link, so as to continuously optimize the interaction flow.
Teams throughout the company work around the core logic of the product, that is, the flow of interactions, not just the front end.
Interaction is conversation
When you talk to a salesman, you will ask him what is available, and he will tell you what is available, and you are interested in a product, and he will give you details, and you have the desire to buy, and you will order.
The main purpose of a sales customer conversation is to generate an order, just as the interaction design of an e-commerce site is to generate an order.
In fact, not only the website, writing articles is also an interactive design process, you express some content, readers will have some thoughts, and then you follow his thinking to express some content, slowly lead readers to understand the point of view you want to express. This is also an interactive flow.
Therefore, the interaction design of a product is like a dialogue with the user, which is to guide the user step by step to achieve the core purpose of the product. The front end is an important part of this interaction flow.
Our front-end pages are designed to serve the product, and the core is to implement this interaction flow. Only after the completion of the entire interaction flow can the product be available. On this basis, experience optimization can be carried out to improve the smoothness of the whole interaction flow and even make some interactive surprises. This is the heart of the front-end application and the heart of the product.
conclusion
The web page presents some information to the user, it listens for events, the user triggers those times by behavior, and then the web page presents more information, it’s an interaction.
The interaction flow composed of multiple interactions is the core logic of the product, and the front-end application is mainly to achieve this interaction flow. No matter in the era of jquery or MVVM, although the development mode is changing, the core of the front-end application has not changed.
The interaction flow is also the result of the cooperation of multiple teams. The product team, design team, algorithm team, development team, operation team, etc., are all around these interaction flows to achieve the purpose of the product and optimize the experience.
By understanding the interaction flow, we can better understand the functions of the front-end application, the product logic, the business logic of the company and the division of the team.