How to formulate a global framework for B-side projects? Take this director-level experience!

Recently, I have been thinking about the sharing of interactive knowledge, and it should be expanded into an entire series of content, including the analysis of various components, controls, and behaviors.

Based on my sharing habits, I will try to avoid using overly theoretical and empty ways to explain, but instead focus on specific practical scenarios to help everyone understand how to make reasonable interactive decisions.

PS: The exciting series of long articles is back again~

PART 01 What is the global framework of interaction?

Interaction design is essentially the process of designing how to use a product, such as how to fill in an account, how to export a form, how to filter data, how to sort a list, etc. For each function, you can spend a long time considering its rationality. The interaction of a project is the sum of all the functions of the project.

So how do designers start the interaction design of a project? Do they jump right into the details and start formulating the state of the input box and the expansion logic of the drop-down menu according to the prototype?

This is definitely not the way to go. The interactive content of the project is numerous and complex, and designers will quickly get bogged down in these details. Treating the symptoms without addressing the root cause can easily lead to a lack of uniformity in project details, inconsistencies, and a fragmented experience. Therefore, to understand the correct thinking of project interaction design, we must know what interactive content is in the project, what their corresponding levels and design objects are.

Here, I divide the interactive objects that need to be designed into 4 categories, from large to small:

• Global framework: the main module layout and layout of the project, the main basis and steps for product use
• Functional flow: a complete user goal that requires more steps to complete
• Component operation: complete operation methods and status of some complex modules and business components
• Control usage: operation methods and states of basic control elements

Let's first explain the global framework type, what is the main module layout and layout of the project, and why the global framework can determine the main basis and steps for the use of the product. For example, everyone has used Adobe's software, and you should have a feeling that after getting familiar with one, you can use the next one immediately and complete some basic operations. However, if it is not an Adobe series software, it will feel very awkward to use, and you often have to start from scratch, such as Affinity Photo and Pixelmator, which are comparable to PS.

Why is there such a contrast? It is because Adobe has unified the global framework and operation methods of the software within its own ecosystem as much as possible, so that users of the entire family can adapt to different software in the fastest way. This includes the property bar at the top, the toolbar on the left, the tab bar in the middle, the creation area, and the different work window arrangements on the right.

In addition to the layout framework of the main interface, the framework structure of some secondary windows is also unified and fixed. For example, the preference setting and property setting windows in PS are almost the same as the property setting windows of several other software.

In Affinity, however, the software preference settings do not use the left navigation, but a quick entry hierarchical mode similar to the Mac general settings. If you are used to Adobe, switching to this will feel awkward.

Some students may wonder, Photoshop does not only have these types of windows, aren't other windows different in style from the ones above? That's because the window framework must take functions and scenarios into consideration. Even if multiple window types are used, they are regularly applied in scenarios with similar operating methods.

Let’s recall the basic operation process of PhotoShop. After creating the file, use the tools on the left to add layer elements to the middle canvas area for layout, and then adjust the layer order and properties of the canvas objects in the property bar on the right.

As a unicorn in the graphic design field, PhotoShop has directly influenced the framework structure and layout methods of most similar design software. Because most designers use PS as the entry-level software for learning design, if you want users to get started with their own software faster, you should follow the way they are already accustomed to. Therefore, starting with Sketch, its framework and operation process are highly similar to PhotoShop. Later, Adobe XD, Figma, Instant Design, etc. all apply almost the same global framework, so you only need to master one of them to immediately become familiar with the use of other software.

However, when the actual functions of several other "office applications" are highly similar to UI design software but with different structural frameworks, it becomes extremely difficult and awkward to get started. For example, Axure, Keynote, and PowerPoint, students who first learned design software and then learned these software must have felt deeply.

For software in other industries, if there is no absolutely dominant product as a benchmark, then the product framework of each company is different. For example, in 3D modeling software, there are C4D, Blender, and Rhino, and in video editing tools, there are Pr, Finalcut, and Da Vinci. Even if you are proficient in one of them and are familiar with the professional terms and necessary functional logic, you still need basic teaching to master other similar software.

This is the role of the framework. It is the main basis for the use and operation process of the software. Other detailed interactions and operations are all subsets of the content attached to the global framework. The reason why interaction design starts from the global framework is that designers need to:

First determine how the product will operate as a whole, then consider the details of buttons and forms.

