Clearly define the user base and purpose of kanban

First, Kanban is designed for users, so it’s important to define the user community and their core needs. Most kanban are mainly for viewing, supplemented by functional controls, which can be roughly divided into monitoring classes and data analysis classes.

Define priorities for large interactive panels and content presentation

Knowing the kanban type, we can take a look at the interaction structure of this type of design. Generally, kanban exists on both the Web and mobile ends. Kanban on the Web side is more commonly used in the left and right structure, and the sidebar assumes the function of the menu.

It is also common to see side menus folded up to give more room for the chart to display.

It is important to note that we should consider the adaptability of different screens when designing, ideally adapting layout to the user’s screen. In business large-screen projects, where kanban content is displayed on iPad, large-screen, and PC at the same time, the solution should not only accommodate multiple platform styles, but also accommodate differences. As part of the large screen may be displayed to external guests, the single picture full screen and privacy functions are added. When the privacy button is clicked, the large screen will be switched to the screen saver to avoid guests seeing too much sensitive data.

Grouping the data logically and building the grid, once the framework is in place, we can start to focus on the presentation and discuss with the business & product. Usually my business and I will try to put the content of similar data together, such as typical PV&UV, daily orders & orders amount, historical data, etc… After prioritizing everything, we threw everything onto the canvas, and the jigsaw puzzle began to assemble freely.

Choose the right graphical representation of data

The general principle of choosing a chart is to make complex information easy to understand, the interface simple, and minimize the cognitive burden on the user. Pie charts, line charts and bar charts are common and intuitive representations.

Some maps, such as radar maps, wind roses and ring maps, may seem cool, but they are not very readable, depending on what is displayed. Bar charts, line charts and k-plots all have the property of multinomial dimensional comparison. For time-varying data content, we can choose solid state or dynamic display. Many open source programs also come with small animations and interactive displays that can be used flexibly to make your images more interesting and useful.

Color selection and special case supplement

The color of the chart is closely related to the overall color scheme, and kanban generally uses a dark or light background. When choosing a dark background, highly saturated colors work best on charts. There are plenty of good games on the P site and Dribble. Many charts can rely on gradients in details to make the picture richer, and the shadow details of the text will also make the overall visual texture better.

Because there are so many charts, important data should be presented in separate fonts and highlighted with bright ICONS. Kanban will be used frequently by users, and the use of common ICONS will shorten the user’s understanding time and make the user more efficient.

Give users flexibility and custom functions

Once we’ve worked out the core requirements & interaction logic, and settled on the visual tone and key pages of the core page, we can take a break and see what we can add to that, in addition to supplementing our account logins, if we develop a surplus of manpower.

Generally, kanban users are expert users, so the need for customization will be much stronger than ordinary C-terminal users. If project resources allow, it is a good interactive scheme to provide users with custom functions.

For example, the Settings allow the user to adjust the order of the chart display, the chart can choose to add or hide the baseline for comparison, and so on.

Kanban is a front-end system, from a technical point of view to customize the function, you can develop a separate background management page. Users can take this in the background management page individually personalized Settings, such as page layout, switch, typesetting and so on; At the same time, combine with the permission system, add proper security audit and access control functions.

Iteration after launch

From a technical point of view, in order to ensure the stability of the system after the launch, we need to design a unified bottom-saving scheme for kanban to avoid the effect of blank pages or abnormal data at the front end. In general, kanban must have more than one data source, multiple different data sources. When the front end user refreshes the request, kanban’s back-end services fetch the data from various data sources, process it appropriately and eventually return it to the front end for display.

In this case, to avoid one or more data sources being unavailable or request timeout, a caching mechanism can be introduced, that is, a copy of the previous successful request results can be recorded in the cache as the bottom data. When a data source exception occurs, data can be read from the cache, sacrificing timeliness but improving the user experience.

When a project iterates through multiple versions, it may require a complete layout, a three-level menu, or a search function.