Editor's Guide: The browser is a product that every Internet person uses every day, and in the process of continuous evolution of demand, higher requirements are put forward for the efficiency and compatibility of the browser. The author of this article designs a route based on the left column of a browser positioned for team collaboration to explain how to go from analyzing competitors to final selection to determining the plan, and how to execute it, and share it with you.
The vast majority of Internet practitioners cannot avoid using browser products for a long time and with high intensity. When using these browser products, we often encounter problems like this:
- When too many browser tabs are opened, the overcrowded tab bar makes it impossible to distinguish between web pages.
- When the browser is closed, all the tabs are cleared, thus forming a memory-based usage habit, and restoring the workspace as a simple and tedious action is inefficiently performed every day.
- More and more saas applications have become web page single-page applications, can they be compatible with application management?
This article is based on the design alignment of the left column of a browser positioned for team collaboration to illustrate how to determine the scenario from analyzing competitors to final selection, and how to execute it.
1. Search for competitors
The development of domestic browsers has been slow in recent years, and there are basically no major breakthrough innovations, and there is not much reference for the time being. In order to take into account the usage habits of mainstream users, mainstream browsers have not introduced tag group management.
Then our target range is basically determined in both directions of browsers and browser plug-ins abroad.
1.1 Browser Plugins
Searching for browser plugins generally relies on the plugin market of major browsers.
At present, in terms of browser plug-ins, the management of tag groups basically revolves around the APIs provided by the browser. After looking for some solutions, I learned about the workona browser plugin.
workona implements tag management through workspace management for tag groups.
The minority has an article about workona, which is a paid article. Since there is a wall in the workona, it cannot be directly accessed, and the registration is also quite troublesome and requires some skills. Experience after registering an account.
Since this product contains two parts, plug-in and application interface, the expansion is too large. To put the conclusion directly:
Based on the use of plug-ins, the threshold is high, and there is a certain threshold for installation. Chrome-based API group switching has certain limitations. The world outside the walls is wonderful, but it cannot be used in the domestic environment.
In general, through the division of the workspace, it does solve the problem of the tab bar, but because it is a separate page, the switching is too cumbersome.
Browser plug-ins are generally relatively high due to the use of the threshold. For reference only.
1.2 Foreign Browsers
The concept of a working browser has long existed abroad.
The more famous sidekick. Here's a look at how to search for independent products abroad. There is a ProductHunter website abroad, which can search for many potential competitors. And PH itself also has a relatively good developer community, you can see the interaction between developers and users. In addition, there are votes and other ways to screen product quality.
Foreign browser products mainly look at sidekick, sigma and Safari 3 models.
①.sidekick
Sidekick is a relatively famous working browser, and attaches great importance to web applications in foreign countries. So sidekick integrates a powerful left sidebar.
The left side bar integrates some commonly used web applications. Click to open the web application. By default, web apps don't appear in the right tab bar. Open as a main interface tab.
Launched web application, there will be a small marker on the left side, similar to the mac's dock bar.
Right-click to see a function menu. You can quickly add different accounts for simple setup. As you can see, the left sidebar of the sidekick is mainly used to improve the experience of web applications, rather than to organize the tag group.
Sidekick design is mainly to solve the experience problem of web applications.
Conclusion: The left sidebar of the sidekick is easy to switch, which is good for web application compatibility and provides convenient account management. It is a scheme that is easier for mainstream users to receive. However, this aspect is weaker for multi-label collation.
②sigma
Another foreign working browser, sigma, is not too mature at present, but it is also successfully out of the circle with the main tag group management.
sigma allows users to expand a left bar and manage groups in the left bar, you can customize grouping, set icons, and switch tab groupings at any time.
conclusion:
The left column switches the solution of the label group, which improves the label management ability. A new problem has also been introduced, when the left side bar is put away, only through the icon memory, there is still difficulty. After unfolding, it occupies more screen space and is not suitable for small screens.
sigma does not optimize the web application in a targeted manner, mainly in the management of tag groups, and the function is relatively single.
③Safari
Originally, mainstream browsers have different degrees of support for tag grouping. Chrome has a lab function for tag groups, and when turned on, you can add groups to the tab bar. However, the crowded top bar itself has limited space, and it will be cramped to manage here.
With the release of MacOSMonterey, the new version of Safari has added a compact mode, while adding the function of tag groups.
The new version of Safari can open the left column, you can manage the tab group, add any group, and maintain the independence and persistence of the group. After closing the browser still, the next time you open it, you can still quickly open this tab group.
Safari's tag group overall experience is good and supports cross-platform. The experience is also relatively simple, no need to install browser plug-ins, no need to open the lab function, and the cost of use is low.
Second, sort out and summarize the refining plan
Based on the step1 scheme, the preliminary mind map is as follows:
Based on the left column and the tab bar-based scheme, after refining, taking into account different screen sizes and user structure perception. Preliminary opinion is that the left column is more in line with the structural cognition of the switch. The following layout patterns are formed:
Such a plan has also been accepted by Apple, which fully demonstrates its feasibility.
As for the product form, if it was 5-10 years ago, it can only be implemented in the form of browser plug-ins. However, in the current development environment, there are already some niche open source browser products, and the chromium-based development ecology has gradually improved, so it has become possible to develop independent browser products.
Using the browser plug-in mode, after all, there are great limitations, and there will be problems in future scalability, performance optimization, etc. After synthesis, select a standalone browser.
So, how do you integrate web applications with tag group management to form a robust and effective solution?
A unique web application management product state appeared in my eyes, through the study of state, summarized and refined a final solution.
station is an efficient web application management product, designed to allow users to not need to install a variety of web clients, just need to access as a small application.
Its left-side bar design is similar to the sidekick, but the status is more aggressive, cutting out browser functionality. Only the basic browsing functions that serve web applications are retained.
The left-side bar scheme of the station and the concept of the app store are also very good.
By categorizing web apps through the store, users only need to search and add apps. Station is open source and free, while sidekick is subscription-based. If you only use a web application, in fact, the state is also enough.
Third, form a mature program
After synthesizing some common solutions on the market, we summarize the inconvenient aspects of their use by drawing prototype diagrams and trying out the products of these different solutions. Finalize the product plan.
Keywords: left column, mini program
Make a small modification to the left sidebar of the previous article, cancel the top area above and change it to the app area.
In order to be compatible with large and small screen devices, the left side bar is provided with three modes of folding, expanding, and automatic (in the future, it can even be expanded to be independent of the main interface, and the side sucks to the left side of the screen, which is convenient for exhaling at any time)
The width is set to 45 pixels, and the switch entrance is switched by sacrificing about 45 resident sizes in exchange for a more understandable tag group and workspace.
The label group adopts the application original image, and the icon of the first application is used as the grouping icon to reduce the user's cognition and operation costs.
The application uses a circular wireframe icon to distinguish it from the traditional website logo. Make a big difference visually.
Use both running and non-running colors to distinguish between them. The final result is as follows:
When the mouse is moved over the label, the labels in the group are quickly previewed through the floating window to offset the inconvenience caused by the separation of the labels. Reduce learning costs for users.
Users can directly click on the group title to edit, directly click on the multi-tab toggle, or lock the tab to prevent it from being closed by mistake.
When the browser is closed, keep all the tabs so that the user can restore the workspace the next time they visit.
When the user moves the mouse over the app, a screenshot of the app's interface appears. This allows users to quickly preview the app state within it.
In order to improve the experience of using web applications, immersive accent colors, standalone forms, and application opening self-launching features have been added.
At the same time, the self-pop-up window of the application is blocked and opened in the form instead.
In order to manage the installation of applications, an application management function has been added.
When you move the mouse over the application management icon, all running applications appear and can be set or closed.
Click the app management icon to expand the panel for quick launch apps. The design here refers to the WeChat Mini Program.
Added app search function, support Chinese pinyin.
The last question is how to install the app.
Products such as station adopt the application center mode.
In this regard, we also provide a favorite function, which has built-in application navigation and puts some commonly used applications that can be installed with one click. At the same time, it also supports users to install the application with one click when browsing the website.
After the installation is complete, the app starts automatically. This allows users to distinguish between newly installed apps well.
Due to the existence of stand-alone forms, in split-screen mode, it is also convenient to put document applications on the extended screen to achieve the function of reading documents at any time. To make the app easier to use, we've added the ability to return, forward, refresh, and return to the start page (homepage) on the title bar.
Fourth, write at the end
When designing functions, we often need to refer to a large number of competitors, and find really useful solutions through continuous research and experience of competitors.
At the same time, it is also necessary to consider the cost of using different solutions and the cost of user learning, whether it is space or time that needs to be compromised. Each option has its advantages and disadvantages, and when it is not possible to make a decision, you can consider using configuration options to let the user decide for themselves.
Author: Short Talk Community - Yi Xiao, Short Talk Community Product Manager, Wantian Browser Product Manager.
This article was originally published by @Short Talk Community - Yi Xiao on Everyone is a Product Manager. Reproduction without permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol