Sue shared two articles previously, which introduced the content production and content filtering of the content management system (CMS). How can the content produced and filtered be presented to our content consumers?
As we all know, once the version of the development implementation on the client is released, if there is something to be adjusted, the code will need to be modified again. Even small changes need to be updated after testing, and each update itself has the risk of various problems.
If we can provide dynamic and configurable capabilities to achieve content presentation through templating, we can reduce development costs, and at the same time, we can more efficiently conduct comparative tests of different products/operation schemes.
It can be seen from this that page dynamic configuration is the solution of content management system (CMS) on how to present content more flexibly.
1. Page Disassembly&Components
On this page of "Fashion Glasses", Sue has cut three pictures. Let's disassemble them one by one to see what is on this page:
A Wang Junkai with a black super (picture), a stack of coupons (coupon collection/restricted store coupon use entrance module), "super brand" (store entrance module of well-known brands), "must buy list" (hot sale/recommended goods purchase entrance module)
For such a dynamic page, we can split it according to the following three levels: Page - Card - Component 。
Page refers to the overall sliding page entity card, refers to an independent block (also called "floor") component that can be divided by line in the page, and refers to an independent business level unit inside the card
The hierarchical relationship between the three is shown in the figure below:
2. Implementation principle
Having made clear the components of the dynamic page, how did the three of them work together to finally present the page content we saw?
When a user visits a page and finally presents the complete page content, it is mainly completed through the following three steps:
A series of initializations (including initializing the card library and component library, data parser, and layout framework), data parsing (including parsing the types of cards and components, and parsing the basic styles of cards and components), rendering the page (layout according to the layout information provided by the card, and obtain the component content according to the component information provided by the component)
To sum up, it is to first analyze the location of each component according to the layout, then analyze the content of the component (style, image, background, link, etc.), and finally analyze the corresponding customized page content.
3. Key points
Before talking about the specific configuration process of dynamic pages, I would like to talk more with you. During her study and work, Sue summarized and sorted out some key points, and then used them to deepen her understanding of the whole.
3.1 Components
It does not mean a line of small characters, a conspicuous button, or a star picture of a handsome man or a beautiful woman. It needs to be defined in advance and written into the framework (code). The standard of component definition is business, which requires the smallest composite unit capable of undertaking certain business capabilities.
This is basically a general principle for PM to define requirements.
Each component needs to be designed separately to define its rules and styles.
Basic styles of components: component background, component outer margin/inner margin, and component aspect ratio. In addition, there may be additional custom styles, such as font color, font size, gaps between components, and corresponding jump links.
Different components have different functions and represent different types of content.
Common types of components: search bar, announcement, list navigation, rich text, title bar, button group image and text, button group text, single picture, picture carousel, coupon, etc.
3.2 Card
The card is responsible for the layout of components. The card does not need a layout template, but only needs to describe the card type, which is also registered in the frame.
The card description can be divided into: title, layout, style, etc. The most important part is layout, because it contains embedded component models, and card layout is to layout the included components. Common layout modes: flow layout, waterfall layout, ceiling layout, suspended layout, carousel layout, etc. The layout description of the card is also declarative, but only the layout method is declared, not the layout details. Basic card styles: card background, card outer margin/inner margin, component spacing within the card, and number of columns.
3.3 Page
Dynamic page refers to dynamic layout, which is to build the whole page in the form of nested components. Multiple cards are nested in one page, and multiple components are nested in one card 。
4. Step Summary
The realization principle of dynamic page is clarified. If we need to configure such a page, what should we prepare and do in advance?
Here are the first, middle and last three links to talk about the process involved in configuration.
4.1 Before starting configuration
1) Clarify the purpose and focus
What is the operation purpose of the page to be configured? What do you want to present through the page? With different contents, what information should be highlighted?
2) Confirm the existing design and whether it needs to be supplemented
Can the existing layout styles and components meet the configuration requirements to achieve operational purposes? Is there any need to add new card library (layout style) and component library?
4.2 When configuring
1) Select/Create Page
In general, there are two situations when a page needs to support dynamic configuration:
One is to selectively configure the inherent pages (the selection criteria will be discussed with you at the end of the article). The second is to create a new page and customize the page according to the specific operation purpose, usually the operation requirements of activities or topics (it is not necessary to develop for this new page alone).
2) Select cards and then select components for layout
Select the appropriate layout style and components in the existing card library (layout style) and component library according to the content that the page wants to present and the information that the content wants to highlight.
3) Component configuration (defining styles and configuration information)
This step involves a series of styles and details, ranging from the atmosphere of page presentation to the spacing between components. The configuration items of specific styles and information should be defined according to specific needs (interested partners can learn about specific industries, products and content types in depth, and recommend "store decoration in e-commerce industry") Do not blindly pursue the flexibility of configuration, and subdivide too many unnecessary configuration items, which will lead to higher R&D costs, At the same time, the configuration work becomes cumbersome, so the number of configuration items should be controlled as far as possible to automatically obtain information and provide system operability.
4.3 After configuration
1) Effect preview - confirm publishing
2) Preview submission - review and publish
Preview is a necessary step. The preview mentioned by Sue in this step refers to the preview of the final effect after the page configuration is completed, and may also involve the time dimension (for example, the preview of scheduled release is set in advance for the double 11 o'clock activity page). In addition, there is a preview, which refers to the preview of the effect of fine style adjustment (such as changing the background color of components).
After the configuration is completed, the operator should preview the configuration effect of the page before publishing to ensure that the final page meets the needs and requirements.
After previewing the effect, submit it and wait for approval and publishing, then you can refine the steps according to the specific situation of the company/team.
In general, since the formation of the operation team of a start-up company is relatively simple, the common process is: after the operators complete the configuration, preview the effect, confirm that there is no problem, and then publish the operation. When there is no intermediate approval, the preview to publish is usually the same person.
However, in companies with clear processes and specifications for content management and complete staffing, the process is usually the second type.
This involves several different roles and the authority subdivision behind the roles. Some people are responsible for configuration, preview and submit for approval, and are responsible for the presentation effect. Some people are responsible for review, final confirmation and release, and overall control.
So the specific process is: Effect preview - submit for approval - review - confirm publishing 。
Appendix: Overall configuration steps
5. Demand extraction
After clarifying the realization principle of page dynamics and the workflow of page configuration, the next step is what PM is most familiar with: extracting requirements and completing product design.
Product design and continuous iterative optimization in the later stage should always focus on the following directions:
How to make work more efficient, how to make collaboration more smooth, how to make management more intelligent, how to make rights and responsibilities more clear, how to make risks more controllable, support rapid testing, and use data to guide decision-making
Based on the implementation principle, configuration process and product design direction, Sue has extracted the following six requirements:
(1) Management
Component library management: direct creation of a new component is not supported. You can only select from the existing component library of the system. Card Library Management: (the same as the component library) does not support direct creation but can be called directly. In addition, there is also a very important function: it needs to support one click online and offline cards (online emergency treatment can be done immediately in case of problems). Page management: It needs to support one click online and offline pages (also the function support of emergency handling), version wildcard (to solve the configuration efficiency when a new version is released). Permission management: subdivide the permissions of pages, operations and data corresponding to the organizational structure or business line. Change record: make every change have a record to check, and prevent online data from being changed at will.
(2) Edit (Configuration)
When configuring different types of pages, the corresponding configuration functions are provided:
1) Configuration of inherent pages
Select page Select card, define card style, configure card content (select component) Select component, define component style, configure component content Configure more page information: define effective time, expiration time, page name
2) Configuration of the creation page
Create Page Select Card, Define Card Style, Configure Card Content (Select Component) Select Component, Define Component Style, Configure Component Content Configure More Page Information: Define Effective Time, Expiration Time, Page Name
3) In addition, it should also provide functions such as replication creation to meet efficient configuration
Create pages by batch copying Create cards by batch copying
(3) Preview
Configuration preview: It corresponds to the effect view in the configuration process. The mainstream interaction is to drag to the corresponding location, set the content, and then preview it in real time.
White list preview: It corresponds to the pre release status. In this status, you can view the effect in advance through white list preview.
Time machine preview:
By adjusting the time through the time machine, you can preview the effect corresponding to a certain time in the future. Because the effective data is different at different time points, ensure that the configuration meets the requirements and requirements.
(4) Review
This process is roughly the same as the general application review. The demand points that need to be supported and met should include but not limited to:
Processing of records to be approved Notification of the presentation of records to be approved Approval operations (effect, content presentation, use of functions, etc. - preview function) Approval records Approval records: pass, fail (reason notification, modification guidance)
(5) Publish
It is generally not recommended to publish the configuration directly after the configuration is completed, so as to avoid that the problematic configuration will directly affect online users.
At the release stage, the following two release functions should be met:
Pre release: The pre release status is added to further check and confirm the configuration effect and reduce the risk of problems. Scheduled release: The page configured by support settings only takes effect at a specific time. As a result, relevant configuration, audit and other work can be completed in advance. Temporary configuration is easy to cause problems, which is also to make the risk more controllable.
（6）ABtest
Yu Jun shared in the book that because of the incompleteness of information, all judgments and behaviors that he thought he had made after careful investigation are objectively trial and error.
Similarly, the content management system (CMS) we designed should also have such trial and error capabilities.
Support ABtest capability at page and card levels. Each configuration change can be made into an experimental change for ABtest. First test the effect of changes in a small range, and then make decisions based on the data.
(Sue has just sorted out and built the ABtest system of her project some time ago, and has specially gone deep into learning and made some summaries. She also wants to talk with you later, so let's preview it here.)
The brain map of combing the demand points is attached (but it is still the same sentence: it needs to be defined according to the specific situation, and the designed products can meet the demand)
6. Ideas&Ideas
Finally, let's summarize the basic ideas and design concepts of content management system (CMS) through dynamic pages.
Basic ideas:
The basic idea of content management system (CMS) to present content through dynamic pages is to separate content management and page design. The page design is stored in the template, while the content is stored in the database. When a user requests a page, each part will jointly and dynamically generate a standard page.
Design concept:
The design concept of content management system (CMS) to present content through dynamic pages: sufficient flexibility. Only enough flexibility can meet the daily needs of operations.
The flexibility is reflected in:
The layout capability changes dynamically, and the minimum number of layout styles must be clearly defined in the framework; The dynamic capability is coarse-grained, and the number of components to be registered in the framework is clearly defined; Business oriented components, which are required to be the smallest reuse unit capable of undertaking certain business capabilities; Components can be reused, which requires the ability to recycle and reuse components of the same type.
7. Product thinking
We all understand the importance of dynamic page configuration for operations, marketing and other aspects. On the one hand, it is really to reduce repetitive and unnecessary development work, and avoid the competition for development resources and long scheduling. On the other hand, flexible configuration schemes and convenient configuration tools have relatively high technical requirements. How to balance these two aspects better is the problem that the product needs to think about.
Is it necessary that all pages support dynamic configuration? Which pages need support? Which pages do not need support? Which pages are not supported? What are the criteria and basis for judgment?
The answer to Sue's thinking about these questions is that not all pages need to support dynamic configuration, which is unnecessary.
Pages that meet the following conditions need to support dynamic configuration:
Pages with concentrated user traffic (e.g. home page) Pages with longer user stay (e.g. home page) Pages frequently used by users (e.g. search page) Marketing space and valuable pages (e.g. special activity page)
Pages that meet the following conditions need not support dynamic configuration:
The page flow that is not necessary for the transaction process (such as the classification page; it should be noted that the transaction does not specifically refer to the order payment, and the consumption of content is essentially a transaction) is not frequently used by users (such as the help page and the setting page)
The following pages should not support dynamic configuration:
Generally, there is a fixed format to display information (such as personal center page). Key information has a direct impact on page conversion. Users only focus on key information, so they need to highlight and display in a fixed location to cultivate user habits, and cannot change at will (such as details page)
Above is Sue's summary and sharing of CMS in content presentation.
When it comes to carrying out the corresponding work, we should think much more than what is shared in this article. We hope that the content shared by Sue can serve as a starting point.
Insist on sharing some personal thoughts and ideas, and keep learning habits of input transformation and summary output. If there is anything immature or incorrect, I hope you can give me some advice. Welcome to discuss and make progress together.
This article was originally published by @ Su Xiaobai. Everyone is a product manager. Reproduction without permission is prohibited
The picture is from Unsplash, based on CC0 protocol
