Starting from 0 to build a backend management system, the cost is huge, so they will choose a set of mature component libraries, based on this, and then stacked business logic. Our company's component library is based onAnt DesignAnt Design includes a complete back-end solution that not only provides 75subassembliesIt also open-sources the entire suite ofdesign proposal, color schemes, fonts, icons, layouts, etc., and also shares numerous UX examples. Officially based on the components in Ant Design, there is also an out-of-the-box set of front-end/design solutions for the middle office:Ant Design Pro, closer to the page development, shorten the development time. Many of the optimization ideas in this article , are derived from these two sets of open source libraries , but also added a lot of their own understanding .
I. Standing on the shoulders of giants
Before presenting the system to users, it is necessary to do a preliminary optimization of the system with a professional eye. The following figure is a mind map based on the above 2 libraries, including a few common parts of the management background, improve these parts, can let the user in the use of the system to have a better experience, such as chart visualization and other special modules are not listed.
1) Infrastructure
The global structure of the admin backend is relatively fixed, including the logo at the top of the side, the side menu, the top menu, and the breadcrumb navigation.
The side menu can be hidden, and for a better experience, the width can be made customizable, e.g. by dragging it left or right to modify the width. The page permissions of background users will also be centralized in the sidebar, those with permissions will be shown and those without will be hidden.
In the top menu, not only can it be used for navigation (modifying profile, logging out, etc.), but you can also add quick search buttons, e.g., enter a user ID to get a pop-up box showing user details, including basic information, orders, operation history, albums, devices, etc., and aggregating this information together for easy querying.
When there is more content in a page, it can be separated by tabs, with one tab corresponding to a subpage.
Back to top, more practical on longer pages, this button should also be an inaccessible part of the management system.
2) Feedback
When the user and the system need to interact, it is necessary to provide users with necessary, positive and immediate feedback at all stages. But at the same time to avoid excessive feedback, so as not to bring unnecessary disturbance to the user, for can see the effect of the simple operation in a timely manner, you can omit the feedback prompts, the following is a set of feedback examples.
Common result feedback can be divided into two types: top global tips and dialog box tips (shown above). The top global alert is the Toast, which is mild and will be hidden after a few seconds. Dialog prompts are heavier, terminate the user's action, and are used to convey very important information.
Forms can be operated with different checking rules to provide users with form checking tips (shown above), allowing them to correct errors in a timely manner. In the form, for the more complex fields, you can use the bubble card way to provide additional instructions (shown in the figure below).
The status of the interaction is fed back to the user as much as possible during the operation, and an immediate response increases the user's sense of trust. When an operation takes a long time to complete, display the current progress and status of the operation. If the loading time is long, cancel the operation.
When the operation of the target element requires further confirmation from the user, the user can be asked by popping up a floating prompt near the target element via a bubble confirmation box, commonly found in the buttons in the Data List Operation column.
3) Data list
Data list in the entire management system accounts for a very heavy proportion of its structure is also relatively fixed, the top is data filtering (i.e., query conditions), and then data statistics (optional), and then a list of data (i.e., the form area), which also contains a list of toolbars (new, refreshing, sorting, etc.), the back is the paging column (not pictured in the figure), and finally the batch operation.
There are specialized components in Ant Design Pro that implement thequery condition, with two built-in buttons for query and reset, and auto-hide when there are more conditions. In the picture below, you can see the list toolbar (pasted on the top side of the form), which provides batch import, export data, create application, etc. These buttons are customizable. Due to the large number of fields in the list, left and right scrolling is also provided and the first and last columns are fixed. The batch operation is fixed at the bottom of the page and displays the number of selections.
During the loading of the list, a skeleton screen transition can be provided to display the data when loading is complete. When there is no data, provide an empty state placeholder instead of a blank slate.
Once the data is loaded, on hover, you can add a background color recognition for the current row.
The click range of a text chain is affected by the length of the text, and the entire cell can be set as a hot zone for user triggering.
The pager allows users to know exactly how much content they want to view, how much has been viewed, and how much remains. When more information entries , you can allow users to customize the number of rows per page to improve the efficiency and flexibility of the user to view and retrieve information , often used in conjunction with tables , cards . The following figure shows the various parts of the pager, as well as common functions.
The above is the more common data list, there are several types of more special data list. The first is an in-line editable form, click on the operation of the column after editing, read-only columns into an operable control, a quicker way to edit, suitable for a list with fewer fields. The bottom of the figure to add a line of data, is a special copy button.
The second is a draggable sortable table. Hold the left mouse button over the icon of the first row, and then you can drag the row.
The third type is the card list, which is presented more differently than the regular list. In cards, elements can be focused on according to the business, for example, providing the ability to zoom in on an image.
4) Forms
Forms are also an integral part of the backend system, and nowadays they are often not separate pages, but part of the data list. For example, click on a field in the list of floating forms, floating forms can be divided into two types: pop-up boxes (Modal) and drawers (Drawer), pop-up boxes are suitable for forms with fewer fields, as shown below.
Since the drawer provides more space, it can contain more fields, as shown below.
In addition to floating forms, for more complex forms, step-by-step forms can be used. The information that the user needs to fill in and confirm is organized according to a linear process, using step-by-step strips to inform the user of the complete process and progress, often allowing the user to reconfirm the information before the final submission, and giving clear feedback on the results at the end of the process.
A login form is a more specialized form, independent of the underlying layout structure of the system. It is usually simpler, providing only a username and password login and omitting the SMS login.
Commonly used form controls include input boxes, radio boxes, multiple choice boxes, drop-down boxes, etc. These are relatively simple, complex uploads, data linkage and copying. File uploads can be presented in a simpler form, as shown below.
And image upload because you need to preview, so you have to provide a preview area, common is to enlarge the button area.
There is also a drag-and-drop upload, and for a better experience, the progress bar needs to be updated in real time during the upload process.
5) Buttons
Although the button is a small element, it is spread throughout the whole system, and it is found everywhere. For buttons, there is a set of mature design specifications, mainly in the style and interaction. In the figure below, 1 is a secondary button, 2 is a primary button, 3 is a text button, 4 is an icon button, and 5 is an icon added to a button.
The main button is the primary color fill, indicating high emphasis, and the remaining buttons have decreasing levels of emphasis in that order.
The color red is used to warn the user that the operation is risky, and usually the delete button is given a red color.
There needs to be a focus effect, such as highlighting, when moving to the button position. When clicking a button, there needs to be a transition effect, such as adding a shadow to confirm that the click was successful. When communicating, there could be a loading effect.
6) Other
Responsive is to allow the backend can support mobile device access, in the absence of computer outdoor situation, but also can browse the backend, operation management.
Dark mode is an experience optimization, which is more suitable for night office and more in line with the aesthetics of programmers. After going live within the company, it was quickly recognized by the business side and also urged the product to improve the night mode of the client.
Exception pages are also an indispensable part of the backend system, such as 403 for insufficient privileges, 404 for page not existing, 500 for server error, and so on. Through the exception page, you can explain what abnormalities occurred and provide users with corresponding suggestions or operations to avoid users feeling lost and confused.
II. Staying close to business
Although open source libraries have cleared many of the experience barriers , but in the actual business , there will still be all kinds of problems , focusing on the process , functionality , performance and so on. For example, the process is too cumbersome and needs to be simplified; too few functions need to be supplemented; the page is too stuck and difficult to operate and so on. However, before optimizing the experience, it is necessary to ensure that the business progress is not affected, in other words, there should be free human resources to do experience optimization work.
1) Emancipation of productive forces
Liberating productivity is all about getting more people involved in optimization. When our team developed the management background before, we would first find a similar one, then make a copy of it, change the name of the file, and make changes based on it. Since it can be copied, it means that there are a lot of commonalities. After sorting out more than 200 pages, we found that several conventional layouts accounted for more than 80% of the total number of pages, and only a very small part of the pages need to be customized, so the next step is to abstract the components included in the conventional layout.
The template component was called out and after more than a week of debugging, it was rolled out in the group. When developing this component, many callbacks were reserved to do customized logic according to different scenarios. Once the template component was online, it reduced the page development from 3 days to less than 1 day, and some simple pages could be laid out in two or three hours. When browsing Ant Design Pro's component library, I found that my template component is similar to these components, but it is more feature-rich and can be adapted to more complex scenarios.
This is a very typical experience of cost reduction and efficiency improvement. In addition, we are also developing various tools to allow various businesses to go through visual configuration without having to develop them separately. For example, a tool to configure the list of activities is to make the commonly used activities in the form of visual configuration, with the purpose of reducing the development and testing manpower, and compressing the development time from 2 days to 2 hours. This configuration coordinates the UI group, product group, testing group, front-end group and data group to formulate relevant specifications, and has successfully operated dozens of activities.
Reducing the burden on our group is also a goal, so we also need to develop many handy tools. For example, the design of the BFF platform, after the completion of the research and development of a period of time before the start of the promotion of our group is relatively slow, for a period of time, new business interfaces will basically go to this platform, online has more than 70 interfaces in the stable operation of the platform.
In order to improve the development efficiency of the management background, has developed the background page visual editor (i.e., low code) the first version and the second version, the first version of the group acceptance is not ideal, the second version has been online 2 menu. However, the experience of using it is not ideal, and it needs to be iterated and perfected before it can be really used.
Of course, liberating productivity and experience optimization go hand in hand for the most part, and the gains gained after a while will be very high.
2) Discovering the problem
Next, let's talk about identifying problems. Problems such as process, functionality, performance, etc. can only be encountered after in-depth use of the backend system, so in order to identify these types of problems, you need to communicate with the relevant people. If you are in a position to do so, you can have one-on-one communication, and let them prepare for it after notifying them in advance. Because they are solving practical problems for them, so in general, they will actively cooperate. At that time, we received dozens of questions at once, after sorting out, repair easier to achieve the problem, such as changing a font color, add a filter condition, add a column and so on. After the decisive on-line, the effect is very good, it is a small change for you, but for the business side, it is a real enhancement of work happiness.
Another way to identify problems is to distribute satisfaction questionnaires, which reach a wider audience and cost less than the previous method. After all, one-on-one is about taking time away from both parties and cannot be used frequently. But relatively speaking, one-on-one ear to ear is certainly the best. If the questionnaires received are of high quality, then the rewards are full.
The questionnaire's topic form includes single choice and question and answer, don't include too much jargon, common description, and the answer doesn't have to be the standard five-level scale (very satisfied, satisfied, general, dissatisfied, very dissatisfied), you can be more concrete to describe the answer to facilitate the user's choice. For example:
- What are the reasons for not being too happy with XX page?
- Developers misunderstand the requirements
- Project extension
- Too many bugs to use
- (sth. or sb) else
When Other is selected, a text box can be provided to enter a specific reason.
In addition to getting questions in these kinds of formal scenarios, you can actually uncover them in everyday moments, such as when you hear someone complaining that XX feature is too hard to use, when someone mentions that there's an anomaly with a feature in a group chat, and so on.
Some experience issues can also be discovered on your own, for example, if the position of a field in a certain data list is distorted due to too many fields, then you can take the initiative to add left and right scrollbars. Filtering conditions are too few, add a few. Daily can also go to observe other open source management system features, consider whether you can add to their own systems to enhance the experience, responsive and dark mode is in the browsing of other systems to get the inspiration.
3) Problem solving
The core essence of problem solving is whether the cost of resources is affordable. Some of the more important experience issues, especially those that require coordination across multiple ends, can be added to the version iteration so that they can both be emphasized and a set time can be allocated for resources to address them.
Most of the time, though, experience optimization doesn't make it to the top of the list, it doesn't make it to the agenda, and it's a much lower priority than other needs. But the good thing is that most of the management backend is managed by our full-stack, and optimization can be taken care of by us, without the need to find someone to collaborate with, and there is more control. It's possible to take those optimizations sight unseen, one by one.
Some of the optimization is difficult to completely solve, only in the existing conditions to do the best. For example, the background of a review of the content of the function, you can submit a one-time 200 records, in the submission, the server side will do a series of serial logic processing, so it is inevitable that the interface response will be slower. Although in the interface, has done the index of the database table, as well as as as little as possible with the database interaction, including a one-time read multiple records from the database, the data will be cached to Redis, but then to optimize, you have to change the technical architecture, the cost will be relatively large, can only be negotiated with the business side of the temporary compromise with each other. Generally speaking, with the iteration of the business, the architecture is also to follow the adjustment, but subject to a variety of objective conditions, sometimes have to be put on hold.
The business of each company will be different, the business optimization problems encountered will be very different, and there is no silver bullet, you have to analyze the actual situation, under the premise of the existing resources, to find the optimal solution (taking up the least amount of resources, to get the results can be recognized by everyone), this is a balancing process, need to try more.