PART 02 Global Framework Disassembly of B-end Products

Although the examples above are all software cases, if you pay close attention, you will find that the operating framework of the web-based management system is no different from that of general software. However, compared with the various professional software, the operating framework mode of the B-side management system has evolved over a long period of time to form several fixed routines. Therefore, the management interface cases found on the Internet seem to be just changing the colors and icons over and over again around a few fixed layouts.

Although they look very similar, they still contain many interactive details that designers need to pay attention to and formulate. It is not possible to design a global framework that meets the needs of the project by simply copying it.

So, how do you design the global framework of interaction? It is not an individual, but a collection of multiple components, page types, and adaptation methods. To effectively formulate it, you need to first understand what elements are included in the collection and their basic characteristics.

1. Components in the global framework

In the scope of the global framework, the component module types included can be divided into two categories, global components and floating elements. Global components refer to components that exist and interact in most pages of the project. Their functions are often not directly related to the current page, such as path jumps, color switching, quick operations, etc. The included floating elements are essentially global components, but their commonality is that they will not be displayed by default and need to be triggered by specific conditions to be perceived. For example, network disconnection prompts, deletion confirmations, side drawers, etc. are all global floating elements, and they are also content that needs to be planned in the early stage.

The following is an explanation of these two types of components.

Global Components

Navigation bar:

The navigation bar is not only a B-side management system, but also the most important component in website design. An excellent navigation bar can clearly display the page hierarchy of the project and help users efficiently access the target page. One step in the development of the global framework is to select the appropriate navigation type according to the specific situation of the project.

The navigation bar mainly uses three layout forms: top, left, and mixed:

1. Top navigation: suitable for situations with fewer options and content, leaving more horizontal space for content.
2. Left navigation: suitable for situations with many options and levels, easy to fold and scroll up and down.
3. Hybrid navigation: suitable for scenarios where different functional areas need to be effectively distinguished.

In addition to determining the type of navigation bar, you also need to determine the operation logic of the navigation, including the number of menu levels, and the default, expanded, selected, and closed interactions.

Top Bar:

In addition to navigation, another basic and essential component is the top bar. In addition to placing the most basic user and setting options, its role positioning depends on the needs. The most common ones include the following:

1. Title bar: Mainly used to display the page title, subtitle, or breadcrumb control.
2. Toolbar: Contains more operating elements, such as search, add, invite, message management, etc.
3. Menu bar: Contains more menu options and content switching operations for the current page/module.

Of course, the above situations are not absolute. Designers need to start from the actual needs of the project, sort out which global controls or operations the project contains, and then decide how to allocate them to the navigation or top menu, rather than defining the type of menu first and then filling it with content and fields.

Page tab bar

The page tab bar is a component similar to the browser tab bar, which is used to display and close the open pages in the current project.

The use of tab bars was very common in B-side project applications in ancient times, because the IE browser, which has been buried for a long time, did not have the page tab function at that time, which made it very troublesome to open and switch between multiple pages.

With the popularity of browser tabs, it is no longer suitable for most B-side projects, but there are still a small number of projects that need to combine its advantages to better improve operational efficiency. In some projects that need to continuously open and switch pages back and forth, such as customer service systems, financial audits, and contract approvals, because opening a new page only requires loading the content area instead of the global, there is no blank page loading process after creating a new window, which can bring a better experience.

Content Module

The content module is used to contain and display page-related content. This is a component type that is often overlooked. It includes the module title bar and the operation area. A mature B-side project will uniformly formulate the component structure of the content module to ensure the uniformity of styles between a large number of pages and modules. For example, the following module case.

If you just want to make a title and unify the spacing parameters, then there is no need to mention this component here, because this is just a design issue rather than an interaction issue. The content module is formulated to consider various content scenarios as much as possible and handle them uniformly. For example, you need to apply first-level paging tags, multi-level paging tags, operation buttons, content folding, etc. The more comprehensive the consideration, the neater the processing will be later. Otherwise, it will damage the user experience and operation efficiency, just like the case of Qianniu on the Taobao seller side below.

It is difficult to finalize all the content modules at the beginning. Not only does it require detailed requirements and product prototypes from the product manager, but it also relies on the designer’s own experience and judgment. Therefore, the process of developing the content modules is to develop the initial version based on the information at hand, and then gradually supplement, optimize and replace the content modules in the subsequent pages.