First, write it in the front
Back in 2017, the stack didn’t have so many sub-modules, only two parts: offline development + real-time development. So there was no problem in navigation design, and we just followed the common design logic of data development. In 2018, increased the data quality, data apis, such as several modules, covering multiple modules, overall navigation planning becomes important, make good, add new modules, can inherit the existing design, maybe, subsequent changes will be relatively large, may even overthrow again, so the importance of navigation is here.
Second, design thinking
Since multiple modules are included, there are a few important issues to consider:
1. Backward compatibility issues. When new modules are added in the future, minor changes must be made to the existing navigation mode.
2. The extraction of common modules, the general functions of each module and which modules are common or very similar, should be extracted into a unified page for management.
3. When the common parts are gathered together, they should also have a good product experience, and the experience should not be poor because of decoupling.
4. Decoupling should also be considered in combination with the business model. In the future, the sales model of products will be sold separately, for example, data API can be output independently without relying on other modules.
3. Problem solving ideas
For stack product managers, this is a problem they have never encountered before, so how can they solve it? Here’s a way to think about it:
You have not encountered the problem, consider whether others have encountered, if so, then to learn, if not, that the problem itself may have a problem
To put it simply, “borrow from”
After sorting out the above problems, the first thing to do is not to think about how to draw a prototype, but to find out where to borrow the design.
How to find a place for reference? At that time, the following three factors were considered:
1, you business products are more than us, it is best to be a lot more, and must be integrated in a navigation system.
2, friend business can not only SaaS service, because SaaS service can do a high degree of coupling, but we also need to consider the scenario of independent deployment of various products, to be split, decoupled.
3, the best is 2B product, 2C product this kind of scene seems not too much.
According to the above ideas, several types of friend quotient range can be determined:
1. Public cloud: Generally, public cloud has hundreds of products, and the problems encountered by public cloud are more complex than we are. Since we refer to more complex cases, fewer products are small cases, such as Cloud Cloud, ASUN AS, Micro Azre and G* GLE.
2, the domestic enterprise service manufacturers, Hua, Ya, encountered problems are similar to ours, generally output a limited few modules, for a specialized customer service, you can also refer to, for example: Hua *, foreign friends are not familiar with this aspect.
Four, refer to the design characteristics of the product
1, friend business 1
Login directly into the portal, tiled the entry links of various products, easy to direct diversion, diversion can be said to be the only purpose of this page
The top navigation can be customized to “hang” the commonly used products
Once you enter a product, provide multiple layers of navigation in the form of breadcrumbs
The pros and cons of design
advantages
- The product line is very large, so it is very tolerant
- Navigation is clear and simple. For the public cloud, without ordering any products, it will enter the product introduction page and experience better
Disadvantages:
- The top menu is underutilized, but the ability to customize top navigation for advanced users makes up for this
2, friend quotient two
The front page is laid out in the form of a dashboard, which makes it easy for users to see the core metrics, but relies on the left-hand navigation to find the product.
Design pros and cons
advantages
- Left navigation is level 2, but it’s very integrated
- Home page after entering the core report, although it is also a stream, but the experience is good, the core monitoring indicators are directly exposed
disadvantages
- It feels like the top menu is underutilized, the left menu is too far down, and there’s probably a button under a big blank space
3, friend business three
In the screenshot of a product of Youbusiness, the top navigation is used to split each module, and the form of G** GLE Dashboard is used for reference to reflect the key indicators on the home page.
Design pros and cons
advantages
- Home page after entering the core report, although it is also a stream, but the experience is good, the core monitoring indicators are directly exposed
Disadvantages:
- The UI is not very beautiful
- Report fixed, when increase, decrease, report part to re-processing layout, re-development
Five, the stack of navigation design
After referring to the above several products, the stack should pay attention to the following problems in the design:
1. There may be 7-8 products at most, but not as many as in the public cloud.
2, data quality, data API, smart label, data map and other modules, will gradually evolve more complex, should make full use of the top menu, if the subsequent need to expand the function, you can design the left menu, easy to expand.
3, the home page without strong diversion, several stacks of products are highly correlated, the home page can learn from Google’s Dashboard mode.
4. For navigation, take full advantage of top navigation and leave space for the bottom of the page.
5. Most products of the public cloud do not use top navigation, which may be because there are too many secondary menus and cannot be unified. (DataWorks of Ali Cloud uses top navigation because its functions can be divided, and only left navigation will cause problems such as too much navigation and failure to integrate with data development. AWS Cloud9 also uses top navigation).
6. When users independently deploy a product or multiple products, the navigation experience is consistent (including upgrading from one product to multiple products).
7. The difference between deploying a single component and multiple components lies in the addition of an icon of “XX product” on the top, while other navigation menus remain unchanged, which is simpler and has a consistent experience.
Six, the design of the stack
Design Scheme 1
- If only one product is deployed, then the product matrix icon in the upper left corner should no longer be displayed, and the child product icon needs to be moved to the left
- If you are upgrading from one product to more than one product, the product matrix icon in the upper left corner needs to be displayed, and the child product icon is moved to the right
Design Scheme 2
- On the one hand, it solves the problem of consistent experience between a single deployment and multiple deployments. The difference between deploying multiple products and a single product lies in the addition of an icon at the top, which gives people the feeling of consistent overall experience
- Another benefit is that the core navigation is clearer and the functions used by the low frequency are placed in an unimportant position
7. Summary and analysis
The above content is a number of stack navigation design process and ideas, the final choice of the second design scheme. Of course, this scheme also has some problems, such as the absence of Dashboard on the home page. Some problems have been solved, and will be gradually iterated and optimized in future versions.
This article was first published in: Statistical Stack Institute
The stack is a cloud-based, native, site-style data mid-platform PaaS, and we have an interesting open source project on GitHub: Flinkx dtstack/Flinkxgithub.com
Flinkx is a batch stream data synchronization tool based on Flink, which can collect static data, such as MySQL, HDFS, etc., but also can collect real-time changing data, such as MySQL Binlog, Kafka, etc., is a global, heterogeneous, batch stream data synchronization engine, if you are interested in, Welcome to the GitHub community and find us