Dog Egg read my article and reconstructed the project at hand, but the performance of the front-end reconstruction only stays at the code level, and the superior can’t feel the difference before and after the reconstruction.

This article briefly describes how to optimize user experience in the front end of Micro medical

The status quo

Back to 3 years ago, the dog egg just stepped into the front door, he is just a ignorant cut figure son, but with the rise of node and various terminals, the front end has a place in various fields. Everyone is thinking about automation, engineering, micro services, middle tier, after all kpi. Those lofty things but let the dog egg more and more fuzzy, when the choice of the front of the initial heart is not because of the user recently!

associated

Why is there an Ant Financial Experience Department?

It only takes a second for a user to abandon a product, and every second the load time increases means money and users are lost.

Now there are too many competing products, and users’ tastes are also tricky. If we can help users, optimize the process and have good application experience, the value will rise from technology to product level

If you can quantify the data before and after refactoring code, for example:

Optimize 30% of a user’s registration time by optimizing a block of code

Specific to the business, is to save users 30% of the registration time

It sounds like a crazy drag cool diao bully days, dog eggs directly on the road to promotion and pay rise.

architecture

Business unit: different from the general buried point, controlled by programmers themselves, such as the registration module, from the entrance to enter the registration to click the submit button, a business unit is completed

The front-end team of the Wedoctor Architecture Department classifies business units according to the time spent in business, giving the front-end team the ability to optimize business.

So how do you do that?

Answer: Reporting business units through AOP (aspect oriented programming).

First of all, the front end should understand its own products (this is also the deficiency of many front ends, not enough to go into the product), pay attention to the entrance and exit of each business module, summarize the business process, buried in the business, calculate the overall time of the business and analyze the operation time and habits of most users through big data.

deconstruction

Look for the network map, if there is a coincidence, the following optimization is pure front-end completion

Case a

Operation too complex

Based on the analysis of the user's residence time, it is found that this business unit is too complex and users are always fumbling how to use it.Copy the code

Optimization: Operation guide prompt

Results: The overall use time moved forward

Case 2

Too many repetitive operations

Repeated content is too much, easy to dissuade users, search function screening conditions complexCopy the code

Optimization: fast operation, default manipulation

Flexible use of localStorage, save recent operation data automatic filling

1. Record repetitive forms

The result: The process time went down

Before optimization

Case 3

The interface query time exceeds 1s

The optimized interface response time is about 1 second, but when users enter the page and see the loading animation takes more than 1s, they can actually perceive the wait time, especially when the page module is small

Using localStorage, to achieve the perception of second on

In this case, seconds are the time for the user to wait for the interface to render the interface

This operation, which I call illusory data, preserves relatively unchanged old data that first fills the page to give the user the illusion of opening in seconds, and then changes

This scheme is generally used when the data has little impact on users and changes are less, such as the management of tables in the background

Result: More visits

In fact, there are many optimization schemes and wheels to be built for us to explore

harvest

Everyone is most concerned about the year-end assessment, the dog egg this time to use the platform in the year-end report full of confidence. He sinks into the business and makes in-depth analysis of the business modules.

“I optimized the invoice issuing process of users, analyzed the user’s operation habits, optimized the invoice issuing process time by 30%, and opened the filling process of the quick invoice issuing entrance directly reducing one minute for each person.”

With a trend chart, to hand over the leadership’s satisfaction

In the future

The pioneers of micro medicine have their own irreplaceability, and also have their own experience direction that needs to be deeply dug

  • A UI framework that fits your company’s user experience
  • A front-end business architect who optimizes his business
  • Big data that can be analyzed with products and UIs
  • Provide a compelling path to front-end promotion

If you feel good, please diathysilian, like, pay attention to, forward, comment, after all, to just fan

Learn more, pay attention to technology public number: IHAP technology black hole!!