The series "Talking about Product Revision Methodology with Examples" is a major site-wide revision project with a time span of nearly half a year. The little experience left is divided into two parts. This article is the second part, which mainly talks about the requirements planning and interaction design methods and skills in the context of the revision. The first part is the experience of project establishment and promotion of the revision .
1. Requirement planning for revision: to fight the battle to capture the king, the battle of fortification, and the battle of annihilation
We must first clarify a concept: the major revision is to set a good target, grasp the core points and then re-click. Because after the revision and project approval, development resources are usually sufficient, and inter-departmental coordinators are well-known. If you can't fight the king's battle, fight tough battles, can't solve key problems, and can't concentrate resources to overcome difficult problems, it is a waste of resources, and it will not hurt.
So how do you identify a good target?
- Issues that are clearly visible on the home page.
- Issues related to the core value of the product (eg UGC lacks an effective producer guidance mechanism).
- Problems with core experience processes (eg, content navigation for news media, inefficient search functions).
- Issues that affect business conversion (such as poor business form experience).
- Technically difficult problems and problems that affect the whole body.
After the classification and statistics of the demand pool, we have defined the four major issues with the highest priority on the original web side. You can refer to the above principles to see an example:
- The sub-columns on the home page are chaotic and lack exposure.
- The homepage and information details page stay for a short time and have a high bounce rate .
- Navigation is chaotic and overloaded . During the rapid iteration period, many important columns and business portals have been added one after another, and the navigation bar for small screen users is no longer enough.
- The organizational structure of the business form is chaotic . Some users report that the entry cannot be found, and some users encounter obstacles when filling in. There is no consistent rule on whether to require login, the page logic is wrong, and the jump will make people confused.
So why is it said that the revision is a war of annihilation?
This is because I find that, usually in development, there are some edge-case issues that are left in pending state. According to the current iteration and change speed of Internet companies, delaying the solution is almost equal to not solving it, so the revision is an excellent opportunity to sweep away these flies. Every omission, special state, pixel-level error, and even copywriting punctuation can be eliminated in the revision without leaving a single one.
The above are the principles I use when planning the revision requirements. Combined with the workload, the scope and proportion of revision requirements can be determined.
2. Repair information architecture: bone setting and swelling
In response to questions 1, 3, and 4, we have reorganized the information architecture of the entire site.
2.1 Classification and organization of sections/information
The core of information architecture is taxonomy. The following are the classification dimensions I summarize.
- Association : closely related in business. For example, the "Investors" and "Investment and Financing Projects" sections belong to two processes with different directions from the same business line, and provide services to different user groups respectively.
- Affiliation : The logical attribution of information. Such as two-level classification of articles.
- Similar : Different manifestations of information belonging to the same type. Differences in presentation due to factors such as information abundance, source, timeliness, external attributes, etc., such as "information", "fast news" and "hot text", are all news information, and the same event may appear in these three appears in any of the above, but the fields displayed are completely different from the layout. It should be noted that it is different from subordination, but is sometimes compatible with the concept of subordination, depending on the purpose of the product.
- Homogeneous : The abstract concept of the information is the same, and the user's operating mode and expectations are usually the same at this time. Macroscopically, according to this classification, information can be placed in corresponding layout areas such as focus area, hot-selling position, panel window position, entry button menu, user menu, etc.
- Equal weight : Information is of similar importance within a product stage. This classification result will change with the development of the product. For example, a new feature has just been launched. You need to go beyond the importance to give it a stronger drainage entry.
After sorting it out, there are clear basis and constraints, ranging from functional sections to small information layout.
Subsequent refinement work:
how to organize information (by tags, by category, by source, etc.),
rules for presenting information (display conditions, sorting, paging, hiding and transferring, loading methods, special layout bits, default/default settings) Wait)
2.2 Storage Box: A Good Way to Deal with Navigation Overload
The main navigation of the home page of the old version of the product has as many as 13 navigation marks, and the display under 11 inches can no longer be adjusted. According to the classification of weight information, I hide all the unimportant functions of the whole product into [Discovery]. At this time, it was found that the form entries of the company's two main offline business processes would also be thrown in along with the unimportant online information sections, and the level would be very deep. So they were brought up again, using the "similar" classification method, and put them in [Services]. In the future, if there are more non-mainline sections/columns, after a period of time, whether to put them in [Discovery] will also be considered.
2.3 Establish a unified operational cognition
The form of the original product is divided into three different states of menu navigation: login required, no login required, and logged in. The problem is that some of our businesses cannot be exposed in the menu of unlogged users, and sometimes we see the entry on the same page when using it, which is easy to be confused and can't find where the previously submitted information is. Change.
In response to this problem, I solved it by establishing consistency in all aspects of the product, including entry style and location, operation path, operation feedback, text prompts, etc., to ensure that users’ homogeneous information or operation conforms to their mental model, or can establish Correct understanding of the model.
2.4 Consider the impact of revision on SEO
As an information web product, the impact of each revision or page adjustment on SEO must be considered. Use ajax with caution for main content. Even if you decide to use it because of experience optimization solutions or anti-crawlers, you should also add complete pages that can be crawled by search engines in other places, but this entry may not necessarily be discovered by users. and frequently used. For example, you can click the effect of the following red boxes and observe the page address changes.
2.5 Delaying complex input operations
The simplest layer is to delay login, etc., to delay the registration and login operations until the user behavior or data is bound to the ID.
There are also some operations that are not suitable for online or mobile terminals, transfer to offline manual processing or use file transfer processing, and only retain the information that can ensure that the main line process is not interrupted. Low bounce rate.
3. Polish the interaction details
3.1 Using motion to express paths, continuity, and dependencies
To make complex designs, new designs easier to understand, we often use motion to express how functions work.
The path is easy to understand. For example, after adding a product to the shopping cart, there will be an image element moving from the button to the shopping cart button in a parabolic trajectory. The rest also have revised operation guidance, etc., which can indicate the path or direction through the trajectory and order .
Continuity means that when an element is hidden in the horizontal and vertical space, then the movement of the corresponding axial direction can be used to express the continuity of the element . For example, the navigation in the figure below, I boldly borrowed the design method of the mobile terminal on the web side.
When completing this animation design, pay attention to 3 points:
- Focus on the initial state : Use the concept of "closure" in Gestalt principles to prompt the user with the incomplete initial state.
- The movement method conforms to the basic concept : the navigation here is a line with a head and a tail. It must not be made into a loop, which will bring confusion to the user's cognition and operation.
- Reduce interference to ordinary users : After the navigation point reaches the fifth, there will be dynamic effects. When the user clicks on the first few high-frequency categories, if they also move laterally, it will interfere with normal browsing, so try to exercise restraint. Does not interfere with normal use.
Finally, let's talk about the example of animation expressing affiliation. Or the navigation as shown in the figure, only one first-level category has sub-categories, then the sub-category menu is hidden until the parent category is selected.
3.2 Determine the position of elements based on the user's focus
The revision design encountered a debate on the details. Where should the two important labels of "first release" and "exclusive" be placed? In the information list, should they be placed on the information header or before the information title? The product goal at this point is to have them appear where they matter most. Then I need to observe or simulate the flow of the user's attention focus within the product to determine element placement. The final solution through simple research is shown in the figure below.
After thinking about it, if I want to tell the truth, it should be due to vertical information reading, users' behavior is more rational, and the purpose of the pictures is usually only to dilute the text density, reduce the reading pressure, the user's attention focus, and choose to enter The basis of which information is not in the picture, but in the title. If there is an eye movement, then my safe guess is that the user focus is mostly moving from title to title.
3.3 Integrate data analysis into the design process
Data analysis will involve before, during and after revision, pre-determined problems, middle-aid design, and feedback verification afterward.
Here only talk about the help of the design. For example, when designing a content section, you can first use SQL to get the key fields of your own database, and then use crawler tools such as webscraper to crawl similar competing products, and statistically analyze the following attributes of the content:
- Extreme values: maximum, minimum, null values, and their causes and instances.
- mean, median
- Distribution range, dispersion
If you can answer these data in one bite, then your design will avoid most of the problems when it is implemented. Moreover, in addition to secondary processing, these data sometimes need to be analyzed in combination with scene goals, such as the information reading time estimation prompt function, there are the following two problems:
- Statistics of tens of thousands of words and prompts that exceed a certain number of minutes (such as 15 minutes) are meaningless and will scare users away.
- The distribution range is very concentrated in a few intervals, and the linear mapping function will lose the degree of separation.
Then, for the processing of piecewise functions, intuitive data cannot be used, and a "more attractive" data combination needs to be mapped and displayed in combination with the data distribution range and dispersion.
3.4 Default rules, handling of missing data sources
The revision may move some basic functions. If there is no data source, it is necessary to add branch functions to allow old users to transition to the new version. For example, the mobile phone number was not strictly bound before, and now the mobile phone number is required, but there are WeChat direct registration and email. The extreme scenario of registering and losing your mailbox. We have encountered a scenario where a user leaves after registering with an enterprise email, and cannot use the email again to verify and bind his mobile phone number.
4. Build a universal cornerstone of your product
4.1 Fill in the blanks and use dynamic and static changes to occupy the attention
A new filling area has been designed on the home page for the exposure of key businesses. Scroll up to about the third screen on the home page (at this time, the right sidebar has completed the traversal of the main functional sections of the website), and the block-level elements of the right sidebar will remain on the page until the viewport window scrolls to the bottom or starting point. above the height.
The concept of this area is that when users turn to the third screen, they think that they have a certain depth in their content needs. At this time, the changes in movement and stillness are used to attract attention, and some content sections are recommended on purpose without causing disgust.
The positioning of this area is obvious. What is important at the current stage, or what problem you want to solve, and what data to improve, it will be effective if you put it directly.
Currently in this area, there are 3 contents:
- Main business transformation entrance
- News & Hot Articles (Content Reading Extension)
- Advertising space (when there are no ads, increase the number of alerts & hot texts to just fill the screen)
The three contents are all the right medicines, and all have achieved a big improvement in the data on the homepage and corresponding sections, such as the number of submissions, residence time, PV, etc., among which the daily average PV of the newsletter section has increased by 78% year-on-year.
And it should be noted that this area can also be extended horizontally and axially, such as using components such as carousels, tabs, and marquee lights, but at the same time, it should be noted that the expansion will also divert. With this filling component, if we will enrich functions or improve exposure in the future, we will undoubtedly have set up the framework in advance.
4.2 Leveraging abstract models to make products extensible
We can also analyze some new requirements of high frequency and homogeneity, and design some modules with strong versatility, extract the paradigm of core content, provide standardized and componentized demand expansion and iterative methods, and create conditions for the rapid launch of new columns in the future. And reduce some development costs and solve problems in the long run.
For example, the figure below is a standard container for the extension of the homepage information column.
